/*
 * A read-only value and its Copy button (`shared/_copy_field`, the
 * `clipboard` controller): the API key shown once on /account/api, and the
 * snippets on the API docs, in the data face with tabular figures, on the
 * sunken ground a value to take away is set on. The button says "Copied"
 * while the controller has `data-copied` set on the field.
 */
@layer components {
  .copy-field {
    display: grid;
    gap: var(--space-2xs);
  }

  .copy-field__label {
    color: var(--color-ink-muted);
    font-size: var(--text-meta-xs);
    line-height: var(--leading-meta-xs);
  }

  .copy-field__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .copy-field__input {
    flex: 1;
    min-inline-size: 0;
    padding: var(--space-xs) var(--space-sm);
    border: var(--rule-width) solid var(--color-rule-control);
    border-radius: var(--radius-control);
    background-color: var(--color-surface-sunken);
    color: var(--color-ink);
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-input);
    line-height: var(--leading-input);
  }

  .copy-field__input--code {
    resize: vertical;
    white-space: pre;
    overflow-x: auto;
  }

  .copy-field__done {
    display: none;
  }

  .copy-field[data-copied] {
    & .copy-field__idle {
      display: none;
    }

    & .copy-field__done {
      display: inline;
    }
  }
}