/*
 * PureCSS.com
 * https://purecss.com/examples/toggle-switch/
 * A styled on/off toggle built with a checkbox and CSS.
 */

.demo-toggle-switch .toggle-label {
		display: inline-flex;
		align-items: center;
		gap: 1rem;
		cursor: pointer;
		font-family: system-ui, sans-serif;
		font-size: 1rem;
		user-select: none;
	}

.demo-toggle-switch .toggle-input {
		display: none;
	}

.demo-toggle-switch .toggle-track {
		width: 52px;
		height: 28px;
		background: var(--border);
		border-radius: 999px;
		position: relative;
		transition: background .25s;
	}

:is(.demo-toggle-switch .toggle-track)::after {
			content: "";
			position: absolute;
			top: 3px;
			left: 3px;
			width: 22px;
			height: 22px;
			background: var(--surface);
			border-radius: 50%;
			box-shadow: 0 1px 4px rgba(0,0,0,.2);
			transition: transform .25s;
		}

.demo-toggle-switch .toggle-input:checked + .toggle-track {
		background: var(--accent);
	}

.demo-toggle-switch .toggle-input:checked + .toggle-track::after {
		transform: translateX(24px);
	}