input[type=checkbox].nd-switch {
	--nd-_switch-width: var(--nd-switch-width, 3em);
	--nd-_switch-height: var(--nd-switch-height, calc(var(--nd-_switch-width) / 2));
	--nd-_switch-color: var(--nd-switch-color, hsl(220 10% 60%));
	--nd-_switch-color-checked: var(--nd-switch-color-checked, hsl(205 50% 50%));
	--nd-_thumb-margin: var(--nd-thumb-margin, .1em);
	--nd-_thumb-color: var(--nd-thumb-color, hsl(220 10% 96%));

	-webkit-appearance: none;
	display: inline-flex;
	vertical-align: var(--nd-_thumb-margin);
	align-items: center;
	width: var(--nd-_switch-width);
	height: var(--nd-_switch-height);
	box-sizing: border-box;
	border: 1px solid rgb(0 0 0 / .1);
	border-radius: 1em;
	--nd-current-background: var(--nd-_switch-color);
	background: var(--nd-current-background);
	cursor: pointer;
	transition: .3s background;

	&::before {
		content: "";
		display: block;
		aspect-ratio: 1 / 1;
		margin: var(--nd-_thumb-margin);
		height: calc(100% - 2 * var(--nd-_thumb-margin));
		background: var(--nd-_thumb-color);
		border-radius: 50%;
		transition: margin;
		transition-duration: inherit;
		box-shadow: 0 0 0 1px var(--nd-current-background), 0 0 var(--nd-focus-ring, );
	}

	&:checked {
		--nd-current-background: var(--nd-_switch-color-checked);

		&::before {
			margin-inline-start: calc(var(--nd-_switch-width) - var(--nd-_switch-height) + var(--nd-_thumb-margin));
		}
	}

	&:disabled {
		filter: grayscale();
		opacity: .6;
		cursor: not-allowed;
	}

	&:focus {
		outline: none;

		&::before {
			--nd-focus-ring: .05em .2em hsl(205 80% 50% / .5);
		}
	}
}