*, *::before, *::after {
  box-sizing: border-box;
}

*:focus {
  outline: 0.125em solid var(--focus-outline, currentColor);
}

/* Animate focus outline */
@media (prefers-reduced-motion: no-preference) {
  :focus-visible {
    transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
  }
  :where(:not(:active)):focus-visible {
    transition-duration: 0.25s;
  }
}

:where(:not(:active)):focus-visible {
  outline-offset: 5px;
}
