@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;
	inline-size: fit-content;
	block-size: fit-content;
	display: grid;
	grid-template-areas: 'checkbox';
	grid-template-columns: var(--component-checkboxField-size);
	grid-template-rows: var(--component-checkboxField-size);

	@at-root ($atRoot) {
		.checkboxField-icon {
			border: 2px solid var(--component-checkboxField-borderColor);
			border-radius: var(--component-checkboxField-borderRadius);
			color: var(--component-checkboxField-icon-color);
			transition-property: color, border-color, background-color;
			transition-duration: var(--commons-animations-durations-fast);
			background-color: var(--component-checkboxField-backgroundColor);
			cursor: pointer;
			grid-area: checkbox;
			display: flex;

			@media (prefers-reduced-motion: reduce) {
				transition-property: none;
			}

			&::after {
				content: '';
				position: absolute;
				inset: 0;
				outline-offset: 2px;
				border-radius: var(--component-checkboxField-borderRadius);
			}
		}

		.checkboxField-icon-check {
			display: flex;
			align-items: center;
			justify-content: center;
			inline-size: 100%;
			block-size: 100%;
			transform: scale(var(--component-checkboxField-icon-scale));
			transition-property: transform;
			transition-duration: var(--commons-animations-durations-fast);
			transform-origin: center;
			transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 0);

			@media (prefers-reduced-motion: reduce) {
				transition-property: none;
			}

			&::before {
				font-weight: var(--pr-t-font-fontWeight-regular);
				font-size: var(--component-checkboxField-icon-fontSize);
				direction: ltr;
				font-family: var(--icon-fontFamily);
				font-feature-settings: 'liga';
				font-style: normal;
				letter-spacing: normal;
				line-height: 1;
				text-transform: none;
				white-space: nowrap;
				overflow-wrap: normal;
				content: '\e97d' / '';
			}
		}

		.checkboxField-input {
			z-index: 1;
			opacity: 0.0001;
			cursor: pointer;
			grid-area: checkbox;
			inline-size: 100%;
			block-size: 100%;
		}
	}
}