@utility action-btn {
  @apply inline-flex cursor-pointer items-center justify-center text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary;

  &.action-btn-active {
    @apply bg-state-accent-active text-text-accent hover:bg-state-accent-active-alt;
  }

  &.action-btn-disabled {
    @apply text-text-disabled;
  }

  &.action-btn-destructive {
    @apply bg-state-destructive-hover text-text-destructive;
  }
}

@utility action-btn-hover {
  @apply bg-state-base-hover;
}

@utility action-btn-disabled {
  @apply cursor-not-allowed;

  &.action-btn {
    @apply text-text-disabled;
  }
}

@utility action-btn-xl {
  @apply h-9 w-9 rounded-lg p-2;
}

@utility action-btn-l {
  @apply h-8 w-8 rounded-lg p-1.5;
}

@utility action-btn-m {
  /* m is for the regular button */
  @apply h-6 w-6 rounded-lg p-0.5;
}

@utility action-btn-s {
  @apply h-5 w-5 rounded-[6px];
}

@utility action-btn-xs {
  @apply h-4 w-4 rounded-sm p-0;
}

@utility action-btn-active {
  &.action-btn {
    @apply bg-state-accent-active text-text-accent hover:bg-state-accent-active-alt;
  }
}

@utility action-btn-destructive {
  &.action-btn {
    @apply bg-state-destructive-hover text-text-destructive;
  }
}