:root
{
--carousel-control-align: center;
--carousel-previous-background-image: url(images/carousel_previous_bg_image.png);
--carousel-next-background-image: url(images/carousel_next_bg_image.png);
--carousel-play-background-image: url(images/carousel_play_bg_image.png);
--carousel-pause-background-image: url(images/carousel_pause_bg_image.png);
}

.carousel { display: block; position: relative; overflow: hidden; }
.carousel > * { display: none; }
.carousel > *.active { display: block; }
.carousel>.controls { display: flex; align-items: stretch; justify-content: space-between; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1rem; }
.controls.controls-align { align-items: var(--carousel-control-align); }
.carousel:hover button, .carousel:focus-within button { opacity: 1; }
.carousel button { opacity: 0; background-color: transparent; border: none; background-size: cover; width: 3rem; height: 3rem; }
.carousel .control:active { opacity: 0.4;}
.carousel .control-previous { background-image: var(--carousel-previous-background-image);  }
.carousel .control-next { background-image: var(--carousel-next-background-image); background-size: cover; width: 3rem; height: 3rem; }
.carousel .control-pause { background-image: var(--carousel-pause-background-image); background-size: cover; width: 3rem; height: 3rem; }
.carousel.paused .control-pause { background-image: var(--carousel-play-background-image); background-size: cover; width: 3rem; height: 3rem; }
.carousel.nopause .control-pause { display: none; }