/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */

/* stylelint-disable at-rule-no-unknown */

// This Mixin contains Common Transition Speeds.
@mixin transitionSpeeds {
	-webkit-transition-duration: 0.25s;
	-moz-transition-duration: 0.25s;
	-o-transition-duration: 0.25s;
	transition-duration: 0.25s;
}

// This Mixin Handles Special Tiles
@mixin specialTiles {
	.spectra-image-gallery__media-wrapper {
		position: relative;
		min-width: 0;
	}

	.spectra-image-gallery__media-wrapper--wide {
		grid-column: span 2;
	}

	.spectra-image-gallery__media-wrapper--tall {
		grid-row: span 2;
	}

	.spectra-image-gallery__media-wrapper--focus {
		grid-row: span 2;
		grid-column: span 2;
	}
}

.wp-block-uagb-image-gallery {
	display: -ms-flex;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	flex-direction: column;
}

.spectra-image-gallery {
	* {
		box-sizing: border-box;
	}

	&__layout {
		&--grid {
			display: -moz-grid;
			display: -ms-grid;
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));

			&-col {
				&-1 {
					grid-template-columns: repeat(1, minmax(0, 1fr));
				}

				&-2 {
					grid-template-columns: repeat(2, minmax(0, 1fr));
				}

				&-3 {
					grid-template-columns: repeat(3, minmax(0, 1fr));
				}

				&-4 {
					grid-template-columns: repeat(4, minmax(0, 1fr));
				}

				&-5 {
					grid-template-columns: repeat(5, minmax(0, 1fr));
				}

				&-6 {
					grid-template-columns: repeat(6, minmax(0, 1fr));
				}

				&-7 {
					grid-template-columns: repeat(7, minmax(0, 1fr));
				}

				&-8 {
					grid-template-columns: repeat(8, minmax(0, 1fr));
				}
			}

			& + .spectra-image-gallery__control-wrapper .spectra-image-gallery__control-arrows:hover {
				transform: scale(1.5);
				background-color: transparent;
			}
		}

		&--isogrid {
			&-col {
				&-1 .spectra-image-gallery__media-wrapper--isotope {
					width: 100%;
				}

				&-2 .spectra-image-gallery__media-wrapper--isotope {
					width: 50%;
				}

				&-3 .spectra-image-gallery__media-wrapper--isotope {
					width: 33.33%;
				}

				&-4 .spectra-image-gallery__media-wrapper--isotope {
					width: 25%;
				}

				&-5 .spectra-image-gallery__media-wrapper--isotope {
					width: 20%;
				}

				&-6 .spectra-image-gallery__media-wrapper--isotope {
					width: 16.66%;
				}

				&-7 .spectra-image-gallery__media-wrapper--isotope {
					width: 14.28%;
				}

				&-8 .spectra-image-gallery__media-wrapper--isotope {
					width: 12.5%;
				}
			}

			& + .spectra-image-gallery__control-wrapper .spectra-image-gallery__control-arrows:hover {
				transform: scale(1.5);
				background-color: transparent;
			}
		}

		&--masonry {
			&-col {
				&-1 .spectra-image-gallery__media-wrapper--isotope {
					width: 100%;
				}

				&-2 .spectra-image-gallery__media-wrapper--isotope {
					width: 50%;
				}

				&-3 .spectra-image-gallery__media-wrapper--isotope {
					width: 33.33%;
				}

				&-4 .spectra-image-gallery__media-wrapper--isotope {
					width: 25%;
				}

				&-5 .spectra-image-gallery__media-wrapper--isotope {
					width: 20%;
				}

				&-6 .spectra-image-gallery__media-wrapper--isotope {
					width: 16.66%;
				}

				&-7 .spectra-image-gallery__media-wrapper--isotope {
					width: 14.28%;
				}

				&-8 .spectra-image-gallery__media-wrapper--isotope {
					width: 12.5%;
				}
			}
		}

		&--carousel {
			width: 100%;

			.slick-initialized {
				visibility: visible;
			}

			.slick-track {
				display: flex;
				align-items: center;
			}

			.slick-dots {
				padding: 0;
				position: relative !important; // Override Slick Slider Positioning.

				li button {
					padding: 0;
				}
			}

			.uagb-slick-carousel {
				padding: 0;
			}
		}

		&--tiled {
			position: relative;
			display: grid;
			grid-auto-flow: dense;
			min-height: 0;
			min-width: 0;

			&-col {
				&-1 {
					grid-template-columns: repeat(1, minmax(0, 1fr));
				}

				&-2 {
					grid-template-columns: repeat(2, minmax(0, 1fr));

					@include specialTiles();
				}

				&-3 {
					grid-template-columns: repeat(3, minmax(0, 1fr));

					@include specialTiles();
				}

				&-4 {
					grid-template-columns: repeat(4, minmax(0, 1fr));

					@include specialTiles();
				}

				&-5 {
					grid-template-columns: repeat(5, minmax(0, 1fr));

					@include specialTiles();
				}

				&-6 {
					grid-template-columns: repeat(6, minmax(0, 1fr));

					@include specialTiles();
				}

				&-7 {
					grid-template-columns: repeat(7, minmax(0, 1fr));

					@include specialTiles();
				}

				&-8 {
					grid-template-columns: repeat(8, minmax(0, 1fr));

					@include specialTiles();
				}
			}
		}
	}

	&__media {
		position: relative;
		overflow: hidden;
		-webkit-transition: box-shadow 0.25s;
		-moz-transition: box-shadow 0.25s;
		-o-transition: box-shadow 0.25s;
		transition: box-shadow 0.25s;

		&--flagged {
			cursor: not-allowed;
		}

		&--clickable {
			cursor: pointer;
		}

		&--grid {
			aspect-ratio: 1;
		}

		&--masonry {
			width: 100%;
		}

		&--carousel {
			width: 100%;
		}

		&--tiled {
			aspect-ratio: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			&-wide,
			&-tall {
				aspect-ratio: unset;
				width: 100%;
				height: 100%;
			}

			picture {
				width: 100%;
				height: 100%;
			}
		}

		&-sizer {
			aspect-ratio: 1;
		}

		&-wrapper {
			position: relative;

			&:hover .spectra-image-gallery__control-focus {
				opacity: 0.25;
			}
		}

		&-thumbnail {
			vertical-align: middle;
			-webkit-transition: filter 0.5s, transform 0.5s;
			-moz-transition: filter 0.5s, transform 0.5s;
			-o-transition: filter 0.5s, transform 0.5s;
			transition: filter 0.5s, transform 0.5s;

			&--grid {
				width: 100% !important;
				height: 100% !important;
				-o-object-fit: cover;
				object-fit: cover;
			}

			&--masonry {
				width: 100%;
			}

			&--carousel {
				width: 100%;
			}

			&--tiled {
				width: 100% !important;
				height: 100% !important;
				-o-object-fit: cover;
				object-fit: cover;
			}

			&-blurrer {
				position: absolute;
				top: 0;
				left: 0;
				width: 100% !important;
				height: 100% !important;
				-webkit-transition: box-shadow 0.25s, -webkit-backdrop-filter 0.5s;
				-moz-transition: box-shadow 0.25s, backdrop-filter 0.5s;
				-o-transition: box-shadow 0.25s, backdrop-filter 0.5s;
				transition: box-shadow 0.25s, backdrop-filter 0.5s;
			}

			&-caption {
				-webkit-transition-property: color, background-color, border-color;
				-moz-transition-property: color, background-color, border-color;
				-o-transition-property: color, background-color, border-color;
				transition-property: color, background-color, border-color;

				@include transitionSpeeds();

				&--overlay {
					display: -ms-flex;
					display: -moz-flex;
					display: -webkit-flex;
					display: flex;
					width: 100%;
					height: 100%;
					overflow: hidden;
					padding: 1em;
				}

				&--bar {
					&-inside {
						width: 100%;
						overflow: hidden;
						padding: 1em;
						max-height: 90%;
					}

					&-outside {
						width: 100%;
						overflow: hidden;
						padding: 1em;
					}
				}

				&-wrapper {
					-webkit-transition: background-color 0.25s;
					-moz-transition: background-color 0.25s;
					-o-transition: background-color 0.25s;
					transition: background-color 0.25s;

					&--overlay {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}

					&--bar {
						&-inside {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							display: flex;
							overflow: hidden;
						}

						&-outside {
							position: relative;
							width: 100%;
							overflow: hidden;
						}
					}
				}
			}
		}
	}

	&__control {
		&-wrapper {
			display: -ms-flex;
			display: -moz-flex;
			display: -webkit-flex;
			display: flex;
			width: 100%;
			justify-content: center;
		}

		&-arrows {
			display: -ms-flex;
			display: -moz-flex;
			display: -webkit-flex;
			display: flex;
			align-items: center;
			background-color: transparent;
			padding: 0;
			cursor: pointer;

			@include transitionSpeeds();

			&:disabled {
				opacity: 0.25;
				cursor: initial;
			}

			&:focus {
				background-color: transparent;
			}

			&--grid {
				border: none;
			}

			svg {

				@include transitionSpeeds();
			}
		}

		&-dots {
			display: -ms-flex;
			display: -moz-flex;
			display: -webkit-flex;
			display: flex;
			align-items: center;
			padding: 0 !important;
			margin: 0 !important;

			li {
				position: relative;
				display: inline-block;
				width: 20px;
				height: 20px;
				margin: 0;
				padding: 0;
				cursor: pointer;

				@include transitionSpeeds();

				&:hover {
					transform: scale(1.5);
					background-color: transparent;
				}

				button {
					font-size: 0;
					line-height: 0;
					display: block;
					box-sizing: border-box;
					width: 20px;
					height: 20px;
					padding: 5px;
					cursor: pointer;
					color: transparent;
					border: 0;
					outline: none;
					background: transparent;

					@include transitionSpeeds();

					&::before {
						font-family: none;
						font-size: 30px;
						line-height: 20px;
						position: absolute;
						top: 0;
						left: 0;
						width: 20px;
						height: 20px;
						content: "•";
						text-align: center;
						opacity: 0.25;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;

						@include transitionSpeeds();
					}
				}

				&.spectra-image-gallery__control-dot--active button::before {
					opacity: 0.75;
				}
			}
		}

		&-loader {
			margin: 0 auto;
			min-height: 58px;
			line-height: 58px;
			width: 160px;
			text-align: center;

			div {
				border-radius: 100%;
				display: inline-block;
				-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
				animation: sk-bouncedelay 1.4s infinite ease-in-out both;

				&.spectra-image-gallery__control-loader--1 {
					-webkit-animation-delay: -0.32s;
					animation-delay: -0.32s;
				}

				&.spectra-image-gallery__control-loader--2 {
					-webkit-animation-delay: -0.16s;
					animation-delay: -0.16s;
				}
			}
		}

		&-button {
			cursor: pointer;

			@include transitionSpeeds();

			&.disabled {
				opacity: 0.25;
				pointer-events: none;
			}
		}

		&-focus {
			cursor: pointer;
			position: absolute;
			box-sizing: content-box !important;
			top: 0;
			right: 0;
			width: 1.5em;
			height: 1.5em;
			padding: 0.5em;
			background-color: transparent;
			border: none;
			opacity: 0;
			-webkit-transition-property: opacity;
			-moz-transition-property: opacity;
			-o-transition-property: opacity;
			transition-property: opacity;

			@include transitionSpeeds();

			&:hover {
				opacity: 1 !important;
			}

			svg {
				fill: #fff;
				filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
			}
		}

		&-lightbox {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw !important;
			max-width: 100vw !important;
			height: 100vh !important;
			max-height: 100vh !important;
			display: flex;
			flex-direction: column;
			opacity: 0;
			-webkit-transition-property: opacity;
			-moz-transition-property: opacity;
			-o-transition-property: opacity;
			transition-property: opacity;
			z-index: 999999999 !important;
			outline: none;
			margin-block-start: 0;

			@include transitionSpeeds();

			&--main {
				width: 100%;
				flex: 1;

				.swiper-slide {
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					img {
						display: block;
						max-height: 70%;
						max-width: 80%;
					}
				}
			}

			&--caption {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}

			&--editor-link {
				-webkit-transition-property: color;
				-moz-transition-property: color;
				-o-transition-property: color;
				transition-property: color;

				@include transitionSpeeds();
			}

			&--thumbnails {
				width: 75%;

				&-wrapper {
					width: 100%;
				}

				.swiper-wrapper {
					height: 150px;
				}

				.swiper-slide {
					cursor: pointer;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					opacity: 0.5;
					transform: scale(75%);
					-webkit-transition-property: opacity, transform;
					-moz-transition-property: opacity, transform;
					-o-transition-property: opacity, transform;
					transition-property: opacity, transform;

					@include transitionSpeeds();

					&-active {
						opacity: 1;
						transform: scale(100%);
					}

					img {
						border-radius: 3px;
					}
				}
			}

			&--count {
				position: absolute;
				z-index: 999;
			}

			&--close {
				position: absolute;
				cursor: pointer;
				padding: 0;
				background-color: transparent;
				border: none;
				outline: 0;
				line-height: 0;
				z-index: 999;
				transition: transform 500ms;

				&:hover,
				&:focus,
				&:focus-visible {
					background-color: transparent;
					transform: scale(1.25);
				}
			}
		}
	}

	&__iso-ref-wrapper {
		-ms-overflow-style: none;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}
	}
}

