:root {
  --outline-size: 0.25em;
  --outline-style: dotted;
  --outline-width: 0.0625em;
  --outline-offset: -0.0625em;
  --outline-color: rgba(var(--accent));
  --outline-border-radius: var(--border-radius);
}

/*
https://www.joshwcomeau.com/snippets/react-components/visually-hidden/
screen readers only. Verify by holding down the alt key.
*/
.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  --outline-size: max(0.0625rem, 0.15em);

  outline: var(--outline-width, var(--outline-size)) var(--outline-style, solid) var(--outline-color, currentColor);
  outline-offset: var(--outline-offset, var(--outline-size));
}

a:focus-visible {
  outline-offset: 0.25em;
  outline-width: 0.25em;
  outline-color: currentColor;
}

/* https://css-tricks.com/almanac/properties/a/accent-color/
https://web.dev/articles/accent-color
*/
:root {
  --brand: rgb(102, 204, 255);
  scrollbar-color: var(--brand) Canvas;
}

:root {
  accent-color: var(--brand);
}

:focus-visible {
  outline-color: var(--brand);
}

::selection {
  background-color: var(--brand);
}

::marker {
  color: var(--brand);
}

:is( ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button) {
  color: var(--brand);
}