.tag-label() {
  font-weight: 600;
  border-radius: var(--border-radius);
  background: var(--tag-bg);
  color: var(--tag-color);
  text-transform: none;
  text-decoration: none !important;

  &.untagged {
    --tag-bg: transparent;
    --tag-color: var(--muted-color);
    border: 1px dotted;
  }

  &.colored, &--colored {
    --tag-color: var(--contrast-color, var(--body-bg));
  }

  &.colored &-text, &--colored &-text {
    color: var(--tag-color) !important;
  }

  &-icon {
    margin-right: 2px;
  }
}

.TagLabel {
  .tag-label();
  font-size: 85%;
  display: inline-block;
  padding: 0.1em 0.5em;
  vertical-align: bottom;

  .DiscussionHero .TagsLabel & {
    background: transparent;
    border-radius: var(--border-radius) !important;
    font-size: 14px;

    &.colored, &--colored {
      --tag-color: var(--tag-bg);
      margin-right: 5px;
      background-color: var(--contrast-color, var(--body-bg));
    }
  }
}
.DiscussionHero--colored {
  &, a {
    color: var(--contrast-color, var(--body-bg));
  }
}
.TagsLabel {
  .DiscussionTaggedPost & {
    margin: 0 2px;
  }

  .TagLabel {
    border-radius: 0;

    &:first-child {
      border-radius: var(--border-radius) 0 0 var(--border-radius);
    }
    &:last-child {
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
    }
    &:first-child:last-child {
      border-radius: var(--border-radius);
    }
  }
}
