@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);
	box-shadow: 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));

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

	@at-root ($atRoot) {
		.calloutDisclosure-summary {
			display: flex;
			gap: var(--components-calloutDisclosure-gap);
			padding: var(--components-calloutDisclosure-padding);
			border-radius: var(--pr-t-border-radius-default);
			transition: background-color var(--commons-animations-durations-fast) ease;
			cursor: pointer;
			z-index: 1;
			position: relative;

			&:hover {
				background-color: var(--palettes-100, var(--palettes-neutral-100));
			}

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

				~ .calloutDisclosure-details {
					box-shadow: none;
				}
			}

			&::-webkit-details-marker {
				display: none;
			}
		}

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

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

		.calloutDisclosure-summary-chevron {
			align-self: start;
			color: var(--palettes-neutral-700);
			margin-inline-start: auto;
			transition: transform var(--commons-animations-durations-standard) ease;
		}

		.calloutDisclosure-details {
			margin-block: 0;
			margin-inline: calc(var(--components-calloutDisclosure-paddingHorizontal) + 2.25rem);
			padding-block: var(--pr-t-spacings-100);
			box-shadow: 0 -1px 0 0 var(--palettes-200, var(--palettes-neutral-200));
		}
	}
}