/* Ring + tick: the bowl of the logo's "g", in place of arrows. The tick points where the control
   goes; at rest it sits about 57° above horizontal, so each direction is a rotation from there. */
@layer components {
  .ring, .back::before {
    --ring-turn: 57deg;

    display: inline-block;
    flex: none;
    inline-size: 1.5em; /* the ring fills 70% of its square box */
    aspect-ratio: 1;
    vertical-align: middle;
    background: currentColor;
    mask: url("/assets/motifs/ring-e0d35887.svg") center / contain no-repeat;
    rotate: var(--ring-turn);
    transition: rotate var(--duration-flip) steps(3); /* an 8-bit wind, in three hard steps (kirupa.com) */
  }

  .ring--back, .back::before { --ring-turn: -123deg; }
  .ring--down { --ring-turn: 147deg; } /* tick down: it reads as a map pin, so it marks an address too */
  .ring--up { --ring-turn: -33deg; }

  .back {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);

    &::before { content: ""; }
  }

  /* Edit: a solid pencil in currentColor, sized and set like the ring it sits beside. */
  .pencil {
    display: inline-block;
    inline-size: 1.1em;
    aspect-ratio: 1;
    vertical-align: -0.15em;
    background: currentColor;
    mask: url("/assets/motifs/pencil-7a24ee62.svg") center / contain no-repeat;
  }

  /* Loading: while Turbo submits a form it marks it aria-busy, and its button's ring spins. */
  form[aria-busy=true] .ring { animation: ring-spin 800ms steps(8) infinite; }

  @keyframes ring-spin {
    to { rotate: calc(var(--ring-turn) + 1turn); }
  }

  /* The control winds its glyph a quarter turn on hover and press. */
  @media (prefers-reduced-motion: no-preference) {
    :is(a, button):is(:hover, :focus-visible, :active) > .ring,
    .back:is(:hover, :focus-visible, :active)::before { rotate: calc(var(--ring-turn) + 90deg); }
  }
}