/* viewport carousel */
.carousel * {
	box-sizing: border-box;
	scrollbar-color: transparent transparent; /* thumb and track color */
	scrollbar-width: 0px;
}

.carousel ::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.carousel ::-webkit-scrollbar-track {
	background: transparent;
}

.carousel ::-webkit-scrollbar-thumb {
	background: transparent;
	border: none;
}

.carousel {
	position: relative;
	perspective: 100px;
}

.carousel__viewport {
	display: flex;
	overflow-x: scroll;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	max-height: max-content;
	height: 100%;
	gap: 1px;
}

.carousel__slide {
	flex: 0 0 100%;
	width: 100%;
	overflow-y: auto;
	height: 100%;
	max-height: max-content;
	/* scroll-snap causes scroll issues on viewport resizing, enable it manually using scroll-snap-align: center;*/
}


.carousel__prev,
.carousel__next {
	position: absolute;
	top: 50%;
	width: 1.5rem;
	height: 6rem;
	transform: translateY(-50%);
	border-radius: 5%;
	font-size: 0;
	outline: 0;
	background: no-repeat center;
	background-size: contain;
	cursor: pointer;
	z-index: 2;
}

.carousel__prev {
	left: -2rem;
	background-image: url("../../images/login_popup/arrow_left.png");
}

.carousel__next {
	right: -2rem;
	background-image: url("../../images/login_popup/arrow_right.png");
}

.carousel__prev.inactive,
.carousel__next.inactive {
	opacity: 0.2;
	cursor: default;
}
.desktop .carousel__prev {
	left: -3rem;
}
.desktop .carousel__next {
	right: -3rem;
}

.carousel__navigation {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 2rem;
}

.carousel__navigation-button {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	background-color: #333;
	background-clip: content-box;
	border: 0.25rem solid transparent;
	border-radius: 50%;
	font-size: 0;
	transition: all 0.3s;
	cursor: default;
}
.carousel__navigation-button.inactive {
	width: 1rem;
	height: 1rem;
	background-color: #ccc;
	cursor: pointer;
}