/* Copy Button — Wingspay Platform Component
 * Canonical source: wingspay-site/components/copy-button/ (AD-011).
 * Consumes design tokens already defined in wingspay-site's
 * assets/css/styles.css :root — this file defines NO new color values
 * of its own except --status-operational, which this component was the
 * first to actually add to :root (DESIGN_TOKENS.md already specified
 * the value; no earlier component had introduced it as a real token).
 *
 * Any OTHER repo consuming this component (wingspay-dashboard,
 * wingspay-docs, and eventually wingspay-auth/api/sandbox/status) must
 * add this once to its own :root if it isn't already present:
 *   --status-operational:#2E9E5B;
 * Status Badge, when built, reuses this same token — do not redefine
 * it with a different value there.
 */

.copy-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:38px;
  padding:0 14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.copy-button:hover{
  border-color:var(--gold-soft);
  background:var(--bg-soft);
}
.copy-button:active{
  background:var(--bg);
}
.copy-button:focus-visible{
  outline:2px solid var(--gold-text);
  outline-offset:2px;
}
.copy-button[disabled]{
  cursor:default;
  opacity:.5;
  pointer-events:none;
}

/* Icon-only compact variant — same states, no visible label. Used
 * wherever horizontal space is tight (e.g. inside a Data Table row) or
 * a copy affordance is one of several icon-buttons already grouped
 * together (e.g. paired with a reveal/hide toggle in Token Row). Label
 * stays in the DOM for screen readers, just visually hidden. */
.copy-button--icon-only{
  width:38px;
  padding:0;
  justify-content:center;
  gap:0;
}
.copy-button--icon-only .copy-button__label{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* On-dark variant — for embedding directly inside a dark monospace
 * value panel (Token Row's own value block, Secret Field's masked
 * display), where the default white/bordered treatment above would be
 * the wrong surface. Ghost-style: no border, no fill, icon-only by
 * convention (always pair with .copy-button--icon-only in this
 * context) since a labeled button reads as too heavy floating inside
 * a code-style panel. */
.copy-button--on-dark{
  background:transparent;
  border:none;
  color:#9AA3B6;
}
.copy-button--on-dark:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}
.copy-button--on-dark:active{
  background:rgba(255,255,255,.14);
}
.copy-button--on-dark:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:2px;
}

/* Icon and label triplets: default / copied / error. CSS drives which
 * one is visible via the button's state class — JS only ever toggles
 * .is-copied / .is-error, never touches text content or icon markup
 * directly. Keeps behavior and presentation cleanly separated, and
 * keeps every string in markup where the platform's data-i18n
 * convention can reach it (see README — do not hardcode label
 * strings from JS). */
.copy-button__icon{
  display:none;
  width:16px;
  height:16px;
  flex-shrink:0;
}
.copy-button__icon svg{
  width:100%;
  height:100%;
}
.copy-button__icon--default{display:flex;}
.copy-button.is-copied .copy-button__icon--default,
.copy-button.is-error .copy-button__icon--default{display:none;}
.copy-button.is-copied .copy-button__icon--copied{display:flex;}
.copy-button.is-error .copy-button__icon--error{display:flex;}

.copy-button__label{display:inline;}
.copy-button.is-copied .copy-button__label--default,
.copy-button.is-error .copy-button__label--default{display:none;}
.copy-button__label--copied,
.copy-button__label--error{display:none;}
.copy-button.is-copied .copy-button__label--copied{display:inline;}
.copy-button.is-error .copy-button__label--error{display:inline;}

.copy-button.is-copied{
  border-color:var(--status-operational);
  color:var(--status-operational);
  background:rgba(46,158,91,.08);
}
.copy-button--on-dark.is-copied{
  background:rgba(46,158,91,.16);
  color:#6FD196;
}

.copy-button.is-error{
  /* Reuses wingspay-dashboard's existing field-error-text (#B23A3A) /
     form-error-banner (#FDECEC bg, #F3C6C6 border) palette rather than
     inventing a new error color — same reasoning as reusing
     --status-operational above: don't re-derive what already exists. */
  border-color:#F3C6C6;
  color:#B23A3A;
  background:#FDECEC;
}
.copy-button--on-dark.is-error{
  background:rgba(178,58,58,.2);
  color:#E28880;
}

@media (prefers-reduced-motion:reduce){
  .copy-button{transition:none;}
}