/*
 * BHD Orb v1
 * https://design.bhd.om/orb.css
 *
 * Pairs with orb.js. The canvas draws the dots; this file only owns the box,
 * the colour and the accessible label. Colour comes from `color`, so the orb
 * follows tokens.css in both themes with no dark-mode branch.
 */
.bhd-orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--bhd-orb-size, 64px);
  block-size: var(--bhd-orb-size, 64px);
  color: var(--primary, currentColor);
  vertical-align: middle;
  flex: none;
}

.bhd-orb canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* The label is for screen readers. Visible wait text is the caller's job, so
 * they can word it for the surface ("Reading the invoice", "Matching the line"). */
.bhd-orb__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Orb beside a line of wait text, the common case. */
.bhd-orb-row {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted-foreground, inherit);
}
.bhd-orb-row .bhd-orb { color: var(--primary, currentColor); }