@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-contentOptional {
			padding: var(--components-popover-padding);
		}
	}

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

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