@use "../../styles/variables" as *;

// Inner shadow of the off switch track.
$wcgs-switch-inset: inset 0 1px 2px rgba(16, 17, 20, 0.14);

.wcgs-toggle-control {

	&__row {
		min-height: 24px;

		.wcgs-control-header {
			flex: 1;
		}
	}

	&__switch {

		@include wcgs-reset-button;
		position: relative;
		flex: 0 0 36px;
		width: 36px;
		height: 20px;
		border-radius: 999px;
		background: $wcgs-off;
		box-shadow: $wcgs-switch-inset;
		transition: background 220ms $wcgs-ease;

		&.is-on {
			background: $wcgs-accent;
			box-shadow: inset 0 1px 2px rgba(16, 17, 20, 0.08);
		}

		&:focus {
			box-shadow: $wcgs-switch-inset;
		}

		&:focus-visible {
			box-shadow: $wcgs-focus-ring;
		}
	}

	&__knob {
		position: absolute;
		left: 2px;
		top: 2px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #fff;
		box-shadow:
			0 1px 2px rgba(16, 17, 20, 0.28),
			0 0 1px rgba(16, 17, 20, 0.18);
		transition: transform 200ms $wcgs-ease;
	}

	&__switch.is-on &__knob {
		transform: translateX(16px);
	}
}