<commit_before>$info-color: color('primary-3');
$action-color: color('primary-1');
$selected-color: color('secondary-2');
$unselected-color: color('neutral-2');
$brand-white: color('primary-2');

.icon {
  position: relative;
  width: rem-calc(14);
  height: rem-calc(16);
  top: rem-calc(1);
  margin-right: rem-calc(6);
}

.button {
  @include typography-label;

  display: block;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: $brand-white;
  margin: 0;
  padding-top: rem-calc(15);
  padding-bottom: rem-calc(15);
  background-color: $action-color;
  border: 2px solid $action-color;
  transition: all 100ms;
  width: 100%;
  outline: none;

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

  .icon {
    path {
      transition: fill 300ms ease-out;
      fill: $brand-white;
    }
  }

  &.outline {
    background-color: $brand-white;
    color: $action-color;
    border: 2px solid inherit;
  }
}

.disabled {
  background-color: color('neutral-4');
  border: 2px solid color('neutral-4');
  cursor: not-allowed;
  user-select: none;

  &.outline {
    background-color: transparent;
    color: color('neutral-4');
  }
}

.toggle, .toggle-unselected, .toggle-selected {
  display: block;
  background-color: $brand-white;
  transition: color 300ms ease-out,
  border 300ms ease-out;

  &:hover {
    color: $selected-color;
  }
}

.toggle {
  color: $info-color;
  border: 2px solid $info-color;
  &:hover {
    color: $selected-color;
    border: 2px solid $selected-color;
  }
}

.toggle-unselected {
  color: $unselected-color;
  border: 2px solid $unselected-color;
  &:hover {
    color: $selected-color;
    border: 2px solid $selected-color;
  }
}

.toggle-selected {
  color: $selected-color;
  border: 2px solid $selected-color;

  &:hover {
    cursor: default;
  }
}

.info {
  display: block;
  background-color: $info-color;
  border-color: $info-color;
  color: $brand-white;

  &.outline {
    background-color: $brand-white;
    color: $info-color;
    border: 2px solid inherit;<commit_msg>Make outline button background transparent<commit_after>$info-color: color('primary-3');
$action-color: color('primary-1');
$selected-color: color('secondary-2');
$unselected-color: color('neutral-2');
$brand-white: color('primary-2');

.icon {
  position: relative;
  width: rem-calc(14);
  height: rem-calc(16);
  top: rem-calc(1);
  margin-right: rem-calc(6);
}

.button {
  @include typography-label;

  display: block;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: $brand-white;
  margin: 0;
  padding-top: rem-calc(15);
  padding-bottom: rem-calc(15);
  background-color: $action-color;
  border: 2px solid $action-color;
  transition: all 100ms;
  width: 100%;
  outline: none;

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

  .icon {
    path {
      transition: fill 300ms ease-out;
      fill: $brand-white;
    }
  }

  &.outline {
    background-color: transparent;
    color: $action-color;
    border: 2px solid inherit;
  }
}

.disabled {
  background-color: color('neutral-4');
  border: 2px solid color('neutral-4');
  cursor: not-allowed;
  user-select: none;

  &.outline {
    background-color: transparent;
    color: color('neutral-4');
  }
}

.toggle, .toggle-unselected, .toggle-selected {
  display: block;
  background-color: $brand-white;
  transition: color 300ms ease-out,
  border 300ms ease-out;

  &:hover {
    color: $selected-color;
  }
}

.toggle {
  color: $info-color;
  border: 2px solid $info-color;
  &:hover {
    color: $selected-color;
    border: 2px solid $selected-color;
  }
}

.toggle-unselected {
  color: $unselected-color;
  border: 2px solid $unselected-color;
  &:hover {
    color: $selected-color;
    border: 2px solid $selected-color;
  }
}

.toggle-selected {
  color: $selected-color;
  border: 2px solid $selected-color;

  &:hover {
    cursor: default;
  }
}

.info {
  display: block;
  background-color: $info-color;
  border-color: $info-color;
  color: $brand-white;

  &.outline {
    background-color: transparent;
    color: $info-color;
    border: 2px solid inherit;
{'fraction_non_alphanumeric': 0.15665288251033813, 'fraction_numerical': 0.020919484310386767, 'mean_word_length': 3.261139896373057, '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': '4107073', 'n_tokens_mistral': 1557, 'n_tokens_neox': 1473, 'n_words': 329}