<commit_before>$borderRadius: 3px;
$arrowSize: 6px;
$buttonHeight: 30px;
$buttonBackground: #444;
$buttonHoverBackground: #222;
$buttonPadding: 6px;
$iconWidth: 20px;
$buttonSmallWidth: $iconWidth + $buttonPadding * 2;

.fl-button {
  @extend %default-font;
  cursor: pointer;
  display: block;
  white-space: nowrap;
  text-align: center;
  position: relative;
  min-width: $buttonSmallWidth;
  opacity: 0.4;

  border-radius: $borderRadius;
  line-height: $buttonHeight;
}

// remove when removing client_buttons feature toggle
.fl-button-hide-default {
  display: none;
}

.fl-button-black, .fl-button-state-hovered, .fl-button-state-loading {
  display: block; // remove when removing client_buttons feature toggle
  background-color: $buttonBackground;
  color: white;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  opacity: 1;

  &:hover {
    background-color: $buttonHoverBackground;
  }
}

.fl-button-with-arrow-down {
  margin-bottom: $arrowSize;

  &:after {
    content: '';
    position: absolute;
    bottom: -$arrowSize;
    left: $buttonSmallWidth / 2;
    margin-left: -$arrowSize;

    border: $arrowSize solid transparent;
    border-top-color: $buttonBackground;
    border-bottom-width: 0;
  }

  &:hover:after {
    border-top-color: $buttonHoverBackground;
  }
}

.fl-button-sub-button {
  display: inline-block;
  height: $buttonHeight;
  padding: 0 $buttonPadding;
  border-left: 1px solid #666;
  background-color: $buttonBackground;

  &:hover {
    background-color: $buttonHoverBackground;
  }
  &:last-child {
    margin-right: -$buttonPadding;
    border-top-right-radius: $borderRadius;
    border-bottom-right-radius: $borderRadius;
  }
}

.fl-button-content-default,
.fl-button-content-hovered,
.fl-button-content-loading {
  display: none;
  height: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 $buttonPadding;
}

.fl-button-content-default {
  display: block;
  height: auto;
}

.fl-button-state-hovered {
  .fl-button-content-default,
  .fl-button-content-hovered,
  .fl-button-content-loading {
    display: block;
    height: 0;
  }
  .fl-button-content-hovered {
    height: auto;
  }
}

.fl-button-state-loading {
  .fl-button-content-default,
  .fl-button-content-hovered,
  .fl-button-content-loading {
    display: block;
    height: 0;
  }
  .fl-button-content-loading {
    height: auto;
  }
}

.fl-button-icon:before,
.fl-button-icon-white:before,
.fl-button-icon-add:before {
  content: url("../images/comment-black.png");
  display: inline-block;
  vertical-align: middle;
  width: $iconWidth;
  height: 24px;
}

.fl-button-icon-white:before {
  content: url("../images/comment-white.png");
}

.fl-button-icon-add:before {
  content: url("../images/comment-white.png"); // TODO: special add button
}

// keep in sync with core .striped
@mixin striped($angle: 45deg, $stripeColor: rgba(255,255,255,.15)) {
  background-image: -webkit-linear-gradient($angle, $stripeColor 25%, transparent 25%, transparent 50%, $stripeColor 50%, $stripeColor 75%, transparent 75%, transparent);
  background-image: linear-gradient($angle, $stripeColor 25%, transparent 25%, transparent 50%, $stripeColor 50%, $stripeColor 75%, transparent 75%, transparent);
}

@mixin loading-stripes-keyframes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

@-webkit-keyframes loading-stripes { @include loading-stripes-keyframes; }
// IE9
@-ms-keyframes loading-stripes { @include loading-stripes-keyframes; }
// Spec
@keyframes loading-stripes { @include loading-stripes-keyframes; }

@mixin animate-stripes($seconds: 1.5s) {
  -webkit-animation:  loading-stripes $seconds linear infinite;
  animation:          loading-stripes $seconds linear infinite;
}

