<commit_before>// text color indicates state, background indicates interaction
// on how to transition background images:
// http://codersblock.com/blog/gradient-animation-trick/

.btn-mixin (@bg, @fg) {

  @bg-level1: @bg;
  @bg-level2: lighten(@bg, 12%);

  color: @fg;
  background-color: transparent;
  background-image: linear-gradient(
    mix(#00D4FF, @bg-level1 , 3%) 0%,
    darken(@bg-level1, 6%) 50%,
    darken(@bg-level1, 12%) 100%);
  background-size: auto 400%;
  background-position: 0 50%;

  border-radius: @component-border-radius;

  border: 1px solid darken(@bg, 12%);
  transition: all .2s .1s;
  height: auto;
  min-height: @component-line-height;
  line-height: @component-line-height;

  &.btn-xs {
    padding: 0 @space;
    // height: @scale-b-l * 1rem;
    line-height: @scale-b-l * 1rem;
  }
  &.btn-sm {
    padding: 0 @space;
    // height: @scale-b-xl * 1rem;
    line-height: @scale-b-xl * 1rem;
  }
  &.btn-lg {
    padding: 0 @space;
    // height: pow(@scale-b, 4) * 1rem;
    line-height: pow(@scale-b, 4) * 1rem;
  }

  &:focus,
  &:hover {
    color: @fg;
    background-position: 0 0;
    transition: all .1s;
  }
  &:active {
    color: @fg;
    background-image: linear-gradient(
      mix(#00D4FF, @bg-level1 , 3%) 0%,
      darken(@bg-level1, 6%) 50%,
      darken(@bg-level1, 12%) 100%);
    background-position: 0 100%;
  }
  &.selected {
    color: @fg-selected;
    background-image: linear-gradient(
      mix(#00D4FF, @bg-level2 , 3%) 0%,
      darken(@bg-level2, 6%) 50%,
      darken(@bg-level2 , 12%) 100%);
    background-size: auto 200%;
    background-position: 0 100%;
    &:hover {
      color: @fg-selected;
      background-position: 0 50%;
    }
    &:active {
      background-position: 0 0;
    }
  }
}

.btn,
.btn.icon {
  .btn-mixin(@button-background-color, @base-fg);
}
.btn-variant(@var) {}

.btn.btn-primary {
  .btn-mixin(@button-background-color, @fg-highlight);
}
.btn.btn-info {
  .btn-mixin(@bg-info, @fg-highlight);
}
.btn.btn-success {
  .btn-mixin(@bg-success, @fg-highlight);
}
.btn.btn-warning {
  .btn-mixin(@bg-warning, @fg-highlight);
}
.btn.btn-error {
  .btn-mixin(@bg-error, @fg-highlight);
}

.btn-group {
  > .btn:first-child {
    border-left: 1px solid @stroke;
  }
  > .btn:last-child {
    border-right: 1px solid @stroke;
  }
}
.find-and-replace {
  .btn-group > .btn {
    box-sizing: border-box;
    max-height: @component-line-height;
    border: none;
    box-shadow: 0 0 0 1px @stroke;
    &:first-child {
      border-left: none;
    }<commit_msg>correct button height in project-find panel<commit_after>// text color indicates state, background indicates interaction
// on how to transition background images:
// http://codersblock.com/blog/gradient-animation-trick/

.btn-mixin (@bg, @fg) {

  @bg-level1: @bg;
  @bg-level2: lighten(@bg, 12%);

  color: @fg;
  background-color: transparent;
  background-image: linear-gradient(
    mix(#00D4FF, @bg-level1 , 3%) 0%,
    darken(@bg-level1, 6%) 50%,
    darken(@bg-level1, 12%) 100%);
  background-size: auto 400%;
  background-position: 0 50%;

  border-radius: @component-border-radius;

  border: 1px solid darken(@bg, 12%);
  transition: all .2s .1s;
  height: auto;
  min-height: @component-line-height;
  line-height: @component-line-height;

  &.btn-xs {
    padding: 0 @space;
    // height: @scale-b-l * 1rem;
    line-height: @scale-b-l * 1rem;
  }
  &.btn-sm {
    padding: 0 @space;
    // height: @scale-b-xl * 1rem;
    line-height: @scale-b-xl * 1rem;
  }
  &.btn-lg {
    padding: 0 @space;
    // height: pow(@scale-b, 4) * 1rem;
    line-height: pow(@scale-b, 4) * 1rem;
  }

  &:focus,
  &:hover {
    color: @fg;
    background-position: 0 0;
    transition: all .1s;
  }
  &:active {
    color: @fg;
    background-image: linear-gradient(
      mix(#00D4FF, @bg-level1 , 3%) 0%,
      darken(@bg-level1, 6%) 50%,
      darken(@bg-level1, 12%) 100%);
    background-position: 0 100%;
  }
  &.selected {
    color: @fg-selected;
    background-image: linear-gradient(
      mix(#00D4FF, @bg-level2 , 3%) 0%,
      darken(@bg-level2, 6%) 50%,
      darken(@bg-level2 , 12%) 100%);
    background-size: auto 200%;
    background-position: 0 100%;
    &:hover {
      color: @fg-selected;
      background-position: 0 50%;
    }
    &:active {
      background-position: 0 0;
    }
  }
}

.btn,
.btn.icon {
  .btn-mixin(@button-background-color, @base-fg);
}
.btn-variant(@var) {}

.btn.btn-primary {
  .btn-mixin(@button-background-color, @fg-highlight);
}
.btn.btn-info {
  .btn-mixin(@bg-info, @fg-highlight);
}
.btn.btn-success {
  .btn-mixin(@bg-success, @fg-highlight);
}
.btn.btn-warning {
  .btn-mixin(@bg-warning, @fg-highlight);
}
.btn.btn-error {
  .btn-mixin(@bg-error, @fg-highlight);
}

.btn-group {
  > .btn:first-child {
    border-left: 1px solid @stroke;
  }
  > .btn:last-child {
    border-right: 1px solid @stroke;
  }
}
.find-and-replace,
.project-find {
  .btn-group > .btn {
    box-sizing: border-box;
    max-height: @component-line-height;
    border: none;
    box-shadow: 0 0 0 1px @stroke;
    &:first-child {
      border-left: none;
    }
{'fraction_non_alphanumeric': 0.18500486854917234, 'fraction_numerical': 0.03855890944498539, 'mean_word_length': 2.6949640287769783, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, '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': '4781737', 'n_tokens_mistral': 2180, 'n_tokens_neox': 1974, 'n_words': 410}