/*
 * Name:			Modal
 * Description:		Defines styles for modal dialogs
 *
 * Component: 		`uk-modal`
 *
 * Sub-objects:		`uk-modal-dialog`
 *					`uk-modal-close`
 *
 * Modifiers:		`uk-modal-dialog-slide`
 *					`uk-modal-dialog-frameless`
 *
 * States:			`uk-open`
 *
 * Uses:			Close: `uk-close`
 *
 ========================================================================== */


/* Component
 ========================================================================== */

/*
 * This is the modal overlay and modal dialog container
 * 1. Hide by default
 * 2. Set fixed position
 * 3. Webkit needs a height to position the modal dialog vertically in percent
 * 4. Allow scrolling for the modal dialog
 * 5. Mask the background page
 * 6. Fade-in transition
 */

.uk-modal {
	/* 1 */
	display: none; 
	/* 2 */
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: @modal-z-index;
	/* 3 */
	height: 100%;
	/* 4 */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* 5 */
	background: @modal-background;
	/* 6 */
	opacity: 0;
	-webkit-transition: opacity 0.15s linear;
	transition: opacity 0.15s linear;
	.hook-modal;
}

/*
 * Open state
 */

.uk-modal.uk-open { opacity: 1; }

/*
 * Prevents dublicated scrollbar caused by 4.
 */

.uk-modal-page { overflow: hidden; }


/* Sub-object: `uk-modal-dialog`
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set box sizing
 * 3. Center dialog box
 * 4. Set style
 */

.uk-modal-dialog {
	/* 1 */
	position: relative;
	top: 10%;
	left: 50%;
	/* 2 */
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: @modal-dialog-padding;
	width: @modal-dialog-width;
	/* 3 */
	margin-left: (@modal-dialog-width / -2);
	/* 4 */
	background: @modal-dialog-background;
	.hook-modal-dialog;
}

/* Only phones */
@media (max-width: @breakpoint-small-max) {

	/*
	 * Fit the phone width perfectly
	 */

	.uk-modal-dialog {
		top: 0;
		left: 0;
		right: 0;
		width: auto;
		margin: 10px;
	}

}

/*
 * Remove margin from the last-child
 */

.uk-modal-dialog > :last-child { margin-bottom: 0; }


/* Modifier: `uk-modal-dialog-slide`
 ========================================================================== */

/*
 * Adds a slide-in transition to the modal dialog
 */

.uk-modal-dialog-slide {
	opacity: 0;
	-webkit-transform: translateY(-25%);
	transform: translateY(-25%);
	-webkit-transition: opacity 0.3s linear, -webkit-transform 0.3s ease-out;
	transition: opacity 0.3s linear, transform 0.3s ease-out;
}

.uk-open .uk-modal-dialog-slide {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}


/* Close in modal
 ========================================================================== */

.uk-modal-dialog > .uk-close:first-child {
	margin: -10px -10px 0 0;
	float: right;
}

/*
 * Remove margin from adjacent element
 */

 .uk-modal-dialog > .uk-close:first-child + * { margin-top: 0; }


/* Modifier: `uk-modal-dialog-frameless`
 ========================================================================== */

.uk-modal-dialog-frameless { padding: 0; }

/*
 * Close in modal
 */

.uk-modal-dialog-frameless > .uk-close:first-child {
	position: absolute;
	top: -12px;
	right: -12px;
	margin: 0;
	float: none;
}

/* Only phones */
@media (max-width: @breakpoint-small-max) {

	.uk-modal-dialog-frameless > .uk-close:first-child {
		top: -7px;
		right: -7px;
	}

}


/* Hooks
 ========================================================================== */

.hook-modal() {}
.hook-modal-dialog() {}