@use '@talend/design-tokens/lib/tokens' as tokens;

$wrapper-width: 2rem;
$marker-size: 0.8125rem;
$label-offset: calc(#{$wrapper-width} + #{tokens.$coral-spacing-xxs});

.switch {
	position: relative;
	display: block;

	label {
		margin-bottom: 0; // Bootstrap override
	}

	input[type='checkbox'] {
		position: absolute;
		margin-left: -9999px;

		+ .legend {
			position: relative;
			padding: 0 0 0 $label-offset;
			display: inline-block;
			font: tokens.$coral-paragraph-m;
			color: tokens.$coral-color-neutral-text;
		}

		+ .legend::before,
		+ .legend::after {
			background-image: none;
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			border: none;
			transition: 250ms ease-in-out;
			border-radius: tokens.$coral-radius-round;
			margin: 0; // bootstrap override
		}

		+ .legend::before {
			width: $wrapper-width;
			height: tokens.$coral-sizing-xxxs;
			background: tokens.$coral-color-accent-background;
			transform: translateY(0.0937rem);
		}

		+ .legend::after {
			transform: translateX(0.0625rem) translateY(0.1875rem);
			width: $marker-size;
			height: $marker-size;
			background-color: tokens.$coral-color-neutral-background;
		}

		&:not(:disabled):hover {
			+ .legend::before {
				background: tokens.$coral-color-accent-background-hover;
			}
		}

		&:not(.switch_disabled):not(.switch_readOnly) input:hover + .legend::before {
			background: tokens.$coral-color-accent-background-hover;
		}

		&:focus-visible {
			+ .legend {
				outline: tokens.$coral-border-s-solid tokens.$coral-color-assistive-border-focus;
			}
		}
	}

	&:not(.switch_disabled) input[type='checkbox'] {
		+ .legend {
			cursor: pointer;
		}
	}

	&_inline {
		display: inline-block;
	}

	&_checked {
		&:not(.switch_disabled):not(.switch_readOnly) input[type='checkbox'] + .legend::before {
			background: tokens.$coral-color-accent-background-strong;
		}

		input[type='checkbox'] + .legend::after {
			transform: translateX(calc(#{$wrapper-width} - #{$marker-size} - 0.0625rem)) translateY(0.1875rem);
		}

		&:not(.switch_disabled):not(.switch_readOnly) input:hover + .legend::before {
			background: tokens.$coral-color-accent-background-strong-hover;
		}
	}

	&_readOnly {
		input[type='checkbox'] {
			+ .legend::before {
				background: tokens.$coral-color-neutral-background-heavy;
			}

			+ .legend::after {
				background: tokens.$coral-color-neutral-background;
			}
		}
	}

	&_disabled {
		cursor: not-allowed;

		input[type='checkbox'],
		input[type='checkbox']:disabled,
		input[type='checkbox']:checked {
			+ .legend::before {
				background: tokens.$coral-color-neutral-background-disabled;
			}

			+ .legend {
				color: tokens.$coral-color-neutral-text-disabled;
			}
		}

		label {
			cursor: not-allowed;

			> * {
				cursor: not-allowed;
			}
		}
	}
}