<commit_before>@import "settings.global";
@import "utilities.boxing";
@import "components.typography";

$button-default-color-bg: $color-default !default;
$button-default-color-fg: $color-white !default;
$button-default-disabled-color-bg: $color-lighter-grey !default;

$button-border-width: $border-width !default;
$button-border-style: $border-style !default;
$button-border-color: transparent !default;
$button-border-radius: $border-radius !default;

$button-focus-border-color: $color-focus !default;
$button-focus-shadow: $box-shadow-focus !default;

$button--ghost-color: $border-color !default;
$button--ghost-hover-color: $color-white !default;
$button--ghost-border-width: $button-border-width !default;
$button--ghost-border-style: $button-border-style !default;

$button--rounded-border-radius: $border-radius-rounded !default;

@mixin button--color($bg-color: $button-default-color-bg, $fg-color: $button-default-color-fg) {
  background-color: $bg-color;
  color: $fg-color;
  border: $button-border-width $button-border-style $button-border-color;

  &:not(:disabled) {
    &:hover {
      background-color: lighten($bg-color, $color-tint);
    }

    &:focus {
      border-color: $button-focus-border-color;
      box-shadow: $button-focus-shadow;
    }

    &:active, &.button--active {
      background-color: darken($bg-color, $color-tint);
    }
  }
}

@mixin button--ghost($color: $button--ghost-color, $hover-text-color: $button--ghost-hover-color) {
  background-color: transparent;
  border: $button--ghost-border-width $button--ghost-border-style $color;
  color: $color;

  &:not(:disabled) {
    &:hover {
      background-color: $color;
      color: $hover-text-color;
    }

    &:focus {
      border-color: $button-focus-border-color;
      box-shadow: $button-focus-shadow;
    }

    &:active, &.button--active {
      background-color: darken($color, $color-tint);
      border-color: darken($color, $color-tint);
      color: $hover-text-color;
    }
  }
}

@mixin button {
  @include window-box--small;
  outline: 0;
  display: inline;
  margin: 0;
  max-width: 100%;
  border: 0;
  border-radius: $button-border-radius;
  @include text-size--medium;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  appearance: none;
  @include button--color;

  &:disabled {
    @include text--quiet;
    background-color: $button-default-disabled-color-bg;
    font-style: italic;
    cursor: not-allowed;
  }
}

@mixin button--rounded {
  border-radius: $button--rounded-border-radius;
}

@mixin button--close {
  @include button--color(transparent, inherit);
  outline: 0;
  position: absolute;
  right: $spacing-medium;
  font-size: 1.4em;
  @include text--loud;
  line-height: 1;
  @include window-box--none;
}

@mixin button--block {<commit_msg>🐛  Reset button font-family by default<commit_after>@import "settings.global";
@import "utilities.boxing";
@import "components.typography";

$button-default-color-bg: $color-default !default;
$button-default-color-fg: $color-white !default;
$button-default-disabled-color-bg: $color-lighter-grey !default;
$button-default-font-family: inherit !default;
$button-default-disabled-font-style: italic !default;

$button-border-width: $border-width !default;
$button-border-style: $border-style !default;
$button-border-color: transparent !default;
$button-border-radius: $border-radius !default;

$button-focus-border-color: $color-focus !default;
$button-focus-shadow: $box-shadow-focus !default;

$button--ghost-color: $border-color !default;
$button--ghost-hover-color: $color-white !default;
$button--ghost-border-width: $button-border-width !default;
$button--ghost-border-style: $button-border-style !default;

$button--rounded-border-radius: $border-radius-rounded !default;

@mixin button--color($bg-color: $button-default-color-bg, $fg-color: $button-default-color-fg) {
  background-color: $bg-color;
  color: $fg-color;
  border: $button-border-width $button-border-style $button-border-color;

  &:not(:disabled) {
    &:hover {
      background-color: lighten($bg-color, $color-tint);
    }

    &:focus {
      border-color: $button-focus-border-color;
      box-shadow: $button-focus-shadow;
    }

    &:active, &.button--active {
      background-color: darken($bg-color, $color-tint);
    }
  }
}

@mixin button--ghost($color: $button--ghost-color, $hover-text-color: $button--ghost-hover-color) {
  background-color: transparent;
  border: $button--ghost-border-width $button--ghost-border-style $color;
  color: $color;

  &:not(:disabled) {
    &:hover {
      background-color: $color;
      color: $hover-text-color;
    }

    &:focus {
      border-color: $button-focus-border-color;
      box-shadow: $button-focus-shadow;
    }

    &:active, &.button--active {
      background-color: darken($color, $color-tint);
      border-color: darken($color, $color-tint);
      color: $hover-text-color;
    }
  }
}

@mixin button {
  @include window-box--small;
  outline: 0;
  display: inline;
  margin: 0;
  max-width: 100%;
  border: 0;
  border-radius: $button-border-radius;
  @include text-size--medium;
  font-family: $button-default-font-family;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  appearance: none;
  @include button--color;

  &:disabled {
    @include text--quiet;
    background-color: $button-default-disabled-color-bg;
    font-style: $button-default-disabled-font-style;
    cursor: not-allowed;
  }
}

@mixin button--rounded {
  border-radius: $button--rounded-border-radius;
}

@mixin button--close {
  @include button--color(transparent, inherit);
  outline: 0;
  position: absolute;
  right: $spacing-medium;
  font-size: 1.4em;
  @include text--loud;
  line-height: 1;
  @include window-box--none;
}

@mixin button--block {
{'fraction_non_alphanumeric': 0.16763389156027192, 'fraction_numerical': 0.00331619963521804, 'mean_word_length': 3.7235708692247456, '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': '5648967', 'n_tokens_mistral': 2134, 'n_tokens_neox': 2092, 'n_words': 377}