<commit_before>.tinymce-mobile-slider {
  display: flex;
  flex: 1;
  position: relative;
  padding: .28em 0;
  margin-left: 10%;
  margin-right: 10%;
}

.tinymce-mobile-icon-small-font:before {
  content: "\e906";
  margin-left: 20px;
  margin-right: 20px;
}

.tinymce-mobile-icon-large-font:before {
  content: "\e907";
  margin-right: 20px;
  margin-left: 20px;
}


.tinymce-mobile-slider {
  margin-left: 0px;
  margin-right: 0px;

  .tinymce-mobile-slider-font-size-container {
    display: flex;
    flex-grow: 1;
    height: 100%;
    align-items: center;

    .tinymce-mobile-slider-font-size {
      display: flex;
      flex: 1;
      margin-top: 0.3em;
      margin-bottom: 0.3em;
      background: @toolstrip-slider-background-color;
      height: 0.4em;
    }

  }

  &.tinymce-mobile-slider-heading-container {
    margin-left: 1.5em;
    margin-right:1.5em;
    display: flex;
    flex-grow: 1;
    height: 100%;
    align-items: center;

    .tinymce-mobile-slider-heading-spectrum {
      display: flex;
      flex: 1;
      margin-top: 0.3em;
      margin-bottom: 0.3em;
      height: 100%;
      align-items: center;
      

      .tinymce-mobile-slider-heading-spectrum-line {
        display: flex;
        flex-grow: 1;
        height: 0.4em;
        background: @toolstrip-slider-background-color;
      }
    }

    .tinymce-mobile-slider-thumb {
      position: absolute;
      background: @toolstrip-foreground-color;
      color: @toolstrip-background-color;

      font-size: 0.7em;
      padding: 0.5em;
      display: flex;
      align-items: center;
      justify-content: center;

      /* vertically centering trick (margin: auto, top: 0, bottom: 0) */
      margin: auto;
      top: 0;
      bottom: 0;

      border: 0.1em solid  @toolstrip-background-color;
      border-radius: 3em;
    }
  }

  &.tinymce-mobile-hue-slider-container {
    padding-left: 0.5em;
    padding-right: 0.5em;

    .tinymce-mobile-slider-gradient-container {
      display: flex;
      flex-grow: 1;
      height: 100%;
      align-items: center;

      .tinymce-mobile-slider-gradient {
        display: flex;
        flex: 1;
        margin-top: 0.3em;
        margin-bottom: 0.3em;
        background: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 17%, hsl(120, 100%, 50%) 33%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 67%, hsl(300, 100%, 50%) 83%, hsl(360, 100%, 50%) 100%);
        height: 0.4em;
      }
    }

    .tinymce-mobile-hue-slider-black {
      /* Not part of theming */
      background: black;
      width: 1.2em;
      height: 0.4em;
      margin-top: 0.3em;
      margin-bottom: 0.3em;
    }

    .tinymce-mobile-hue-slider-white {
      /* Not part of theming */
      background: white;
      width: 1.2em;
      height: 0.4em;
      margin-top: 0.3em;
      margin-bottom: 0.3em;
    }
  }

  .tinymce-mobile-slider-thumb {
    position: absolute;
    height: 0.8em;
    width: 1em;
    background: @toolstrip-thumb-background-color;
    left: -10px;

    /* vertically centering trick (margin: auto, top: 0, bottom: 0) */
    margin: auto;
    top: 0;
    bottom: 0;

    border: 0.1em solid black;
    border-radius: 3em;
  }
}<commit_msg>TM-55: comment explaining vertical centering trick<commit_after>.tinymce-mobile-slider {
  display: flex;
  flex: 1;
  position: relative;
  padding: .28em 0;
  margin-left: 10%;
  margin-right: 10%;
}

.tinymce-mobile-icon-small-font:before {
  content: "\e906";
  margin-left: 20px;
  margin-right: 20px;
}

.tinymce-mobile-icon-large-font:before {
  content: "\e907";
  margin-right: 20px;
  margin-left: 20px;
}


.tinymce-mobile-slider {
  margin-left: 0px;
  margin-right: 0px;

  .tinymce-mobile-slider-font-size-container {
    display: flex;
    flex-grow: 1;
    height: 100%;
    align-items: center;

    .tinymce-mobile-slider-font-size {
      display: flex;
      flex: 1;
      margin-top: 0.3em;
      margin-bottom: 0.3em;
      background: @toolstrip-slider-background-color;
      height: 0.4em;
    }

  }

  &.tinymce-mobile-slider-heading-container {
    margin-left: 1.5em;
    margin-right:1.5em;
    display: flex;
    flex-grow: 1;
    height: 100%;
    align-items: center;

    .tinymce-mobile-slider-heading-spectrum {
      display: flex;
      flex: 1;
      margin-top: 0.3em;
      margin-bottom: 0.3em;
      height: 100%;
      align-items: center;
      

      .tinymce-mobile-slider-heading-spectrum-line {
        display: flex;
        flex-grow: 1;
        height: 0.4em;
        background: @toolstrip-slider-background-color;
      }
    }

    .tinymce-mobile-slider-thumb {
      position: absolute;
      background: @toolstrip-foreground-color;
      color: @toolstrip-background-color;

      font-size: 0.7em;
      padding: 0.5em;
      display: flex;
      align-items: center;
      justify-content: center;

      border: 0.1em solid  @toolstrip-background-color;
      border-radius: 3em;
    }
  }

  &.tinymce-mobile-hue-slider-container {
    padding-left: 0.5em;
    padding-right: 0.5em;

    .tinymce-mobile-slider-gradient-container {
      display: flex;
      flex-grow: 1;
      height: 100%;
      align-items: center;

      .tinymce-mobile-slider-gradient {
        display: flex;
        flex: 1;
        margin-top: 0.3em;
        margin-bottom: 0.3em;
        background: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 17%, hsl(120, 100%, 50%) 33%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 67%, hsl(300, 100%, 50%) 83%, hsl(360, 100%, 50%) 100%);
        height: 0.4em;
      }
    }

    .tinymce-mobile-hue-slider-black {
      /* Not part of theming */
      background: black;
      width: 1.2em;
      height: 0.4em;
      margin-top: 0.3em;
      margin-bottom: 0.3em;
    }

    .tinymce-mobile-hue-slider-white {
      /* Not part of theming */
      background: white;
      width: 1.2em;
      height: 0.4em;
      margin-top: 0.3em;
      margin-bottom: 0.3em;
    }
  }

  .tinymce-mobile-slider-thumb {
    position: absolute;
    height: 0.8em;
    width: 1em;
    background: @toolstrip-thumb-background-color;
    left: -10px;

    /* vertically centering trick (margin: auto, top: 0, bottom: 0). On iOS and Safari, if you leave
     * out these values, then it shows the thumb at the top of the spectrum. This is probably because it is 
     * absolutely positioned with only a left value, and not a top. Note, on Chrome it seems to be fine without
     * this approach.
     */
    margin: auto;
    top: 0;
    bottom: 0;

    border: 0.1em solid black;
    border-radius: 3em;
  }
}
{'fraction_non_alphanumeric': 0.1414937130737767, 'fraction_numerical': 0.05271928495682472, 'mean_word_length': 2.1801541425818884, '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': '2398176', 'n_tokens_mistral': 2707, 'n_tokens_neox': 2350, 'n_words': 529}