/* mask-image is not interpolable, so the mask edge is registered as a color and animated in its place */
@property --cbssports-carousel-fade-edge {
    syntax: '<color>';
    inherits: true;
    initial-value: #000;
}

cbssports-carousel {
    /* vars */
    --cbssports-carousel-gap: 1.5rem;
    --cbssports-carousel-btn-size: 2.5rem;
    --cbssports-carousel-fade-size: 2.5rem;
    --cbssports-carousel-fade-size-start: 0rem;
    /* opaque keeps the mask flat, so no fade is visible until the boundaries are measured */
    --cbssports-carousel-fade-edge: #000;
    --cbssports-carousel-btn-border-size: 1px;

    /* colors */
    --cbssports-carousel-btn-background: var(--themed-utility-ui-background, #f2f2f2);
    --cbssports-carousel-btn-background-hover: var(--themed-utility-ui-background-hover, #f2f2f2);
    --cbssports-carousel-btn-background-disabled: var(--themed-utility-ui-background-disabled, #f2f2f2);

    --cbssports-carousel-btn-color: var(--themed-utility-icon-secondary, #5f5f5f);
    --cbssports-carousel-btn-color-hover: var(--themed-utility-icon-primary, #181818);
    --cbssports-carousel-btn-color-disabled: var(--themed-utility-icon-disabled, #ababab);

    --cbssports-carousel-btn-border-color: var(--themed-utility-border, #e8e8e8);
    --cbssports-carousel-btn-border-color-hover: var(--themed-utility-border, #e8e8e8);
    --cbssports-carousel-btn-border-color-disabled: var(--themed-utility-border, #e8e8e8);

    /* spacing */
    --cbssports-carousel-btn-offset: 0.5rem;
    --cbssports-carousel-bleed: var(--cbssports-carousel-padding-inline, 0);
    --cbssports-carousel-scroll-padding: var(--cbssports-carousel-padding-inline, var(--cbssports-carousel-bleed, 0));
    --cbssports-carousel-snap-align: start;

    all: unset;
    display: block;
    position: relative;
    transition: --cbssports-carousel-fade-edge 50ms ease-out;
}

cbssports-carousel[data-boundaries-ready] {
    --cbssports-carousel-fade-edge: #0000;
}

@media (prefers-reduced-motion: reduce) {
    cbssports-carousel {
        transition: none;
    }
}

cbssports-carousel[mask-fade],
cbssports-carousel[mask-fade-start],
cbssports-carousel[mask-fade-end] {
    /* this will scroll when target trigger and add spacing on the sides so content is visible */
    --cbssports-carousel-scroll-padding: calc(var(--cbssports-carousel-fade-size, 0) + 0.5rem);
}

@media (hover: none) {
    cbssports-carousel cbssports-carousel-navigation {
        display: none;
    }
}

@media (hover: hover) {
    cbssports-carousel cbssports-carousel-navigation {
        display: none;
    }
    cbssports-carousel:hover cbssports-carousel-navigation {
        display: block;
    }
}

/* adds fade right only */
cbssports-carousel[data-boundaries-ready][mask-fade]:not([at-start]) .cbssports-carousel-scroller,
cbssports-carousel[data-boundaries-ready][mask-fade-start]:not([at-start]) .cbssports-carousel-scroller {
    mask-image: linear-gradient(
        to right,
        var(--cbssports-carousel-fade-edge) 0,
        var(--cbssports-carousel-fade-edge) var(--cbssports-carousel-fade-size-start),
        #000 var(--cbssports-carousel-fade-size),
        #000 100%
    );
}

/* adds fade left ony */
cbssports-carousel[data-boundaries-ready][mask-fade]:not([at-end]) .cbssports-carousel-scroller,
cbssports-carousel[data-boundaries-ready][mask-fade-end]:not([at-end]) .cbssports-carousel-scroller {
    mask-image: linear-gradient(
        to left,
        var(--cbssports-carousel-fade-edge) 0,
        var(--cbssports-carousel-fade-edge) var(--cbssports-carousel-fade-size-start),
        #000 var(--cbssports-carousel-fade-size),
        #000 100%
    );
}

/* fade left and right */
cbssports-carousel[data-boundaries-ready][mask-fade]:not([at-start]):not([at-end]) .cbssports-carousel-scroller {
    /* the half-way stops stay fully transparent so the two layers add up to a flat mask instead of doubling the edge alpha */
    mask-image:
        linear-gradient(
            to right,
            var(--cbssports-carousel-fade-edge) 0,
            var(--cbssports-carousel-fade-edge) var(--cbssports-carousel-fade-size-start),
            #000 var(--cbssports-carousel-fade-size),
            #000 50%,
            transparent 50%,
            transparent 100%
        ),
        linear-gradient(
            to left,
            var(--cbssports-carousel-fade-edge) 0,
            var(--cbssports-carousel-fade-edge) var(--cbssports-carousel-fade-size-start),
            #000 var(--cbssports-carousel-fade-size),
            #000 50%,
            transparent 50%,
            transparent 100%
        );
}

cbssports-carousel .cbssports-carousel-scroller {
    all: unset;
    display: block;
    /* Prevents breaking of the container layout */
    overflow: scroll hidden;
    /* Hides the scrollbar */
    white-space: nowrap;
    /* Prevents wrapping */
    width: 100%;
    /* Ensures the carousel fits its parent */

    -ms-overflow-style: none;
    /* Hides scrollbars in Internet Explorer */
    scrollbar-width: none;
    /* Hides scrollbars in Firefox */

    scroll-snap-type: x mandatory;
    /* Enables snap behavior on the x-axis */
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling for touch devices */
    scrollbar-width: none;
    /* Hides scrollbars in Firefox */
    -ms-overflow-style: none;
    /* Hides scrollbars in IE */
    scrollbar-color: transparent transparent;
    /* Hides scrollbars in Chrome, Safari, and Edge */

    scroll-padding: var(--cbssports-carousel-scroll-padding);
    /* Adds padding to the start and end of the carousel */

    padding: 0.5rem 0;
    /* Adds padding to the start and end of the carousel */
    margin: -0.5rem 0;
    /* Removes the default margin */
}

cbssports-carousel .cbssports-carousel-scroller::-webkit-scrollbar {
    /* Hides scrollbars in Chrome, Safari, and Edge */
    display: none;
}

cbssports-carousel .cbssports-carousel-scroller > * {
    /* reset all */
    all: unset;
    display: flex;
    width: fit-content;
    margin: 0;
    list-style: none;
    padding-inline: var(--cbssports-carousel-bleed);
    column-gap: var(--cbssports-carousel-gap);
    box-sizing: border-box;
    white-space: normal;
}

/* snap children */
cbssports-carousel .cbssports-carousel-scroller > * > * {
    all: unset;
    display: inline-block;
    position: relative;
    scroll-snap-align: var(--cbssports-carousel-snap-align);
}

cbssports-carousel .cbssports-carousel__arrow {
    all: unset;
    width: var(--cbssports-carousel-btn-size);
    height: var(--cbssports-carousel-btn-size);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    outline: revert;
    position: absolute;
    margin: auto;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: var(--cbssports-carousel-btn-background);
    border: var(--cbssports-carousel-btn-border-size) solid var(--cbssports-carousel-btn-border-color);
    transition:
        border-color 0.3s,
        background-color 0.3s;
    position: relative;
    overflow: hidden;
    color: var(--cbssports-carousel-btn-color);

    &:disabled {
        color: var(--cbssports-carousel-btn-color-disabled);
    }

    &:not(:disabled) {
        cursor: pointer;
    }

    &:disabled {
        background-color: var(--cbssports-carousel-btn-background-disabled);
    }

    &:hover:not(:disabled),
    &:active:not(:disabled) {
        color: var(--cbssports-carousel-btn-color-hover);
        background-color: var(--cbssports-carousel-btn-background-hover);
        border-color: var(--cbssports-carousel-btn-border-color-hover);
    }

    /*  */
    & *[class^='icon-moon-'] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        text-indent: -9999px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        text-indent: 0;
        width: 100%;
        height: 100%;
        display: grid;
        font-size: 1rem;
        place-items: center;
    }

    & .cbssports-carousel__arrow__text {
        text-indent: -9999px;
    }
}