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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	animation-name: var(--components-dialog-animationOpening);
	animation-duration: var(--commons-animations-durations-standard);
	inset: var(--components-dialog-inset);
	inline-size: var(--components-dialog-width);
	block-size: var(--components-dialog-height);
	min-block-size: var(--components-dialog-minBlockSize);
	background-color: var(--palettes-neutral-0);
	border-radius: var(--components-dialog-borderRadius);
	box-shadow: var(--pr-t-elevation-shadow-overlay);
	margin: auto;
	flex-direction: column;
	display: flex;
	position: fixed !important;
	max-inline-size: var(--components-dialog-maxWidth) !important;
	max-block-size: var(--components-dialog-maxHeight) !important;
	transition-property: scale, translate, inline-size, block-size, inset;
	transition-duration: var(--commons-animations-durations-standard);
	overflow: hidden;
	translate: var(--components-dialog-translateX) var(--components-dialog-translateY);
	scale: var(--components-dialog-scale);

	@supports not (height: 1dvh) {
		--components-dialog-maxHeight: var(--components-dialog-maxHeightFallback);
	}

	@include keyframe.scaleIn;

	@at-root ($atRoot) {
		.dialog-inside {
			&:has(.dialog-inside-formOptional, .dialog-formOptional, .dialog-form) {
				display: contents;

				.dialog-formOptional, // stylelint-disable-line selector-disallowed-list -- .dialog-formOptional is deprecated
				.dialog-form, // stylelint-disable-line selector-disallowed-list -- .dialog-form is deprecated
				.dialog-inside-formOptional {
					padding-inline-end: var(--components-dialog-inside-paddingInlineEnd);
					display: grid;
					grid-template-areas:
						'header  '
						'overflow'
						'footer  ';
					align-content: var(--components-dialog-inside-alignContent);
					grid-template-rows: var(--components-dialog-inside-gridTemplateRows);
					flex-grow: 1;
					min-block-size: 0;

					&:has(.dialog-inside-content:focus-visible) {
						&::after {
							@include a11y.focusVisible($offset: -4px);

							content: '';
							grid-area: overflow;
						}
					}
				}
			}

			&:not(:has(.dialog-inside-formOptional, .dialog-formOptional, .dialog-form)) {
				display: grid;
				grid-template-areas:
					'header  '
					'overflow'
					'footer  ';
				align-content: var(--components-dialog-inside-alignContent);
				grid-template-rows: var(--components-dialog-inside-gridTemplateRows);
				flex-grow: 1;
				min-block-size: 0;
				padding-inline-end: var(--components-dialog-inside-paddingInlineEnd);

				&:has(.dialog-inside-content:focus-visible) {
					&::after {
						@include a11y.focusVisible($offset: -4px);

						content: '';
						grid-area: overflow;
					}
				}
			}
		}

		.dialog-inside-fancyIllustrations {
			position: absolute;
			inset-block-start: 0;
			inset-inline-end: 0;
			inline-size: var(--components-dialog-inside-fancyIllustrations-inlineSize);
			display: flex;

			// to target the SVG injected into the page
			> * {
				inline-size: 100%;
				block-size: auto;
			}

			&::after {
				content: '';
				position: absolute;
				inset: 0;
				background-image: var(--components-dialog-inside-backgroundImage);
				background-size: cover;
			}
		}

		.dialog-inside-header-actionOptional {
			margin-right: calc(var(--pr-t-spacings-100) * -1);

			&:empty {
				display: none;
			}
		}

		.dialog-inside-footer {
			grid-area: footer;

			&.footer {
				@include footer.insideDialog;
			}
		}

		.dialog-inside-header {
			display: grid;
			padding-block: var(--components-dialog-inside-header-paddingBlock);
			padding-inline: var(--components-dialog-inside-header-paddingInline);
			grid-template-areas: var(--components-dialog-insideHeaderAreas);
			grid-template-columns: var(--components-dialog-insideHeaderColumns);
			box-shadow: var(--components-dialog-inside-header-boxShadow);
			gap: var(--pr-t-spacings-200);
			position: var(--components-dialog-inside-header-position);
			z-index: 1;
			grid-area: header;
		}

		.dialog-inside-header-button.button {
			position: var(--components-dialog-inside-header-button-position);
			inset-block-start: var(--components-dialog-inside-header-button-insetBlockStart);
			inset-inline-end: var(--components-dialog-inside-header-button-insetInlineEnd);
		}

		.dialog-inside-content {
			background-color: var(--components-dialog-insideContent-background);
			padding-block: var(--components-dialog-insideContent-paddingBlock);
			padding-inline: var(--components-dialog-insideContent-paddingInline);
			grid-area: overflow;
			overflow: auto;
			outline: none;
		}

		.dialog-inside-header-container {
			grid-area: container;
		}

		.dialog-inside-header-container-title {
			font: var(--pr-t-font-heading-2);
			padding: var(--components-dialog-insideHeaderTitlePadding);
			text-align: var(--components-dialog-insideHeaderTitleAlign);
			margin: 0;
			overflow-wrap: anywhere;
		}

		.dialog_backdrop {
			background-color: var(--palettes-neutral-900);
			position: fixed;
			opacity: 0.4 !important; // weird bug with Chrome and its inspector open
			inset: 0;
		}
	}
}