/**
 * Atom: Toggle Switch
 * CSS-only toggle with :checked selector
 */

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	cursor: pointer;
	margin: 0;
}

.toggle-switch-input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.toggle-switch-slider {
	position: absolute;
	inset: 0;
	background-color: var(--gray-300);
	border-radius: 11px;
	transition: background-color var(--transition-normal);
}

.toggle-switch-slider::before {
	content: '';
	position: absolute;
	height: 18px;
	width: 18px;
	left: 2px;
	top: 2px;
	background-color: var(--white);
	border-radius: 50%;
	transition: transform var(--transition-normal);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-switch-input:checked + .toggle-switch-slider {
	background-color: var(--accent-bright);
}

.toggle-switch-input:checked + .toggle-switch-slider::before {
	transform: translateX(18px);
}