@import "../tokens/positioning";
@import "../tokens/colors";
@import "../pb_card/card_mixin";
@import "../tokens/shadows";
@import "../tokens/border_radius";
@import "../tokens/spacing";
@import "../tokens/animation-curves";



// Dialog Animations 

@keyframes modalFadeIn {
	from {
		transform: translate3d(0, -100%, 0);
		opacity: 0;
	}
	to {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes modalFadeOut {
	from {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
	to {
		transform: translate3d(0, -50%, 0);
		opacity: 0;
	}
}

@keyframes overlayFade {
	from {
		opacity: 0;
		transform: translateY(0);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes overlayFadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

// Dialog Styles

.pb_dialog {

	// Local Variables
	$gutter: $space_lg;
	$small: 300px;
	$medium: 500px;
	$large: 800px;
	$animation-duration: 0.2s;
	$z-index: 100;
	$opacity_visible: 1;
	$opacity_hidden: 0;

	@include pb_card;
	background-color: $white;
	box-shadow: $shadow_deepest;
	border: 0;
	max-height: calc(100vh - #{$gutter * 2});
	max-width: calc(100vw - #{$gutter * 2});
	overflow: scroll;
	animation-name: modalFadeIn;
	animation-duration: $animation-duration;
	outline: none;
	animation-timing-function: $easeInOutQuint;

	&[class*="_sm"] {
		width: $small;
	}

	&[class*="_md"] {
		width: $medium;
	}

	&[class*="_lg"] {
		width: $large;
	}

	&_body_open {
		overflow: hidden;
	}

	&_after_open {
		opacity: $opacity_visible;
	}

	&_before_close {
		animation-name: modalFadeOut;
		animation-duration: $animation-duration;
		opacity: $opacity_hidden;
	}

	&_close_icon {
		cursor: pointer;
	}

	&_overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba($bg_dark, $opacity_4);
		z-index: $z-index;
		animation-name: overlayFade;
		animation-duration: $animation-duration;

		&_after_open {
			opacity: $opacity_visible;
		}
		&_before_close {
			animation-name: overlayFadeOut;
			animation-duration: $animation-duration;
			opacity: $opacity_hidden;
		}
	}
}