@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";
@import "../tokens/positioning";



// Dialog Animations
// Dialog Animations for fading in and out from the center
@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;
	}
}

// Dialog Animations for fading in and out from the left side
@keyframes modalFadeInLeft {
	from {
		transform: translate3d(-100%, 0, 0);
		opacity: 0;
	}
	to {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

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


// Dialog Animations for fading in and out from the right side
@keyframes modalFadeInRight {
	from {
		transform: translate3d(100%, 0, 0);
		opacity: 0;
	}
	to {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes modalFadeOutRight {
	from {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
	to {
		transform: translate3d(50%, 0, 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;
	$status_size: 375px;
	$medium: 500px;
	$large: 800px;
	$xlarge: 1150px;
	$animation-duration: .2s;
	$z-index: 100;
	$opacity_visible: 1;
	$opacity_hidden: 0;

	.dialog_sticky_header {
	position: sticky;
	top: 0;
	background-color: $white;
	z-index: $z_8;
	}

	// @include pb_card;
	background-color: $white;
	box-shadow: $shadow_deepest;
	border: 0;
	border-radius: $border_radius_md;
	max-height: calc(100vh - #{$gutter * 2});
	max-width: calc(100vw - #{$gutter * 2});
	overflow: auto;
	animation-name: modalFadeIn;
	animation-duration: $animation-duration;
	outline: none;
	animation-timing-function: $easeInOutQuint;
	
	&[class*="_left"] {
		animation-name: modalFadeInLeft;
		&[class*="_before_close"] {
			animation-name: modalFadeOutLeft;
			animation-duration: $animation-duration;
			opacity: $opacity_hidden;
		}
	}

	&[class*="_right"] {
		animation-name: modalFadeInRight;
		&[class*="_before_close"] {
			animation-name: modalFadeOutRight;
			animation-duration: $animation-duration;
			opacity: $opacity_hidden;
		}
	}
	
	&[class*="_status_size"] {
		width: $status_size;
	}

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

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

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

	&_body_open {
		overflow: hidden;
	}

	&_after_open {
		opacity: $opacity_visible;
	}

	&[class*="_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;
		}
		&[class*="full_height"] {
			&[class*="_left"]{
				justify-content: flex-start;
			}
			
			&[class*="_center"]{
				justify-content: center;
			}

			&[class*="_right"]{
				justify-content: flex-end;
			}

			.pb_dialog {
				border-radius: 0;
				height: 100%;
				max-height: 100%;
				max-width: none;
				//this empty div only has height when dialog is full height. 
				//fix for dialog body content disappearing behind sticky footer
				.dialog-pseudo-footer {
					height: $space_xl * 2;
				}
				.dialog_footer {
					position:fixed;
					bottom: 0;
					background-color: $white;
				}
				
				&[class*="_sm"] {
					width: $medium;
					.dialog_footer {
						width: $medium;
					}
				}
				&[class*="_md"] {
					width: $large;
					.dialog_footer {
						width: $large;
					}
				}
				&[class*="_lg"] {
					width: $xlarge;
					.dialog_footer {
						width: $xlarge;
					}
				}
			} 
		}
	}	
}

//styles specific to rails version of kit
// rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
.pb_dialog_wrapper_rails {
	$medium: 500px;
    $large: 800px;
    $xlarge: 1150px;

	&[class*="full_height"] {
		&[class*="_left"]{
			.pb_dialog_rails {
				margin: unset !important;
				margin-right: auto !important;
			}
		}
		
		&[class*="_center"]{
			justify-content: center;
		}

		&[class*="_right"]{
			.pb_dialog_rails {
				margin: unset !important;
				margin-left: auto !important;
			}
		}

		.pb_dialog {
			border-radius: 0;
			height: 100% !important;
			max-height: 100% !important;
			max-width: 100%;
			//this empty div only has height when dialog is full height. 
			//fix for dialog body content disappearing behind sticky footer
			.dialog-pseudo-footer {
				height: $space_xl * 2;
			}
			.dialog_footer {
				position:fixed;
				bottom: 0;
				background-color: $white;
			}
			&[class*="_sm"] {
				width: $medium;
				.dialog_footer {
					width: $medium;
				}
			}
			&[class*="_md"] {
				width: $large;
				.dialog_footer {
					width: $large;
				}
			}
			&[class*="_lg"] {
				width: $xlarge;
				.dialog_footer {
					width: $xlarge;
				}
			}
		} 
	}

	// fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE. 
	//conflicts were only apparent in nitro, not in playbook local env
	.pb_dialog_rails {
		position: fixed !important;
		top: 0 !important;
		padding: unset !important;
		margin: auto;
	
	}
	//overlay for rails kit
	dialog::backdrop {
		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);
		animation-name: overlayFade;
		animation-duration: 0.2s;	
	}

	.dialog-button-class {
		background-color: unset;
		border: none;
		cursor: pointer;
	}
}