@import "minerva.variables";
@import "minerva.mixins";


.overlay-enabled {

	.mw-mf-overlay {
		// use height instead of bottom 0 so that overlay expands when there's
		// more content, don't use min-height because of
		// http://stackoverflow.com/questions/3808512/the-inherited-height-of-a-child-div-from-a-parent-with-a-min-height-attribute
		height: 100%;
	}
}

html[dir="rtl"] {
	.mw-mf-overlay .header .cancel {
		.transform( rotate(180deg) );
	}
}

.mw-mf-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	z-index: 4;

	.header .cancel {
		position: absolute;
		border: none;
		height: @oldHeaderHeight;
		width: @searchBarPaddingLeft;
		left: 0;
		background: url(images/arrow-left.png) 50% 50% no-repeat;
		text-indent: -9999px;
		.background-size( auto, @headerElementHeight );
	}

	.mw-mf-overlay-header {
		background-color: #F1F1F1;
	}

	// FIXME: talk overlay specific (style talk textarea like the editor)
	div.content {
		textarea {
			display: block;
			width: 100%;
		}
	}

	.content {
		.confirm,
		.cancel {
			display: block;
			margin: 1em auto;
		}
	}

	.button-bar-centered {
		text-align: center;
		padding: .7em 1em;

		button {
			margin: 0 .3em;
		}
	}

	.buttonBar {
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 1px solid #ccc;
		background-color: #f3f3f3;
		z-index: 4;

		p {
			padding: .7em 0;
			line-height: 1.3;
			font-size: .9em;
			text-align: left;
		}

		.license {
			padding-bottom: 0;
			font-size: .75em !important;
		}
	}

	.mw-mf-overlay-footer,
	.mw-mf-overlay-header {
		padding: 4px 8px 4px @searchBarPaddingLeft;
		font-size: .8em;
		color: #666;
		border-bottom: solid 1px #eee;
	}
}