/* @file Global interaction states — WCAG 2.2 AA SC 2.4.11 */

:focus-visible {
  outline: var(--colour-focus-width) solid var(--colour-focus);
  outline-offset: var(--colour-focus-offset);
}

:focus:not(:focus-visible) {
  outline: none;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
  transition: var(--btn-transition, background-color 0.2s ease);
}

nav a {
  transition: color var(--transition-interaction),
              border-color var(--transition-interaction);
}

nav a:hover {
  color: var(--colour-primary);
}

.card:focus-within {
  outline: var(--colour-focus-width) solid var(--colour-focus);
  outline-offset: var(--colour-focus-offset);
}

input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  transition: border-color var(--transition-interaction),
              box-shadow var(--transition-interaction);
}

input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  border-color: var(--colour-focus);
  box-shadow: 0 0 0 var(--colour-focus-width) var(--colour-focus);
  outline: none;
}

[type="checkbox"]:focus-visible,
[type="radio"]:focus-visible {
  outline: var(--colour-focus-width) solid var(--colour-focus);
  outline-offset: var(--colour-focus-offset);
}