/* styles/sections/command-copy.css
 * An install command with a copy button (QKAx0): the command in mono 13 ink-2, then the Copy icon
 * (Pencil export, drawn as a mask in currentcolor) 8px after it, in a 48px row. The button takes
 * the CLI Link states from the actions board (r9m4P): a mint chip on hover, a fern chip with a
 * white glyph when pressed, eased over 120ms. The chip's 3px padding is offset with a negative
 * margin, so the icon does not move. The board draws no copied state; js/cli-copy.js copies
 * [data-cli-copy] and writes the polite status inside the button. Hit area 44px. */
@layer sections {
  .command-copy {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: 48px;
    margin: 0;
  }

  .command-copy__text {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 16px;
    white-space: nowrap;
    color: var(--ink-2);
  }

  .command-copy__button {
    --chip: var(--mint);
    --chip-pressed: var(--fern);
    --chip-pressed-text: var(--white);
    position: relative;
    display: inline-grid;
    place-items: center;
    margin: -3px;
    padding: 3px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background-color var(--dur-fast), color var(--dur-fast);
  }

  .command-copy__button::before {
    content: "";
    position: absolute;
    inset: -12px;
  }

  .command-copy__icon {
    display: block;
    width: 14px;
    height: 14px;
    background: currentcolor;
    mask: url("/assets/figures/ai-transformation/icon-copy.svg") center / contain no-repeat;
  }

  @media (hover: hover) {
    .command-copy__button:hover {
      background: var(--chip);
    }
  }

  .command-copy__button:active {
    background: var(--chip-pressed);
    color: var(--chip-pressed-text);
  }

  @media (forced-colors: active) {
    .command-copy__icon {
      background: CanvasText;
      forced-color-adjust: none;
    }
  }
}