/**
 * Glider Default Styles
 */
.glider {
	--glider-gap: 16px;
	--glider-viewport-count: 3;
	--glider-active-position: 0;
	--glider-cloned-count: 0;
	--glider-swipe-shift: 0;
	/* track */
	--glider-item-width: calc((100% - (var(--glider-viewport-count) - 1) * var(--glider-gap)) / var(--glider-viewport-count));
	--glider-track-width: calc(var(--glider-item-width) * var(--glider-items-count) + var(--glider-gap) * (var(--glider-items-count) - 1));
	--glider-shift-step: calc((100% - var(--glider-gap) * (var(--glider-items-count) - 1)) / var(--glider-items-count) + var(--glider-gap));
	--glider-shift-center: calc(var(--glider-shift-step) * (var(--glider-viewport-count) - 1) / 2);
	/* dots */
    --glider-dot-width: 16px;
    --glider-dot-height: var(--glider-dot-width);
    --glider-dot-gap: calc(var(--glider-dot-width) / 2);
}
.glider {
    display: flex;
    flex-direction: column;
    gap: var(--glider-gap);
}
.glider__slider {
    position: relative;
}
.glider__viewport {
	overflow-inline: hidden;
}
.glider__track {
	display: flex;
	gap: var(--glider-gap);
    transform: translateX(calc(var(--glider-shift-step) * (var(--glider-active-position) + var(--glider-cloned-count)) * -1 + var(--glider-swipe-shift) * 1px));
    transition: .3s;
    transition-timing-function: ease-in-out;
    margin-inline: auto;
}
.glider__track {
	width: var(--glider-track-width);
}

body:has(.glider__track_isCaptured) {
  -webkit-user-select: none;
  user-select: none;
}
body:has(.glider__track_isCaptured),
body:has(.glider__track_isCaptured) * {
	/*cursor: ew-resize;*/
	cursor: grabbing;
}
.glider__track.glider__track_isCaptured {
	transition: unset;
}

.glider__slide {
	flex: 1;
}
.glider__arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	width: 2em;
	height: 2em;
	font-size: 16px;
	display: flex;
    justify-content: center;
    align-items: center;
	background-color: rgba(0 0 0 / .5);
	color: rgb(255 255 255 / 1);
	cursor: pointer;
    transform: translateY(-50%);
}
.glider__arrow_disabled {
	opacity: .5;
	cursor: inherit;
}
.glider__arrow_hide {
	display: none;
}
.glider__prev {
	left: 1em;
}
.glider__prev::before {
	content: "←";
}
.glider__next {
	right: 1em;
}
.glider__next::before {
	content: "→";
}
.glider__dots {
    display: flex;
    gap: var(--glider-dot-gap);
    justify-content: center;
}
.glider__dot {
    width: var(--glider-dot-width);
    height: var(--glider-dot-height);
    background-color: rgba(0 0 0 / 1);
    border-radius: 50%;
    cursor: pointer;
	opacity: .5;
}
.glider__dot:hover {
	opacity: .75;
}
.glider__dot_active {
	opacity: 1;
}


/* center mode */
.glider.glider_center .glider__track {
    transform: translateX(calc(var(--glider-shift-step) * (var(--glider-active-position) + var(--glider-cloned-count)) * -1 + var(--glider-shift-center) + var(--glider-swipe-shift) * 1px));
}


/* vertical mode */
.glider.glider_vertical .glider__track {
	width: unset;
	height: var(--glider-track-width);
}
.glider.glider_vertical .glider__track {
    flex-direction: column;
}
.glider.glider_vertical .glider__track {
    transform: translateY(calc(var(--glider-shift-step) * (var(--glider-active-position) + var(--glider-cloned-count)) * -1 + var(--glider-swipe-shift) * 1px));
}
.glider.glider_vertical .glider__viewport {
    height: 500px;
    overflow-y: hidden;
}