<commit_before>@background-tooltip-color: #2AC56C;
@button-background-color: #17AA56;

.tutorial-component {
  background-color: @background-tooltip-color;
  color: #fff;
  padding: 5px 0;
  border-radius: 6px;
  text-align: left;
  max-width: 300px;
  min-width: 200px;
  min-height: 50px;
  padding: 10px;
  z-index: 99999;
  &.hide {
    display: none;
  }
  &.show {
    display: block;
  }
  > div {
    margin-right: 4px;
  }
  .action-menu {
    margin-top: 10px;
    height: 24px;
    border-top: 1px solid @button-background-color;
    > .default-btn {
      background-color: @button-background-color;
      border: none;
      color: white;
      text-align: center;
      text-decoration: none;
      font-size: 13px;
      margin: 4px 2px;
      cursor: pointer;
    }
    > .done-btn, > .next-btn {
      position: absolute;
      right: 12px;
      bottom: 4px;
      cursor: pointer;
      width: 50px;
      height: 21px;
      font-family: inherit;
    }
    > .skip-btn {
      position: absolute;
      right: 133px;
      bottom: 4px;
      cursor: pointer;
      width: 50px;
      height: 21px;
      font-family: inherit;
    }
    > .previous-btn {
      position: absolute;
      left: 8px;
      bottom: 4px;
      cursor: pointer;
      width: 58px;
      height: 21px;
      font-family: inherit;
    }
  }
  &.left {
    &:before, &:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent;
      border-left: 0;
    }

    /* Stroke */
    &:before {
      bottom: 35%;
      left: -12px;

      /* If 1px darken stroke slightly */
      border-right-color: white;
      border-width: 12px;
    }

    /* Fill */
    &:after {
      bottom: 35%;
      left: -11px;
      border-right-color: @background-tooltip-color;
      border-width: 12px;
    }
  }
  &.right {
     /* Required for Triangle */
    &:before, &:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent;
      border-right: 0;
    }

    /* Stroke */
    &:before {
      right: -12px;
      bottom: 35%;

      /* If 1px darken stroke slightly */
      border-left-color: white;
      border-width: 12px;
    }

    /* Fill */
    &:after {
      right: -11px;
      bottom: 35%;
      border-left-color: @background-tooltip-color;
      border-width: 12px;
    }
  }
}<commit_msg>Add up and down arrow<commit_after>@background-tooltip-color: #2AC56C;
@button-background-color: #17AA56;

.tutorial-component {
  background-color: @background-tooltip-color;
  color: #fff;
  padding: 5px 0;
  border-radius: 6px;
  text-align: left;
  max-width: 300px;
  min-width: 200px;
  min-height: 50px;
  padding: 10px;
  z-index: 99999;
  &.hide {
    display: none;
  }
  &.show {
    display: block;
  }
  > div {
    margin-right: 4px;
  }
  .action-menu {
    margin-top: 10px;
    height: 24px;
    border-top: 1px solid @button-background-color;
    > .default-btn {
      background-color: @button-background-color;
      border: none;
      color: white;
      text-align: center;
      text-decoration: none;
      font-size: 13px;
      margin: 4px 2px;
      cursor: pointer;
    }
    > .done-btn, > .next-btn {
      position: absolute;
      right: 12px;
      bottom: 4px;
      cursor: pointer;
      width: 50px;
      height: 21px;
      font-family: inherit;
    }
    > .skip-btn {
      position: absolute;
      right: 133px;
      bottom: 4px;
      cursor: pointer;
      width: 50px;
      height: 21px;
      font-family: inherit;
    }
    > .previous-btn {
      position: absolute;
      left: 8px;
      bottom: 4px;
      cursor: pointer;
      width: 58px;
      height: 21px;
      font-family: inherit;
    }
  }
  &.left {
    &:before, &:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent;
      border-left: 0;
    }

    /* Stroke */
    &:before {
      bottom: 35%;
      left: -12px;

      /* If 1px darken stroke slightly */
      border-right-color: white;
      border-width: 12px;
    }

    /* Fill */
    &:after {
      bottom: 35%;
      left: -11px;
      border-right-color: @background-tooltip-color;
      border-width: 12px;
    }
  }
  &.right {
     /* Required for Triangle */
    &:before, &:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent;
      border-right: 0;
    }

    /* Stroke */
    &:before {
      right: -12px;
      bottom: 35%;

      /* If 1px darken stroke slightly */
      border-left-color: white;
      border-width: 12px;
    }

    /* Fill */
    &:after {
      right: -11px;
      bottom: 35%;
      border-left-color: @background-tooltip-color;
      border-width: 12px;
    }
  }
  &.up {
     /* Required for Triangle */
    &:before, &:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent;
      border-top: 0;
    }

    /* Stroke */
    &:before {
      left: 80%;
      bottom: 100%;

      /* If 1px darken stroke slightly */
      border-bottom-color: white;
      border-width: 12px;
    }

    /* Fill */
    &:after {
      left: 80%;
      bottom: 100%;

      border-bottom-color: @background-tooltip-color;
      border-width: 12px;
    }
  }
  &.down {
     /* Required for Triangle */
    &:before, &:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent;
      border-bottom: 0;
    }

    /* Stroke */
    &:before {
      left: 80%;
      top: 100%;

      /* If 1px darken stroke slightly */
      border-top-color: white;
      border-width: 12px;
    }

    /* Fill */
    &:after {
      left: 80%;
      top: 100%;

      border-top-color: @background-tooltip-color;
      border-width: 12px;
    }
  }
  
}
{'fraction_non_alphanumeric': 0.13870541611624834, 'fraction_numerical': 0.03500660501981506, 'mean_word_length': 1.7506811989100817, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 15, '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': '250852', 'n_tokens_mistral': 2287, 'n_tokens_neox': 2069, 'n_words': 478}