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

// T326017
ul.gallery.gallery.gallery {
	padding: 0;
	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 );
	font-size: var( --font-size-x-small );
	color: var( --color-base--subtle );
	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 {
	right: 0;
	margin: var( --space-xs );
	margin-right: 0; // MAGIC
	padding: var( --space-xs );
	width: auto !important;
	font-weight: var( --font-weight-normal ); // should use the same weight as caption
	background: var( --background-color-overlay );
}

/* 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
		background-color: var( --color-surface-2 );
		border-color: transparent;
		border-radius: var( --border-radius--small );
		max-width: ~'calc( 100% - var( --space-xs ) )';
		margin: var( --space-xs );
	}
}