op-packages/luci-theme-aurora/.dev/src/media/components/_badge.css

.label {
  @apply bg-default text-default-foreground rounded-full px-3 py-1 text-xs font-bold uppercase;

  &.important {
    @apply bg-info text-info-foreground;
  }

  &.warning {
    @apply bg-error text-error-foreground;
  }

  &.success {
    @apply bg-success text-success-foreground;
  }

  &.notice {
    @apply bg-warning text-warning-foreground;
  }
}

.zonebadge {
  @apply border-secondary bg-secondary text-secondary-foreground inline-flex items-center gap-1.5 overflow-visible rounded-full border px-1 py-1.5 text-sm font-medium shadow-sm transition-all duration-200 hover:shadow-md max-md:gap-1 max-md:text-xs;

  &[style*="--zone-color-rgb"] {
    @apply bg-[rgb(var(--zone-color-rgb),.7)]!;

    & em {
      @apply text-default-foreground;
    }
  }

  .cbi-dropdown & {
    @apply rounded-xl px-1 py-0.5;
  }
}

.ifacebadge {
  @apply border-border bg-label-surface text-default-foreground hover:border-border hover:bg-label-surface inline-flex cursor-default flex-wrap items-center gap-2 rounded-2xl border px-3 py-2 text-sm font-normal shadow-sm transition-all duration-200 hover:shadow-md max-md:gap-1.5 max-md:px-2.5 max-md:py-1.5 max-md:text-xs;

  .cbi-dropdown &,
  .cbi-tooltip & {
    @apply flex-nowrap;
  }

  .zonebadge > &,
  .cbi-dropdown & {
    @apply rounded-2xl px-1.5 py-0;
    & img {
      @apply mr-1 w-4;
    }
  }

  & > img {
    @apply w-5 shrink-0 self-center max-md:w-4;
  }

  & > span {
    & > .nowrap {
      @apply mb-1.5 inline-block text-sm max-md:text-xs;
    }
  }

  &.ifacebadge-active {
    @apply border-primary font-semibold;
  }

  &.large {
    @apply min-w-[200px] flex-1 px-4 py-3 max-md:min-w-[180px] max-md:px-3 max-md:py-2.5;
  }
}