@use "../../00-base/colors/colors";
@use "../../00-base/mixin/elevation.mixin";

$anim-timing: 0.25s;

@mixin dlgTransition($reverse: false){
	@if($reverse){
		transition: all $anim-timing ease-out;
	}

	@else{
		transition: all $anim-timing ease-in;
	}
}

.hoo-mdldialog-outer{
	position: fixed;
	top: 0;
	left: 0;

	display: flex;
	visibility: hidden;
	justify-content: center;

	width: 100vw;
	height: 100vh;

	opacity: 1;
	background-color: colors.$backgroundOverlay;

	@include dlgTransition();

	align-items: center;
	backdrop-filter: blur(5px) saturate(150%);

	&.is-error{
		background-color: rgba(#a80000, .6);
	}

	&.is-warning{
		background-color: rgba(#edb51e, .6);
	}

	&.is-success{
		background-color: rgba(#107c10, .6);
	}

	&.is-hidden:not([class*="is-sidebar"]){
		visibility: hidden;

		transition-delay: $anim-timing * 2;

		opacity: 0;

		@include dlgTransition();
		.hoo-mdldialog{
			transform: scale(0);

			@include dlgTransition();
		}
	}

	&.is-visible:not([class*="is-sidebar"]){
		visibility: visible;

		opacity: 1;

		@include dlgTransition(true);

		.hoo-mdldialog{
			transition-delay: $anim-timing * 2;
			transform: scale(1);

			opacity: 1;

			@include dlgTransition(true);
		}
	}

	&.is-hidden[class*="is-sidebar"]{


		transition-delay: $anim-timing * 2;
		opacity: 0;

		@include dlgTransition();
		.hoo-mdldialog{
			@include dlgTransition();
		}
	}

	&.is-visible[class*="is-sidebar"]{

		@include dlgTransition(true);
		opacity: 1;
		visibility: visible;

		.hoo-mdldialog{
			transition-delay: $anim-timing * 2;
			transform: scaleY(1);

			@include dlgTransition(true);
		}
	}
}

.hoo-mdldialog{
	width: var(--lqdDialogWidth);
	height: var(--lqdDialogHeight);

	transform: scale(1);

	opacity: 1;
	background-color: colors.$bodyBackground;

	@include elevation.elevation(16);
}