<commit_before>// Reset Button
//
// In an article on CSS-Tricks
// (http://css-tricks.com/use-button-element/),
// <NAME> explains that:
// "if a button doesn’t have a meaningful
// href, it’s a <button>"; which makes sense.
//
// This placeholder resets <button>'s
// default styling, so we can use
// <button>s where it makes without
// worrying about the styling.
// -------------------------
@mixin button-reset {
  cursor: pointer;
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 0;
  white-space: nowrap;
  @include prefix((appearance: none), webkit);
  @include prefix((user-select: none));

  &,
  &:active {
    &:focus {
      outline: 0;
    }

  }

}

$button-height: 2.625rem;
$button-height-small: 2rem;

.button,
.button--disabled,
.button--small {
  @include button-reset;
  font-family: inherit;
  height: $button-height;
  padding: .625rem .875rem;
  font-size: $text-4;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid transparent;
  text-align: center;

  &:hover {
    transition: background-color .3s ease 0s;
  }
}

.button--primary {
  background-color: $fill-blue;
  color: $text-white;

  &:not(.button--disabled):hover {
    background-color: darken($fill-blue, 20%);
    color: $text-white;
  }

  &.button--disabled:hover {
    color: $text-white;
  }

  &:not(.button--disabled):active {    
    background-color: darken($fill-blue, 35%);
  }
}

.button--secondary {
  border: 1px solid $fill-blue;
  color: $text-blue;
  background: none;

  &:not(.button--disabled):hover {
    background-color: $fill-blue;
    color: $text-white;
  }

  &.button--disabled:hover {
    color: $text-blue;
  }

  &:not(.button--disabled):active {   
    background-color: darken($fill-blue, 20%); 
  }
}

.button--negative {
  background-color: $fill-red;
  color: $text-white; 

  &:not(.button--disabled):hover {
    color: $text-white; 
    background-color: darken($fill-red, 20%); 
  }

  &.button--disabled:hover {
    color: $text-white;
  }

  &:not(.button--disabled):active {   
    background-color: darken($fill-red, 35%); 
  }
}

.button--disabled {
  opacity: .3;

  &:hover {
    cursor: default;
    transition: none;
  }
}

.button--small {
  font-size: $text-5;
  padding: .375rem .625rem;
  height: $button-height-small;
}


.button-group, .button-group--small {
  position: relative;
  display: inline-block;
  border: $border;
  border-radius: 3px;
  text-decoration: none;
  color: $text-blue;

  input {
    @include visuallyhidden;
  }
  
}

.button-group__item {
  display: inline-block;
  cursor: pointer;
  float: left;
  padding: .6875rem .875rem;
  border-right: $border;
  height: $button-height;

  &:hover {
    transition: background-color .3s ease 0s;
    background-color: $fill-gray--lighter;
  }

  &:last-of-type {
    border: 0;
  }
}

.button-group input:checked + .button-group__item,
.button-group--small input:checked + .button-group__item {
  background-color: $fill-gray--lighter;
  color: $text-gray;
}
<commit_msg>using button_group__radio class for button groups in the css<commit_after>// Reset Button
//
// In an article on CSS-Tricks
// (http://css-tricks.com/use-button-element/),
// <NAME> explains that:
// "if a button doesn’t have a meaningful
// href, it’s a <button>"; which makes sense.
//
// This placeholder resets <button>'s
// default styling, so we can use
// <button>s where it makes without
// worrying about the styling.
// -------------------------
@mixin button-reset {
  cursor: pointer;
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 0;
  white-space: nowrap;
  @include prefix((appearance: none), webkit);
  @include prefix((user-select: none));

  &,
  &:active {
    &:focus {
      outline: 0;
    }

  }

}

$button-height: 2.625rem;
$button-height-small: 2rem;

.button,
.button--disabled,
.button--small {
  @include button-reset;
  font-family: inherit;
  height: $button-height;
  padding: .625rem .875rem;
  font-size: $text-4;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 1px solid transparent;
  text-align: center;

  &:hover {
    transition: background-color .3s ease 0s;
  }
}

.button--primary {
  background-color: $fill-blue;
  color: $text-white;

  &:not(.button--disabled):hover {
    background-color: darken($fill-blue, 20%);
    color: $text-white;
  }

  &.button--disabled:hover {
    color: $text-white;
  }

  &:not(.button--disabled):active {    
    background-color: darken($fill-blue, 35%);
  }
}

.button--secondary {
  border: 1px solid $fill-blue;
  color: $text-blue;
  background: none;

  &:not(.button--disabled):hover {
    background-color: $fill-blue;
    color: $text-white;
  }

  &.button--disabled:hover {
    color: $text-blue;
  }

  &:not(.button--disabled):active {   
    background-color: darken($fill-blue, 20%); 
  }
}

.button--negative {
  background-color: $fill-red;
  color: $text-white; 

  &:not(.button--disabled):hover {
    color: $text-white; 
    background-color: darken($fill-red, 20%); 
  }

  &.button--disabled:hover {
    color: $text-white;
  }

  &:not(.button--disabled):active {   
    background-color: darken($fill-red, 35%); 
  }
}

.button--disabled {
  opacity: .3;

  &:hover {
    cursor: default;
    transition: none;
  }
}

.button--small {
  font-size: $text-5;
  padding: .375rem .625rem;
  height: $button-height-small;
}


.button-group, .button-group--small {
  position: relative;
  display: inline-block;
  border: $border;
  border-radius: 3px;
  text-decoration: none;
  color: $text-blue;

  .button-group__radio {
    @include visuallyhidden;
  }
  
}

.button-group__item {
  display: inline-block;
  cursor: pointer;
  float: left;
  padding: .6875rem .875rem;
  border-right: $border;
  height: $button-height;

  &:hover {
    transition: background-color .3s ease 0s;
    background-color: $fill-gray--lighter;
  }

  &:last-of-type {
    border: 0;
  }
}

.button-group .button-group__radio:checked + .button-group__item,
.button-group--small .button-group__radio:checked + .button-group__item {
  background-color: $fill-gray--lighter;
  color: $text-gray;
}

{'fraction_non_alphanumeric': 0.17098765432098764, 'fraction_numerical': 0.016358024691358025, 'mean_word_length': 2.930260764099454, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 2, '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': '2455305', 'n_tokens_mistral': 2432, 'n_tokens_neox': 2277, 'n_words': 492}