@use '../variables' as *;

.#{$prefix}switch {
	margin: 0;
	--#{$prefix}switch-control-padding: calc(var(--#{$prefix}switch-thumb-width) * 0.25);

	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--#{$prefix}switch-gap);
	-webkit-tap-highlight-color: transparent;

	input {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	}

	&--disabled {
		opacity: 0.6;
		pointer-events: none;
	}

	&--read-only {
		pointer-events: none;
	}

	&__control {
		position: relative;
		display: inline-block;
		width: var(--#{$prefix}switch-control-width);
		height: var(--#{$prefix}switch-control-height);
		border-radius: var(--#{$prefix}switch-control-border-radius);
		cursor: pointer;
		background-color: var(--#{$prefix}switch-control-color);
		display: inline-flex;
		align-items: center;
		transition: all 0.05s ease-in-out;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}

	&--before &__control {
		order: 2;
	}

	&--before &__label {
		order: 1;
	}

	&--checked &__control {
		background-color: var(--#{$prefix}_checked-switch-control-color, var(--#{$prefix}switch-control-color));
	}

	&--focus &__control {
		box-shadow: var(--#{$prefix}_focus-switch-control-box-shadow);
	}

	&__thumb {
		width: var(--#{$prefix}switch-thumb-width);
		height: var(--#{$prefix}switch-thumb-height);
		transform: translateX(var(--#{$prefix}switch-control-padding));
		border-radius: var(--#{$prefix}switch-thumb-border-radius);
		background-color: var(--#{$prefix}switch-thumb-color);
		transition: all 0.05s ease-in-out;
	}

	&--checked &__thumb {
		transform: translateX(
			calc(
				var(--#{$prefix}switch-control-width) - var(--#{$prefix}switch-thumb-width) -
					(var(--#{$prefix}switch-control-padding))
			)
		);
	}

	&__label {
		font-size: var(--#{$prefix}switch-label-font-size);
		color: var(--#{$prefix}switch-label-color);
	}
}