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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: block;
	position: relative;
	line-height: var(--components-switch-lineHeight);

	@at-root ($atRoot) {
		.switch-input {
			@include a11y.mask;
		}

		.switch-label {
			padding: 0;
			padding-inline-start: calc(var(--components-switch-width) + var(--pr-t-spacings-100));
			color: var(--pr-t-color-text);
			transition: color var(--commons-animations-durations-fast);
			display: inline-block;
			font-size: var(--components-switch-fontSize);
			position: relative;
			vertical-align: top;
			cursor: pointer;

			&::before {
				@include icon.generate('sign_close');

				align-items: center;
				background-color: var(--palettes-neutral-500);
				border-radius: var(--pr-t-border-radius-full);
				color: var(--palettes-neutral-0);
				display: flex;
				font-size: var(--components-switch-icon-size);
				block-size: var(--components-switch-height);
				inset-inline-start: 0;
				line-height: var(--components-switch-icon-size);
				padding-inline-start: calc(var(--components-switch-handler-offset) + var(--components-switch-slider-size));
				position: absolute;
				inset-block-start: var(--components-switch-offset-top);
				transition-duration: var(--commons-animations-durations-fast);
				transition-timing-function: ease;
				transition-property: background-color, box-shadow;
				inline-size: var(--components-switch-width);
			}

			&::after {
				background-color: var(--palettes-neutral-0);
				box-shadow: var(--pr-t-elevation-shadow-overflow);
				border-radius: var(--pr-t-border-radius-full);
				content: '';
				display: block;
				block-size: var(--components-switch-slider-size);
				inset-inline-start: var(--components-switch-handler-offset);
				position: absolute;
				inset-block-start: calc(var(--components-switch-offset-top) + var(--components-switch-handler-offset));
				transition: all var(--commons-animations-durations-fast) ease;
				inline-size: var(--components-switch-slider-size);
			}
		}

		.switch-label-helper {
			color: var(--palettes-neutral-600);
			font-size: var(--components-switch-helper-fontSize);
			line-height: var(--components-switch-helper-lineHeight);
		}
	}
}