<commit_before>.topic {
  font-size: 12px;
  color: $text-secondary;
  margin-top: $topic-margin-top;
  line-height: 1.6;

  @media (min-width: $break-point-large) {
    line-height: 16px;
  }

  ul {
    margin: 0;
    padding: 0;
    @media (min-width: $break-point-large) {
      display: inline;
      padding-inline-start: 12px;
    }
  }


  ul li {
    display: inline-block;

    &::after {
      content: '•';
      padding: 8px;
    }

    &:last-child::after {
      content: none;
    }
  }

  .topic-link {
    color: $link-secondary;
  }

  .topic-read-more {
    color: $link-secondary;

    @media (min-width: $break-point-large) {
      // This is floating to accomodate a very large number of topics and/or
      // very long topic names due to l10n.
      float: right;

      &:dir(rtl) {
        float: left;
      }
    }

    &::after {
      background-image: url('#{$image-path}topic-show-more-12.svg');
      background-repeat: no-repeat;
      content: '';
      -moz-context-properties: fill;
      display: inline-block;
      fill: $link-secondary;
      height: 16px;
      margin-inline-start: 5px;
      vertical-align: middle;
      width: 12px;
    }

    &:dir(rtl)::after  {
      transform: scaleX(-1);
    }
  }

  // This is a clearfix to for the topics-read-more link which is floating and causes
  // some jank when we set overflow:hidden for the animation.
  &::after {
    content: "";
    display: table;
    clear: both;
  }<commit_msg>fix(styles): Fix sizing of topics read more link (#3714)<commit_after>.topic {
  font-size: 12px;
  color: $text-secondary;
  margin-top: $topic-margin-top;
  line-height: 1.6;

  @media (min-width: $break-point-large) {
    line-height: 16px;
  }

  ul {
    margin: 0;
    padding: 0;
    @media (min-width: $break-point-large) {
      display: inline;
      padding-inline-start: 12px;
    }
  }


  ul li {
    display: inline-block;

    &::after {
      content: '•';
      padding: 8px;
    }

    &:last-child::after {
      content: none;
    }
  }

  .topic-link {
    color: $link-secondary;
  }

  .topic-read-more {
    color: $link-secondary;

    @media (min-width: $break-point-large) {
      // This is floating to accomodate a very large number of topics and/or
      // very long topic names due to l10n.
      float: right;

      &:dir(rtl) {
        float: left;
      }
    }

    &::after {
      background: url('#{$image-path}topic-show-more-12.svg') no-repeat center center;
      content: '';
      -moz-context-properties: fill;
      display: inline-block;
      fill: $link-secondary;
      height: 16px;
      margin-inline-start: 5px;
      vertical-align: top;
      width: 12px;
    }

    &:dir(rtl)::after  {
      transform: scaleX(-1);
    }
  }

  // This is a clearfix to for the topics-read-more link which is floating and causes
  // some jank when we set overflow:hidden for the animation.
  &::after {
    content: "";
    display: table;
    clear: both;
  }
{'fraction_non_alphanumeric': 0.14266577361018085, 'fraction_numerical': 0.015405224380442064, 'mean_word_length': 2.0921325051759836, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6342288', 'n_tokens_mistral': 1089, 'n_tokens_neox': 1019, 'n_words': 255}