.fl-button-content-loading {
  background-size: 40px 40px;
  @include striped;
  @include animate-stripes;
}
<commit_msg>remove old png reference from css<commit_after>$borderRadius: 3px;
$arrowSize: 6px;
$buttonHeight: 30px;
$buttonBackground: #444;
$buttonHoverBackground: #222;
$buttonPadding: 6px;
$iconWidth: 20px;
$buttonSmallWidth: $iconWidth + $buttonPadding * 2;

.fl-button {
  @extend %default-font;
  cursor: pointer;
  display: block;
  white-space: nowrap;
  text-align: center;
  position: relative;
  min-width: $buttonSmallWidth;
  opacity: 0.4;

  border-radius: $borderRadius;
  line-height: $buttonHeight;
}

// remove when removing client_buttons feature toggle
.fl-button-hide-default {
  display: none;
}

.fl-button-black, .fl-button-state-hovered, .fl-button-state-loading {
  display: block; // remove when removing client_buttons feature toggle
  background-color: $buttonBackground;
  color: white;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  opacity: 1;

  &:hover {
    background-color: $buttonHoverBackground;
  }
}

.fl-button-with-arrow-down {
  margin-bottom: $arrowSize;

  &:after {
    content: '';
    position: absolute;
    bottom: -$arrowSize;
    left: $buttonSmallWidth / 2;
    margin-left: -$arrowSize;

    border: $arrowSize solid transparent;
    border-top-color: $buttonBackground;
    border-bottom-width: 0;
  }

  &:hover:after {
    border-top-color: $buttonHoverBackground;
  }
}

.fl-button-sub-button {
  display: inline-block;
  height: $buttonHeight;
  padding: 0 $buttonPadding;
  border-left: 1px solid #666;
  background-color: $buttonBackground;

  &:hover {
    background-color: $buttonHoverBackground;
  }
  &:last-child {
    margin-right: -$buttonPadding;
    border-top-right-radius: $borderRadius;
    border-bottom-right-radius: $borderRadius;
  }
}

.fl-button-content-default,
.fl-button-content-hovered,
.fl-button-content-loading {
  display: none;
  height: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 $buttonPadding;
}

.fl-button-content-default {
  display: block;
  height: auto;
}

.fl-button-state-hovered {
  .fl-button-content-default,
  .fl-button-content-hovered,
  .fl-button-content-loading {
    display: block;
    height: 0;
  }
  .fl-button-content-hovered {
    height: auto;
  }
}

.fl-button-state-loading {
  .fl-button-content-default,
  .fl-button-content-hovered,
  .fl-button-content-loading {
    display: block;
    height: 0;
  }
  .fl-button-content-loading {
    height: auto;
  }
}

.fl-button-icon:before,
.fl-button-icon-white:before {
  content: url("../images/comment-black.png");
  display: inline-block;
  vertical-align: middle;
  width: $iconWidth;
  height: 24px;
}

.fl-button-icon-white:before {
  content: url("../images/comment-white.png");
}

// keep in sync with core .striped
@mixin striped($angle: 45deg, $stripeColor: rgba(255,255,255,.15)) {
  background-image: -webkit-linear-gradient($angle, $stripeColor 25%, transparent 25%, transparent 50%, $stripeColor 50%, $stripeColor 75%, transparent 75%, transparent);
  background-image: linear-gradient($angle, $stripeColor 25%, transparent 25%, transparent 50%, $stripeColor 50%, $stripeColor 75%, transparent 75%, transparent);
}

@mixin loading-stripes-keyframes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

@-webkit-keyframes loading-stripes { @include loading-stripes-keyframes; }
// IE9
@-ms-keyframes loading-stripes { @include loading-stripes-keyframes; }
// Spec
@keyframes loading-stripes { @include loading-stripes-keyframes; }

@mixin animate-stripes($seconds: 1.5s) {
  -webkit-animation:  loading-stripes $seconds linear infinite;
  animation:          loading-stripes $seconds linear infinite;
}

.fl-button-content-loading {
  background-size: 40px 40px;
  @include striped;
  @include animate-stripes;
}

{'fraction_non_alphanumeric': 0.14581957469290716, 'fraction_numerical': 0.023246598864086646, 'mean_word_length': 3.792405063291139, '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': '4018343', 'n_tokens_mistral': 2785, 'n_tokens_neox': 2595, 'n_words': 547}