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

@mixin XS {
	--components-dialog-size: 25rem;
}

@mixin S {
	--components-dialog-size: 30rem;
}

@mixin fitContent {
	--components-dialog-size: fit-content;
}

@mixin L {
	--components-dialog-size: 50rem;
}

@mixin XL {
	--components-dialog-size: 60rem;
}

@mixin XXL {
	--components-dialog-size: 100rem;
}

@mixin drawer {
	--components-dialog-animationOpening: slideFromRight;
	--components-dialog-maxHeight: none;
	--components-dialog-maxHeightFallback: var(--components-dialog-maxHeight);
	--components-dialog-height: calc(100% - var(--pr-t-spacings-100) * 2);
	--components-dialog-maxWidth: calc(100vw - var(--pr-t-spacings-200) - var(--commons-pushPanel-inlineSize));
	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
	--components-dialog-inset: var(--pr-t-spacings-100) calc(var(--pr-t-spacings-100) + var(--commons-pushPanel-inlineSize)) var(--pr-t-spacings-100) auto;
	--components-dialog-translateX: var(--components-dialog-translate);
	--components-dialog-translateY: 0;
	--components-dialog-translate-spacing: calc(var(--pr-t-spacings-500) * 2);

	@include keyframe.slideFromRight;
}

@mixin fromBottom {
	--components-dialog-animationOpening: slideFromBottom;
	--components-dialog-maxHeight: calc(100dvh - var(--pr-t-spacings-200));
	--components-dialog-maxHeightFallback: calc(100vh - var(--pr-t-spacings-200));
	--components-dialog-maxWidth: none;
	--components-dialog-inset: auto calc(var(--pr-t-spacings-100) + var(--commons-pushPanel-inlineSize)) var(--pr-t-spacings-100) var(--pr-t-spacings-100);
	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
	--components-dialog-width: calc(100% - var(--pr-t-spacings-100) * 2 - var(--commons-pushPanel-inlineSize));
	--components-dialog-height: fit-content;
	--components-dialog-translateX: 0;
	--components-dialog-translateY: var(--components-dialog-translate);
	--components-dialog-translate-spacing: var(--pr-t-spacings-500);

	@include keyframe.slideFromBottom;
}

@mixin maxContent {
	--components-dialog-size: 100%;
	--components-dialog-height: calc(100% - var(--pr-t-spacings-100) * 2);
}

@mixin fullScreen {
	--components-dialog-height: 100%;
	--components-dialog-width: 100%;
	--components-dialog-maxWidth: none;
	--components-dialog-maxHeight: none;
	--components-dialog-maxHeightFallback: var(--components-dialog-maxHeight);
	--components-dialog-borderRadius: 0;
	--components-dialog-inset: 0;
}

@mixin neutralBackground {
	--components-dialog-insideContent-background: var(--pr-t-elevation-surface-default);
}

@mixin withCloseButton {
	@include button.ghost;
	@include button.S;
	@include button.onlyIconS;

	align-self: start;
	justify-self: end;
	grid-area: close;
	display: var(--components-dialog-insideHeaderButtonDisplay);
}

@mixin withAction {
	--components-dialog-insideHeaderAreas: 'container action close';
	--components-dialog-insideHeaderColumns: 1fr auto auto;
}

@mixin fancy {
	// padding and minimum height are in pixels because they correspond to the size of the image
	--components-dialog-inside-paddingInlineEnd: 224px;
	--components-dialog-minBlockSize: calc(288px + var(--pr-t-spacings-200));
	--components-dialog-inside-gridTemplateRows: auto auto auto;
	--components-dialog-inside-alignContent: center;
	--components-dialog-inside-header-boxShadow: none;
	--components-dialog-inside-header-position: static;
	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200) 0;
	--components-dialog-inside-header-button-position: absolute;
	--components-dialog-inside-header-button-insetBlockStart: var(--pr-t-spacings-100);
	--components-dialog-inside-header-button-insetInlineEnd: var(--pr-t-spacings-100);
	--components-dialog-insideContent-paddingBlock: var(--pr-t-spacings-50) var(--pr-t-spacings-200);
	--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-700) var(--pr-t-spacings-400);
	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-700) var(--pr-t-spacings-400);

	.dialog-inside-footer {
		--components-footer-actions-margin: 0;
		--components-footer-boxShadow: none;
		--components-footer-paddingBlock: 0 var(--pr-t-spacings-150);
		--components-footer-overflow: visible;
		--components-footer-paddingInline: var(--pr-t-spacings-700) var(--pr-t-spacings-400);
	}

	.dialog-inside-header {
		--components-header-position: static;
	}

	.dialog-inside-header-button.button {
		@include button.outlined;
		@include button.M;
	}
}

@mixin fancySmall {
	// padding and minimum height are in pixels because they correspond to the size of the image
	--components-dialog-inside-paddingInlineEnd: 168px;
	--components-dialog-minBlockSize: calc(216px + var(--pr-t-spacings-200));
}

@mixin fancyNarrow {
	--components-dialog-inside-header-paddingBlock: var(--pr-t-spacings-200);
	--components-dialog-inside-header-paddingInline: var(--pr-t-spacings-150) calc(var(--pr-t-spacings-800) + var(--pr-t-spacings-250));
	--components-dialog-inside-paddingInlineEnd: 0px;
	--components-dialog-minBlockSize: 0px;
	--components-dialog-insideContent-paddingInline: var(--pr-t-spacings-150);
	--components-dialog-inside-header-button-insetBlockStart: calc(var(--pr-t-spacings-150) + var(--pr-t-spacings-25));
	--components-dialog-inside-header-button-insetInlineEnd: var(--pr-t-spacings-150);

	.dialog-inside-footer {
		--components-footer-paddingInline: var(--pr-t-spacings-150);
	}
}