/* ===========================================================================
 * The two utilities components reach for that are not components themselves.
 * ======================================================================== */

/* Present to assistive technology, absent from the layout. Used for the status
   text a loading button announces, and for headings that name a region the eye
   reads structurally but a screen reader cannot. */
.visually-hidden {
  position: absolute;
  width: var(--border-width);
  height: var(--border-width);
  padding: 0;
  margin: calc(var(--border-width) * -1);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The styleguide forces a focus ring on for a static screenshot. Live focus is
   still the thing to trust — this only exists so the state is visible in a
   catalogue page nobody is tabbing through. */
.force-focus-visible .ui-button,
.force-focus-visible .ui-select__trigger {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-colour-neutral);
}
.force-focus-visible .ui-button--primary { outline-color: var(--focus-colour-on-gold); }
.force-focus-visible .ui-button--destructive { outline-color: var(--focus-colour-danger); }
.force-focus-visible .ui-input {
  border-color: var(--gold-100);
  outline: var(--focus-halo-width) solid var(--gold-halo);
  outline-offset: 0;
}