@import '../../../styles/_partials/index';

.Carousel_Wrapper {
	max-height: var(--expanded-height);
	transition:  max-height .35s ease;
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
}

.DummyBanner {
	position: absolute;
	z-index: -1;
}

// Screen Reader Only
.SRO {
	@include visuallyHidden;
}

.Carousel {
	width: 45px;
	transition:  width 0.35s ease;
	min-height: 48px;
	padding: 10px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	@include theme-background-white-else-graydark();
	box-shadow: inset 0px -10px 10px -10px  $theme-overlay-box-shadow-light;
	overflow: hidden;
	flex-shrink: 0;

	&.Carousel_Hidden {
		width: 0px;
	}

	.Carousel_Radio {
		+label {
			cursor: pointer;
			margin: 2.5px 0;
			border-radius: 50%;
			width: 8px;
			height: 8px;
			flex-shrink: 0;

			@include if-theme-dark() {
				border: 2px solid $white;
			}

			@include if-theme-light() {
				border: 2px solid $gray-dark50;
			}
		}

		&:focus-visible+label {
			outline: 2px solid $green;
		}

		&:checked+label {
			width: 15px;
			height: 15px;
			margin: 2.5px 15px;
			line-height: 15px;
			text-align: center;
			@include __theme-background($gray-dark50, $white);
			@include __theme-color($white, $gray-dark);
			font-size: 10px;
			font-weight: 600;
			border: none;
		}
	}
}

.Banner_Wrapper {
	width: 100%;
}

.Banner_Container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	height: 100%;
	position: relative;

	&.Banner_Container_Sliding {
		transition:  margin .35s ease;
	}

	&.Banner_Container_Down {
		justify-content: flex-end;
	}

	&.Banner_Container_SlidingDown {
		margin-top: var(--expanded-height);
	}

	&.Banner_Container_SlidingUp {
		margin-top: calc(-1 * var(--expanded-height));
	}

	.Banner_Banner {
		height: var(--expanded-height);
		display: flex;
		flex-shrink: 0;
		transition:  height .35s ease;
		overflow: hidden;
	}
}