@import "mmv.globals";
@import "mmv.mixins";

@metadata-background: rgb(251, 251, 251);

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

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

	.jq-fullscreened {
		background-color: black;
	}
}

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

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

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

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

// above-the-fold part of the metadata panel
.mw-mmv-above-fold {
	width: 100%;
	height: @metadatabar-above-fold-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-height;
	position: relative;
	border-bottom: 1px solid #cccccc;

	.jq-fullscreened & {
		height: @metadatabar-above-fold-fullscreen-height;
		min-height: @metadatabar-above-fold-fullscreen-height;
	}

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

// Fullscreen styles

.cursor-hidden {
	cursor: none;
}

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

.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: 0px;
	}

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

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