.bem-pageSearchFilterNavigation__toggle {
	--switch-width: 44px;
	--switch-height: 24px;
	--switch-padding: 2px;
	--thumb-size: 20px;
	--track-bg: #cccccc;
	--track-bg-checked: var(--color-primary);
	--thumb-bg: #ffffff;
	--track-radius: 999px;
	--thumb-radius: 50%;
	--transition-duration: 0.25s;
	--transition-easing: ease;
	--focus-color: #005fcc;
	--label-gap: 0.75rem;

	display: inline-flex;
	align-items: center;
	gap: var(--label-gap);
	text-decoration: none;
	color: inherit;
}

/* Track */
.bem-pageSearchFilterNavigation__toggleTrack {
	position: relative;
	width: var(--switch-width);
	height: var(--switch-height);
	background-color: var(--track-bg);
	border-radius: var(--track-radius);
	transition: background-color var(--transition-duration) var(--transition-easing);
	flex-shrink: 0;
}

/* Thumb */
.bem-pageSearchFilterNavigation__toggleThumb {
	position: absolute;
	top: var(--switch-padding);
	left: var(--switch-padding);
	width: var(--thumb-size);
	height: var(--thumb-size);
	background-color: var(--thumb-bg);
	border-radius: var(--thumb-radius);
	transition: transform var(--transition-duration) var(--transition-easing);
}

/* Active */
.bem-pageSearchFilterNavigation__toggle.is-active .bem-pageSearchFilterNavigation__toggleTrack {
	background-color: var(--track-bg-checked);
}

.bem-pageSearchFilterNavigation__toggle.is-active .bem-pageSearchFilterNavigation__toggleThumb {
	transform: translateX(
			calc(var(--switch-width) - var(--thumb-size) - (var(--switch-padding) * 2))
	);
}

/* Focus active (Keyboard) */
.bem-pageSearchFilterNavigation__toggle:focus-visible .bem-pageSearchFilterNavigation__toggleTrack {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
}

/* Hover */
.bem-pageSearchFilterNavigation__toggle:hover .bem-pageSearchFilterNavigation__toggleTrack {
	filter: brightness(0.95);
}