/* ==========================================================================
   Copy button — a pill that copies a string to the clipboard.

   Deliberately not a .button. Every other button in the app asks for a page
   to change; this one hands you something and leaves the page where it was,
   and at button size beside a field it would read as the more important of
   the two controls. So it borrows the chip's proportions instead — the same
   pill the status chips use, made interactive.

     <button type="button" class="copy-button" …>
       <span data-copy-button-target="label">copy</span>
     </button>

   LOAD ORDER AND SPECIFICITY. Propshaft sorts logical paths alphabetically,
   so this file loads before utilities.css, whose BUTTON:not(.editor-button)
   rule sets the padding, fill, radius and shadow of every button in the app.
   That selector is (0,1,1), so a plain .copy-button loses on specificity and
   BUTTON.copy-button ties and then loses on order. The :root wrapper buys the
   one pseudo-class that settles it — the same trick, for the same reason, as
   the one at the top of forms.css.

   The pill is sized in rem and its own font-size, so it does not grow with
   whatever it sits next to. It never stretches and never wraps: it is meant
   to hold the end of a row containing a field, and a two-line "copied" would
   move the field every time somebody used it.
   ========================================================================== */

:root {

  BUTTON.copy-button {
    flex: none;
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-muted);
    color: var(--crepusculo);
    font-size: 0.8125rem;
    line-height: 1.6;
    font-weight: var(--fw-bold);
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
  }

  BUTTON.copy-button:hover {
    background-color: var(--secondary-button-background-hover-color);
    color: var(--crepusculo);
  }

  /* The controller sets data-copied for the few seconds the label reads
     "copied". The word carries the message on its own; this only keeps the
     pill from looking untouched while it says something happened. */
  BUTTON.copy-button[data-copied] {
    border-color: var(--autobus-escolar);
    background-color: var(--trigo);
    color: var(--chocolate);
  }
}

/* A field with the pill at the end of it. The field takes the room that is
   left; min-width:0 is what lets it, since main.css gives inputs width:100%
   and a flex item will not shrink below its own width without it. */
.copy-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--input-max-width);
}

.copy-row INPUT {
  flex: 1 1 auto;
  min-width: 0;
}