@layer components {
  .copy {
    --icon-size: var(--button-icon-size);

    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-inline-size: var(--tap-min);
    min-block-size: var(--tap-min);
    padding-inline: var(--space-3);
    font: var(--type-label);
    color: var(--color-link);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .copy .icon--check,
  .copy[data-copied] .icon--clipboard {
    display: none;
  }

  .copy[data-copied] {
    color: var(--color-done);
  }

  .copy[data-copied] .icon--check {
    display: inline-block;
  }

  .copy[data-failed] {
    color: var(--color-danger);
  }
}