@use '@lucca-front/icons/src/commons/utils/icon';
@use '@lucca-front/scss/src/commons/utils/a11y';

@mixin checked {
	~ .switch-label {
		&::before {
			@include icon.generate('sign_confirm');

			display: flex;
			background-color: var(--palettes-700, var(--palettes-product-700));
			padding-inline-start: var(--components-switch-handler-offset);
		}

		&::after {
			inset-inline-start:
				calc(
					var(--components-switch-width)
					- var(--components-switch-slider-size)
					- var(--components-switch-handler-offset)
				);
		}
	}
}

@mixin checkedHover {
	&:not([disabled], [readonly]) {
		~ .switch-label {
			&::before {
				background-color: var(--palettes-800, var(--palettes-product-800));
			}
		}
	}
}

@mixin checkedActive {
	&:not([disabled], [readonly]) {
		~ .switch-label {
			&::before {
				background-color: var(--palettes-900, var(--palettes-product-900));
			}
		}
	}
}

@mixin hover {
	~ .switch-label {
		&::before {
			background-color: var(--palettes-neutral-600);
		}
	}
}

@mixin active {
	&:not([disabled], [readonly]) {
		~ .switch-label {
			&::before {
				background-color: var(--palettes-neutral-800);
			}
		}
	}
}

@mixin focus {
	&:not([disabled], [readonly]) {
		~ .switch-label {
			&::before {
				@include a11y.focusVisible;
			}
		}
	}
}

@mixin disabled {
	~ .switch-label {
		color: var(--palettes-neutral-600); // disabled token candidate
		cursor: default;

		&::before {
			background-color: var(--commons-disabled-background);
			color: var(--palettes-neutral-600); // disabled token candidate
		}

		&::after {
			background-color: var(--palettes-neutral-500); // disabled token candidate
			box-shadow: none;
		}
	}
}

@mixin disabledChecked {
	~ .switch-label {
		&::before {
			background-color: var(--commons-disabled-background);
		}
	}
}