/* Sombras en los bordes de un contenedor scrolleable ------------*/
/* https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/#aa-add-scroll-shadows-to-a-scroll-container */
.scroll-shadows {
    /* -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch; */

    background:
        /* Shadow Cover TOP */
        /* This would be needed to shift down the shadow when there is a sticky header:
            linear-gradient(white 30%, rgba(255, 255, 255, 0)) center 40px, */
        linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,

        /* Shadow Cover BOTTOM */
        linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom,

        /* Shadow  TOP */
        linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)) center top,

        /* Shadow  BOTTOM */
        linear-gradient(to top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)) center bottom;


    background-repeat: no-repeat;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
}


/* Necesario para evitar el smooth scroll cuando HTMX llama a scrollTo al ir atrás */
html {
    scroll-behavior: auto;
}


/* 

        radial-gradient(farthest-side at 50% 0,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0)) center top,

      
        radial-gradient(farthest-side at 50% 100%,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0)) center bottom; */




/* Not important to the functionality, just for this particular demo */
/* .scroll-shadows {
    list-style: none;
    padding-right: 0.5rem;
}

.scroll-shadows>* {
    padding: 0.2rem;
}


.scroll-shadows {
    --scrollbarBG: transparent;
    --thumbBG: #90a4ae;

    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

.scroll-shadows::-webkit-scrollbar {
    width: 6px;
}

.scroll-shadows::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}

.scroll-shadows::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG);
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG);
}  */