/*
 * DD-15 Reference-number chip — app/components/ui/reference_chip_component.rb
 * Copy/check icon swap driven by clipboard_controller.js toggling
 * .is-copied on .ui-reference-chip__icon-wrap. On a failed copy, the
 * controller toggles .is-failed instead — the copy icon tints danger as
 * a brief error affordance rather than swapping to the check icon.
 */

.ui-reference-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  padding: 8px;
  background: var(--color-surface-inset);
  border: none;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-ink);
  cursor: default;
}

.ui-reference-chip--copyable {
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.ui-reference-chip--copyable:hover {
  background: var(--color-surface-inset-solid);
}

.ui-reference-chip--copyable:focus-visible {
  box-shadow: var(--focus-halo);
}

.ui-reference-chip__text {
  font-variant-numeric: var(--numeric-tabular);
}

.ui-reference-chip__icon-wrap {
  position: relative;
  display: inline-grid;
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.ui-reference-chip__icon {
  grid-area: 1 / 1;
  display: inline-flex;
  color: var(--color-ink-muted);
  transition: opacity var(--duration-fast) var(--ease-out);
}

.ui-reference-chip__icon svg {
  display: block;
}

.ui-reference-chip__icon--check {
  opacity: 0;
  color: var(--color-success);
}

.ui-reference-chip__icon-wrap.is-copied .ui-reference-chip__icon--copy {
  opacity: 0;
}

.ui-reference-chip__icon-wrap.is-copied .ui-reference-chip__icon--check {
  opacity: 1;
}

.ui-reference-chip__icon-wrap.is-failed .ui-reference-chip__icon--copy {
  color: var(--color-danger);
}