button,
input,
select,
textarea,
a,
a.button-like,
[role="button"],
summary {
  &:focus-visible {
    border-color: hsl(var(--hue-link) 70% 70%);
    box-shadow:
      0 0 0 calc(var(--border-width) * 1)
      hsl(var(--hue-link) 60% 60% / 0.4),
      0 0 0 calc(var(--border-width) * 2)
      hsl(var(--hue-link) 60% 60% / 0.2);
    outline: none;
  }
}
input:not([type="submit"]),
select,
textarea {
  border-radius: var(--radius-sm);
  border: var(--border-width) solid hsl(var(--color-border));
  padding: calc(var(--spacing-fourth) - var(--border-width));
  background-color: hsl(var(--color-surface) / 0.25);
  transition: background-color var(--transition-base);
  &:focus-visible { background-color: hsl(var(--color-surface) / 0.75); }
}
input[type="checkbox"] {
  appearance: none;
  display: inline-block;
  align-self: center;
  width: var(--spacing);
  height: var(--spacing);
  border: var(--border-width) solid hsl(var(--color-text-subtle));
  position: relative;
  cursor: pointer;
  &:focus-visible { border-color: hsl(var(--color-text)); }
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--spacing-half);
    height: var(--spacing-half);
    background-color: hsl(var(--color-accent));
    opacity: 0;
  }
  &:checked::after {
    opacity: 0.75;
  }
}