<commit_before>.info-bubble {
  @include box-border;

  position: absolute;
  border-top-color: darken($ui-colour, 30%);
  min-width: 275px;
  opacity: 0;
  background: $info-bubble-background;
  transition: transform 100ms, margin-top 150ms, height 150ms, opacity 150ms;
  transform: rotateX(-80deg);
  perspective: 1200px;
  z-index: $z-06-info-bubble;
  pointer-events: none;
  touch-action: none;

  &.visible {
    opacity: 1;
    transform: rotateY(0);
    pointer-events: auto;
  }

  header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    padding: 2px 8px 5px;
    height: $info-bubble-button-size;
    line-height: $info-bubble-button-size + 1px;
    font-size: 16px;
    font-weight: 300;
    color: white;
    background: darken($ui-colour, 20%);
  }

  .icon {
    pointer-events: none;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 2px 3px;
    fill: #231f20;
  }

  .svg-inline--fa {
    vertical-align: -0.1em;
    height: 11px;
  }

  .variants {
    text-align: left;
    padding: 7px 8px 5px;
    margin-right: 20px;
    min-height: $info-bubble-button-size;
    white-space: nowrap;
    user-select: none;

    button {
      margin-bottom: 2px;
      margin-right: 3px;
    }

    hr {
      display: block;
      margin: 0;
      padding: 0;
      opacity: 0;
      height: 5px;
    }
  }

  .non-variant {
    text-align: right;
    margin: 8px;
    min-height: 30px;
    white-space: nowrap;
    user-select: none;

    /* Takes up the entire width of info-bubble if it is by itself */
    &:only-child {
      width: 100%;
      text-align: center;
    }

    &.building-height {
      margin-top: -29px;
      height: auto;
      white-space: normal;
      width: 65px + 50px;
      text-align: center;
    }
  }

  .variants,
  .non-variant {
    button {
      white-space: nowrap;
      position: relative;

      .icon {
        opacity: 0.666;
      }

      &:active {
        .icon {
          margin-top: 1px;
          opacity: 0.9;
        }
      }
    }
  }

  .variants button[disabled] {
    background: darken($ui-colour, 10%);
    color: black;
    opacity: 1;
    border-top-color: darken($ui-colour, 30%);
    border-bottom-color: darken($ui-colour, 30%);

    .icon {
      opacity: 1;
    }
  }

  // Chrome
  @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    .non-variant {
      margin-top: 7px;
    }
  }

  button {
    width: $info-bubble-button-size;
    height: $info-bubble-button-size;
  }
}

.info-bubble-type-building header {
  margin-right: 90px + 50px;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: -37px;
    width: 0;
    height: 0;
    border-top: 37px solid darken($ui-colour, 20%);
    border-right: 37px solid transparent;
  }
}

.info-bubble-header-label {
  /* If label exceeds maximum allowed width, cut it off */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.info-bubble-remove {
  width: auto !important; /* Override button width of other buttons in infobubble */
  padding: 0;
  padding-left: 1em;
  padding-right: 1em;
  margin-top: 1px;
  margin-left: 1em;
  font-size: 11px;

  .remove-icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
}

.info-bubble-controls {
  display: flex;
  justify-content: space-between;

  .non-variant {
    text-align: center;
    width: auto;
  }
}

.info-bubble-warnings {
  margin-top: 1px;
  font-size: 13px;<commit_msg>InfoBubble: remove icon margin for rtl conditions<commit_after>.info-bubble {
  @include box-border;

  position: absolute;
  border-top-color: darken($ui-colour, 30%);
  min-width: 275px;
  opacity: 0;
  background: $info-bubble-background;
  transition: transform 100ms, margin-top 150ms, height 150ms, opacity 150ms;
  transform: rotateX(-80deg);
  perspective: 1200px;
  z-index: $z-06-info-bubble;
  pointer-events: none;
  touch-action: none;

  &.visible {
    opacity: 1;
    transform: rotateY(0);
    pointer-events: auto;
  }

  header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    padding: 2px 8px 5px;
    height: $info-bubble-button-size;
    line-height: $info-bubble-button-size + 1px;
    font-size: 16px;
    font-weight: 300;
    color: white;
    background: darken($ui-colour, 20%);
  }

  .icon {
    pointer-events: none;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 2px 3px;
    fill: #231f20;
  }

  .svg-inline--fa {
    vertical-align: -0.1em;
    height: 11px;
  }

  .variants {
    text-align: left;
    padding: 7px 8px 5px;
    margin-right: 20px;
    min-height: $info-bubble-button-size;
    white-space: nowrap;
    user-select: none;

    button {
      margin-bottom: 2px;
      margin-right: 3px;
    }

    hr {
      display: block;
      margin: 0;
      padding: 0;
      opacity: 0;
      height: 5px;
    }
  }

  .non-variant {
    text-align: right;
    margin: 8px;
    min-height: 30px;
    white-space: nowrap;
    user-select: none;

    /* Takes up the entire width of info-bubble if it is by itself */
    &:only-child {
      width: 100%;
      text-align: center;
    }

    &.building-height {
      margin-top: -29px;
      height: auto;
      white-space: normal;
      width: 65px + 50px;
      text-align: center;
    }
  }

  .variants,
  .non-variant {
    button {
      white-space: nowrap;
      position: relative;

      .icon {
        opacity: 0.666;
      }

      &:active {
        .icon {
          margin-top: 1px;
          opacity: 0.9;
        }
      }
    }
  }

  .variants button[disabled] {
    background: darken($ui-colour, 10%);
    color: black;
    opacity: 1;
    border-top-color: darken($ui-colour, 30%);
    border-bottom-color: darken($ui-colour, 30%);

    .icon {
      opacity: 1;
    }
  }

  // Chrome
  @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    .non-variant {
      margin-top: 7px;
    }
  }

  button {
    width: $info-bubble-button-size;
    height: $info-bubble-button-size;
  }
}

.info-bubble-type-building header {
  margin-right: 90px + 50px;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: -37px;
    width: 0;
    height: 0;
    border-top: 37px solid darken($ui-colour, 20%);
    border-right: 37px solid transparent;
  }
}

.info-bubble-header-label {
  /* If label exceeds maximum allowed width, cut it off */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.info-bubble-remove {
  width: auto !important; /* Override button width of other buttons in infobubble */
  padding: 0;
  padding-left: 0.75em;
  padding-right: 0.75em;
  margin-top: 1px;
  margin-left: 1em;
  font-size: 11px;

  .remove-icon {
    width: 14px;
    height: 14px;
    margin-right: 0.5em;

    [dir='rtl'] & {
      margin-right: 0;
      margin-left: 0.5em;
    }
  }
}

.info-bubble-controls {
  display: flex;
  justify-content: space-between;

  .non-variant {
    text-align: center;
    width: auto;
  }
}

.info-bubble-warnings {
  margin-top: 1px;
  font-size: 13px;
{'fraction_non_alphanumeric': 0.13907919978076186, 'fraction_numerical': 0.037270485064401206, 'mean_word_length': 2.2069420035149383, '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': '7292087', 'n_tokens_mistral': 2972, 'n_tokens_neox': 2654, 'n_words': 614}