// Carousel type "Project Gallery" (Modules/ComponentCarousel/Resources/views/partials/centre.blade.php).
// A freely scrolling strip of large framed photos with a scrollbar-style bar underneath.
.gallery-slider {
	// The scrolling area. Native scrolling, scrollbar hidden (the bar below replaces it).
	&__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;           // Firefox
		-ms-overflow-style: none;        // old Edge
		// Room for the frames' shadows.
		padding: 12px 0 16px;

		&::-webkit-scrollbar { display: none; }
	}

	// Side padding lets the first and last photos come in from the middle, with the
	// neighbouring photos peeking at the edges as before.
	&__strip {
		display: flex;
		width: max-content;
		padding: 0 15vw;

		@include media-breakpoint-down(sm) {
			padding: 0 8vw;
		}
	}

	&__slide {
		flex: 0 0 auto;
		width: 70vw;
		padding: 0 12px;

		@include media-breakpoint-down(sm) {
			width: 84vw;
			padding: 0 6px;
		}
	}

	// White frame with a soft shadow, as in the design.
	&__frame {
		background-color: $white;
		padding: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, .08);

		@include media-breakpoint-up(lg) {
			padding: 20px;
		}
	}

	// Every photo the same shape (about 16:10), cropped to fill.
	&__image {
		position: relative;
		padding-top: 62%;
		overflow: hidden;

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			user-select: none;
			-webkit-user-drag: none;
		}
	}

	// No text highlighting while dragging the photos with a mouse.
	&.is-dragging &__viewport {
		user-select: none;
	}

	// Scrollbar-style bar: pill outline, sage thumb sized to the share of the strip in view.
	&__progress {
		position: relative;
		width: 70%;
		height: 20px;
		margin: 1.5rem auto 0;
		border: 1px solid $silver;
		border-radius: 999px;
		overflow: hidden;
		cursor: pointer;
		// Lets the thumb be dragged on touch screens without the page scrolling sideways.
		touch-action: pan-y;
		user-select: none;

		@include media-breakpoint-up(lg) {
			width: 42%;
			height: 28px;
			margin-top: 2rem;
		}
	}

	&__progress-bar {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 0;
		border-radius: 999px;
		background-color: $primary;
	}
}