@layer components {
  .label {
    @apply tw-font-medium tw-text-xs tw-px-2 tw-py-1 tw-rounded-md tw-inline-flex tw-items-center;
  }

  a.label:hover,
  a.label:focus {
    @apply tw-cursor-pointer tw-no-underline;
  }

  .label:empty {
    @apply tw-hidden;
  }

  .label-default {
    @apply tw-bg-neutral-50 tw-ring-1 tw-ring-inset tw-ring-neutral-500/10 tw-text-neutral-600;
  }

  .label-default[href]:hover,
  .label-default[href]:focus {
    @apply tw-bg-neutral-100 tw-text-neutral-800;
  }
  .label-primary {
    @apply tw-bg-primary-50 tw-ring-1 tw-ring-inset tw-ring-primary-700/10 tw-text-primary-700;
  }
  .label-primary[href]:hover,
  .label-primary[href]:focus {
    @apply tw-bg-primary-100 tw-text-primary-800;
  }
  .label-success {
    @apply tw-bg-success-50 tw-ring-1 tw-ring-inset tw-ring-success-600/20 tw-text-success-700;
  }
  .label-success[href]:hover,
  .label-success[href]:focus {
    @apply tw-bg-success-100 tw-text-success-800;
  }
  .label-info {
    @apply tw-bg-info-50 tw-ring-1 tw-ring-inset tw-ring-info-600/20 tw-text-info-700;
  }
  .label-info[href]:hover,
  .label-info[href]:focus {
    @apply tw-bg-info-100 tw-text-info-800;
  }
  .label-warning {
    @apply tw-bg-warning-50 tw-ring-1 tw-ring-inset tw-ring-warning-600/20 tw-text-warning-700;
  }
  .label-warning[href]:hover,
  .label-warning[href]:focus {
    @apply tw-bg-warning-100 tw-text-warning-800;
  }
  .label-danger {
    @apply tw-bg-danger-50 tw-ring-1 tw-ring-inset tw-ring-danger-600/10 tw-text-danger-700;
  }
  .label-danger[href]:hover,
  .label-danger[href]:focus {
    @apply tw-bg-danger-100 tw-text-danger-800;
  }

  .tags-labels {
    @apply tw-inline-flex tw-flex-wrap tw-items-center tw-gap-1 tw-max-w-[180px] tw-min-w-full;
  }

  .label-tag {
    @apply tw-text-sm tw-font-medium tw-bg-neutral-300/30 tw-px-2 tw-py-1 tw-rounded tw-text-neutral-800;
  }
}