.focus {
  &:focus {
    border-color: red;
  }
}

&:focus-within {
  border-color: red;
}

/* Use `&:focus-visible` when you want focus ring to be visible
   only when user navigates with keyboard, for example by pressing Tab key */
.focus-auto {
  &:focus-visible {
    outline: 2px solid var(--mantine-color-red-filled);
    outline-offset: 2px;
  }
}
