.ab-carousel {
	position: relative;
	overflow: hidden;
}

.ab-carousel__track {
	display: flex;
	gap: var(--abc-gap, 0px);
	transition: transform var(--abc-speed, 600ms) ease;
}
.ab-carousel__track > .ab-el {
	flex: 0 0 calc((100% - (var(--abc-per-view, 1) - 1) * var(--abc-gap, 0px)) / var(--abc-per-view, 1));
	min-width: 0;
}
.ab-carousel[data-effect="fade"] > .ab-carousel__track {
	display: grid;
	transition: none;
}
.ab-carousel[data-effect="fade"] > .ab-carousel__track > .ab-el {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--abc-speed, 600ms) ease, visibility 0s linear var(--abc-speed, 600ms);
}
.ab-carousel[data-effect="fade"] > .ab-carousel__track > .ab-el.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--abc-speed, 600ms) ease;
}

.ab-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border: 0;
	border-radius: 4px;
	background: var(--abc-arrow-bg, rgba(0, 0, 0, 0.3));
	color: var(--abc-arrow-color, #fff);
	font-size: var(--abc-arrow-size, 22px);
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.2s, color 0.2s;
}
.ab-carousel__arrow:hover {
	background: var(--abc-arrow-hover-bg, rgba(0, 0, 0, 0.55));
	color: var(--abc-arrow-hover-color, var(--abc-arrow-color, #fff));
}
.ab-carousel.is-static > .ab-carousel__arrow,
.ab-carousel.is-static > .ab-carousel__navi { display: none; }
.ab-carousel__arrow--prev { left: 10px; }
.ab-carousel__arrow--next { right: 10px; }

.ab-carousel__navi {
	position: absolute;
	left: 50%;
	bottom: 10px;
	z-index: 4;
	display: flex;
	gap: 10px;
	transform: translateX(-50%);
}
.ab-carousel__navi button {
	display: block;
	width: 30px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: var(--abc-arrow-bg, rgba(255, 255, 255, 0.5));
	cursor: pointer;
	transition: background 0.15s, width 0.25s;
}
.ab-carousel__navi button[hidden] { display: none; }
.ab-carousel__navi button:hover { background: var(--abc-arrow-hover-bg, #fff); }
.ab-carousel__navi button.is-active { background: var(--abc-arrow-color, #fff); }
.ab-carousel__navi button.is-active:hover { background: var(--abc-arrow-hover-color, var(--abc-arrow-color, #fff)); }
.ab-carousel__navi[data-navi="hidden"] { display: none; }
.ab-carousel__navi[data-navi="dots"] button,
.ab-carousel__navi[data-navi="mixed"] button { width: 10px; border-radius: 50%; }
.ab-carousel__navi[data-navi="mixed"] button.is-active { width: 30px; border-radius: 100px; }

@media (prefers-reduced-motion: reduce) {
	.ab-carousel__track,
	.ab-carousel[data-effect="fade"] > .ab-carousel__track > .ab-el,
	.ab-carousel[data-effect="fade"] > .ab-carousel__track > .ab-el.is-active { transition: none; }
}