/*
	Hugo Story by CaressOfSteel
	A (modular, highly tweakable) responsive one-page theme for Hugo.
	Ported from Story by HTML5UP.
	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
*/

/* Gallery (transitions) */

	.gallery {

		// Mixin.
			@mixin transition-gallery($event) {
				$x: null;
				$y: null;

				@if ($event == 'load') {
					$x: 'body.is-preload &';
					$y: _duration(on-load);
				}
				@else if ($event == 'scroll') {
					$x: '&.is-inactive';
					$y: _duration(on-scroll);
				}

				&.on#{$event}-fade-in {
					article {
						.image {
							img {
								@include vendor('transition', 'opacity #{$y} ease-in-out');
								@include vendor('transition-delay', '#{_misc(gallery-limit) * _duration(gallery-delay)}');
							}
						}

						@for $i from 0 through _misc(gallery-limit) {
							&:nth-child(#{$i + 1}) {
								.image {
									img {
										@include vendor('transition-delay', '#{$i * _duration(gallery-delay)}');
									}
								}
							}
						}
					}

					#{$x} {
						article {
							.image {
								img {
									opacity: 0;
								}
							}
						}
					}
				}
			}

		// On Load.
			@include transition-gallery('load');

		// On Scroll.
			@include transition-gallery('scroll');

	}

/* Gallery (style1) */

	.gallery.style1 {
		@include color-typography(invert);
		@include color-button(invert);
		@include vendor('align-items', 'center');
		@include vendor('display', 'flex');
		@include vendor('flex-wrap', 'wrap');
		@include vendor('justify-content', 'center');
		position: relative;
		width: 100%;
		background-color: transparent;

		> .forward, >.backward {
			display: none;
		}

		> .inner {
			@include vendor('align-items', 'inherit');
			@include vendor('display', 'inherit');
			@include vendor('flex-wrap', 'inherit');
			@include vendor('justify-content', 'inherit');
		}

		article {
			overflow: hidden;
			position: relative;
			width: 25%;

			.image {
				@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
				display: block;
				width: 100%;
				border-radius: 0;

				img {
					display: block;
					width: 100%;
					border-radius: 0;
				}
			}

			.caption {
				@include vendor('align-items', 'center');
				@include vendor('display', 'flex');
				@include vendor('flex-direction', 'column');
				@include vendor('justify-content', 'center');
				@include vendor('pointer-events', 'none');
				@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: transparentize(_palette(invert, bg), 1 - _misc(overlay-opacity));
				opacity: 0;
				padding: 2rem;
				z-index: 1;
				font-size: 0.8rem;

				a {
					@include vendor('pointer-events', 'auto');
				}

				h2, h3, h4, h5, h6 {
					font-size: 1.25rem;
					margin-bottom: 0.25rem;
				}

				> * {
					max-width: 100%;
					margin-bottom: 1rem;
				}

				> :last-child {
					margin-bottom: 0;
				}
			}

			&:hover {
				.caption {
					opacity: 1;
				}
			}
		}

		@include breakpoint('<=large') {
			article {
				width: (100% / 3);

				.caption {
					padding: 1rem;
				}
			}
		}

		@include breakpoint('<=medium') {
			article {
				width: 50%;

				.caption {
					padding: 1rem;
				}
			}
		}

		@include breakpoint('<=xsmall') {
			article {
				width: 100%;

				.caption {
					padding: 1rem;
				}
			}
		}

		// Modifiers.

			// size
				&.small {
					article {
						width: 20%;

						.caption {
							padding: 1rem;
						}
					}

					@include breakpoint('<=large') {
						article {
							width: 25%;

							.caption {
								padding: 1rem;
							}
						}
					}

					@include breakpoint('<=medium') {
						article {
							width: (100% / 3);

							.caption {
								padding: 1rem;
							}
						}
					}

					@include breakpoint('<=xsmall') {
						article {
							width: 50%;

							.caption {
								padding: 1rem;
							}
						}
					}
				}

				&.medium {
					// ...
				}

				&.big {
					article {
						width: (100% / 3);

						.caption {
							padding: 3rem;
						}
					}

					@include breakpoint('<=large') {
						article {
							width: 50%;

							.caption {
								padding: 2rem;
							}
						}
					}

					@include breakpoint('<=medium') {
						article {
							width: 50%;

							.caption {
								padding: 2rem;
							}
						}
					}

					@include breakpoint('<=xsmall') {
						article {
							width: 100%;

							.caption {
								padding: 1rem;
							}
						}
					}
				}

	}

