@import "../../../helpers/variables";
@import "../../breakpoints/templates";

.elementor-lightbox {
	--lightbox-ui-color: #{$slides_gui};
	--lightbox-ui-color-hover: #fff;
	--lightbox-text-color: var(--lightbox-ui-color);
	--lightbox-header-icons-size: 20px;
	--lightbox-navigation-icons-size: 25px;

	&:not(.elementor-popup-modal) {

		.dialog-header,
		.dialog-message {
			text-align: center;
		}
	}

	.dialog {

		&-header {
			display: none;
		}

		&-widget-content {
			background: none;
			box-shadow: none;
			width: 100%;
			height: 100%;
		}

		&-message {
			animation-duration: .3s; // Open lightbox transition
			height: 100%;

			&.dialog-lightbox-message {
				padding: 0;
			}
		}

		&-lightbox-close-button {
			cursor: pointer;
			position: absolute;
			font-size: var(--lightbox-header-icons-size);
			inset-inline-end: 0.75em;
			margin-top: 13px;
			padding: .25em;
			z-index: 2;
			line-height: 1;
			display: flex;

			svg {
				height: 1em;
				width: 1em;
			}
		}
	}

	.dialog-lightbox-close-button,
	.elementor-swiper-button {
		color: var(--lightbox-ui-color);
		transition: $transition-hover;
		opacity: 1;

		svg {
			fill: var(--lightbox-ui-color);
		}

		&:hover {
			color:  var(--lightbox-ui-color-hover);

			svg {
				fill: var(--lightbox-ui-color-hover);
			}
		}
	}

	.swiper {
		height: 100%;
	}

	.elementor-lightbox-item {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 70px;
		box-sizing: border-box;
		height: 100%;
		margin: auto;

		@media (max-width: $screen-mobile-max) {
			padding: 70px 0;
		}
	}

	.elementor-lightbox-image {
		max-height: 100%;
		user-select: none;

		// Override theme style settings
		&, &:hover {
			opacity: 1;
			filter: none;
			border: none;
		}
	}

	.elementor-lightbox-image {
		box-shadow: 0 0 30px rgba( 0,0,0,0.3 ), 0 0 8px -5px rgba( 0,0,0,0.3 );
		border-radius: 2px;
	}

	.elementor-video-container {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.elementor-video-square,
		.elementor-video-landscape,
		.elementor-video-portrait {
			width: 100%;
			height: 100%;
			margin: auto;

			iframe {
				border: 0;
				background-color: #000;
			}

			iframe,
			video {
				aspect-ratio: var( --video-aspect-ratio, 1.77777 ); // Default value 1.77777 = 16/9
			}

			// BC for browsers that don't support `aspect-ratio` (like Safari 14.1)
			@supports not ( aspect-ratio: 1 / 1 ) {

				& {
					position: relative;
					overflow: hidden;
					height: 0;
					padding-bottom: calc( 100% / var( --video-aspect-ratio, 1.77777 ) );

					iframe,
					video {
						position: absolute;
						inset: 0;
					}
				}
			}
		}

		.elementor-video-square {

			iframe,
			video {
				width: min( 90vh, 90vw );
				height: min( 90vh, 90vw );
			}
		}

		.elementor-video-landscape {

			iframe,
			video {
				width: 100%;
				max-height: 90vh;
				height: auto;
			}
		}

		.elementor-video-portrait {

			iframe,
			video {
				height: 100%;
				max-width: 90vw;
			}
		}

		@media (min-width: $screen-tablet-next) {

			.elementor-video-landscape {
				width: 85vw;
				max-height: 85vh;
			}

			.elementor-video-portrait {
				height: 85vh;
				max-width: 85vw;
			}
		}

		@media (max-width: $screen-tablet-max) {

			.elementor-video-landscape {
				width: 95vw;
				max-height: 95vh;
			}

			.elementor-video-portrait {
				height: 95vh;
				max-width: 95vw;
			}
		}
	}

	.swiper {

		.elementor-swiper-button {

			&-prev {
				left: 0;
			}

			&-next {
				right: 0;
			}
		}

		.swiper-pagination-fraction {
			width: max-content;
			color: $white;
		}
	}

	.elementor-swiper-button {
		&:focus {
			outline-width: 1px;
		}

		&-prev, &-next {
			height: 100%;
			display: flex;
			align-items: center;
			width: 15%;
			justify-content: center;
			font-size: var(--lightbox-navigation-icons-size);
		}

		@media (max-width: $screen-mobile-max) {
			&:focus {
				outline: none;
			}

			&-prev, &-next {
				width: 20%;
				i {
					padding: 10px;
					background-color: rgba(0, 0, 0, 0.5);
				}
			}

			&-prev {
				left: 0;
				justify-content: flex-start;
			}

			&-next {
				right: 0;
				justify-content: flex-end;
			}
		}
	}
}

