/* GDB Image Scroller — frontend styles */

.gdb-scroller {
	--gdb-arrow-offset: 10px;
	--gdb-arrow-size: 44px;
	position: relative;
	width: 100%;
}

.gdb-scroller__viewport {
	overflow: hidden;
	width: 100%;
}

.gdb-scroller__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	touch-action: pan-y;
}

.gdb-scroller__slide {
	flex: 0 0 auto;
	min-width: 0;
}

.gdb-scroller__media {
	display: block;
	overflow: hidden;
	line-height: 0;
	background-color: rgba(0, 0, 0, 0.04);
}

.gdb-scroller__media img,
.gdb-scroller__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	-webkit-user-drag: none;
	user-select: none;
}

.gdb-scroller--fixed-height .gdb-scroller__media img {
	height: 100%;
	object-fit: cover;
}

.gdb-scroller__link {
	display: block;
	line-height: 0;
}

.gdb-scroller__caption {
	margin-top: 10px;
	line-height: 1.4;
	text-align: center;
}

/* Drag states */
.gdb-scroller--draggable .gdb-scroller__track {
	cursor: grab;
}

.gdb-scroller--dragging .gdb-scroller__track {
	cursor: grabbing;
}

.gdb-scroller--dragging .gdb-scroller__link {
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Arrows                                                              */
/* ------------------------------------------------------------------ */

.gdb-scroller__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	color: #111;
	background-color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.gdb-scroller__arrow i,
.gdb-scroller__arrow svg {
	display: block;
	width: 1em;
	height: 1em;
	line-height: 1;
	pointer-events: none;
}

.gdb-scroller__arrow svg {
	fill: currentColor;
}

.gdb-scroller__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.gdb-scroller__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.gdb-scroller__arrow--hidden {
	display: none;
}

/* Arrows over the images */
.gdb-scroller--arrows-inside .gdb-scroller__arrow--prev {
	left: var(--gdb-arrow-offset);
}

.gdb-scroller--arrows-inside .gdb-scroller__arrow--next {
	right: var(--gdb-arrow-offset);
}

/* Arrows beside the images */
.gdb-scroller--arrows-outside {
	padding-left: calc(var(--gdb-arrow-size) + var(--gdb-arrow-offset));
	padding-right: calc(var(--gdb-arrow-size) + var(--gdb-arrow-offset));
}

.gdb-scroller--arrows-outside .gdb-scroller__arrow--prev {
	left: 0;
}

.gdb-scroller--arrows-outside .gdb-scroller__arrow--next {
	right: 0;
}

/* The arrows sit over the images only, not the dots row */
.gdb-scroller--has-dots .gdb-scroller__arrow {
	top: calc(50% - (var(--gdb-dots-height, 0px) / 2));
}

/* ------------------------------------------------------------------ */
/* Dots                                                                */
/* ------------------------------------------------------------------ */

.gdb-scroller__dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}

.gdb-scroller__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	background-color: #d5d8dc;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.gdb-scroller__dot.is-active {
	background-color: #111;
	transform: scale(1.15);
}

.gdb-scroller__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Editor placeholder + small screens                                  */
/* ------------------------------------------------------------------ */

.gdb-scroller__empty {
	padding: 24px;
	text-align: center;
	color: #6d7882;
	border: 1px dashed #c7cdd3;
}

@media (max-width: 767px) {
	.gdb-scroller--hide-arrows-mobile .gdb-scroller__arrow {
		display: none;
	}

	.gdb-scroller--hide-arrows-mobile.gdb-scroller--arrows-outside {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gdb-scroller__track {
		transition-duration: 0.01ms !important;
	}
}