<commit_before>$buttonBgTransition: all 0.3s ease;

@mixin button-height ($button-height) {
  height: $button-height;
  line-height: $button-height - 3px;
}

%button-base {
  position: relative;
  display: inline-block;
  z-index:0;
  vertical-align: middle;
  font-family: inherit; //so that browsers don't use a system font for buttons.
  font-size: 13px;
  @include button-height($largeButtonHeight);

  color: white;
  border-radius: $baseBorderRadius;
  padding: 0 $largeButtonPadding;
  border: 1px solid;
  border-bottom: 2px solid;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;

  border-color: rgba(0,0,0, 0.13);

  &:before {
    //this is an overlay for fading the background color.
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: inherit;
    z-index: -1;
    background-color: transparent;
    transition: $buttonBgTransition;
  }

  &:hover {
    color: white;
    border-color: rgba(0,0,0, 0.26);
  }

  &:focus {
    border-color: rgba(0,0,0,0.45);
    outline: none;
  }

  &:hover:not(:disabled):before, &:active:before {
    background-color: rgba(0,0,0,0.1);
  }

  &:disabled {
    color: $mutedFontColor;
    cursor: not-allowed;
  }

  &:active {
    transition: none;
    padding-top: 1px;
    border-bottom-width: 1px;
    outline: none; //prevents ugly webkit active state
  }
}

$arrowSize: 5px;
%button-with-arrow-base {
  &:after {
    content: '';
    position: absolute;
    border: $arrowSize solid;
    border-color: transparent currentColor;
    margin-top: -$arrowSize;
    top: 50%;
    transition: $buttonBgTransition;
  }
}

@mixin button-with-left-arrow($background-color) {
  @extend %button-with-arrow-base;
  margin-left: $arrowSize;
  &:after {
    right: 100%;
    border-left-style: none;
    color: $background-color;
  }

  &:hover:not(:disabled):after, &:active:after {
    color: mix(black, $background-color, 10%);
  }
}

@mixin button-with-right-arrow($background-color) {
  @extend %button-with-arrow-base;
  margin-right: $arrowSize;
  &:after {
    left: 100%;
    border-left-color: $background-color;
  }

  &:hover:not(:disabled):after, &:active:after {
    border-left-color: mix(black, $background-color, 10%);
  }
}


.button-arrow-left {
  @include button-with-left-arrow($facebookBlue);
}


.button-arrow-right {
  @include button-with-right-arrow($buttonDangerBackground);
}


.button {
  @extend %button-base;<commit_msg>Move left/right into extends and coloring into mixin<commit_after>$buttonBgTransition: all 0.3s ease;

@mixin button-height ($button-height) {
  height: $button-height;
  line-height: $button-height - 3px;
}

%button-base {
  position: relative;
  display: inline-block;
  z-index:0;
  vertical-align: middle;
  font-family: inherit; //so that browsers don't use a system font for buttons.
  font-size: 13px;
  @include button-height($largeButtonHeight);

  color: white;
  border-radius: $baseBorderRadius;
  padding: 0 $largeButtonPadding;
  border: 1px solid;
  border-bottom: 2px solid;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;

  border-color: rgba(0,0,0, 0.13);

  &:before {
    //this is an overlay for fading the background color.
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: inherit;
    z-index: -1;
    background-color: transparent;
    transition: $buttonBgTransition;
  }

  &:hover {
    color: white;
    border-color: rgba(0,0,0, 0.26);
  }

  &:focus {
    border-color: rgba(0,0,0,0.45);
    outline: none;
  }

  &:hover:not(:disabled):before, &:active:before {
    background-color: rgba(0,0,0,0.1);
  }

  &:disabled {
    color: $mutedFontColor;
    cursor: not-allowed;
  }

  &:active {
    transition: none;
    padding-top: 1px;
    border-bottom-width: 1px;
    outline: none; //prevents ugly webkit active state
  }
}

$arrowSize: 5px;
%button-with-arrow-base {
  &:after {
    content: '';
    position: absolute;
    border: $arrowSize solid;
    border-color: transparent currentColor;
    margin-top: -$arrowSize;
    top: 50%;
    transition: $buttonBgTransition;
  }
}
%button-with-right-arrow {
  @extend %button-with-arrow-base;
  margin-right: $arrowSize;
  &:after {
    left: 100%;
    border-right-style: none;
  }
}
%button-with-left-arrow {
  @extend %button-with-arrow-base;
  margin-left: $arrowSize;
  &:after {
    right: 100%;
    border-left-style: none;
  }
}


@mixin button-arrow-color($arrow-color) {
  &:after {
    color: $arrow-color;
  }

  &:hover:not(:disabled):after, &:active:after {
    color: mix(black, $arrow-color, 10%);
  }
}

@mixin button-with-left-arrow($arrow-color) {
  @extend %button-with-arrow-base;
  margin-left: $arrowSize;
  &:after {
    right: 100%;
    border-left-style: none;
    color: $arrow-color;
  }

  &:hover:not(:disabled):after, &:active:after {
    color: mix(black, $arrow-color, 10%);
  }
}

@mixin button-with-right-arrow($arrow-color) {
  @extend %button-with-arrow-base;
  margin-right: $arrowSize;
  &:after {
    left: 100%;
    border-right-style: none;
    color: $arrow-color;
  }

  &:hover:not(:disabled):after, &:active:after {
    color: mix(black, $arrow-color, 10%);
  }
}


.button-arrow-left {
  @extend %button-with-left-arrow;
  @include button-with-arrow-color($facebookBlue);
}


.button-arrow-right {
  @extend %button-with-right-arrow;
  @include button-with-arrow-color($buttonDangerBackground);
}


.button {
  @extend %button-base;
{'fraction_non_alphanumeric': 0.1573806078147612, 'fraction_numerical': 0.020984081041968163, 'mean_word_length': 3.2794117647058822, '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': '3008375', 'n_tokens_mistral': 2125, 'n_tokens_neox': 1989, 'n_words': 417}