/* Gallery (style2) */

	.gallery.style2 {
		@include color-typography(invert);
		@include color-button(invert);
		@include vendor('display', 'flex');
		-webkit-overflow-scrolling: touch;
		position: relative;
		background-color: transparent;

		> .forward, >.backward {
			@include icon(false, solid);
			@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
			position: absolute;
			top: 0;
			width: 5rem;
			height: 100%;
			cursor: pointer;
			opacity: 0;
			z-index: 2;

			&:before {
				display: block;
				top: calc(50% - 1.5rem);
				width: 4rem;
				height: 3rem;
				line-height: 1em;
				font-size: 3rem;
				position: absolute;
				text-align: center;
			}
		}

		&:hover {
			> .forward, > .backward {
				opacity: 1;
			}
		}

		> .forward {
			right: 0;
			background-image: linear-gradient(to left, rgba(0,0,0,0.25) 15%, rgba(0,0,0,0));

			&:before {
				content: '\f105';
				right: 0;
			}
		}

		> .backward {
			left: 0;
			background-image: linear-gradient(to right, rgba(0,0,0,0.25) 15%, rgba(0,0,0,0));

			&:before {
				content: '\f104';
				left: 0;
			}
		}

		> .inner {
			@include vendor('display', 'inherit');
			overflow-x: auto;
			overflow-y: hidden;
			position: relative;
			width: 100%;
		}

		article {
			@include vendor('flex-grow', '0');
			@include vendor('flex-shrink', '0');
			display: block;
			position: relative;
			overflow: hidden;
			width: 22.5rem;
			max-width: 75vw;

			.image {
				display: block;
				width: 100%;
				border-radius: 0;

				img {
					display: block;
					width: 100%;
					border-radius: 0;
				}
			}

			.caption {
				@include vendor('align-items', 'center');
				@include vendor('display', 'flex');
				@include vendor('flex-direction', 'column');
				@include vendor('justify-content', 'center');
				@include vendor('pointer-events', 'none');
				@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: transparentize(_palette(invert, bg), 1 - _misc(overlay-opacity));
				opacity: 0;
				padding: 3rem;
				z-index: 1;
				font-size: 0.8rem;

				a {
					@include vendor('pointer-events', 'auto');
				}

				h2, h3, h4, h5, h6 {
					font-size: 1.25rem;
					margin-bottom: 0.25rem;
				}

				> * {
					max-width: 100%;
					margin-bottom: 1rem;
				}

				> :last-child {
					margin-bottom: 0;
				}
			}

			&:hover {
				.caption {
					opacity: 1;
				}
			}
		}

		@include breakpoint('<=medium') {
			article {
				.caption {
					padding: 2rem;
				}
			}
		}

		@include breakpoint('<=small') {
			article {
				.caption {
					padding: 2rem;
				}
			}
		}

		// Modifiers.

			// size
				&.small {
					article {
						width: 17.5rem;

						.caption {
							padding: 2rem;
						}
					}

					@include breakpoint('<=medium') {
						article {
							.caption {
								padding: 2rem;
							}
						}
					}

					@include breakpoint('<=small') {
						article {
							.caption {
								padding: 2rem;
							}
						}
					}
				}

				&.medium {
					// ...
				}

				&.big {
					article {
						width: 30rem;

						.caption {
							padding: 4rem;
						}
					}

					@include breakpoint('<=medium') {
						article {
							.caption {
								padding: 3rem;
							}
						}
					}

					@include breakpoint('<=small') {
						article {
							.caption {
								padding: 2rem;
							}
						}
					}
				}

	}

