@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

bsp-scrollpanel {
	width: 100%;
	display: block;
	position: relative;
	margin: $spacer 0;
	overflow-x: hidden;

	ul {
		display: flex;
		flex-wrap: nowrap;
		list-style-type: none;
		transition: margin-left 0.5s;
		padding-inline-start: initial;

		li {
			flex: 0 0 13rem;
			@import "product-figure";
			&:not(:first-child) {
				margin-left: $spacer / 2;
			}
		}
	}

	panel-control {
		width: 5rem;
		position: absolute;
		margin-bottom: 1rem;
		display: flex;
		top: 0;
		bottom: 0;
		cursor: pointer;
		span {
			margin: auto;
		}
		&.left {
			left: 0;
			border-top-left-radius: $border-radius-sm;
			border-bottom-left-radius: $border-radius-sm;
			&:hover {
				background: linear-gradient(to right, dimgrey, transparent);
			}
			span {
				margin-left: 1rem;
			}
		}
		&.right {
			right: 0;
			border-top-right-radius: $border-radius-sm;
			border-bottom-right-radius: $border-radius-sm;
			&:hover {
				background: linear-gradient(to left, dimgrey, transparent);
			}
			span {
				margin-right: 1rem;
			}
		}
	}
}
