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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	border-radius: var(--pr-t-border-radius-default);
	background-color: var(--palettes-50, var(--palettes-neutral-50));
	color: var(--pr-t-color-text);
	border-color: var(--palettes-300, var(--palettes-neutral-300));
	border-style: solid;
	border-width: var(--commons-divider-width);

	a,
	.link {
		--commons-text-link-color: var(--pr-t-color-text);
		--commons-text-link-hover: var(--palettes-neutral-900);
	}

	@at-root ($atRoot) {
		.calloutAccordion-summary {
			display: flex;
			gap: var(--pr-t-spacings-150);
			padding-block: var(--pr-t-spacings-100);
			padding-inline: var(--pr-t-spacings-150);
			cursor: pointer;

			&:focus-visible {
				@include a11y.focusVisible($offset: 3px, $borderRadius: 6px);
			}
		}

		.calloutAccordion-summary-title {
			font-weight: var(--pr-t-font-fontWeight-semibold);
		}

		.calloutAccordion-summary-icon {
			color: var(--palettes-700, var(--palettes-neutral-700));
		}

		.calloutAccordion-summary-chevron {
			color: var(--palettes-neutral-700);
			margin-inline-start: auto;
		}

		.calloutAccordion-details {
			margin-block: 0;
			margin-inline: 3rem;
			padding-block: var(--pr-t-spacings-100) var(--pr-t-spacings-200);
			padding-inline: 0;
			border-block-start: 1px solid var(--palettes-200, var(--palettes-neutral-200));
		}
	}
}