// =================================================================
// Gallery Settings
// =================================================================

@use "sass:math";

// A helper variable to control the number of columns a gallery
// supports in our WordPress environment.
//
// Access: Private
//
// Since: 1.4.0

$_wp-supported-gallery-columns: 												9;

// Gallery Hover Overlay Color
//
// A variable which controls the color of overlays on photo hover
// in WordPress galleries.
//
// Styleguide WordPress.Gallery.Hover Overlay Color
//
// Since: 2.0.0

$color-gallery-overlay:   rgba( $color-grayscale-0, 0.75 ) !default;

// Gallery Margin
//
// A variable which controls the margin around photos
// in WordPress galleries.
//
// Styleguide WordPress.Gallery.Margin
//
// Since: 3.0.2

$margin-gallery: 													10px !default;

// =================================================================
// Gallery Styles
// =================================================================

// Base styles for the gallery shortcode in WordPress.
//
// Access: Public
//
// Since: 1.4.0

.gallery {
	@extend %clearfix;
	display: flex;
	flex-wrap: wrap;
	margin-right: var(--gallery-margin, #{$margin-gallery});

	.gallery-icon {
		height: 100%;
	}

	a {
		display: block;

		.object-fit & {
			display: flex;
			height: 100%;
		}
	}

	img {
		display: block;
		object-fit: cover;
		width: 100%;
	}
}

// Styles for each supported number of columns in the WordPress gallery shortcode.
//
// Access: Public
//
// Since: 1.4.0

.gallery-item {
	border-right: var(--gallery-margin, #{$margin-gallery}) solid transparent;
	float: left;
	margin-bottom: var(--gallery-margin, #{$margin-gallery});
	overflow: hidden;
	position: relative;
	width: 33.33%;

	@for $i from 1 through $_wp-supported-gallery-columns {
		.gallery-columns-#{$i} & {
			@include breakpoint( $xs ) {
				width: math.div( 100, $i ) * 1%;

				&:nth-child(#{$i}n + 1) {
					clear: left;
				}
			}
		}
	}
}

// Styles for single column galleries in the WordPress gallery shortcode.
//
// Access: Public
//
// Since: 1.4.0

.gallery-columns-1 {
	.gallery-item {
		float: none;
		margin-left: auto;
		margin-right: auto;
		max-height: 80vh;
		width: auto;
	}

	img {
		width: auto;
	}
}

// Styles for the gallery icon and hover states.
//
// Access: Public
//
// Since: 1.4.0

.gallery-icon {
	a {
		@extend %icon-scaleup;

		&::before,
		&::after {
			@include transition( opacity 250ms ease-in-out 0s );
		}

		&::before {
			color: $color-grayscale-f;
			display: block;
			font-size: 2em;
			left: 0;
			margin-top: -0.5em;
			opacity: 0;
			position: absolute;
			text-align: center;
			top: 50%;
			width: 100%;
			z-index: 2;

			@for $i from 4 through $_wp-supported-gallery-columns {
				.gallery-columns-#{$i} & {
					font-size: 1em;
				}
			}
		}

		&::after {
			@include rgba-color( background-color, $color-gallery-overlay, transparent );
			content: "";
			display: block;
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			text-align: center;
			top: 0;
			width: 100%;
			z-index: 1;
		}

		&:hover {
			&::before,
			&::after {
				opacity: 1;
			}
		}
	}

	img {
		@include transition( transform 250ms ease-in-out 0s );
	}

	&:hover {
		img {
			@include transition( transform 250ms ease-in-out 0s );
			@include scale( 1.1 );
		}
	}
}

// Styles for captions in the WordPress gallery shortcode.
//
// Access: Public
//
// Since: 1.4.0

.gallery-caption {
	@include rgba-color( background-color, $color-gallery-overlay, $color-grayscale-0 );
	bottom: 0;
	color: $color-grayscale-f;
	display: none;
	left: 0;
	margin-right: var(--gallery-margin, #{$margin-gallery});
	padding: 1em;
	position: absolute;
	width: 100%;

	@include breakpoint( $xs ) {
		display: block;
	}

	@for $i from 4 through $_wp-supported-gallery-columns {
		.gallery-columns-#{$i} & {
			display: none;
		}
	}
}

.admin-bar {
	.lg-outer {
		margin-top: 32px;
	}
}

// LightGallery custom styles

.lg-sub-html {
	@include transition( max-height, 0.25s, cubic-bezier( 0, 0, 0.25, 1 ), 0s );
	max-height: 33vh; // Prevent the captions from covering the ENTIRE thing on mobile
	overflow-y: auto;

	.lg-thumb-open & {
		@include transition( max-height, 0.25s, cubic-bezier( 0, 0, 0.25, 1 ), 0s );
		max-height: 20vh;
	}
}

.lg-thumb-outer {
	border-top: 1px solid;
	@include rgba-color( border-color, rgba( $color-grayscale-f, 0.2 ), $color-grayscale-f );
}

.lg-toogle-thumb {
	border: 1px solid;
	@include rgba-color( border-color, rgba( $color-grayscale-f, 0.2 ), $color-grayscale-f );
	border-bottom: 0;

	&::before {
		@extend %font-size-minimum;
		content: "Show thumbnails";
		font-family: var(--bu-text-font, #{$font-family-sans-serif});
		margin-right: 5px;
		position: relative;
		top: -5px;
	}

	.lg-thumb-open &::before {
		content: "Hide thumbnails";
	}

	// Required to override plugin CSS
	.lg-outer .lg-thumb-outer & {
		padding: 5px var(--gallery-margin, #{$margin-gallery}) 0 14px;
		width: auto;
	}
}

.lg-thumb {
	// Required to override plugin CSS
	.lg-outer .lg-thumb-outer & {
		padding: var(--padding-small, #{$padding-small}) 0;
	}
}

.lg-thumb-item {
	.lg-outer .lg-thumb-outer & {
		@include border-radius( 0 );
		border: 0;
		opacity: 0.45;

		&.active,
		&:hover {
			border: 1px solid $color-grayscale-f;
			opacity: 1;
		}
	}
}

.lg-outer .lg .lg-inner {
	height: calc( 100% - 140px ); // Plugin has an OK fallback for this if not supported.
}

.lg-outer.lg-pull-caption-up.lg-thumb-open .lg .lg-sub-html,
.lg-outer.lg-pull-caption-up .lg .lg-sub-html {
	margin-bottom: 40px;
}

.lg-outer.lg-pull-caption-up.lg-thumb-open .lg .lg-sub-html {
	bottom: 100px;
}