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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	position: relative;

	@at-root ($atRoot) {
		.switchField-icon {
			display: block;
			inline-size: var(--component-switchField-label-input-width);
			block-size: var(--component-switchField-label-input-height);
			border: 2px solid var(--palettes-neutral-500);
			border-radius: var(--component-switchField-label-input-height);
			position: relative;
			inset-block-start: var(--pr-t-spacings-25);
			color: var(--palettes-neutral-0);
			transition-property: color, border-color, background-color;
			transition-duration: var(--commons-animations-durations-fast);
			background-color: var(--palettes-neutral-500);
			cursor: pointer;

			&::after {
				content: '';
				position: absolute;
				inset: -2px;
				outline-offset: 2px;
				border-radius: var(--component-switchField-label-input-height);
			}

			&::before {
				content: '';
				position: absolute;
				inline-size: 50%;
				aspect-ratio: 1;
				background-color: var(--palettes-neutral-0);
				border-radius: var(--pr-t-border-radius-full);
				inset-inline-start: 0;
				inset-block-start: 0;
				transition-property: left;
				transition-duration: var(--commons-animations-durations-fast);
				transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1.5);
				box-shadow: var(--pr-t-elevation-shadow-overflow);
			}
		}

		.switchField-icon-check {
			display: flex;
			align-items: center;
			justify-content: center;
			inline-size: 100%;
			block-size: 100%;

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

				font-size: var(--component-switchField-label-input-icon-fontSize);
			}

			&::after {
				@include icon.generate('cross');

				font-size: var(--component-switchField-label-input-icon-fontSize);
			}
		}

		.switchField-input {
			position: absolute;
			z-index: 1;
			inline-size: var(--component-switchField-label-input-width);
			block-size: var(--component-switchField-label-input-height);
			opacity: 0.0001;
			cursor: pointer;

			&:hover {
				~ .switchField-icon {
					border-color: var(--palettes-neutral-600);
					background-color: var(--palettes-neutral-600);
				}
			}

			&:active {
				~ .switchField-icon {
					border-color: var(--palettes-neutral-800);
					background-color: var(--palettes-neutral-800);
				}
			}

			&:focus-visible {
				~ .switchField-icon {
					@include a11y.focusVisible;
				}
			}
		}
	}
}