/* H-Lead Toggle — track 36x20 (radius 12), knob 16x16, off @ x=2 / on @ x=18 */

.hl-toggle {
	--hl-toggle-track: var(--hl-color-grey-200);
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 36px;
	height: var(--hl-space-20);
	padding: 0;
	border: none;
	border-radius: var(--hl-radius-9999);
	background-color: var(--hl-toggle-track);
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.hl-toggle__knob {
	position: absolute;
	top: var(--hl-space-2);
	left: var(--hl-space-2);
	width: var(--hl-space-16);
	height: var(--hl-space-16);
	border-radius: 50%;
	background-color: var(--hl-color-white);
	transition: transform 0.15s ease;
}

.hl-toggle--on .hl-toggle__knob {
	transform: translateX(var(--hl-space-16));
}

/* Default */
.hl-toggle {
	background-color: var(--hl-color-grey-200);
}

.hl-toggle--on {
	background-color: var(--hl-color-brand-400);
}

/* Hover */
.hl-toggle:hover {
	background-color: var(--hl-color-grey-300);
}

.hl-toggle--on:hover {
	background-color: var(--hl-color-brand-500);
}

/* Focus */
.hl-toggle:focus-visible {
	box-shadow: 0 0 0 var(--hl-space-2) var(--hl-color-brand-200);
}

/* Disabled */
.hl-toggle:disabled {
	background-color: var(--hl-color-grey-100);
	cursor: not-allowed;
}

.hl-toggle-field {
	display: inline-flex;
	align-items: center;
	gap: var(--hl-space-8);
	font-family: var(--hl-font-family);
	cursor: pointer;
}

.hl-toggle-field__label {
	font-size: var(--hl-body-default-size);
	line-height: var(--hl-body-default-line-height);
	color: var(--hl-color-text-primary);
	font-weight: 500;
}