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

$switch-thumb-shadow: 0 1px 2px 0 rgba(117, 132, 149, 0.5); //$slate-gray;
$switch-thumb-shadow-focused: 0 3px 4px 0.5px rgba(0, 0, 0, 0.25);
$switch-thumb-border-disabled: 1px solid rgba(198, 198, 198, 0.3);
$switch-track-shadow: inset 2px 2px 7px 0 rgba(0, 0, 0, 0.3);
$switch-track-shadow-disabled: inset 2px 2px 7px 0 rgba(0, 0, 0, 0.2);

// needed to increase its weight
.switch.switch {
	label {
		padding: 0;
	}

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

		+ * {
			position: relative;
			padding: 0 0 0 calc(0.625rem + 2rem);
			cursor: pointer;
		}

		+ *::before,
		+ *::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			border: none;
			// stylelint-disable-next-line declaration-property-value-disallowed-list
			transition: all 250ms ease-in-out;
			border-radius: 9999px;
		}

		+ *::before {
			width: 2rem;
			height: 1rem;
			background: tokens.$coral-color-accent-background;
			box-shadow: inset 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.25);
		}

		+ *::after {
			margin: calc((0.75rem - 0.5rem) / 2);
			width: 0.75rem;
			height: 0.75rem;
			background-color: tokens.$coral-color-neutral-background;
			mask-image: none;
		}

		&:disabled {
			+ * {
				opacity: 1;
				color: tokens.$coral-color-neutral-text-disabled;
				pointer-events: none;
			}

			+ *::before {
				background: tokens.$coral-color-neutral-background-disabled;
			}

			&:checked {
				+ *::before {
					background: tokens.$coral-color-neutral-background-disabled;
				}
			}
		}

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

		&:checked {
			+ *::before {
				background: tokens.$coral-color-accent-background-strong;
			}

			+ *::after {
				transform: translate(0.9375rem, 0);
			}

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