@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;
}
}