@use '@lucca-front/scss/src/components/button/exports' as button;
@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: block;
	background-color: var(--pr-t-elevation-surface-raised);
	box-shadow: var(--pr-t-elevation-shadow-overlay);
	border-radius: var(--pr-t-border-radius-structure);
	position: relative;
	min-block-size: var(--pr-t-spacings-500);
	min-inline-size: var(--pr-t-spacings-500);
	animation: popup var(--commons-animations-durations-fast) ease 1 forwards;

	// need of a higher specificity
	.popover-close {
		@include button.outlined;
		@include button.XS;
		@include button.onlyIconXS;

		--components-button-padding: var(--pr-t-spacings-50);

		padding: 0;
		border-radius: 50%;
		position: absolute;
		inset-inline-start: calc(var(--pr-t-spacings-100) * -1);
		inset-block-start: calc(var(--pr-t-spacings-100) * -1);
		z-index: 2;

		&:not(:focus-visible) {
			@include a11y.mask;
		}
	}

	@at-root ($atRoot) {
		.popover-content {
			overflow: auto;
			max-block-size: min(var(--components-popover-content-maxBlockSize), calc(100dvh - var(--pr-t-spacings-200)));
			max-inline-size: min(var(--components-popover-content-maxInlineSize), calc(100dvw - var(--pr-t-spacings-400)));

			&:focus-visible {
				@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-default));
			}
		}

		.popover-contentOptional {
			padding: var(--components-popover-padding);
		}
	}

	@keyframes popup {
		from {
			transform: scale(0.95);
			opacity: 0.5;
		}

		to {
			transform: scale(1);
			opacity: 1;
		}
	}
}