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

@use '@lucca-front/scss/src/components/tag/exports' as tag;

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: block;
	position: relative;
	color: var(--components-formLabel-color);
	font: var(--components-formLabel-font);
	font-size: var(--components-formLabel-fontSize); // Deprecated
	line-height: var(--components-formLabel-lineHeight); // Deprecated
	inline-size: var(--components-formLabel-width);
	padding-inline-end: var(--components-formLabel-paddingRight);
	cursor: var(--components-formLabel-cursor);

	.lucca-icon {
		color: var(--components-formLabel-info-color);
		font-size: var(--components-formLabel-help-fontSize);
		line-height: var(--components-formLabel-help-lineHeight);
		margin-inline-start: var(--pr-t-spacings-25);
		vertical-align: top;
	}

	@at-root ($atRoot) {
		.formLabel-required {
			color: var(--palettes-error-700);
			font-size: inherit;
			line-height: inherit;
			font-weight: var(--pr-t-font-fontWeight-semibold);
			margin-inline-start: var(--pr-t-spacings-25);
			inset-block-start: 0; // Reset sup HTML element
		}

		.formLabel-info {
			vertical-align: top;
			display: inline-block;
			block-size: 1lh;

			&:focus-visible {
				outline: none;

				.lucca-icon {
					&::before {
						border-radius: 50%;

						@include a11y.focusVisible($offset: 0);
					}
				}
			}
		}

		.formLabel-counter {
			font-size: var(--pr-t-font-body-XS-fontSize);
			color: var(--components-formLabel-color);
			position: absolute;
			inset-inline-end: 0;
			inset-block-start: 0;
			display: block;
		}

		.formLabel-tag {
			margin-inline-start: var(--pr-t-spacings-50);
			inset-block-start: calc(var(--pr-t-spacings-25) / -2);
			position: relative;

			&,
			.tag {
				@include tag.product;
			}
		}
	}
}