.root {
	all: unset;
	flex-shrink: 0;
	width: var(--size-250);
	background-color: darken(var(--bg), 20%);
	border: var(--component-border-width-md) solid var(--stroke-subtle);
	border-radius: var(--component-radii-pill);
	position: relative;
	cursor: pointer;
	padding: var(--component-spacing-2xs);
}

.root:focus-visible {
	box-shadow: var(--shadows-focus);
}

.root[data-state='checked'] {
	background-color: var(--accent-color);
}

.thumb {
	display: block;
	width: var(--size-100);
	height: var(--size-100);
	background-color: var(--color-neutral-surface-subtle-idle-fg-subtle);
	border-radius: var(--component-radii-pill);
	transition: transform ease-in-out 100ms;
	will-change: transform;
}

.thumb[data-state='checked'] {
	transform: translateX(calc(var(--size-250) - var(--size-100)));
	background-color: white;
	border-color: var(--stroke-default);
}