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

/**
 * Override multilightbox styles that don't apply to us
 */
.mw-mmv-wrapper {
	position: absolute;
	bottom: auto;
}

.mw-mmv-main {
	height: auto;

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

/**
 * Some variables
 */
@bottom-height: (@metadatabar-top-content-height + @metadatabar-drag-height);
@metadata-background: rgb(251, 251, 251);

.mw-mmv-image-wrapper,
.mw-mmv-controls {
	top: 0px;
	bottom: @bottom-height;
}

.jq-fullscreened {
	.mw-mmv-image-wrapper,
	.mw-mmv-post-image,
	.mw-mmv-controls {
		bottom: 0px;
	}

	.mw-mmv-drag-affordance {
		display: none;
	}

	.mw-mmv-post-image,
	.mw-mmv-controls {
		@fullscreen-padding: 10px;
		padding: (@fullscreen-padding / 2) 0;
		height: (@metadatabar-top-content-height + @fullscreen-padding);
		background-color: rgba(251, 251, 251, 0);
		transition: background-color 0.25s;
		min-height: 0;

		&:hover {
			background-color: @metadata-background;
		}
	}

	.mw-mmv-post-image {
		position: fixed;
	}

	.mw-mmv-controls {
		opacity: 0;
		transition: opacity 0.25s;

		&:hover {
			opacity: 1;
		}
	}
}

.cursor-hidden {
	cursor: none;
}

.mw-mmv-image-wrapper {
	position: fixed;
}

.mw-mmv-post-image {
	bottom: auto;
	height: auto;
	color: #333333;
	background-color: @metadata-background;
	position: absolute;
	min-height: (@bottom-height + 1);
	opacity: 0;
}

.mw-mmv-controls {
	height: auto;
	border-bottom: 1px solid #cccccc;
}