@import (reference) "./variables.less";

.@{switch-prefix} {
	.appearance();
	.touch-action();
	.user-select();
	.outline();

	position: relative;
	display: inline-block;
	width: (@switch-handle-size * 2 + @switch-padding * 2);
	height: calc(@switch-handle-size + @switch-padding * 2 + @border-width-medium * 2);
	padding: @switch-padding;
	background-color: var(--switch-bg);
	border: @border-width-medium @border-style var(--switch-bg);
	border-radius: @switch-border-radius;
	font: inherit;
	transition: @transition-easing @transition-speed-medium;
	transition-property: outline, background-color, border-color;
	cursor: pointer;
	z-index: 1;

	&::before {
		content: "";
		position: absolute;
		inset-block: @switch-padding;
		.handle-position(start, end);
		display: block;
		width: auto;
		min-width: @switch-handle-size;
		max-width: @switch-handle-size-active;
		background-color: var(--switch-handle-bg);
		border-radius: @border-radius-pill;
		box-shadow: @shadow-small, @shadow-large;
		transition: @transition-easing @transition-speed-medium;
		transition-property: inset, width, background-color;
	}

	&:active:not(:is([disabled], [aria-disabled="true"], :disabled)) {
		&::before {
			.handle-position-active(start, end);
		}
	}

	&:checked {
		background-color: var(--switch-bg-checked);
		border-color: var(--switch-bg-checked);

		&::before {
			.handle-position(end, start);
		}

		&:active:not(:is([disabled], [aria-disabled="true"], :disabled)) {
			&::before {
				.handle-position-active(end, start);
			}
		}
	}

	&:is([disabled], [aria-disabled="true"], :disabled) {
		background-color: var(--switch-bg-disabled);
		border-color: var(--switch-bg-disabled);
		cursor: not-allowed;

		&:checked {
			background-color: var(--switch-bg-checked-disabled);
			border-color: var(--switch-bg-checked-disabled);
		}

		&::before {
			background-color: var(--switch-handle-bg-disabled);
		}
	}
}