.tags-autocomplete {
  margin: 0.25em 0 0;
  font-size: 0.875em;

  /* The chips wrap onto stacked lines with nothing between them, so the
     margin-block is what keeps one row's target off the next one's. */
  .suggestion {
    font: inherit;
    padding: 0.3em 0.7em;
    margin-right: 0.15em;
    margin-block: 0.15em;
    border: 0.0625rem solid var(--border-color);
    border-radius: 1em;
    background: none;
    color: var(--link-color);
    cursor: pointer;
    user-select: none;
    transition: 0.2s ease all;

    &:hover {
      color: var(--link-hover-color);
      border-color: var(--link-hover-color);
    }

    /* Pressed means the tag is in the input right now — including tags typed
       by hand, since the input is the source of truth.

       A wash rather than a solid fill: the solid accent belongs to the
       Regenerate button next to it, and two controls in the same row reading as
       the same thing was confusing. The border carries the state — the wash is
       only ~1.15:1 against the page — and the label goes to --fg-color, which
       --link-color could not do on a tint without dropping under 3.5:1. */
    &[aria-pressed="true"] {
      background: var(--accent-wash-color);
      border-color: var(--link-color);
      color: var(--fg-color);
    }
  }

  .suggestion-key {
    margin-right: 0.4em;
    font-size: 0.85em;
    opacity: 0.65;
    font-variant-numeric: tabular-nums;
  }

  /* An action, not a tag, so it takes .button's language — bold label, accent
     fill, 0.5em radius — at the chip's compact size rather than the 44px one,
     so it doesn't outweigh the suggestions it sits beside. */
  .regenerate-suggestions {
    font: inherit;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.3em 0.7em;
    margin-left: 0.15em;
    margin-block: 0.15em;
    border: 0.0625rem solid transparent;
    border-radius: 0.5em;
    background: var(--highlight-color);
    color: var(--button-fg-color);
    cursor: pointer;
    user-select: none;
    transition: 0.2s ease all;

    &:active {
      box-shadow:
        inset 0 0.125em 0.25em rgb(0 0 0 / 0.4),
        inset 0 0.25em 0.5em rgb(0 0 0 / 0.2);
    }
  }

  /* inline-block so the spin transform applies */
  .regenerate-icon {
    display: inline-block;
    line-height: 1;
  }
}

/* Turbo marks the frame busy while it reloads: dim the stale suggestions and
   spin the regenerate control until the new ones land. */
turbo-frame[id^="tag_suggestions_"][busy] {
  .suggestion {
    opacity: 0.5;
    pointer-events: none;
  }

  /* Dim the whole control rather than recolouring the label: it is filled now,
     so a --mid-color label would sit on the accent instead of the page. */
  .regenerate-suggestions {
    cursor: wait;
    opacity: 0.5;
    pointer-events: none;

    .regenerate-icon {
      animation: regenerate-spin 0.8s linear infinite;

      @media (prefers-reduced-motion: reduce) {
        animation: none;
      }
    }
  }
}

@keyframes regenerate-spin {
  to {
    transform: rotate(360deg);
  }
}