[component^="carousel"] {
	display: grid;
	position: relative;
	box-shadow: inset 0 0 .5em rgba(0, 0, 0, 0.25);
	height: 100%;
}
[component^="carousel"] > button{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 4em;
	aspect-ratio: 0.5;
	margin: 1em;
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: transparent;
	border: 0;
	padding: 0;
}
[component^="carousel"] > button:not([disabled]){
	cursor: pointer;
}
[component^="carousel"] > button:not([disabled]):hover {
	outline: transparent;
	&::before{
		border-color: grey;
	}
}
[component^="carousel"] > button:not([disabled]):focus-visible::before{
	border-color: grey;
}
[component^="carousel"] > button::before{
	content: "";
	height: 2em;
	aspect-ratio: 1;
	display: block;
	border: 0.4em solid black;
	border-bottom: 0;
	border-right: 0;
	transition: opacity .5s;
}
[component^="carousel"] > button:not([disabled])::before{
	opacity: 1;
}
[component^="carousel"] > button[disabled]::before{
	opacity: 0;
}
[component^="carousel"] > button:first-of-type{
	left: 0;
	justify-content: flex-start;
	padding-left: .5em;
}
[component^="carousel"] > button:first-of-type::before{
	rotate: -0.125turn;
}
[component^="carousel"] > button:last-of-type{
	right: 0;
	justify-content: flex-end;
	padding-right: .5em;
}
[component^="carousel"] > button:last-of-type::before{
	rotate: 0.38turn;
}
[component^="carousel"] > ul{
	overflow-y: hidden;
	overflow-x: auto;
	--gap: 2em;
	padding: 0 calc(2.5em + 17px);/*this calc is the width of the button including the shadow*/
	margin: 2px;
	list-style: none;
	display: grid;
	grid-auto-flow: column;
	gap: var(--gap);
	grid-auto-columns: 100%;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	height: calc(100% - 4px);
}
[component^="carousel"] > ul:focus-visible{
	outline: 1px solid black;
}
[component^="carousel"] > ul > li{
	scroll-snap-align: center;
	height: 100%;
	padding-bottom: 1em;
}