@utility focus-style-outline {
  --focus-outline: 2px solid var(--color-focus);
  --focus-outline-offset: calc(var(--spacing) * 0.25);
  --focus-outline-transition: outline-offset var(--animation-duration-in, 250ms);
}

@utility focus-style-border {
  --focus-border-color: var(--color-focus);
}

@utility focus-style-shadow {
  --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
}

@utility focus-style-none {
  --focus-outline: none;
  --focus-outline-offset: 0;
  --focus-outline-transition: none;
  --focus-box-shadow: none;
  --focus-border-color: inherit;
}


@utility focusable {
  transition: var(--focus-outline-transition);

  &:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
    box-shadow: var(--focus-box-shadow);
    border-color: var(--focus-border-color);
  }
}