//
// Variables
//
$modal-background-color: #efefef !default;
$modal-border-width: $global-border-width !default;
$modal-border-style: $global-border-style !default;
$modal-border-color: darken( $modal-background-color, 5% ) !default;
$modal-secondary-color: $global-secondary-color !default;

//
// Exported selectors
//
.#{$global-class-prefix}ui {

	.ghost-pane {
		position: fixed;
		display: none;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: $modal-secondary-color;
		opacity: 0;

		@include transform( scale( 0.2 ) );
		@include transition( all $global-transition-duration ease-in-out );

		&.top {
			@include transform( scale( 1 ) );
		}

		&.left {
			right: calc( 100% - #{$sidebar-width} );
			width: $sidebar-width;
		}

		&.right {
			left: calc( 100% - #{$sidebar-width} );
			width: $sidebar-width;
		}

		&.top,
		&.left,
		&.right {
			opacity: 0.25;

			@include transform( scale( 1 ) );
		}
	}

	.modal-container {
		position: absolute;
		z-index: 997;
		display: none;
		width: 300px;
		height: 650px;

		&.is-visible {
			display: block;
		}
	}

	.modal {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		&__inner {
			position: relative;
			width: 100%;
			height: 100%;
			background-color: $modal-background-color;
			border: $modal-border-width $modal-border-style $modal-border-color;
			cursor: inherit;

			@include user-select( none );
			@include box-shadow( 0 2px 5px 0 rgba( 0, 0, 0, 0.16 ), 0 2px 10px 0 rgba( 0, 0, 0, 0.12 ) );
		}

		&__header {
			background-color: $global-white-color;

			&.is-fullscreen & {
				cursor: default;
			}

			@include clearfix;

		}

		&__title {
			display: block;
			float: left;
			padding-left: 12px;
			overflow: hidden;
			width: calc( 100% - 60px );
			margin: 0;
			font-size: 20px;
			font-weight: 300;
			line-height: 62px;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		&__content {
			position: absolute;
			top: 60px;
			bottom: 47px;
			left: 0;
			right: 0;
			overflow-y: auto;
			border-top: $modal-border-width $modal-border-style $modal-border-color;

			input[type="text"],
			input[type="password"],
			input[type="email"],
			input[type="number"],
			input[type="tel"],
			input[type="url"] {
				width: 100%;
			}
		}

		&__footer {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 8px 14px;
			background-color: $global-white-color;
			border-top: $modal-border-width $modal-border-style $modal-border-color;
			text-align: right;
		}

		&__controls {

			@include clearfix;

			button {
				float: right;
				padding: 0;
				margin: 0;
				width: 60px;
				color: $global-secondary-color;
				text-align: center;
				border: none;
				background-color: transparent;
				box-shadow: none;

				@include transition( background-color $global-transition-duration ease-in-out );

				&::after {
					content: "\f335";
					font: normal 22px/58px dashicons;
				}

				&:hover,
				&:focus {
					color: #23282d;
				}

				&:focus {
					outline: none;
					box-shadow: none;
				}

				&:disabled {
					color: $modal-secondary-color;

					&:hover,
					&:focus {
						color: $modal-secondary-color;
						background-color: $global-white-color;
					}
				}
			}
		}

		.tabs {

			.tab {
				padding: 10px;
				cursor: pointer;
				display: inline-block;
				color: #a0a5aa;

				&:first-child {
					padding-left: 12px;
				}

				&:hover,
				&:focus,
				&.is-active {
					color: $global-text-color;
				}

				&:focus {
					outline: none;
					box-shadow: none;
				}
			}
		}

		.controls--modal {
			margin-top: $global-spacing-vertical;
		}

		// Variations
		&.has-sections {

			.modal {

				&__content {
					top: 100px;
				}
			}
		}
	}
}


//
// Media queries
//

//@media screen and ( max-width: 640px ) {
//	.modal-container {
//		top: 0!important;
//		left: 0!important;
//		width: 100%!important;
//		height: 100%!important;
//	}
//}

@media #{$wp-medium-up} {

	.#{$global-class-prefix}ui {

		.modal-container {

			&.is-full-screen {
				top: 0 !important;
				left: 0 !important;
				right: 0 !important;
				bottom: 0 !important;
				width: 100% !important;
				height: 100% !important;
				box-shadow: none !important;
			}

			&.is-full-screen-left {
				right: calc( 100% - #{$sidebar-width} ) !important;
				width: $sidebar-width !important;
			}

			&.is-full-screen-right {
				left: calc( 100% - #{$sidebar-width} ) !important;
				width: $sidebar-width !important;
			}
		}

		.modal {

			&.top,
			&.bottom {
				cursor : ns-resize;
			}

			&.top-left,
			&.bottom-right {
				cursor: nwse-resize;
			}

			&.top-right,
			&.bottom-left {
				cursor: nesw-resize;
			}

			&.left,
			&.right {
				cursor : ew-resize;
			}

			&.is-draggable {
				cursor: move;
			}
		}
	}
}