//------------------------------------------------------------------------------
// @object: Modal
//------------------------------------------------------------------------------
// @author: hanakin -- midaym
// @version: 1.2.0
// @description
//
//------------------------------------------------------------------------------

//
// @settings

// Layout Variables
$modal-spacing: $sp1 !default;
$modal-border-radius: $default-border-radius !default;
$modal-min-width-sm: 280px !default;
$modal-min-width-lg: 640px !default;
$modal-max-width: 865px !default;

// Theme Variables
$modal-background-color: $default-background-color !default;
$modal-text-color: $default-action-color !default;
$modal-btn-color: $white !default;
$modal-btn-hover-color: $white !default;
$modal-btn-bg-color: $default-action-color !default;
$modal-btn-bg-hover-color: $default-action-color-hover !default;


//
// @scss
.o-modal {
	@include shadow(4);
	background-color: $modal-background-color;
	border-radius: $modal-border-radius;
	opacity: 0;
	width: calc(100% - (#{$modal-spacing} * 4));
	min-width: $modal-min-width-sm;
	max-width: $modal-max-width;
	transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
	transform: scale(1.2);

	&-mask {
		background-color: rgba(0, 0, 0, 0.38);
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		display: none;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;

		&.is-active {
			display: inline-flex;

			.o-modal {
				opacity: 1;
				transition: all 0.3s ease;
				transform: scale(1);
			}
		}
	}

	&-header {
		display: flex;
		align-items: center;
		padding: ($modal-spacing * 3) ($modal-spacing * 3) 0;

		&-title {
			@include type(headline6);
			flex: 1;
			margin: 0;
		}
	}

	&-body {
		@include type(body1);
		color: $modal-text-color;
		margin-top: ($modal-spacing * 3) 0 0;
		padding: 0 ($modal-spacing * 3) ($modal-spacing * 3);

		@media (min-width: $md) {
			line-height: 1.5;
		}
	}

	&-footer {
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		padding: $modal-spacing;
	}

	&-action {
		background-color: $modal-btn-bg-color;
		color: $modal-btn-color;
		margin-right: $modal-spacing;

		&:hover {
			background-color: $modal-btn-bg-hover-color;
			color: $modal-btn-hover-color;
		}
	}

	@media (min-width: $md) {
		min-width: $modal-min-width-lg;
	}
}