@reference "../../styles/index.css";

.badge {
  @apply rounded-full
    text-center
    whitespace-nowrap
    text-white;

  &.small {
    @apply px-1.5
      py-0.5
      text-xs;
  }

  &.medium {
    @apply px-2.5
      py-0.5
      text-base;
  }

  &.default {
    @apply bg-brand-600;
  }

  &.error {
    @apply bg-danger-600;
  }

  &.warning {
    @apply bg-warning-600;
  }

  &.info {
    @apply bg-info-600;
  }

  &.neutral {
    @apply bg-neutral-800;
  }

  &.circular {
    @apply font-ibm-plex-mono
      inline-flex
      items-center
      justify-center
      p-0;

    &.small {
      @apply size-5;
    }

    &.medium {
      @apply size-7;
    }
  }
}
