.wui-tag {
  @apply inline-flex items-center py-1 px-2 text-sm leading-5 box-border;
  @apply rounded border items-center;

  &-close {
    @apply items-center cursor-pointer ml-2 cursor-pointer;
    user-select: none;
    font-size: inherit;
    color: inherit;
  }

  &--neutral {
    @apply border-neutral-400;
    @apply dark:border-neutral-700;

    &--filled {
      @apply border-transparent;
      @apply bg-neutral-600 text-white;
      @apply dark:bg-neutral-200 dark:text-black;
    }
  }

  &--primary {
    @apply border-primary-400 text-primary-600;
    @apply dark:border-primary-700 dark:text-primary-300;

    &--filled {
      @apply border-transparent;
      @apply bg-primary-600 text-white;
      @apply dark:bg-primary-200 dark:text-black;
    }
  }

  &--info {
    @apply border-info-400 text-info-600;
    @apply dark:border-info-700 dark:text-info-300;

    &--filled {
      @apply border-transparent;
      @apply bg-info-600 text-white;
      @apply dark:bg-info-200 dark:text-black;
    }
  }

  &--success {
    @apply border-success-400 text-success-700;
    @apply dark:border-success-400 dark:text-success-300;

    &--filled {
      @apply border-transparent;
      @apply bg-success-600 text-white;
      @apply dark:bg-success-200 dark:text-black;
    }
  }

  &--warning {
    @apply border-warning-400 text-warning-700;
    @apply dark:border-warning-400 dark:text-warning-300;

    &--filled {
      @apply border-transparent;
      @apply bg-warning-600 text-white;
      @apply dark:bg-warning-200 dark:text-black;
    }
  }

  &--danger {
    @apply border-danger-400 text-danger-800;
    @apply dark:border-danger-400 dark:text-danger-300;

    &--filled {
      @apply border-transparent;
      @apply bg-danger-600 text-white;
      @apply dark:bg-danger-200 dark:text-black;
    }
  }

  &--black {
    @apply border-black;
    @apply dark:border-white;

    &--filled {
      @apply border-transparent;
      @apply bg-black text-white;
      @apply dark:bg-white dark:text-black;
    }
  }
}