@charset "utf-8";


/* --------------------------------------------------------------------------
   Image Viewer
-------------------------------------------------------------------------- */

	#image-viewer {

		position: fixed;
		z-index: 100;
		inset: 0;
		padding: var(--space-32);
		display: grid;
		grid-template-columns: var(--space-40) minmax(0, 1fr) var(--space-40);
		grid-template-rows: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-16);
		box-sizing: border-box;
		background: color-mix(in srgb, var(--color-neutral-primary) 60%, transparent);
		backdrop-filter: blur(6rem);
		-webkit-backdrop-filter: blur(6rem);

		&[hidden] {
			display: none;
		}

		.viewer-close {

			width: var(--space-40);
			height: var(--space-40);
			display: flex;
			position: absolute;
			z-index: 2;
			top: var(--space-24);
			right: var(--space-24);
			align-items: center;
			justify-content: center;
			padding: 0;
			color: var(--color-neutral-content-inverse-high);
			background: rgb(0 0 0 / .16);
			border: 0;
			border-radius: var(--radius-300);
			cursor: pointer;
			transition: var(--transition-default);

			svg {
				width: var(--space-24);
				height: var(--space-24);
				fill: none;
				stroke: currentColor;
				transition: var(--transition-default);
			}

			&:hover {
				background: rgb(0 0 0 / .28);

				svg {
					stroke: var(--color-brand-primary);
					scale: 1.1;
				}
			}

		}

		.viewer-image {

			min-width: 0;
			min-height: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				max-width: 100%;
				max-height: calc(100svh - 12rem);
				display: block;
				object-fit: contain;
				border-radius: var(--radius-400);
			}

		}

		.viewer-arrow {

			width: var(--space-40);
			height: var(--space-40);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			color: var(--color-neutral-content-inverse-high);
			background: rgb(0 0 0 / .16);
			border: 0;
			border-radius: var(--radius-300);
			cursor: pointer;
			transition: var(--transition-default);

			&[hidden] {
				display: none;
			}

			svg {
				width: var(--space-20);
				height: var(--space-20);
				fill: none;
				stroke: currentColor;
				transition: var(--transition-default);
			}

			&:hover {
				background: rgb(0 0 0 / .28);

				svg {
					stroke: var(--color-brand-primary);
					scale: 1.1;
				}
			}

			&.previous svg {
				transform: rotate(270deg);
			}

			&.next svg {
				transform: rotate(90deg);
			}

		}

		.viewer-thumbnails {

			grid-column: 1 / -1;
			max-width: 100%;
			display: flex;
			justify-content: center;
			gap: var(--space-8);
			overflow-x: auto;
			scrollbar-width: none;

			&[hidden] {
				display: none;
			}

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

			button {

				width: var(--space-64);
				height: var(--space-48);
				padding: 0;
				flex: none;
				overflow: hidden;
				background: transparent;
				border: var(--space-2) solid transparent;
				border-radius: var(--radius-300);
				cursor: pointer;
				opacity: .64;
				transition: var(--transition-default);

				&:hover {
					opacity: 1;
					scale: 1.05;
				}

				&.selected {
					border-color: var(--color-neutral-white);
					opacity: 1;
				}

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

			}

		}

	}

	body.image-viewer-open {
		overflow: hidden;
	}