@import "../../variables";

.ghostkit-component-active-indicator {
	width: 7px;
	height: 7px;
	background-color: $blue-medium-focus;
	border-radius: 7px;

	// Panel toggle.
	.components-panel__body-toggle & {
		position: absolute;
		top: 50%;
		right: 40px;
		transform: translateY(-50%);
	}

	// Responsive tabs.
	.ghostkit-control-tabs-icon & {
		position: absolute;
		top: -7px;
		left: 50%;
		width: 3px;
		height: 3px;
		transform: translateX(-50%);
	}

	// Responsive Toggle.
	.ghostkit-control-responsive-toggle & {
		position: absolute;
		top: 0;
		left: 75%;
		width: 5px;
		height: 5px;
		outline: 2px solid #fff;
	}

	// Element State Toggle.
	.ghostkit-control-element-state-toggle & {
		position: absolute;
		top: 0;
		left: 12px;
		width: 5px;
		height: 5px;
		outline: 2px solid #fff;
	}

	.is-active > .ghostkit-control-responsive-toggle-icon & {
		background-color: #fff;
		outline: 2px solid #000;
	}
}