@media ( max-width: 976px ) {
	.spectra-image-gallery {
		&__layout {
			&--grid {
				&-col-tab {
					&-1 {
						grid-template-columns: repeat(1, minmax(0, 1fr));
					}

					&-2 {
						grid-template-columns: repeat(2, minmax(0, 1fr));
					}

					&-3 {
						grid-template-columns: repeat(3, minmax(0, 1fr));
					}

					&-4 {
						grid-template-columns: repeat(4, minmax(0, 1fr));
					}

					&-5 {
						grid-template-columns: repeat(5, minmax(0, 1fr));
					}

					&-6 {
						grid-template-columns: repeat(6, minmax(0, 1fr));
					}

					&-7 {
						grid-template-columns: repeat(7, minmax(0, 1fr));
					}

					&-8 {
						grid-template-columns: repeat(8, minmax(0, 1fr));
					}
				}
			}

			&--isogrid {
				&-col-tab {
					&-1 .spectra-image-gallery__media-wrapper--isotope {
						width: 100%;
					}

					&-2 .spectra-image-gallery__media-wrapper--isotope {
						width: 50%;
					}

					&-3 .spectra-image-gallery__media-wrapper--isotope {
						width: 33.33%;
					}

					&-4 .spectra-image-gallery__media-wrapper--isotope {
						width: 25%;
					}

					&-5 .spectra-image-gallery__media-wrapper--isotope {
						width: 20%;
					}

					&-6 .spectra-image-gallery__media-wrapper--isotope {
						width: 16.66%;
					}

					&-7 .spectra-image-gallery__media-wrapper--isotope {
						width: 14.28%;
					}

					&-8 .spectra-image-gallery__media-wrapper--isotope {
						width: 12.5%;
					}
				}
			}

			&--masonry {
				&-col-tab {
					&-1 .spectra-image-gallery__media-wrapper--isotope {
						width: 100%;
					}

					&-2 .spectra-image-gallery__media-wrapper--isotope {
						width: 50%;
					}

					&-3 .spectra-image-gallery__media-wrapper--isotope {
						width: 33.33%;
					}

					&-4 .spectra-image-gallery__media-wrapper--isotope {
						width: 25%;
					}

					&-5 .spectra-image-gallery__media-wrapper--isotope {
						width: 20%;
					}

					&-6 .spectra-image-gallery__media-wrapper--isotope {
						width: 16.66%;
					}

					&-7 .spectra-image-gallery__media-wrapper--isotope {
						width: 14.28%;
					}

					&-8 .spectra-image-gallery__media-wrapper--isotope {
						width: 12.5%;
					}
				}
			}

			&--tiled {
				&-col-tab {
					&-1 {
						grid-template-columns: repeat(1, minmax(0, 1fr));
					}

					&-2 {
						grid-template-columns: repeat(2, minmax(0, 1fr));

						@include specialTiles();
					}

					&-3 {
						grid-template-columns: repeat(3, minmax(0, 1fr));

						@include specialTiles();
					}

					&-4 {
						grid-template-columns: repeat(4, minmax(0, 1fr));

						@include specialTiles();
					}

					&-5 {
						grid-template-columns: repeat(5, minmax(0, 1fr));

						@include specialTiles();
					}

					&-6 {
						grid-template-columns: repeat(6, minmax(0, 1fr));

						@include specialTiles();
					}

					&-7 {
						grid-template-columns: repeat(7, minmax(0, 1fr));

						@include specialTiles();
					}

					&-8 {
						grid-template-columns: repeat(8, minmax(0, 1fr));

						@include specialTiles();
					}
				}
			}
		}
	}
}

