.root.svelte-1s6iitn.svelte-1s6iitn {
    position: relative;
    /*overflow: hidden;*/
    max-width: 100%
}

.scroll.svelte-1s6iitn.svelte-1s6iitn {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow-x: auto
}

.scroll.hide-scroll-bar.svelte-1s6iitn.svelte-1s6iitn {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.scroll.hide-scroll-bar.svelte-1s6iitn.svelte-1s6iitn::-webkit-scrollbar {
    display: none
}

.snap-scroll.svelte-1s6iitn.svelte-1s6iitn {
    scroll-snap-type: x mandatory
}

.scroll-content.svelte-1s6iitn.svelte-1s6iitn {
    flex: 1;
    display: flex;
    gap: 3px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 7px;
    justify-content: flex-start
}

.icon.svelte-1s6iitn.svelte-1s6iitn {
    --icon-size: 100%
}

.arrow.svelte-1s6iitn.svelte-1s6iitn {
    width: 36px;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    padding: 0;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column
}

.arrow.svelte-1s6iitn .arrow-circle.svelte-1s6iitn {
    position: absolute;
    top: calc(var(--HorizontalItemList-arrow_pos) - 13px);
    background: white;
    border-radius: 50%;
    opacity: .95;
    box-shadow: 0 0 4px #000000b3;
    width: 30px;
    height: 30px;
    padding: 5px;
    transition: opacity .2s, box-shadow .2s
}

.arrow.arrow-left.svelte-1s6iitn.svelte-1s6iitn {
    left: 0;
    padding-left: 7px
}

.arrow.arrow-right.svelte-1s6iitn.svelte-1s6iitn {
    right: 0;
    padding-right: 7px
}

.arrow.svelte-1s6iitn:hover .arrow-circle.svelte-1s6iitn {
    opacity: 1;
    box-shadow: 0 0 5px #000
}