.badge {
  @apply border-base-200 bg-base-100 text-base-content rounded-badge border;
  &-neutral {
    @apply border-neutral bg-neutral text-neutral-content;
  }
  &-primary {
    @apply border-primary bg-primary text-primary-content;
  }
  &-secondary {
    @apply border-secondary bg-secondary text-secondary-content;
  }
  &-accent {
    @apply border-accent bg-accent text-accent-content;
  }
  &-info {
    @apply bg-info text-info-content border-transparent;
  }
  &-success {
    @apply bg-success text-success-content border-transparent;
  }
  &-warning {
    @apply bg-warning text-warning-content border-transparent;
  }
  &-error {
    @apply bg-error text-error-content border-transparent;
  }
  &-ghost {
    @apply border-base-200 bg-base-200 text-base-content;
  }

  &-outline {
    @apply border-current border-opacity-50 bg-transparent text-current;
    &.badge-neutral {
      @apply text-neutral;
    }
    &.badge-primary {
      @apply text-primary;
    }
    &.badge-secondary {
      @apply text-secondary;
    }
    &.badge-accent {
      @apply text-accent;
    }
    &.badge-info {
      @apply text-info;
    }
    &.badge-success {
      @apply text-success;
    }
    &.badge-warning {
      @apply text-warning;
    }
    &.badge-error {
      @apply text-error;
    }
  }
}