@media ( max-width: 767px ) {
	.spectra-image-gallery {
		&__layout {
			&--grid {
				&-col-mob {
					&-1 {
						grid-template-columns: repeat(1, minmax(0, 1fr));
					}

					&-2 {
						grid-template-columns: repeat(2, minmax(0, 1fr));
					}

					&-3 {
						grid-template-columns: repeat(3, minmax(0, 1fr));
					}

					&-4 {
						grid-template-columns: repeat(4, minmax(0, 1fr));
					}

					&-5 {
						grid-template-columns: repeat(5, minmax(0, 1fr));
					}

					&-6 {
						grid-template-columns: repeat(6, minmax(0, 1fr));
					}

					&-7 {
						grid-template-columns: repeat(7, minmax(0, 1fr));
					}

					&-8 {
						grid-template-columns: repeat(8, minmax(0, 1fr));
					}
				}
			}

			&--isogrid {
				&-col-mob {
					&-1 .spectra-image-gallery__media-wrapper--isotope {
						width: 100%;
					}

					&-2 .spectra-image-gallery__media-wrapper--isotope {
						width: 50%;
					}

					&-3 .spectra-image-gallery__media-wrapper--isotope {
						width: 33.33%;
					}

					&-4 .spectra-image-gallery__media-wrapper--isotope {
						width: 25%;
					}

					&-5 .spectra-image-gallery__media-wrapper--isotope {
						width: 20%;
					}

					&-6 .spectra-image-gallery__media-wrapper--isotope {
						width: 16.66%;
					}

					&-7 .spectra-image-gallery__media-wrapper--isotope {
						width: 14.28%;
					}

					&-8 .spectra-image-gallery__media-wrapper--isotope {
						width: 12.5%;
					}
				}
			}

			&--masonry {
				&-col-mob {
					&-1 .spectra-image-gallery__media-wrapper--isotope {
						width: 100%;
					}

					&-2 .spectra-image-gallery__media-wrapper--isotope {
						width: 50%;
					}

					&-3 .spectra-image-gallery__media-wrapper--isotope {
						width: 33.33%;
					}

					&-4 .spectra-image-gallery__media-wrapper--isotope {
						width: 25%;
					}

					&-5 .spectra-image-gallery__media-wrapper--isotope {
						width: 20%;
					}

					&-6 .spectra-image-gallery__media-wrapper--isotope {
						width: 16.66%;
					}

					&-7 .spectra-image-gallery__media-wrapper--isotope {
						width: 14.28%;
					}

					&-8 .spectra-image-gallery__media-wrapper--isotope {
						width: 12.5%;
					}
				}
			}

			&--tiled {
				&-col-mob {
					&-1 {
						grid-template-columns: repeat(1, minmax(0, 1fr));
					}

					&-2 {
						grid-template-columns: repeat(2, minmax(0, 1fr));

						@include specialTiles();
					}

					&-3 {
						grid-template-columns: repeat(3, minmax(0, 1fr));

						@include specialTiles();
					}

					&-4 {
						grid-template-columns: repeat(4, minmax(0, 1fr));

						@include specialTiles();
					}

					&-5 {
						grid-template-columns: repeat(5, minmax(0, 1fr));

						@include specialTiles();
					}

					&-6 {
						grid-template-columns: repeat(6, minmax(0, 1fr));

						@include specialTiles();
					}

					&-7 {
						grid-template-columns: repeat(7, minmax(0, 1fr));

						@include specialTiles();
					}

					&-8 {
						grid-template-columns: repeat(8, minmax(0, 1fr));

						@include specialTiles();
					}
				}
			}
		}
	}
}

.entry-content {
	.wp-block-uagb-image-gallery .uagb-image-gallery__link {
		text-decoration: none;
	}
}

// Compatibility with Spectra One - Lightbox is absolute, and hence should not have the standard layout margins.
body .wp-block-post-content > .wp-block-uagb-image-gallery + .spectra-image-gallery__control-lightbox {
	margin-block-start: 0;
}

@-webkit-keyframes sk-bouncedelay {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}

	40% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes sk-bouncedelay {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}

	40% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
