@theme {
  --ring-color-*: initial;

  --ring-color-primary: var(--color-primary-200);
  --ring-color-success: var(--color-success-200);
  --ring-color-warning: var(--color-warning-200);
  --ring-color-critical: var(--color-critical-200);
}

@utility focus-ring {
  &:focus,
  &:has(:focus) {
    outline: none;
  }

  &:focus-visible,
  &:has(:focus-visible) {
    @apply ring-3 ring-offset-3;
  }
}

@utility focus-ring-primary {
  @apply focus-ring;

  &:focus-visible,
  &:has(:focus-visible) {
    @apply ring-primary;
  }
}

@utility focus-ring-success {
  @apply focus-ring;

  &:focus-visible,
  &:has(:focus-visible) {
    @apply ring-success;
  }
}

@utility focus-ring-warning {
  @apply focus-ring;

  &:focus-visible,
  &:has(:focus-visible) {
    @apply ring-warning;
  }
}

@utility focus-ring-critical {
  @apply focus-ring;

  &:focus-visible,
  &:has(:focus-visible) {
    @apply ring-critical;
  }
}