/* Accessibility: the keyboard focus ring and reduced motion. Loaded last so that it wins over every component. */

/* ----------------------------------------------------------------------
   Keyboard focus ring
   ------------------------------------------------------------------- */

/* keyboard users get a clear focus ring; people who prefer less motion get none */

button:focus-visible,
a:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}