@import 'mediawiki.skin.variables.less';
@height-carousel: 175px;
// Reserve space for the scrollbar. Scrollbar height is determined by browser
@space-placeholder-scrollbar: @spacing-100;

.mmv-carousel {
	background: @background-color-neutral-subtle;
	overflow: auto hidden;

	/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
	&:has( &__item[ data-visible='true' ] ),
	&:not( :has( &__item[ data-visible ] ) ) {
		// Only apply layout-shift inducing styles when there are
		// visible images, or when we don't yet know any of that
		// (as will be the case upon initial load, where we already
		// want these applied to prevent FOUC - rare cases where
		// we then find none of the images are visible, will collapse)
		margin-top: @spacing-50;
		margin-bottom: @space-placeholder-scrollbar + @spacing-50;
		border-bottom: @border-width-base @border-style-base @border-color-subtle;
	}

	/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
	&__items {
		display: flex;
		align-items: center;
		list-style: none;
		margin: 0;
		height: @size-full;
		gap: @spacing-35;
	}

	&__item {
		flex: 0 0 auto;
		cursor: pointer;
		height: @size-full;

		&[ data-visible='false' ] {
			// Make sure to properly hide items where the image is not visible
			display: none;
		}

		&-link {
			display: block;
			height: @size-full;

			/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
			&:focus-visible {
				outline-offset: -2px;
			}
		}

		img.mmv-carousel__item-image {
			width: auto;
			object-fit: cover;
			border-radius: @border-radius-base;
			border: @border-subtle;
			aspect-ratio: 105/104;
			box-sizing: border-box;
			// !important to override minerva style
			/* stylelint-disable declaration-no-important */
			height: @height-carousel !important;
			max-width: unset !important;
			/* stylelint-enable declaration-no-important */
		}
	}

	// Fix render height of images hidden through
	// https://en.wikipedia.org/wiki/Help:Options_to_hide_an_image#Hide_all_images_until_they_are_clicked_on
	span.hide-images-wrapper {
		height: @size-full;
	}
}

// Override Minerva styles
.content {
	ul.mmv-carousel__items {
		list-style-type: none;
		padding-left: 0;
		padding-inline: 0;
	}

	li.mmv-carousel__item {
		margin-bottom: 0;
	}
}

// Override MMV wrapper styles. The element is no longer a positioned element
// and therefore other CSS properties such as top, right, bottom, left, and
// z-index will no longer have an effect.
.mw-mmv-wrapper.mmv-carousel {
	position: static;
}

// In dark mode, apply a light background to carousel images so transparent
// images with dark content remain visible against the dark page background.
html.skin-theme-clientpref-night {
	img.mmv-carousel__item-image {
		background-color: @background-color-base-fixed;
	}
}

/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@media screen and ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os {
		img.mmv-carousel__item-image {
			background-color: @background-color-base-fixed;
		}
	}
}