/** @format */

.acf_section_gallery_slider {
	.gallery_slider_container {
		margin-block: var(--universal-large-gap);
	}
	.gallery_slider_container {
		--slider-gap: var(--medium-gap);
		--max-images-per-view: 1;
		--visible-gaps-per-view: calc(var(--max-images-per-view) - 1);
		--effective-image-width: calc(100% / var(--max-images-per-view) - (var(--slider-gap) * var(--visible-gaps-per-view) / var(--max-images-per-view)));
		--slider-padding: 0;
		--slider-padding-left: var(--slider-padding);
		--slider-padding-right: var(--slider-padding);

		&.slider_container--wrapped {
			--slider-padding: max(calc((100% - (var(--wrapper-width--large) - (var(--wrapper-padding) * 2))) / 2), var(--wrapper-padding));
			--slider-padding-left: var(--slider-padding);
			--slider-padding-right: var(--slider-padding);
		}

		display: flex;
		flex-direction: column;
		gap: var(--medium-gap);
		position: relative;
		z-index: 1;
		overflow: hidden;

		& .gallery_slider_scene {
			position: relative;
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: min(max(var(--effective-image-width), 20rem), 100%);
			gap: var(--slider-gap);
			overflow: scroll hidden;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
			scrollbar-width: none;
			container: scroll-detection / scroll-state;
			padding: 0 var(--slider-padding-right) 0 var(--slider-padding-left);
			scroll-padding-left: var(--slider-padding-left);
			scroll-padding-right: var(--slider-padding-right);

			& .slider_item {
				scroll-snap-align: start;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100vw;

				& video,
				& .slider_item__image {
					object-fit: cover;
					height: min(calc(100dvh - 15rem), 100dvw);
					max-height: 95dvh;

					&.slider_item__image--landscape {
						aspect-ratio: var(--forced-image-aspect-ratio-landscape);
					}
					&.slider_item__image--portrait {
						aspect-ratio: var(--forced-image-aspect-ratio-portrait);
					}
				}
			}
		}

		& .slider_controls {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 var(--slider-padding-right) 0 var(--slider-padding-left);
			position: relative;
			z-index: 2;
			pointer-events: none;

			& .slider_control {
				all: unset;
				pointer-events: auto;
				cursor: pointer;
				display: block;
				height: 0em;

				@media (pointer: fine) {
					&::after {
						position: absolute;
						content: '';
						display: block;
						width: 100dvw;
						height: calc(100dvh - var(--height-of-fixed-elements));
						bottom: 0;
						transform: translate(0, 0);
						opacity: 0.3;
					}
					&.slider_control--prev:hover::after {
						background-color: var(--color-black);
					}

					&.slider_control--prev::after {
						right: 50%;
						cursor:
							url(../../img/icons/arrow-left.svg) 16 16,
							w-resize;
					}
					&.slider_control--next:hover::after {
						background-color: var(--color-black);
					}

					&.slider_control--next::after {
						left: 50%;
						cursor:
							url(../../img/icons/arrow-right.svg) 16 16,
							e-resize;
					}
				}

				&[disabled] {
					opacity: 0;
					display: none;

					&::after {
						cursor: default;
					}
				}
			}
		}

		& .current-slide-container {
			display: flex;
			flex-direction: row;
			gap: calc(var(--universal-gap) / 2);
			margin: auto;
			padding-block-start: 1.5rem;

			.slide-indicator {
				width: 1rem;
				height: 1rem;
				background-color: var(--color-white);
				border-radius: 25px;
			}
			.slide-indicator.active {
				background-color: var(--color-orange-red);
			}
		}
	}
	.wysiwyg {
		margin-block-start: var(--universal-big-gap);
	}
}