# ghostkit/3.7.0/gutenberg/components/active-indicator/editor.scss

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.7.0. 52 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.7.0/code/gutenberg/components/active-indicator/editor.scss
- Raw: https://pluginprobe.com/plugins/ghostkit/3.7.0/raw/gutenberg/components/active-indicator/editor.scss
- Modified: 2026-06-05T11:18:16+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/3.7.0/code/gutenberg/components/active-indicator/editor.scss#L10-L20`.

```scss
@import "../../variables";

.ghostkit-component-active-indicator {
	width: 7px;
	height: 7px;
	background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
	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;
	}
}

```