@import 'mmv.globals';
@import 'mmv.mixins';

.mw-mmv-wrapper {
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	position: absolute;
	bottom: auto;

	.skin-monobook & {
		font-size: medium;
	}
}

.mw-mmv-main {
	width: 100%;
	height: auto;
	position: relative;

	.jq-fullscreened {
		background-color: #000;
	}
}

.mw-mmv-image-wrapper {
	position: fixed;
	top: 0;
	bottom: @metadatabar-above-fold-height;
	left: 0;
	right: 0;
	overflow-y: hidden;
}

.mw-mmv-image-inner-wrapper {
	display: table;
	width: 100%;
	height: 100%;
}

.mw-mmv-pre-image {
	position: absolute;
	top: 0;
	height: 32px;
	width: 100%;
	z-index: 1;
}

.mw-mmv-post-image {
	position: absolute;
	width: 100%;
	bottom: auto;
	height: auto;
	color: #222;
	background-color: @panel-above-fold-background-color;
	min-height: ( @metadatabar-above-fold-inner-height + 1 );
	z-index: 1005;
}

// above-the-fold part of the metadata panel
.mw-mmv-above-fold {
	width: 100%;
	height: @metadatabar-above-fold-inner-height;
	// min-height is used when the height is changed to auto to display long texts, to make sure the layout
	// is not messed up wheen the text is short and does not fill the available place. It is also used by
	// JavaScript to get the "default" height.
	min-height: @metadatabar-above-fold-inner-height;
	position: relative;
	// make sure there is no content in the part which is overlapped by the revealed part of the below-fold content
	// also used in JavaScript for the height calculations
	padding-bottom: @metadatabar-below-fold-pushup-height;

	.mw-mmv-untruncated & {
		height: auto;
	}
}

// Fullscreen styles

.cursor-hidden {
	cursor: none;
}

.mw-mmv-main.jq-fullscreened {
	background-color: #000;
}

.jq-fullscreened {
	.mw-mmv-image-wrapper, // make the image occupy the whole screen
	.mw-mmv-post-image { // make sure the panel fits in the screen and does not cause scrollbars to appear
		bottom: 0;
	}

	.mw-mmv-post-image {
		position: fixed;
		min-height: 0;
		.opacity( 0 );
		transition: opacity 0.25s;

		&:hover {
			.opacity( 1 );
		}
	}
}