.foundation-wrapper-scroll-horizontal {
    --black: #000000;
    --white: #FFFFFF;
    --gray-bullet: #BFBFBF;
    --gray-bullet-active: #161616;
    --gray-bullet-dark: #666666;
}

.foundation-wrapper-scroll-horizontal .cmp-product-card:first-of-type {
    margin-left: 0 !important;
}

/* Arrow Styling */
.foundation-wrapper-scroll-horizontal .glide__arrows {
    top: calc(-30px - 2rem);
}

.foundation-wrapper-scroll-horizontal .glide__arrow {
    background-color: transparent;
    border: 1px solid var(--black);
    border-radius: 20em;
    cursor: pointer;
    -webkit-transition: .3s;
    transition: .3s;
}

.foundation-wrapper-scroll-horizontal .solidLight .glide__arrow {
    background-color: var(--white);
    border-color: var(--white);
}

.foundation-wrapper-scroll-horizontal .solidLight .glide__arrow svg {
    color: var(--black);
}

.foundation-wrapper-scroll-horizontal .solidDark .glide__arrow {
    background-color: var(--black);
    border-color: var(--black);
}

.foundation-wrapper-scroll-horizontal .solidDark .glide__arrow svg {
    color: var(--white);
}

.dhig-theme--dark .foundation-wrapper-scroll-horizontal .outlinedTransparent .glide__arrow {
    border-color: var(--white);
}

.dhig-theme--dark .foundation-wrapper-scroll-horizontal .outlinedTransparent .glide__arrow svg {
    color: var(--white);
}

.foundation-wrapper-scroll-horizontal .glide__arrow--disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Bullet Styling */
.foundation-wrapper-scroll-horizontal .glide__bullets {
    margin: 0 0 0 -0.5rem;
}

.foundation-wrapper-scroll-horizontal .glide__bullet {
    cursor: pointer;
    background: var(--gray-bullet);
    border-radius: 50%;
    border: 0.125rem solid transparent;
}

.foundation-wrapper-scroll-horizontal .glide__bullet--active {
    background-color: var(--gray-bullet-active);
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .foundation-wrapper-scroll-horizontal .glide__bullet {
        padding: .5rem;
    }
}

.foundation-wrapper-scroll-horizontal .stacked-card-group > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/*!** Dark theme carousel controls **!*/
.dhig-theme--dark .foundation-wrapper-scroll-horizontal .glide__bullet {
    background: var(--gray-bullet-dark);
}

.dhig-theme--dark .foundation-wrapper-scroll-horizontal .glide__bullet--active {
    background-color: var(--white);
}

/* Adds the fade on desktop and reach to edge */
@media (min-width: 1040px) {

    .foundation-wrapper-scroll-horizontal .glide__track::after {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 4rem;
        background: linear-gradient(to right, transparent 47%, var(--white));
        pointer-events: none;
    }

    /* dark theme gradient fade */
    .dhig-theme--dark .foundation-wrapper-scroll-horizontal .glide__track::after {
        background: linear-gradient(to right, transparent 47%, var(--black));
    }
}

.foundation-wrapper-scroll-horizontal .glide__track {
    margin-right: -1rem;
    overflow: hidden;

    @media screen and (min-width: 560px) {
        margin-right: -1.5rem;
    }

    @media screen and (min-width: 1040px) {
        margin-right: -5%;
    }
}

/*
Sets the vertical layout of the grid display
Any component that includes the scroll component can set these variables in its clientlibs
param: --grid-layout-gap - the gap between grid items
param: --grid-column-count - the number of columns in the grid
param: --grid-item--min-width - the minimum width of a grid item
*/

.cmp-scroll-wrapper {
    --grid-layout-gap: var(--scroll-grid-layout-gap);
    --grid-column-count: var(--scroll-grid-column-count);
    --grid-item--min-width: var(--scroll-grid-item--min-width);

    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
}