@import "../assets/styles/bootstrap/variables";

.dialog-modal {

	background: rgba(0,0,0,.3);

	&.warning{
		.modal-header{
			background: $brand-warning;
			color: white;
		}
	}
	&.success{
		.modal-header{
			background: $brand-success;
			color: white;
		}
	}
	&.danger{
		.modal-header{
			background: $brand-danger;
			color: white;
		}
	}
	&.info{
		.modal-header{
			background: $brand-info;
			color: white;
		}
	}

	.modal-dialog {

		margin: 25vh auto;

	}

	.modal-content {
		border: none;
		box-shadow: 0 0 40px rgba(0,0,0,0.2);
		overflow: hidden;
	}

	.modal-header {
		background: $brand-info;
		color: white;
		border: none;
	}

	.modal-footer {
		border: none;
		// button:hover {
		// 	background-color: var(--theme-background) !important;
		// 	color:white
		// }
	}
}

//animation
.dialog-modal{
	$animation: cubic-bezier(0.190, 1.000, 0.220, 1.000);	
	$translateY: -60px;
	$modalContentTransition: opacity .2s $animation, transform .3s $animation;

	.modal-content{
		transform: translateY(0);
		transition: $modalContentTransition;
		opacity: 1;
	}

	&.slide-enter {
		background: rgba(0, 0, 0, 0);
		transition: background .1s $animation;

		.modal-content{
			opacity: 0;
			transform: translateY($translateY);
			transition: $modalContentTransition;
		}


		&.slide-enter-active {
			background: rgba(0, 0, 0, 0.3);
			transition: background .1s $animation;
			
			.modal-content{
				opacity: 1;
				transform: translateY(0px);
				transition: $modalContentTransition;
			}
		}
	}

	&.slide-leave {
		background: rgba(0, 0, 0, 0);
		transition: background .1s $animation;
		.modal-content{
			opacity: 0;
			transform: translateY($translateY);
			transition: $modalContentTransition;
		}
		&.example-leave-active {
			background: rgba(0, 0, 0, 0.3);
			transition: background .1s $animation;

			.modal-content{
				opacity: 1;
				transform: translateY(0);
				transition: $modalContentTransition;
			}
		}
	}

}