.gallery-slider-popup {
	position: fixed;
	inset: 0;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	background-color: $color-black;
	overflow: auto;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
	z-index: 999999;

	&:not(.visible) {
		opacity: 0;
		visibility: hidden;
	}
}

.gallery-slider-popup__wrapper {
	position: relative;
	display: flex;
	flex-flow: column;
	gap: 20px;
	align-self: center;
	padding: 50px 16px;
	width: 100%;
	max-width: 1314px;
	box-sizing: border-box;
}

.gallery-slider-popup__close-btn {
	position: absolute;
	top: 30px;
	right: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.08);
	z-index: 9;

	svg {
		width: 24px;
		height: 24px;
		color: $color-white;
	}
}

[data-gallery-slider-popup-covers] {
	align-self: center;
	width: 100%;
	max-width: 1079px;

	overflow: hidden;

	.swiper-wrapper {
		flex: 1;
	}

	.swiper-slide {
		width: 100%;
		height: 609px;

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: contain;
			object-position: center;
			pointer-events: none;
			border-radius: 24px;
		}
	}
}

[data-gallery-slider-popup-thumbs] {
	align-self: center;
	width: max-content;
	max-width: 1079px;
	border-radius: 24px;
	overflow: hidden;

	.swiper-wrapper {
		text-align: center;
	}

	.swiper-slide {
		width: 100% !important;
		max-width: 150px;
		aspect-ratio: 150 / 101;
		border-radius: 24px;
		overflow: hidden;

		&:not(.swiper-slide-thumb-active) {
			opacity: 0.3;
		}

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			pointer-events: none;
		}
	}
}

.gallery-slider-popup__nav-btn {
	position: absolute;
	top: calc((50% - 24px / 2) - 59px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: $color-white;
	box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.08);
	transition:
		opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		visibility 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	z-index: 9;

	&:disabled {
		opacity: 0;
		visibility: hidden;
		transform: scale(0);
	}

	svg {
		width: 24px;
		height: 24px;
		color: $color-green;
	}

	&--prev {
		left: 0;
	}

	&--next {
		right: 0;
	}

	@include desktop {
		&:hover {
			transform: scale(1.2);

			svg {
				transform: scale(0.9);
			}
		}
	}
}