/* Gallery (lightbox) */

	@include keyframes('gallery-modal-spinner') {
		0% {
			@include vendor('transform', 'rotate(0deg)');
		}

		100% {
			@include vendor('transform', 'rotate(360deg)');
		}
	}

	.gallery.lightbox {
		.modal {
			@include vendor('display', 'flex');
			@include vendor('align-items', 'center');
			@include vendor('justify-content', 'center');
			@include vendor('pointer-events', 'none');
			@include vendor('user-select', 'none');
			@include vendor('transition', (
				'opacity #{_duration(gallery-lightbox)} ease',
				'visibility #{_duration(gallery-lightbox)}',
				'z-index #{_duration(gallery-lightbox)}'
			));
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			outline: 0;
			background-color: transparentize(_palette(invert, bg), 1 - _misc(lightbox-opacity));
			visibility: none;
			opacity: 0;
			z-index: 0;

			&:before {
				@include vendor('animation', 'gallery-modal-spinner 1s infinite linear');
				@include vendor('transition', 'opacity #{_duration(gallery-lightbox) * 0.5} ease');
				@include vendor('transition-delay', '#{_duration(gallery-lightbox)}');
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				left: 50%;
				width: 4rem;
				height: 4rem;
				margin: -2rem 0 0 -2rem;
				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="96px" viewBox="0 0 96 96" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette(invert, fg-bold)}; stroke-width: 1.5px; }</style><defs><clipPath id="corner"><polygon points="0,0 48,0 48,48 96,48 96,96 0,96" /></clipPath></defs><g clip-path="url(#corner)"><circle cx="48" cy="48" r="32"/></g></svg>');
				background-position: center;
				background-repeat: no-repeat;
				background-size: 4rem;
				opacity: 0;
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				top: 0.5rem;
				right: 0.5rem;
				width: 4rem;
				height: 4rem;
				cursor: pointer;
				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" zoomAndPan="disable"><style>line {stroke: #{_palette(invert, fg-bold)};stroke-width: 1.5px;}</style><line x1="20" y1="20" x2="44" y2="44" /><line x1="20" y1="44" x2="44" y2="20" /></svg>');
				background-position: center;
				background-repeat: no-repeat;
				background-size: 3rem;
			}

			.inner {
				@include vendor('transform', 'translateY(0.75rem)');
				@include vendor('transition', (
					'opacity #{_duration(gallery-lightbox) * 0.5} ease',
					'transform #{_duration(gallery-lightbox) * 0.5} ease'
				));
				opacity: 0;

				img {
					display: block;
					max-width: 90vw;
					max-height: 85vh;
					box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35);
				}
			}

			&.visible {
				@include vendor('pointer-events', 'auto');
				visibility: visible;
				opacity: 1;
				z-index: _misc(z-index-base) + 1;

				&:before {
					opacity: 1;
				}
			}

			&.loaded {
				.inner {
					@include vendor('transform', 'translateY(0)');
					@include vendor('transition', (
						'opacity #{_duration(gallery-lightbox)} ease',
						'transform #{_duration(gallery-lightbox)} ease'
					));
					opacity: 1;
				}

				&:before {
					@include vendor('transition-delay', '0s');
					opacity: 0;
				}
			}
		}

		@include breakpoint('<=medium') {
			.modal {
				.inner {
					img {
						max-width: 100vw;
					}
				}
			}
		}
	}

// Mixin

	@mixin color-gallery($p: null) {
		.gallery {
			article {
				.image {
					background-color: transparentize(_palette($p, fg-bold), 0.875);
				}
			}
		}
	}

	@include color-gallery;