/* Widgets - Switch */
////
/// @group Widgets-Switch
/// Widgets - Switch

///
[data-switch] {
	background-color: get-background-color('transparent');
	border-radius: 0;
	height: 32px;
	overflow: initial;
	width: 50px;

	&:empty {
		&:before {
			background-color: get-background-color('neutral-5');
			border: var(--border-size-s) solid get-border-color('neutral-5');
			border-radius: var(--border-radius-rounded);
			height: 30px;
			opacity: 1;
			transition: all 180ms linear;
			width: 48px;
		}

		&:after {
			border: 0;
			bottom: 0;
			box-shadow: none;
			height: 24px;
			left: 0;
			margin-left: 0;
			top: 4px;
			transform: translateX(4px) translateZ(0);
			transition: all 180ms linear;
			width: 24px;
		}
	}

	&:hover {
		&:before {
			background-color: get-background-color('neutral-6');
			border: var(--border-size-s) solid var(--color-neutral-6);
		}
	}

	&:checked {
		&:before {
			background-color: get-background-color('primary');
			border: var(--border-size-s) solid get-border-color('primary');
		}

		&:after {
			transform: translateX(22px) translateZ(0);
		}
	}

	&[disabled] {
		pointer-events: none;

		&:empty {
			&:before {
				background-color: get-background-color('neutral-2');
				border: var(--border-size-s) solid get-border-color('neutral-4');
			}

			&:after {
				background-color: get-background-color('neutral-5');
				border: 0;
			}
		}
	}
}

// Accessibility -----------------------------------------------------------------
///
.has-accessible-features {
	[data-switch] {
		border-radius: var(--border-radius-rounded);

		&:empty {
			&:before {
				background-color: get-background-color('neutral-7');
				border-color: get-border-color('neutral-7');
			}
		}

		&:hover {
			&:before {
				background-color: get-background-color('neutral-8');
				border-color: get-border-color('neutral-8');
			}
		}

		&:checked {
			&:before {
				background-color: get-background-color('primary');
				border-color: get-border-color('primary');
			}
		}

		&:focus {
			&:before {
				border-color: get-border-color('focus-inner');
			}
		}
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	[data-switch] {
		&:empty:after {
			align-items: center;
			border: var(--border-size-s) solid get-border-color('neutral-6');
			content: '0';
			display: flex;
			font-family: monospace;
			font-size: var(--font-size-xs);
			justify-content: center;
			left: -1px;
			top: 3px;
		}

		&:checked:after {
			content: '1';
		}
	}
}