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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	margin: 0;

	@at-root ($atRoot) {
		.presentation-term {
			font: var(--pr-t-font-body-S);
			color: var(--pr-t-color-text-subtle);
			display: flex;
			align-items: center;
		}

		.presentation-term-info {
			position: relative;

			.lucca-icon {
				color: inherit;
				font-size: inherit;
				line-height: inherit;
				margin-inline-start: var(--pr-t-spacings-25);
				position: relative;
				inset-block-end: 1px;
			}

			&:focus-visible {
				outline: none;

				.lucca-icon {
					&::after {
						content: '';
						position: absolute;
						inline-size: 0.875rem;
						block-size: 0.875rem;
						border-radius: 50%;
						inset-block-end: var(--pr-t-spacings-25);
						inset-inline-end: 0;

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

		.presentation-definition {
			margin: 0;
			color: var(--pr-t-color-text);

			> *:not(:has(.lucca-icon), .presentation-definition-link) {
				color: var(--pr-t-color-text);
			}
		}
	}
}