@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) {
	display: block;
	position: relative;
	line-height: var(--pr-t-font-body-M-lineHeight);

	@at-root ($atRoot) {
		.checkbox-label {
			transition-duration: var(--commons-animations-durations-fast);
			transition-property: color;
			display: inline-flex;
			align-items: flex-start;
			cursor: pointer;
			vertical-align: top;

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

				background-color: var(--palettes-neutral-0);
				inline-size: var(--components-checkbox-input-size);
				block-size: var(--components-checkbox-input-size);
				border-radius: var(--pr-t-border-radius-small);
				transition-duration: var(--commons-animations-durations-fast);
				transition-property: border-color, color, background-color;
				border: var(--components-checkbox-input-border-width) solid var(--palettes-neutral-700);
				line-height: calc(var(--components-checkbox-input-size) - var(--components-checkbox-input-border-width) * 2);
				font-size: var(--components-checkbox-input-size);
				flex-grow: 0;
				flex-shrink: 0;
				flex-basis: auto;
				color: transparent;
				display: block;
				text-align: center;
				margin-block-start: 2px;
				margin-inline-end: var(--pr-t-spacings-100);
				transform: translate3d(0, 0, 0); // Fix box-shadow artifacts
				text-indent: calc(var(--components-checkbox-input-border-width) * -1);
			}

			&:hover {
				&::before {
					border-color: var(--palettes-neutral-600);
				}
			}

			&:active {
				&::before {
					border-color: var(--palettes-neutral-800);
				}
			}
		}

		.checkbox-label-helper {
			color: var(--palettes-neutral-600);
			font-size: var(--pr-t-font-body-S-fontSize);
			line-height: var(--pr-t-font-body-S-lineHeight);
		}

		.checkbox-input {
			@include a11y.mask;

			&:checked ~ .checkbox-label {
				&::before {
					color: var(--palettes-neutral-0);
					background-color: var(--palettes-700, var(--palettes-product-700));
					border-color: var(--palettes-700, var(--palettes-product-700));
				}
			}

			&:not(:disabled):checked ~ .checkbox-label {
				&:hover {
					&::before {
						background-color: var(--palettes-800, var(--palettes-product-800));
						border-color: var(--palettes-800, var(--palettes-product-800));
					}
				}

				&:active {
					&::before {
						background-color: var(--palettes-900, var(--palettes-product-900));
						border-color: var(--palettes-900, var(--palettes-product-900));
					}
				}
			}

			&:focus-visible ~ .checkbox-label {
				&::before {
					@include a11y.focusVisible;
				}
			}
		}
	}
}