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

@info-box-color: #FFFFFF;
@info-box-border-color: #DDDDDD;
@info-box-border-shadow-color: #C9C9C9;
@secondary-text-color: rgb(136, 136, 136);

@fold-separator-border-width: 1px;

.mw-mmv-info-box {
	display: inline-block;
	overflow: hidden;

	border: 1px solid @info-box-border-color;
	border-bottom: 2px solid @info-box-border-shadow-color;
	.box-round(3px);

	background-color: @info-box-color;
}

.mw-mmv-title-contain {
	position: relative;
}

.mw-mmv-title-para {
	margin: 0;
	padding: 10px 0 0;
}
.mw-mmv-credit {
	margin: 0;
	color: #555;
	padding: 0 0 5px;
	font-size: 0.85em;
	&.empty {
		height: 0.85em;
	}
}

.mw-mmv-title {
	font-size: 1.2em;
	max-width: 60%;
}

.mw-mmv-image-metadata {
	width: 100%;
	position: relative;
	margin-top: -@metadatabar-below-fold-pushup-height;
	border-top: @fold-separator-border-width solid #ddd;
	background-color: #f5f5f5;
	padding-top: 4px;

	.jq-fullscreened & {
		// Make sure content fits into the screen. This assumes no paddings.
		height: @metadatabar-below-fold-pushup-height - @fold-separator-border-width;
		overflow: hidden;
	}
	.jq-fullscreened .mw-mmv-untruncated & {
		height: auto;
	}
}

.mw-mmv-author:before {
	display: inline-block;
	vertical-align: middle;
	height: 16px;
	width: 16px;
	content: ' ';
	margin-right: 5px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(img/user-ltr.svg);
}

.mw-mmv-image-desc-div {
	overflow-y: auto;
}

.mw-mmv-image-desc-div,
.mw-mmv-image-links-div {
	display: inline-block;
	vertical-align: top;
}

.mw-mmv-image-desc-div {
	max-height: 150px;
	margin-bottom: 15px;
}

@littlefont: 0.85em;
@mediumfont: 0.95em;

.mw-mmv-caption,
.mw-mmv-image-desc {
	font-size: @mediumfont;
	color: #555555;
}

.mw-mmv-image-links {
	margin: 0 20px;
	li {
		list-style: none;
		font-size: @littlefont;
		color: #3f4040;

		&.empty {
			display: none;
		}

		&:before {
			display: inline-block;
			vertical-align: middle;
			height: 16px;
			width: 16px;
			content: ' ';
			margin-right: 10px;
			background-size: contain;
			background-position: right center;
			background-repeat: no-repeat;
		}

		&.mw-mmv-license-li.cc-license:before {
			/* @embed */
			background-image: url(img/cc.svg);
		}

		&.mw-mmv-datetime-li:before {
			/* @embed */
			background-image: url(img/time.svg);
		}

		&.mw-mmv-username-li:before {
			/* @embed */
			background-image: url(img/uploader-ltr.svg);
			width: 18px;
			margin-right: 8px;
		}

		&.mw-mmv-location-li:before {
			/* @embed */
			background-image: url(img/location.svg);
		}

		&.empty:before {
			background-image: none !important;
		}
	}
}

.mw-mmv-license-contain,
.mw-mmv-license {
	text-align: right;
}

// These are single-line; make sure it looks sane when they are too long (we truncate the text by character
// limit, but that's still no guarantee it will fit in one line)
.mw-mmv-title-para,
.mw-mmv-credit {
	overflow: hidden;
	padding-right: 20px;
	text-overflow: ellipsis;
	white-space: nowrap;

	// in untruncated mode, the text can be multiline
	.mw-mmv-untruncated & {
		overflow: visible; // needed so the stripe button floats can run into the block and the text can flow around them
		white-space: normal;
	}
}

.mw-mmv-title-para,
.mw-mmv-credit,
.mw-mmv-image-desc,
.mw-mmv-caption {
	padding-left: 20px;
}

.mw-mmv-image-desc-div.empty .mw-mmv-image-desc {
	color: @secondary-text-color;
	font-style: italic;
}

.mw-mmv-caption.empty {
	display: none;
}

.mw-mmv-about-links {
	font-size: @littlefont;
	padding: 20px;
	width: 50%;
}

.mw-mmv-label {
	color: #333333;
	margin-left: 6px;
	.box-round(3px);
	padding: 2px 5px;
	background-color: #dddddd;
	font-size: 0.9em;
	&:hover {
		background-color: #c9c9c9;
	}
}

.mw-mmv-image-metadata-column {
	float: left;
}

.mw-mmv-image-metadata-desc-column {
	width: 66.5%;
}

.mw-mmv-image-metadata-links-column {
	width: 33.5%;
}

.mw-mmv-permission-link {
	cursor: pointer;

	.jq-fullscreened & {
		display: none;
	}
}

.mw-mmv-optout-link.pending {
	cursor: wait;
	color: #555;
}

.mw-mmv-about-links {
	clear: both;
}