/*
    Styling for the ScrollEdgeShadowFrame component: shadows along the top and bottom edges of a
    view that scrolls up and down, or its left and right edges for one that scrolls sideways, while
    content lies past them.
*/
.scroll-edge-shadow-frame
{
    --scroll-edge-shadow-height: 0.75rem;
    --scroll-edge-shadow-color: rgba(0, 0, 0, 0.65);
    --scroll-edge-shadow-fade-duration: 200ms;

    /* The frame takes the scrolling element's place in a column layout, so the element can shrink
       within a height limit there. */
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;

    > *
    {
        min-height: 0;
    }

    /* The shadows sit over the view's edges, so they stay put as the content scrolls under them. */
    &::before,
    &::after
    {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
        height: var(--scroll-edge-shadow-height);
        /* The shadows don't block scrolling or clicks on the content beneath them. */
        pointer-events: none;
        /* Hidden while no content lies past the shadow's edge; the CSS classes below fade it in. */
        opacity: 0;
        transition: opacity var(--scroll-edge-shadow-fade-duration) ease;
    }

    /* Under a sticky header, the top shadow falls just below it, where the script measures it. */
    &::before
    {
        top: var(--scroll-edge-shadow-top, 0px);
        background: linear-gradient(to bottom, var(--scroll-edge-shadow-color), transparent);
    }

    &::after
    {
        bottom: 0;
        background: linear-gradient(to top, var(--scroll-edge-shadow-color), transparent);
    }

    /* For content scrolling sideways, the shadows run down the left and right edges instead. */
    &.scroll-edge-shadow-frame-sideways::before,
    &.scroll-edge-shadow-frame-sideways::after
    {
        top: 0;
        bottom: 0;
        width: var(--scroll-edge-shadow-height);
        height: auto;
    }

    &.scroll-edge-shadow-frame-sideways::before
    {
        right: auto;
        background: linear-gradient(to right, var(--scroll-edge-shadow-color), transparent);
    }

    &.scroll-edge-shadow-frame-sideways::after
    {
        left: auto;
        background: linear-gradient(to left, var(--scroll-edge-shadow-color), transparent);
    }

    &.scroll-edge-shadow-frame-content-above::before,
    &.scroll-edge-shadow-frame-content-below::after
    {
        opacity: 1;
    }
}

/* With less motion asked for, the shadows show and hide at once. */
@media (prefers-reduced-motion: reduce)
{
    .scroll-edge-shadow-frame::before,
    .scroll-edge-shadow-frame::after
    {
        transition: none;
    }
}