/* === Focus Ring === */
@utility focus-ring {
  @apply ring-2 ring-focus ring-offset-0 ring-offset-background outline-none;
  /* Overrides the ring offset from the theme variables */
  --tw-ring-offset-width: var(--ring-offset-width);
}

@utility focus-field-ring {
  @apply ring-2 ring-focus ring-offset-0 outline-none;
  /* No separation - ring sits directly against the element */
  --tw-ring-offset-width: 0px;
}

@utility invalid-field-ring {
  /* Unfocused: show 1px outline */
  @apply outline-1 outline-danger outline-solid;
  --tw-ring-offset-width: 3px;

  /* Focused: show 2px ring in danger color, remove outline */
  &:focus,
  &:focus-visible,
  &[data-focused="true"],
  &[data-focus-visible="true"],
  &:focus-within,
  &[data-focus-within="true"] {
    @apply ring-2 ring-danger ring-offset-0;
    --tw-ring-offset-width: 0px;
  }
}

@utility no-highlight {
  -webkit-tap-highlight-color: transparent;
}

/* === Statuses === */
@utility status-focused {
  @apply focus-ring;
}

@utility status-focused-field {
  @apply focus-field-ring;
}

@utility status-invalid-field {
  @apply invalid-field-ring;
}

@utility status-disabled {
  opacity: var(--disabled-opacity);
  cursor: var(--cursor-disabled);
  pointer-events: none;
}

@utility status-pending {
  @apply pointer-events-none;
}