.carousel__container {
	position: relative;
}

.carousel__viewport {
	overflow: hidden;
}

.carousel__items {
	align-items: flex-start;
	display: flex;
	will-change: transform;
}

[dir=ltr] .carousel__items {
	margin-left: auto;
	margin-right: auto;
}

[dir=rtl] .carousel__items {
	margin-right: auto;
	margin-left: auto;
}

/* Hack to prevent flex ignoring margin of last item */
.carousel__items::after {
	content: "";
	flex: 0 0 0.1px;
	height: 1px;
}

.carousel__item {
	flex-shrink: 0;
}

.carousel__progress-bar {
	height: 2px;
	width: 90%;
}

[dir] .carousel__progress-bar {
	background: var(--color-main-020);
	margin: var(--spacing-01) auto 0 auto;
}

.carousel__progress-bar-completed-bar {
	height: 100%;
}

[dir] .carousel__progress-bar-completed-bar {
	background: var(--color-main-080);
}

.carousel__arrow-left,
.carousel__arrow-right {
	display: block;
	position: absolute;
	top: 50%;
	z-index: 1;
}

[dir] .carousel__arrow-left, [dir] .carousel__arrow-right {
	cursor: pointer;
	transform: translateY(-50%);
}

[dir=ltr] .carousel__arrow-left {
	left: -28px;
}

[dir=rtl] .carousel__arrow-left {
	right: -28px;
}

[dir=ltr] .carousel__arrow-right {
	right: -28px;
}

[dir=rtl] .carousel__arrow-right {
	left: -28px;
}

.carousel__arrow-left:disabled,
.carousel__arrow-right:disabled {
	fill: var(--color-main-020);
}

/* stylelint-disable-next-line selector-max-type */
.carousel__arrow-left svg,
.carousel__arrow-right svg {
	height: 38px;
	width: 38px;
}

/* stylelint-disable-next-line selector-max-type */
[dir=ltr] .carousel__arrow-left svg {
	transform: rotate(180deg);
}
[dir=rtl] .carousel__arrow-left svg {
	transform: rotate(-180deg);
}

/* stylelint-disable-next-line selector-max-type, selector-max-compound-selectors */
[dir="rtl"] .carousel__arrow-left svg {
	transform: none;
}

/* stylelint-disable-next-line selector-max-type, selector-max-compound-selectors */
[dir="rtl"] .carousel__arrow-right svg {
	transform: rotate(180deg);
}

@media screen and (min-width: 768px) {
	.carousel__progress-bar {
		width: 80%;
	}
	[dir] .carousel__progress-bar {
		margin: var(--spacing-07) auto 0 auto;
	}

	[dir=ltr] .carousel__arrow-left {
		left: -36px;
	}

	[dir=rtl] .carousel__arrow-left {
		right: -36px;
	}

	[dir=ltr] .carousel__arrow-right {
		right: -36px;
	}

	[dir=rtl] .carousel__arrow-right {
		left: -36px;
	}

	[dir=ltr] .carousel--display-arrows-inside .carousel__arrow-left {
		left: 0;
	}

	[dir=rtl] .carousel--display-arrows-inside .carousel__arrow-left {
		right: 0;
	}

	[dir=ltr] .carousel--display-arrows-inside .carousel__arrow-right {
		right: 0;
	}

	[dir=rtl] .carousel--display-arrows-inside .carousel__arrow-right {
		left: 0;
	}
}