.elementor-slideshow {
	&__counter {
		color: currentColor;
		font-size: .75em;
		width: max-content;
	}

	&__header, &__footer {
		position: absolute;
		left: 0;
		width: 100%;
		padding: 15px 20px;
		transition: 0.3s;
	}

	&__footer {
		color: var(--lightbox-text-color);
	}

	&__header {
		color: var(--lightbox-ui-color);
		display: flex;
		flex-direction: row-reverse;
		font-size: var(--lightbox-header-icons-size);
		padding-inline-start: 1em;
		padding-inline-end: 2.6em;
		top: 0;
		align-items: center;
		z-index: 10;

		> i,
		> svg {
			cursor: pointer;
			padding: .25em;
			margin: 0 .35em;
		}

		> i {
			font-size: inherit;

			&:hover {
				color: var(--lightbox-ui-color-hover);
			}
		}

		> svg {
			box-sizing: content-box;
			fill: var(--lightbox-ui-color);
			height: 1em;
			width: 1em;

			&:hover {
				fill: var(--lightbox-ui-color-hover);
			}
		}

		.elementor-slideshow__counter {
			margin-inline-end: auto;
		}

		.elementor-icon-share {
			z-index: 5;
		}
	}

	&__share-menu {
		background-color: rgba(0, 0, 0, 0);
		width: 0;
		height: 0;
		position: absolute;
		overflow: hidden;
		transition: background-color 400ms;

		// This is to overcome a specificity override by Theme Style
		.elementor-slideshow__share-links a {
			color: $gray-darkest;
		}
	}

	&__share-links {
		display: block;
		position: absolute;
		min-width: 200px;
		inset-inline-end: 2.8em;
		top: 3em;
		background-color: #fff;
		border-radius: 3px;
		padding: 14px 20px;
		transform: scale(0);
		opacity: 0;
		transform-origin: 90% 10%;
		transition: all 250ms 100ms;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

		a {
			text-align: start;
			color: $gray-dark;
			font-size: 12px;
			line-height: 2.5;
			display: block;
			opacity: 0;
			transition: opacity 500ms 100ms;

			&:hover {
				color: #000;
			}

			i,
			svg {
				margin-inline-end: 0.75em;
			}

			i {
				font-size: 1.25em;
			}

			svg {
				height: 1.25em;
				width: 1.25em;
			}
		}

		&:before {
			content: '';
			display: block;
			position: absolute;
			top: 1px;
			inset-inline-end: 0.5em;
			border: .45em solid;
			border-color: transparent transparent #fff transparent;
			transform: translateY(-100%) scaleX(0.7);
		}
	}

	&__footer {
		bottom: 0;
		z-index: 5;
		position: fixed;
	}

	&__title, &__description {
		margin: 0;
	}

	&__title {
		font-size: 16px;
		font-weight: bold;
	}

	&__description {
		font-size: 14px;
	}

	&--ui-hidden {
		.elementor-slideshow {
			&__header, &__footer {
				opacity: 0;
				pointer-events: none;
			}
		}

		.elementor-swiper-button {
			&-prev, &-next {
				opacity: 0;
			}
		}
	}

	&--fullscreen-mode {
		.elementor-video-container {
			width: 100%;
		}
	}

	&--zoom-mode {
		.elementor-slideshow {
			&__header, &__footer {
				background-color: rgba(0, 0, 0, 0.5);
			}
		}

		.elementor-swiper-button {
			&-prev, &-next {
				opacity: 0;
				pointer-events: none;
			}
		}
	}

	&--share-mode {

		.elementor-slideshow {

			&__share-menu {
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				opacity: 1;
				cursor: default;
				background-color: rgba(0, 0, 0, 0.5);
			}

			&__share-links {
				transform: scale(1);

				&, & a {
					opacity: 1;
				}

				.eicon {

					&-twitter {
						color: $twitter;
					}

					&-facebook {
						color: $facebook;
					}

					&-pinterest {
						color: $pinterest;
					}

					&-download-bold {
						color: $editor-light;
					}
				}

				// SVG Icons.
				.e-eicon {

					&-twitter {
						fill: $twitter;
					}

					&-facebook {
						fill: $facebook;
					}

					&-pinterest {
						fill: $pinterest;
					}

					&-download-bold {
						fill: $editor-light;
					}
				}
			}
		}

		.eicon-share-arrow {
			z-index: 2;
		}
	}
}
