:root {
  --focus-transitions:
    outline-offset var(--animation-duration-in, 250ms) ease-in-out,
    outline-color var(--animation-duration-in, 250ms) ease-in-out,
    border-color var(--animation-duration-in, 250ms) ease-in-out,
    shadow var(--animation-duration-in, 250ms) ease-in-out;
}

@utility focus-style-outline {
  --focus-outline: 2px solid var(--color-focus);
  --focus-outline-offset: calc(var(--spacing) * 0.5);
}

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

@utility focus-style-shadow {
  --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8)
    color-mix(in srgb, var(--color-focus) 35%, transparent);

  @variant dark {
    --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5)
      calc(var(--spacing) * 0.8)
      color-mix(in srgb, var(--color-focus) 60%, transparent);
  }
}

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

@utility focus-style-apply {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-box-shadow);
  border-color: var(--focus-border-color);
}

@utility focusable {
  &:focus-visible {
    @apply focus-style-apply;
  }
}