/* jelly-ui: the loading ring nav.js draws when a page swap isn't instant
   (jellytodo#84). The whole of the module's CSS -- everything else nav.js does
   is structural, and the two regions it swaps are the app's own.

   nav.js owns when this appears (200ms after the click, and only if the answer
   hasn't arrived) and where (inside the link, after its text; or on a sidebar
   row, before the name). This file is only what it looks like, and it is
   deliberately sized and coloured in inherited units -- 1em-relative box,
   currentColor stroke -- so the same element is a ring the height of a 14pt
   board name in one place and the height of a 10pt sidebar row in another,
   without either consumer having to say so. That includes the dark-mode flip:
   currentColor is already whatever the text beside it is. */

.jelly_nav_spinner {
    display: inline-block;
    box-sizing: border-box;

    /* A sidebar row is a flex container, and a ring squashed to a lens is not
       a ring. */
    flex-shrink: 0;

    /* Matched to the text it sits beside rather than to a fixed pixel size.
       0.85em rather than a full em: an em box is taller than the letters in it,
       so a 1em circle next to a title reads as bigger than the title. */
    width: 0.85em;
    height: 0.85em;

    margin-left: 6px;

    /* Ordinary inline flow, which means a ring appended to a title that already
       fills its line drops onto the next one and grows what it's in by a line
       for as long as the load takes. That is the better of the two available
       failures: the fix for it is a negative right margin, which discounts the
       ring's own width from the line-breaking decision and then draws it
       overlapping whatever sits to the right -- on a jellytodo ticket card, the
       drag handle. A ring on a line of its own reads as a ring; a ring drawn
       through a control reads as a bug. */

    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;

    animation: jelly_nav_spin 0.7s linear infinite;
}

/* Before the thing it belongs to instead of after it -- what the sidebar wants,
   since its rows are right-aligned against the content pane and a ring on the
   right would push every name it appeared beside out of that alignment. */
.jelly_nav_spinner_leading {
    margin-left: 0px;
    margin-right: 6px;
}

@keyframes jelly_nav_spin {
    to { transform: rotate(360deg); }
}

/* Reduced motion: the ring still appears, and still appears only once the swap
   has stopped feeling instant -- it just doesn't turn. What carries the message
   is that something is now there that wasn't a moment ago; the rotation only
   adds that it's still going.

   The gap in the ring is closed at the same time. Open, it reads as a shape
   caught mid-spin by a broken animation; closed, it's a plain circle that
   appeared next to what was clicked. */
@media (prefers-reduced-motion: reduce) {
    .jelly_nav_spinner {
        border-top-color: currentColor;
        animation: none;
    }
}