/* /assets/css/custom-elements.css
    This holds all the structure and
    base colours for custom elements.
*/

/* Carousel */

/* get attribute from .carousel-wrapper */
.carousel-wrapper {
    --carousel-active: attr(data-carousel-active);
    --carousel-slides: attr(data-carousel-slides);

    display: block;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}

.carousel-wrapper > .carousel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.5rem;
}

.carousel-wrapper > .carousel > .slide {
    --shadow-opacity: 0.2;
    border: 1px solid #000000;
    padding: 0.5rem;
    display: flex;
    flex-basis: 20%;
    box-shadow: 0 0 0.5em 0.1em rgba(0, 0, 0, var(--shadow-opacity));
}

.carousel-wrapper > .carousel > .slide.selected {
    --shadow-opacity: 0.5;
    display: flex;
    flex-basis: 50%;
    padding: 0.5rem;
    box-shadow: 0 0 1em 0.2em rgba(0, 0, 0, var(--shadow-opacity));
}

.carousel-wrapper > .carousel-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.carousel-wrapper > .carousel-nav > .slide-dot {
    flex-basis: 5%;
    background-color: #ffffff;
    border: 1px solid #000000;
    border-radius: 999px;
    font-size: 0;
    margin: 0.5rem;
}

.carousel-wrapper > .carousel-nav > .slide-dot:nth-child(var(--carousel-active)) {
    background-color: #000000;
}