@layer defaults {
  :root {
    /* Focus rings for keyboard navigation */
    --focus-ring-color: var(--color-link);
    --focus-ring-offset: 1px;
    --focus-ring-size: 2px;
  }

  /* Keyboard navigation */
  a, button, input, textarea, .ui-input, .switch, .btn {
    &:focus-visible {
      border-radius: 0.25ch;
      outline: var(--focus-ring, var(--focus-ring-size) solid var(--focus-ring-color));
      outline-offset: var(--focus-ring-offset);
    }

    &:has(:is(input, textarea):focus-visible)  {
      outline: var(--focus-ring, var(--focus-ring-size) solid var(--focus-ring-color));
      outline-offset: var(--focus-ring-offset);
    }
  }


  .switch:has(:focus-visible) .switch__btn {
    outline: var(--focus-ring, var(--focus-ring-size) solid var(--focus-ring-color));
    outline-offset: var(--focus-ring-offset);
  }

  .no-focus-ring {
    --focus-ring: none;
  }
}