discourse-custom-wizard/assets/stylesheets/common/wizard/badges.scss

body.custom-wizard {
  .badge-wrapper {
    font-size: $font-down-1;
    font-weight: bold;
    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 {
      margin-right: 8px;

      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 {
        width: 5px;
        margin-right: 0;
        + .badge-category-bg {
          width: 5px;
        }
      }

      .d-icon {
        color: var(--primary-medium);
      }
    }

    &.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 {
          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 {
      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 {
        display: inline-block;
        padding: 0 1px;

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

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