//todo carousel change to [data-role='scrollbar'], [data-role='scrollbar']change to .carousel>div
[data-role*='carousel'] {
	--carousel-height: auto;
	position: relative;
	--arrow-size: #{$comp-size-2};
	&.tiny {
		--arrow-size: #{$comp-size-1};
	}
	&.hasNext {
		.arrow.next {
			display: block;
		}
	}
	&.hasPrev {
		.arrow.prev {
			display: block;
		}
	}
	.arrow {
		z-index: 2;
		display: none;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: var(--arrow-size);
		height: var(--arrow-size);
		line-height: var(--arrow-size);
		text-align: center;
		font-size: var(--arrow-size);
		padding: 0;
		background: rgba(255, 255, 255);
		opacity: 0.9;
		border: 1px solid $color-bg-l1;
		color: $color-major;
		cursor: pointer;
		border-radius: 50%;
		&.prev {
			left: 15px;
			transition: opacity, left 0.5s linear;
		}
		&.next {
			right: 15px;
			transition: opacity, right 0.5s linear;
		}
	}
	&:hover {
		.arrow {
			opacity: 1;
		}
		.prev {
			left: 5px;
		}
		.next {
			right: 5px;
		}
	}
}
.landscape {
	@media screen and (max-width: $screen-sm-max) {
		[data-role*='scrollbar'] {
			max-height: 80vh;
		}
	}
}
[data-role*='scrollbar']:not(.moving) {
	> * {
		scroll-snap-align: start;
	}
}
@include only-mobile {
	[data-role*='carousel'] {
		[data-role*='scrollbar'] {
			-ms-scroll-snap-type: x mandatory;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
			-webkit-overflow-scrolling: touch;
			-ms-overflow-style: none;
		}
		&:not(.center) {
			[data-role*='scrollbar'] {
				> * {
					scroll-snap-align: start;
				}
			}
		}
		&.center {
			[data-role*='scrollbar'] {
				> * {
					scroll-snap-align: center;
				}
			}
		}
	}
}
[data-role*='scrollbar'] {
	height: var(--carousel-height);
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
	margin: 0;
	padding: 0;
	@include hidden-scrollbar();
	max-height: 30vh;
	> * {
		flex-shrink: 0;
	}
	&[count] {
		> * {
			height: 100% !important;
			width: 100% !important;
		}
	}
	&[count='1'] {
		> * {
			flex: 0 0 100%;
		}
	}
	&[count='2'] {
		> * {
			flex: 0 0 50%;
		}
	}
	&[count='3'] {
		> * {
			flex: 0 0 33.333333%;
		}
	}
	&[count='4'] {
		> * {
			flex: 0 0 25%;
		}
	}
	&[count='5'] {
		> * {
			flex: 0 0 20%;
		}
	}
}