/*!
 * MediaWiki Widgets - MediaResultWidget styles.
 *
 * @copyright 2011-2025 MediaWiki Widgets Team ; see AUTHORS.txt
 * @license The MIT License (MIT); see LICENSE.txt
 */

@import 'mediawiki.skin.variables.less';

.mw-widget-mediaResultWidget {
	display: inline-block;
	position: relative;
	padding: 0;
	margin: @spacing-12;
	overflow: hidden;
	box-sizing: border-box;
	text-align: center;

	&-error {
		background-color: @background-color-disabled-subtle;
	}

	&-thumbnail {
		opacity: 0;
		display: inline-block;
		transition: opacity 400ms;
	}

	&-done &-thumbnail,
	&-error &-thumbnail {
		opacity: 1;
	}

	&-crop {
		background-size: cover;
		background-position: center center;
	}

	&-overlay {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: @box-shadow-inset-small #c8ccd1;
	}

	&.oo-ui-optionWidget-highlighted,
	&.oo-ui-optionWidget-selected {
		box-shadow: 0 0 2px @box-shadow-color-progressive-selected;
	}

	&.oo-ui-optionWidget-highlighted &-overlay,
	&.oo-ui-optionWidget-selected &-overlay {
		box-shadow: @box-shadow-inset-small @box-shadow-color-progressive-selected;
	}

	&-error &-thumbnail {
		background-image: url( broken-image.png );
		background-size: auto;
		background-position: center center;
		background-repeat: no-repeat;
	}

	.mw-widget-mediaResultWidget-nameLabel {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		padding: @spacing-50;
		color: @color-inverted;
		text-shadow: 1px 1px #000;
		line-height: 1.125em;
		background-color: rgba( 0, 0, 0, 0.5 );
		text-overflow: ellipsis;
		text-align: left;
	}

	&.oo-ui-optionWidget-highlighted &-nameLabel {
		background-color: rgba( 0, 0, 0, 0.75 );
	}

	&.oo-ui-optionWidget-selected &-nameLabel {
		background-color: #000;
	}
}

.mw-widget-mediaSearchWidget-noresults {
	padding-top: @spacing-100;
}