.badge {
  @apply border border-neutral bg-neutral text-neutral-content rounded-badge;
  &-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 border-transparent bg-info text-info-content;
  }
  &-success {
    @apply border-transparent bg-success text-success-content;
  }
  &-warning {
    @apply border-transparent bg-warning text-warning-content;
  }
  &-error {
    @apply border-transparent bg-error text-error-content;
  }
  &-ghost {
    @apply border-base-200 bg-base-200 text-base-content;
  }

  &-outline {
    @apply border-current border-opacity-50 bg-transparent text-current;
    &.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;
    }
  }
}

.btn-outline {
  .badge {
    @apply border-neutral-focus text-neutral-content;
  }
  &.btn-primary .badge {
    @apply border-primary bg-primary text-primary-content;
  }
  &.btn-secondary .badge {
    @apply border-secondary bg-secondary text-secondary-content;
  }
  &.btn-accent .badge {
    @apply border-accent bg-accent text-accent-content;
  }

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

  &:hover .badge {
    @apply border-base-200 bg-base-200 text-base-content;
    &.outline {
      @apply border-base-200 text-neutral-content;
    }
  }
  &.btn-primary:hover .badge {
    @apply border-primary-content bg-primary-content text-primary;
    &.outline {
      @apply border-primary-content bg-primary-focus text-primary-content;
    }
  }
  &.btn-secondary:hover .badge {
    @apply border-secondary-content bg-secondary-content text-secondary;
    &.outline {
      @apply border-secondary-content bg-secondary-focus text-secondary-content;
    }
  }
  &.btn-accent:hover .badge {
    @apply border-accent-content bg-accent-content text-accent;
    &.outline {
      @apply border-accent-content bg-accent-focus text-accent-content;
    }
  }
}
