.scrollable-list {
    position: relative;
    opacity: 0;
    overflow: hidden;
}

.scrollable-list .scrollable-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-m);
}

.scrollable-list .scrollable-list__title {
    color: var(--neutral-900);
    font: var(--font-large-strong);
}

.scrollable-list .scrollable-list__title-link {
    color: var(--neutral-900);
    font: var(--font-large-strong);
    display: flex;
    align-items: center;
    gap: var(--spacing-xxs)
}

.scrollable-list .scrollable-list__title-arrow {
    fill: var(--neutral-900);
    margin-top: 3px;
    height: 22px;
    width: 20px;
}

.scrollable-list .scrollable-list__arrow {
    pointer-events: none;
    display: none;
    opacity: 0;

    transition:
        background-color 0.15s ease-out,
        box-shadow 0.15s ease-out;

    &:focus-visible {
        outline: 2px solid var(--secondary-base);
        outline-offset: 2px;
    }

    &:disabled {
        pointer-events: none;
        cursor: default;
    }

    &:hover,
    &:active {
        color: var(--neutral-900);
        box-shadow: var(--shadow-medium);
    }

    z-index: 1;
}

.scrollable-list.scrollable-list--arrows-hidden .scrollable-list__arrow {
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease-out;
}

.scrollable-list.scrollable-list--arrows-hidden:hover .scrollable-list__arrow:not(:disabled) {
    opacity: 1;
    pointer-events: auto;
}

.scrollable-list .scrollable-list__arrow-icon {
    width: calc(var(--scrollable-list-button-size) * 0.625);
    height: calc(var(--scrollable-list-button-size) * 0.625);
    flex-shrink: 0;
    transition:
        opacity 0.15s ease-out,
        color 0.15s ease-out;
}

.scrollable-list__container {
    scroll-behavior: smooth;
    scrollbar-width: none;
    overflow: auto;
    display: flex;
    gap: var(--scrollable-list-gap);
    padding: var(--scrollable-list-padding-y-reduced) var(--scrollable-list-inner-padding-x);
    -ms-overflow-style: none;
}

.scrollable-list__container::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.scrollable-list__item {
    display: flex;
    flex-shrink: 0;
}

.scrollable-list__spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.spinner-icon {
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.scrollable-list .scrollable-list__dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
}

.scrollable-list .scrollable-list__dot {
    width: 6px;
    height: 6px;
    border-radius: 12px;
    border: none;
    background-color: var(--neutral-300);
    cursor: pointer;
    transition: width 0.25s ease, background-color 0.25s ease, border-radius 0.25s ease;
    transform-origin: left center;
}

.scrollable-list .scrollable-list__dot.active {
    background-color: var(--neutral-700);
    width: 20px;
}

