/*
 * Citizen - Gallery Styles
 * https://starcitizen.tools
*/

ul.gallery {
	padding: 0;
	margin: var( --space-xxs ) 0;
}

// TODO: Remove when T327016 is fixed
.mw-content-ltr ul.gallery,
.mw-content-rtl .mw-content-ltr ul.gallery,
.mw-content-rtl ul.gallery,
.mw-content-ltr .mw-content-rtl ul.gallery {
	margin: var( --space-xxs ) 0;
}

// Sync with caption styles
div.gallerytext {
	padding: 0;
	padding-right: var( --border-radius--small );
	padding-left: var( --border-radius--small );
	color: var( --color-base--subtle );
	font-size: 0.8125rem;
	letter-spacing: 0.025em;

	p {
		margin: var( --space-xs ) 0; // reset default style
	}
}

ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper,
ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper,
ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper {
	background: var( --background-color-overlay );
	font-weight: var( --font-weight-normal ); // should use the same weight as caption
}

/* Slideshow */
ul.gallery.mw-gallery-slideshow {
	.gallerybox {
		&.slideshow-current {
			background: var( --color-surface-2 );
		}
	}

	.mw-gallery-slideshow {
		&-buttons {
			padding-top: var( --space-md );
			padding-bottom: var( --space-sm );
		}

		&-img-container {
			border-radius: var( --border-radius--large );
		}

		&-caption {
			margin: 0;
		}
	}
}

@media screen {
	li.gallerybox div.thumb {
		overflow: hidden; // quick hack for rounded corner
		border-color: transparent;
		border-radius: var( --border-radius--small );
		background-color: var( --color-surface-2 );
	}
}