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

@import '../../resources/variables.less';
@import '../../resources/mixins.less';

@gallery-clutter: 2px;

.skin-citizen {
	ul.gallery {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		margin: @content-margin-top -@gallery-clutter;
	}

	ul.mw-gallery {
		&-packed,
		&-packed-hover,
		&-packed-overlay {
			text-align: left;

			div.thumb img {
				width: 100% !important; // fill empty space
				height: auto;
			}

			li.gallerybox {
				flex-grow: 1;
				margin: @gallery-clutter;

				div.gallerytextwrapper {
					right: 0;
					width: auto !important; // fill empty space
					margin: 0;
					background: transparent;
					transition: @transition-background-quick;
				}
			}
		}

		&-packed-hover,
		&-packed-overlay {
			div.thumb {
				/* Gallary text background */
				&:after {
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
					display: block;
					height: 60%;
					border-radius: 0 0 var( --border-radius--small ) var( --border-radius--small );
					content: '';
				}
			}

			div.gallerytextwrapper {
				border-radius: var( --border-radius--small );
			}

			div.gallerytext {
				color: #a2a9b1; // color-base50
			}
		}

		&-packed-hover li.gallerybox:hover,
		&-packed-overlay li.gallerybox {
			div.thumb:after {
				background: linear-gradient( to top, #000, transparent );
			}

			div.gallerytextwrapper:hover {
				/* Prevent overflow with long caption */
				overflow: hidden;
				max-height: 90%;
				background: #000;
			}
		}

		&-traditional,
		&-nolines {
			margin-right: -@gallery-clutter * 2;
			margin-left: -@gallery-clutter * 2;

			li.gallerybox {
				margin: @gallery-clutter * 2;
			}
		}
	}

	li.gallerybox {
		display: block;

		> div {
			width: 100% !important; // fill empty space
			height: auto;
		}

		div.thumb {
			overflow: hidden; // for border radius
			width: 100% !important; // fill empty space
			height: auto;
			border-color: var( --border-color-base );
			margin: 0;
			background-color: var( --background-color-framed );
			border-radius: var( --border-radius--small );
		}
	}

	div.gallerytext {
		padding: @content-margin-top / 2 0;
		color: var( --color-base--subtle );
		font-size: @content-caption-size;

		p {
			margin-top: 0;
		}

		a.image {
			display: inline;
		}
	}
}