/* When the user picks what a table's cells show, the values it replaces slide out, then the new ones
   slide in after them, unless the user's system asks for less motion. They slide up by default; a
   direction CSS class on the region slides them sideways instead, as a value following a drag does.
   The script keeps each slide's CSS class on the region around the values for the slide's time, set
   to match. */
@media (prefers-reduced-motion: no-preference)
{
    /* The values move by their offset from where they are laid out, so nothing else moves; each
       starts at no offset, so the slide out has a place to move from. */
    .changing-cell-value
    {
        position: relative;
        top: 0;
        left: 0;
    }
    /* The outgoing values move away and fade out. The distance, about a third of the text's size
       up and down, half of it sideways, is enough to read as motion; it can be tuned, together
       with the slide in's distance. */
    .outgoing-cell-values .changing-cell-value
    {
        top: var(--cell-value-slide-out-top, -0.35em);
        left: var(--cell-value-slide-out-left, 0);
        opacity: 0;
        transition: top 100ms ease-in, left 100ms ease-in, opacity 100ms ease-in;
    }
    .incoming-cell-values .changing-cell-value
    {
        animation: cell_value_slide_in 150ms ease-out;
    }
}

/* Values sliding to the left leave to the left and arrive from the right; to the right, the
   reverse. */
.cell-values-sliding-left
{
    --cell-value-slide-out-top: 0;
    --cell-value-slide-in-top: 0;
    --cell-value-slide-out-left: -0.5em;
    --cell-value-slide-in-left: 0.5em;
}

.cell-values-sliding-right
{
    --cell-value-slide-out-top: 0;
    --cell-value-slide-in-top: 0;
    --cell-value-slide-out-left: 0.5em;
    --cell-value-slide-in-left: -0.5em;
}

/* The incoming values move into place from the opposite side, fading in: only the start is given,
   so they end at their laid-out place, fully opaque. */
@keyframes cell_value_slide_in
{
    from
    {
        top: var(--cell-value-slide-in-top, 0.35em);
        left: var(--cell-value-slide-in-left, 0);
        opacity: 0;
    }
}