discourse/app/assets/stylesheets/common/components/badges.scss

// --------------------------------------------------
// Badges
// --------------------------------------------------

// Base
// --------------------------------------------------

%badge {
  display: inline-block;
  font-weight: normal;
  white-space: nowrap;
  border-radius: 10px;
}

// Category badges
// --------------------------------------------------

.badge-wrapper {
  font-size: $font-down-1;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: baseline;

  .badge-category {
    display: inline-flex;
    align-items: baseline;
    .category-name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .d-icon {
      margin-right: 3px;
      width: 0.74em;
      height: 0.74em;
      color: inherit;
    }
  }

  // ----- Bullet

  &.bullet {
    margin-right: 12px;
    span.badge-category {
      color: var(--primary-high);
      overflow: hidden;
      text-overflow: ellipsis;
      .extra-info-wrapper & {
        color: var(--header-primary);
      }
    }
    .badge-category-parent-bg,
    .badge-category-bg {
      flex: 0 0 auto;
      width: 9px;
      height: 9px;
      margin-right: 5px;
      display: inline-block;
    }
    .badge-category-parent-bg {
      // Subcategories
      width: 5px;
      margin-right: 0;
      + .badge-category-bg {
        width: 5px;
      }
    }
    .d-icon {
      color: var(--primary-medium);
    }
  }

  // ----- Box

  &.box {
    margin-right: 5px;
    padding: 2px 4px 2px 4px;
    display: inline-flex;
    span {
      overflow: hidden;
      text-overflow: ellipsis;
      &.badge-category-bg,
      &.badge-category-parent-bg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }

      &.badge-category-parent-bg {
        // Subcategories
        width: calc(100% - 5px);
        & + .badge-category-bg {
          left: 5px;
          width: calc(100% - 5px);
          & + .badge-category {
            margin-left: 5px;
          }
        }
      }

      &.badge-category {
        position: relative;
      }
    }
    + .topic-header-extra {
      padding: 2px 4px 2px 4px;
    }
  }

  // ----- Bar

  &.bar {
    margin-right: 5px;

    span.badge-category {
      color: var(--primary-high);
      padding: 1px 3px;
      overflow: hidden;
      text-overflow: ellipsis;

      .extra-info-wrapper & {
        color: var(--header-primary);
      }
    }

    .badge-category-parent-bg,
    .badge-category-bg {
      // Subcategories
      display: inline-block;
      padding: 0 1px;

      &:before {
        content: "\a0";
      }
    }
  }

  // ----- No category style

  &.none {
    color: var(--primary-high);
    margin-right: 5px;
  }
}

// Category badge dropdown
// --------------------------------------------------

.list-controls {
  .category-breadcrumb {
    a.badge-category {
      display: inline-block;
      padding: 6px 8px;
      line-height: $line-height-medium;
    }
  }
}

// Notification badge
// --------------------------------------------------

.badge-notification {
  @extend %badge;
  padding: 0.21em 0.42em;
  min-width: 0.5em;
  color: var(--secondary);
  font-size: $font-down-2;
  line-height: $line-height-small;
  text-align: center;
  background-color: var(--primary-low-mid-or-secondary-low);
  &[href] {
    color: var(--secondary);
  }

  &:hover {
    color: var(--secondary);
  }

  // New posts

  &.new-posts,
  &.unread-posts {
    background-color: var(--tertiary-med-or-tertiary);
    color: var(--secondary);
    font-weight: dark-light-choose(normal, bold);
  }

  &.new-topic {
    background-color: transparent;
  }

  &.new-topic::before {
    content: "";
    background: var(--tertiary-high);
    display: inline-block;
    height: 0.4em;
    width: 0.4em;
    border-radius: 50%;
  }

  // Click count

  &.clicks {
    font-weight: normal;
    background-color: var(--primary-low);
    top: -1px;
    color: var(--primary-medium);
    position: relative;
    border: none;
  }
}

// Posts badge
// --------------------------------------------------

.badge-posts {
  font-weight: normal;
  font-size: $font-0;
  line-height: $line-height-small;
  &[href] {
    color: var(--primary-med-or-secondary-med);
  }
}

// Group badge
// --------------------------------------------------

.badge-group {
  @extend %badge;
  padding: 2px 5px;
  color: var(--primary);
  background-color: var(--primary-low);
  border-color: var(--primary-low);
  font-size: $font-down-1;
}