.aae-a-toggle-switcher {
	.aae-ts-pane:not(.show) {
		display: none;
	}

	.aae-ts-switch.active .aae-ts-knob {
		transform: translate(20px, -50%);
	}

	// The Track/Knob "on" look (background/border color) used to be this
	// hardcoded rule, keyed to an undefined custom property
	// (`--aae-ts-switcher-active-bg`, always resolving to its #000000
	// fallback) — never editable from the panel. Track and Knob now both
	// expose a real Style-panel "Selected" state (toggle-switcher.js toggles
	// `e--selected` on them alongside `active`), so that per-instance local
	// style is the only thing controlling the "on" color now — no shared
	// hardcoded fallback needed or wanted here.

	.aae-ts-label-before.active .aae-ts-highlight,
	.aae-ts-label-after.active .aae-ts-highlight {
		opacity: 1;
		transform: translateX(0);
	}

	// Default Tab's out-of-the-box "Selected" look (dark pill, white text).
	// Deliberately NOT declared as a `Style_States::SELECTED` variant in
	// Aaeaddon_A_Toggle_Switcher_Tab::define_base_styles() — Elementor's own
	// atomic-widget base-style compiler and a per-instance LOCAL style
	// variant for the same state compile to identical specificity
	// (`.<class>.e--selected`), so the winner is whichever loads later, and
	// the editor's live style injection was found to inject base AFTER
	// local for this exact combination — a builder who picks "Selected" in
	// the Style panel and customizes it sees their color silently
	// overridden back to this default, ONLY in the editor (frontend's
	// generated CSS file orders local after base correctly). This rule
	// lives here instead: a plain hook-class selector in a stylesheet that
	// loads once, early, via a normal `<link>`, so ANY later per-instance
	// local `e--selected` override (editor or frontend) reliably wins on
	// load order — same fix already applied to Track/Knob's own "on" look.
	.aae-ts-tab.e--selected {
		background-color: #1a1a1a;
		color: #ffffff;
		border-radius: 8px;
	}

	// "Pill" look: Track is an invisible full-row wrapper (kept non-empty by
	// its Knob child, so the editor's empty-container "+" affordance never
	// triggers on it) and the Knob IS the sliding highlight, resized via its
	// own editable local style to one row-slot instead of a small dot.
	// Scoped to the `aae-ts-knob--pill` marker class (and a selector more
	// specific than the classic rule below) so it never fights the classic
	// Switch preset's fixed 20px knob travel.
	.aae-ts-switch.active .aae-ts-knob.aae-ts-knob--pill {
		transform: translateX(100%);
	}

	// Elementor's editor briefly renders every widget through a "remote
	// render" placeholder pass (WidgetView.handleEmptyWidget() in Elementor
	// core's editor.js) that stamps `.elementor-widget-empty` + a large
	// centered `.elementor-widget-empty-icon` onto the wrapper — styled by
	// Elementor's own editor-preview.css with a grey background and 22px
	// icon padding. For this leaf widget the placeholder never gets cleaned
	// back off once the real `.aae-ts-knob` content mounts alongside it, so
	// both render together: the actual tiny dot underneath a much larger
	// grey "add content" placeholder. Knob is an internal, non-draggable,
	// content-less decorative dot (`show_in_panel(): false` — never meant to
	// be dropped/filled by a builder), so that affordance is meaningless
	// here; neutralize it. Editor-only — these classes never render on the
	// frontend, so this is a no-op there.
	.elementor-element.elementor-widget-e-aae-a-toggle-switcher-knob.elementor-widget-empty {
		background: none !important;

		.elementor-widget-empty-icon,
		.ui-resizable-handle {
			display: none !important;
		}
	}

	// The SAME "remote render" placeholder pass also runs Knob's wrapper
	// through jQuery UI's resizable() (hence `.ui-resizable` above), which
	// sets `position: relative` on it (as an inline style, so it survives
	// the rule above and needs !important here too) so its own resize
	// handles can be absolutely positioned inside it. That wrapper sits
	// BETWEEN Track and this widget's own `.aae-ts-knob` div — so once it
	// becomes positioned, it (not Track) becomes `.aae-ts-knob`'s CSS
	// containing block, and `.aae-ts-knob`'s own inset/percentage sizing
	// resolves against ITS collapsed/empty box instead of Track's, computing
	// to zero size (invisible) rather than the intended half-Track pill.
	// Force it back to a non-positioning static box so `.aae-ts-knob`
	// anchors to Track as intended — its resize handles are already hidden
	// above, so this loses nothing. Editor-only, no-op on the frontend.
	.elementor-widget-e-aae-a-toggle-switcher-knob {
		position: static !important;
	}
}