cbssports-carousel {
    /* vars */
    --cbssports-carousel-gap: 0.5rem;
    --cbssports-carousel-btn-size: 2.5rem;
    --cbssports-carousel-fade-size: 2.5rem;
    --cbssports-carousel-fade-size-start: 0rem;
    --cbssports-carousel-btn-border-size: 0;

    /* colors */
    --cbssports-carousel-btn-background: var(--Surface-Tertiary, #f2f2f2);
    --cbssports-carousel-btn-background-hover: var(--Surface-Tertiary, #f2f2f2);
    --cbssports-carousel-btn-background-disabled: var(--Utility-Icon-Secondary, #f2f2f2);

    --cbssports-carousel-btn-color: var(--Utility-Icon-Secondary, #5f5f5f);
    --cbssports-carousel-btn-color-hover: var(--Utility-Icon-Primary, #181818);
    --cbssports-carousel-btn-color-disabled: var(--Utility-Icon-Disabled, #ababab);

    --cbssports-carousel-btn-border-color: transparent;
    --cbssports-carousel-btn-border-color-hover: transparent;
    --cbssports-carousel-btn-border-color-disabled: transparent;

    /* 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;
}

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[mask-fade]:not([at-start]) .cbssports-carousel-scroller,
cbssports-carousel[mask-fade-start]:not([at-start]) .cbssports-carousel-scroller {
    mask-image: linear-gradient(to right, transparent 0, transparent var(--cbssports-carousel-fade-size-start), #000 var(--cbssports-carousel-fade-size), #000 100%);
}

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

/* fade left and right */
cbssports-carousel[mask-fade]:not([at-start]):not([at-end]) .cbssports-carousel-scroller {
    mask-image: linear-gradient(
            to right,
            transparent 0,
            transparent var(--cbssports-carousel-fade-size-start),
            #000 var(--cbssports-carousel-fade-size),
            #000 50%,
            transparent 50%,
            transparent 100%
        ),
        linear-gradient(
            to left,
            transparent 0,
            transparent 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;
}

/* 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;
    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;
    }
}