//
// Modals
// --------------------------------------------------

// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal w/ bg and corners and shit


// Container that the modal scrolls within
.modal {
	.fill-fixed();
	overflow: auto;
	overflow-y: scroll;
	z-index: @zindex-modal-background;

	// Animate the modal
	&.animate {
		.animation( fadeInExpand 300ms cubic-bezier(0.680, -0.550, 0.265, 1.550) );
	}
}

// Shell div to position the modal with bottom padding
.modal-dialog {
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	width: auto;
	z-index: (@zindex-modal-background + 10);
}

// Sizes
@media (min-width: @screen-sm) {
	.modal-sm > .modal-dialog { width: 480px; }
	.modal-md > .modal-dialog { width: 640px; }
	.modal-lg > .modal-dialog { width: 960px; }

	.modal-dialog {
		padding: 100px 0;
	}
}

// Actual modal
.modal-content {
	background-color: @modal-content-bg;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 1px 0 rgba(0,0,0,.1), 0 3px 15px -1px rgba(0,0,0,.15);
	outline: none; // remove focus outline from opened modal
	position: relative;
}

// Modal background
.modal-backdrop {
	.fill-fixed();
	background-color: @modal-backdrop-bg;
	opacity: @modal-backdrop-opacity;
	z-index: (@zindex-modal-background - 10);
}




// Inner
// ------------------------------

// common
.modal-header,
.modal-body,
.modal-footer {
	margin-left: @modal-padding-horizontal;
	margin-right: @modal-padding-horizontal;
	padding-bottom: @modal-padding-vertical;
	padding-top: @modal-padding-vertical;
	position: relative;
}

// header
.modal-header {
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.03), 0 1px 0 rgba(0,0,0,.03);
}
.modal-title {
	color: inherit;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	margin: 0;
}

// close button
.modal-close {
	.transition(opacity 200ms);
	// dechrome
	background: none;
	border: none;
	line-height: 1;
	margin: 0;
	padding: 0;
	
	// style and position
	opacity: .4;
	font-size: 24px;
	padding: 15px 30px;
	position: absolute;
	right: -30px;
	top: 0;

	// add the x
	&::after {
		content: "\00d7";
	}

	&:hover,
	&:focus {
		opacity: 1;
		outline: 0;
	}
	&:active {
		opacity: .6;
	}
}

// body
.modal-body {
	padding-bottom: @modal-padding-horizontal / 2;
	padding-top: @modal-padding-horizontal / 2;

	> .field {
		&:first-child {
			margin-top: 0;
		}
	}
}

// footer
.modal-footer {
	box-shadow: inset 0 1px 0 rgba(0,0,0,.03), 0 -1px 0 rgba(0,0,0,.03);
}




// Fields
// ------------------------------

.modal {
	// aligning elements
	.field-label { width: 100%; }
	.field-ui    { width: 100%; }

	// location fields need some extra wrangling
	.field-type-location > .field-ui { width: 100%; }
	.location-field-label    { width: 100%; }
	.location-field-controls { width: 100%; }

	// hide the linked item link as it overflows outside the modal
	.btn-goto-linked-item {
		display: none;
	}

	// offset some notes
	.field-note-wrapper {
		margin: 0;
		width: auto;
	}
}




// Responsive
// ------------------------------

@media (min-width: @screen-sm) {
	.modal {
		// aligning elements
		.field-label { width: 25%; }
		.field-ui    { width: 75%; }

		// location fields need some extra wrangling
		.field-type-location > .field-ui { width: 100%; }
		.location-field-label    { width: 25%; }
		.location-field-controls { width: 75%; }

		// offset some notes
		.field-note-wrapper {
			margin: 0 0 0 25%;
		}
	}
}