@media only screen and (min-width: 768px) {
    .scrollable-list__container {
        padding: var(--scrollable-list-padding-y) var(--scrollable-list-inner-padding-x);
    }

    .scrollable-list .scrollable-list__header {
        padding: 0 var(--spacing-xs);
    }

    .scrollable-list .scrollable-list__title,
    .scrollable-list .scrollable-list__title-link {
        font: var(--font-xlarge-strong);
    }

    .scrollable-list .scrollable-list__header-arrows {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .scrollable-list .scrollable-list__header-arrows .scrollable-list__arrow {
        border: 0;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;

        &:disabled {
            color: var(--neutral-300);
            opacity: 1;

            &:hover,
            &:active {
                color: var(--neutral-300);
                box-shadow: none;
            }
        }
    }

    .scrollable-list .scrollable-list__arrow {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        color: var(--neutral-700);
        background-color: var(--neutral-000);
        border: 1px solid var(--neutral-200);
        box-shadow: var(--shadow-small);
        width: var(--scrollable-list-button-size);
        height: var(--scrollable-list-button-size);
        border-radius: var(--scrollable-list-button-size);
        cursor: pointer;

        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .scrollable-list__arrow-left {
        left: calc(var(--scrollable-list-button-size) / 4 * -1);
    }

    .scrollable-list__arrow-right {
        right: calc(var(--scrollable-list-button-size) / 4 * -1);
    }

    .scrollable-list--shows-left-arrow .scrollable-list__arrow-left {
        pointer-events: inherit;
        opacity: 1;
    }

    .scrollable-list--shows-right-arrow .scrollable-list__arrow-right {
        pointer-events: inherit;
        opacity: 1;
    }

    [class*='scrollable-list__snap'] .scrollable-list__container {
        scroll-snap-type: x mandatory;
    }

    .scrollable-list__snap-start .scrollable-list__item {
        scroll-snap-align: start;
    }

    .scrollable-list__snap-center .scrollable-list__item {
        scroll-snap-align: center;
    }

    .scrollable-list__snap-end .scrollable-list__item {
        scroll-snap-align: end;
    }

    .scrollable-list__scroll-disabled .scrollable-list__container {
        overflow: hidden;
    }

    .scrollable-list__items-to-show--media .scrollable-list__container {
        display: grid;
        grid-auto-columns: calc(
            (
                100% -
                    (
                        var(--scrollable-list-gap) *
                            (
                                var(--scrollable-list-items-to-show--medium-up) - 1
                            )
                    )
            ) /
            var(--scrollable-list-items-to-show--medium-up)
        );
        grid-auto-flow: column;
    }

    .scrollable-list__items-to-show .scrollable-list__container {
        display: grid;
        grid-auto-columns: calc(
            (
                100% -
                    (
                        var(--scrollable-list-gap) *
                            (var(--scrollable-list-items-to-show) - 1)
                    )
            ) /
            var(--scrollable-list-items-to-show)
        );
        grid-auto-flow: column;
    }

    .scrollable-list__container-padding-x {
        margin: 0 calc((var(--scrollable-list-gap) * 0.5) * -1);
    }

    .scrollable-list__container-padding-x .scrollable-list__container {
        padding-right: calc(var(--scrollable-list-gap) * 0.5);
        padding-left: calc(var(--scrollable-list-gap) * 0.5);
    }

    .scrollable-list__container-padding-x.scrollable-list__snap-start .scrollable-list__container,
    .scrollable-list__container-padding-x.scrollable-list__snap-center .scrollable-list__container,
    .scrollable-list__container-padding-x.scrollable-list__snap-end .scrollable-list__container {
        scroll-padding: calc(var(--scrollable-list-gap) * 0.5);
    }

    .scrollable-list__container-padding-x .scrollable-list__arrow-left {
        left: calc(
            (var(--scrollable-list-button-size) / 4 * -1) +
                var(--scrollable-list-gap) * 0.5
        );
    }

    .scrollable-list__container-padding-x .scrollable-list__arrow-right {
        right: calc(
            (var(--scrollable-list-button-size) / 4 * -1) +
                var(--scrollable-list-gap) * 0.5
        );
    }
}

@media only screen and (min-width: 1024px) {
    .scrollable-list__container {
        gap: var(--scrollable-list-gap);
    }

    .scrollable-list .scrollable-list__header {
        padding: 0 var(--spacing-s);
    }

    .scrollable-list__items-to-show--media .scrollable-list__container {
        display: grid;
        grid-auto-columns: calc(
            (
                100% -
                    (
                        var(--scrollable-list-gap) *
                            (
                                var(--scrollable-list-items-to-show--large-up) - 1
                            )
                    )
            ) /
            var(--scrollable-list-items-to-show--large-up)
        );
        grid-auto-flow: column;
    }

    .scrollable-list__items-to-show .scrollable-list__container {
        display: grid;
        grid-auto-columns: calc(
            (
                100% -
                    (
                        var(--scrollable-list-gap) *
                            (var(--scrollable-list-items-to-show) - 1)
                    )
            ) /
            var(--scrollable-list-items-to-show)
        );
        grid-auto-flow: column;
    }

    .scrollable-list__container-padding-x {
        margin: 0 calc((var(--scrollable-list-gap-large) * 0.5) * -1);
    }

    .scrollable-list__container-padding-x .scrollable-list__container {
        padding-right: calc(var(--scrollable-list-gap-large) * 0.5);
        padding-left: calc(var(--scrollable-list-gap-large) * 0.5);
    }

    .scrollable-list__container-padding-x.scrollable-list__snap-start .scrollable-list__container,
    .scrollable-list__container-padding-x.scrollable-list__snap-center .scrollable-list__container,
    .scrollable-list__container-padding-x.scrollable-list__snap-end .scrollable-list__container {
        scroll-padding: calc(var(--scrollable-list-gap-large) * 0.5);
    }

    .scrollable-list__container-padding-x .scrollable-list__arrow-left {
        left: calc(
            (var(--scrollable-list-button-size) / 4 * -1) +
                var(--scrollable-list-gap-large) * 0.5
        );
    }

    .scrollable-list__container-padding-x .scrollable-list__arrow-right {
        right: calc(
            (var(--scrollable-list-button-size) / 4 * -1) +
                var(--scrollable-list-gap-large) * 0.5
        );
    }
}

@media only screen and (min-width: 1280px) {
    .scrollable-list__container {
        gap: var(--scrollable-list-gap-large);
    }

    .scrollable-list__items-to-show--media .scrollable-list__container {
        display: grid;
        grid-auto-columns: calc(
            (
                100% -
                    (
                        var(--scrollable-list-gap-large) *
                            (
                                var(--scrollable-list-items-to-show--xlarge-up) - 1
                            )
                    )
            ) /
            var(--scrollable-list-items-to-show--xlarge-up)
        );
        grid-auto-flow: column;
    }
}

@media screen and (min-width: 1500px) {
    .scrollable-list__items-to-show--media .scrollable-list__container {
        display: grid;
        grid-auto-columns: calc(
            (
                100% -
                    (
                        var(--scrollable-list-gap-large) *
                            (
                                var(--scrollable-list-items-to-show--xxlarge-up) - 1
                            )
                    )
            ) /
            var(--scrollable-list-items-to-show--xxlarge-up)
        );
        grid-auto-flow: column;
    }
}