<commit_before>@import "../pui-variables";

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-flex;
  position: relative;
  height: ($btn-spacing-base*4);
  padding: 0 ($btn-spacing-base*2);
  vertical-align: middle;
  color: $btn-default-color;
  text-align: center;
  font-size: $btn-font-size;
  font-weight: $btn-font-weight;
  line-height: ($btn-spacing-base*4 - 2 * $btn-border-width);
  letter-spacing: .05rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: $btn-border-radius;
  border: $btn-border-width solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  //Transitions
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  -webkit-transition-property: background-color, color, opacity, border;
  transition-property: background-color, color, opacity, border;
  .svgicon {
    font-size: 18px;
    padding: 2px;
    fill: $btn-default-color;
  }
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    margin-right: 2px;
    padding: 2px;
  }
  &:hover,
  &:focus {
    color: $btn-default-color-focus;
    outline: none;
    .svgicon {
      fill: $btn-default-color-focus;
    }
  }
}

button.btn-icon {
  padding: 0 3px;
}

.btn-lg {
  height: ($btn-spacing-base*5);
  line-height: ($btn-spacing-base*5 - 2 * $btn-border-width);
  font-size: $btn-lg-font-size;
  &.btn-icon {
    padding: 0 6px;
  }
  .svgicon {
    font-size: 20px;
  }
}

.btn-sm {
  height: ($btn-spacing-base*3);
  line-height: ($btn-spacing-base*3 - 2 * $btn-border-width);
  font-size: $btn-sm-font-size;
  &.btn-icon {
    padding: 0;
  }
  .svgicon {
    font-size: 14px;
  }
}

button.disabled,
.button.disabled {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

button[disabled], .button[disabled] {
  pointer-events: none;
  cursor: default;
}

//Default Button
//---------------------------------------
button.btn-default,
.button.btn-default,
input[type="submit"].btn-default,
input[type="reset"].btn-default,
input[type="button"].btn-default {
  background-color: $btn-default-color;
  color: $btn-light;
  border-color: $btn-default-color;
  .svgicon {
    fill: $btn-light;
  }
}

.button.btn-default:focus,
button.btn-default:focus,
input[type="submit"].btn-default:focus,
input[type="reset"].btn-default:focus,
input[type="button"].btn-default:focus {
  background-color: $btn-default-color-focus;
  border-color: $btn-default-color-focus;
  outline: none;
}

.button.btn-default:hover,
.button.btn-default:focus:hover,
button.btn-default:hover,
button.btn-default:focus:hover,
input[type="submit"].btn-default:hover,
input[type="submit"].btn-default:focus:hover,
input[type="reset"].btn-default:hover,
input[type="reset"].btn-default:focus:hover,
input[type="button"].btn-default:hover,
input[type="button"].btn-default:focus:hover {
  background-color: $btn-default-color-hover;
  border-color: $btn-default-color-hover;
  outline: none;
}

//Spinner
button.btn-default,
.button.btn-default,
input[type="submit"].btn-default,
input[type="reset"].btn-default,
input[type="button"].btn-default {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-light;
    }
    .path {
      stroke: $btn-light;
    }
  }
}

//Default Alt Button
//---------------------------------------
button.btn-default-alt,
.button.btn-default-alt,
input[type="submit"].btn-default-alt,
input[type="reset"].btn-default-alt,
input[type="button"].btn-default-alt
{
  background-color: transparent;
  color: $btn-default-color;
  border-color: $btn-default-color;
  .svgicon {
    fill: $btn-default-color;
  }
}

.button.btn-default-alt:focus,
button.btn-default-alt:focus,
input[type="submit"].btn-default-alt:focus,
input[type="reset"].btn-default-alt:focus,
input[type="button"].btn-default-alt:focus {
  background-color: transparent;
  color: $btn-default-color-focus;
  border-color: $btn-default-color-focus;
  outline: none;
  .svgicon {
    fill: $btn-default-color-focus;
  }
}

.button.btn-default-alt:hover,
.button.btn-default-alt:focus:hover,
button.btn-default-alt:hover,
button.btn-default-alt:focus:hover,
input[type="submit"].btn-default-alt:hover,
input[type="submit"].btn-default-alt:focus:hover,
input[type="reset"].btn-default-alt:hover,
input[type="reset"].btn-default-alt:focus:hover,
input[type="button"].btn-default-alt:hover,
input[type="button"].btn-default-alt:focus:hover {
  background-color: transparent;
  color: $btn-default-color-hover;
  border-color: $btn-default-color-hover;
  outline: none;
  .svgicon {
    fill: $btn-default-color-hover;
  }
}

//Spinner
button.btn-default-alt,
.button.btn-default-alt,
input[type="submit"].btn-default-alt,
input[type="reset"].btn-default-alt,
input[type="button"].btn-default-alt {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-default-color;
    }
    .path {
      stroke: $btn-default-color;
    }
  }
}

//Default Alt Button WHITE
//---------------------------------------
button.btn-default-alt-wh,
.button.btn-default-alt-wh,
input[type="submit"].btn-default-alt-wh,
input[type="reset"].btn-default-alt-wh,
input[type="button"].btn-default-alt-wh {
  background-color: transparent;
  color: $btn-light;
  border-color: $btn-light;
  .svgicon {
    fill: $btn-light;
  }
}

.button.btn-default-alt-wh:focus,
button.btn-default-alt-wh:focus,
input[type="submit"].btn-default-alt-wh:focus,
input[type="reset"].btn-default-alt-wh:focus,
input[type="button"].btn-default-alt-wh:focus {
  background-color: rgba(255, 255, 255, 0.1);
  color: $btn-light;
  border-color: $btn-light;
  outline: none;
  .svgicon {
    fill: $btn-light;
  }
}

.button.btn-default-alt-wh:hover,
.button.btn-default-alt-wh:focus:hover,
button.btn-default-alt-wh:hover,
button.btn-default-alt-wh:focus:hover,
input[type="submit"].btn-default-alt-wh:hover,
input[type="submit"].btn-default-alt-wh:focus:hover,
input[type="reset"].btn-default-alt-wh:hover,
input[type="reset"].btn-default-alt-wh:focus:hover,
input[type="button"].btn-default-alt-wh:hover,
input[type="button"].btn-default-alt-wh:focus:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: $btn-light;
  border-color: $btn-light;
  outline: none;
  .svgicon {
    fill: $btn-light;
  }
}

//Spinner
button.btn-default-alt-wh,
.button.btn-default-alt-wh,
input[type="submit"].btn-default-alt-wh,
input[type="reset"].btn-default-alt-wh,
input[type="button"].btn-default-alt-wh {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-light;
    }
    .path {
      stroke: $btn-light;
    }
  }
}

//Primary Button
//---------------------------------------
button.btn-primary,
.button.btn-primary,
input[type="submit"].btn-primary,
input[type="reset"].btn-primary,
input[type="button"].btn-primary {
  background-color: $btn-primary-color;
  color: $btn-light;
  border-color: $btn-primary-color;
  .svgicon {
    fill: $btn-light;
  }
}

.button.btn-primary:focus,
button.btn-primary:focus,
input[type="submit"].btn-primary:focus,
input[type="reset"].btn-primary:focus,
input[type="button"].btn-primary:focus {
  background-color: $btn-primary-color-focus;
  border-color: $btn-primary-color-focus;
  outline: none;
}

.button.btn-primary:hover,
.button.btn-primary:focus:hover,
button.btn-primary:hover,
button.btn-primary:focus:hover,
input[type="submit"].btn-primary:hover,
input[type="submit"].btn-primary:focus:hover,
input[type="reset"].btn-primary:hover,
input[type="reset"].btn-primary:focus:hover,
input[type="button"].btn-primary:hover,
input[type="button"].btn-primary:focus:hover {
  background-color: $btn-primary-color-hover;
  border-color: $btn-primary-color-hover;
  outline: none;
}

//Spinner
button.btn-primary,
.button.btn-primary,
input[type="submit"].btn-primary,
input[type="reset"].btn-primary,
input[type="button"].btn-primary {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-light;
    }
    .path {
      stroke: $btn-light;
    }
  }
}

//Flat Primary
.btn-primary-flat {
  color: $btn-primary-color;
  .svgicon {
    fill: $btn-primary-color;
  }
  &:hover,
  &:focus,
  &:hover:focus {
    color: $btn-primary-color-focus;
    outline: none;
    .svgicon {
      fill: $btn-primary-color-focus;
    }
  }
}

//Primary Alt Button
//---------------------------------------
button.btn-primary-alt,
.button.btn-primary-alt,
input[type="submit"].btn-primary-alt,
input[type="reset"].btn-primary-alt,
input[type="button"].btn-primary-alt {
  background-color: transparent;
  color: $btn-primary-color;
  border-color: $btn-primary-color;
  .svgicon {
    fill: $btn-primary-color;
  }
}

.button.btn-primary-alt:focus,
button.btn-primary-alt:focus,
input[type="submit"].btn-primary-alt:focus,
input[type="reset"].btn-primary-alt:focus,
input[type="button"].btn-primary-alt:focus {
  background-color: transparent;
  color: $btn-primary-color-focus;
  border-color: $btn-primary-color-focus;
  outline: none;
  .svgicon {
    fill: $btn-primary-color-focus;
  }
}

.button.btn-primary-alt:hover,
.button.btn-primary-alt:focus:hover,
button.btn-primary-alt:hover,
button.btn-primary-alt:focus:hover,
input[type="submit"].btn-primary-alt:hover,
input[type="submit"].btn-primary-alt:focus:hover,
input[type="reset"].btn-primary-alt:hover,
input[type="reset"].btn-primary-alt:focus:hover,
input[type="button"].btn-primary-alt:hover,
input[type="button"].btn-primary-alt:focus:hover {
  background-color: transparent;
  color: $btn-primary-color-hover;
  border-color: $btn-primary-color-hover;
  outline: none;
  .svgicon {
    fill: $btn-primary-color-hover;
  }
}

//Spinner
button.btn-primary-alt,
.button.btn-primary-alt,
input[type="submit"].btn-primary-alt,
input[type="reset"].btn-primary-alt,
input[type="button"].btn-primary-alt {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-primary-color;
    }
    .path {
      stroke: $btn-primary-color;
    }
  }
}


//Danger Button
//---------------------------------------
button.btn-danger,
.button.btn-danger,
input[type="submit"].btn-danger,
input[type="reset"].btn-danger,
input[type="button"].btn-danger {
  background-color: $btn-danger-color;
  color: $btn-light;
  border-color: $btn-danger-color;
  .svgicon {
    fill: $btn-light;
  }
}

.button.btn-danger:focus,
button.btn-danger:focus,
input[type="submit"].btn-danger:focus,
input[type="reset"].btn-danger:focus,
input[type="button"].btn-danger:focus {
  background-color: $btn-danger-color-focus;
  border-color: $btn-danger-color-focus;
  outline: none;
}

.button.btn-danger:hover,
.button.btn-danger:focus:hover,
button.btn-danger:hover,
button.btn-danger:focus:hover,
input[type="submit"].btn-danger:hover,
input[type="submit"].btn-danger:focus:hover,
input[type="reset"].btn-danger:hover,
input[type="reset"].btn-danger:focus:hover,
input[type="button"].btn-danger:hover,
input[type="button"].btn-danger:focus:hover {
  background-color: $btn-danger-color-hover;
  border-color: $btn-danger-color-hover;
  outline: none;
}

button.btn-danger,
.button.btn-danger,
input[type="submit"].btn-danger,
input[type="reset"].btn-danger,
input[type="button"].btn-danger {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-light;
    }
    .path {
      stroke: $btn-light;
    }
  }
}
//Flat danger
.btn-danger-flat {
  color: $btn-danger-color;
  .svgicon {
    fill: $btn-danger-color;
  }
  &:hover,
  &:focus,
  &:hover:focus {
    color: $btn-danger-color-focus;
    outline: none;
    .svgicon {
      fill: $btn-danger-color-focus;
    }
  }
}
//danger Alt Button
//---------------------------------------
button.btn-danger-alt,
.button.btn-danger-alt,
input[type="submit"].btn-danger-alt,
input[type="reset"].btn-danger-alt,
input[type="button"].btn-danger-alt {
  background-color: transparent;
  color: $btn-danger-color;
  border-color: $btn-danger-color;
  .svgicon {
    fill: $btn-danger-color;
  }
}

.button.btn-danger-alt:focus,
button.btn-danger-alt:focus,
input[type="submit"].btn-danger-alt:focus,
input[type="reset"].btn-danger-alt:focus,
input[type="button"].btn-danger-alt:focus {
  background-color: transparent;
  color: $btn-danger-color-focus;
  border-color: $btn-danger-color-focus;
  outline: none;
  .svgicon {
    fill: $btn-danger-color-focus;
  }
}

.button.btn-danger-alt:hover,
.button.btn-danger-alt:focus:hover,
button.btn-danger-alt:hover,
button.btn-danger-alt:focus:hover,
input[type="submit"].btn-danger-alt:hover,
input[type="submit"].btn-danger-alt:focus:hover,
input[type="reset"].btn-danger-alt:hover,
input[type="reset"].btn-danger-alt:focus:hover,
input[type="button"].btn-danger-alt:hover,
input[type="button"].btn-danger-alt:focus:hover {
  background-color: transparent;
  color: $btn-danger-color-hover;
  border-color: $btn-danger-color-hover;
  outline: none;
  .svgicon {
    fill: $btn-danger-color-hover;
  }
}

button.btn-danger-alt,
.button.btn-danger-alt,
input[type="submit"].btn-danger-alt,
input[type="reset"].btn-danger-alt,
input[type="button"].btn-danger-alt {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-danger-color;
    }
    .path {
      stroke: $btn-danger-color;
    }
  }
}

//Brand Button
//---------------------------------------
button.btn-brand,
.button.btn-brand,
input[type="submit"].btn-brand,
input[type="reset"].btn-brand,
input[type="button"].btn-brand {
  background-color: $btn-brand-color;
  color: $btn-light;
  border-color: $btn-brand-color;
  .svgicon {
    fill: $btn-light;
  }
}

.button.btn-brand:focus,
button.btn-brand:focus,
input[type="submit"].btn-brand:focus,
input[type="reset"].btn-brand:focus,
input[type="button"].btn-brand:focus {
  background-color: $btn-brand-color-focus;
  border-color: $btn-brand-color-focus;
  outline: none;
}

.button.btn-brand:hover,
.button.btn-brand:focus:hover,
button.btn-brand:hover,
button.btn-brand:focus:hover,
input[type="submit"].btn-brand:hover,
input[type="submit"].btn-brand:focus:hover,
input[type="reset"].btn-brand:hover,
input[type="reset"].btn-brand:focus:hover,
input[type="button"].btn-brand:hover,
input[type="button"].btn-brand:focus:hover {
  background-color: $btn-brand-color-hover;
  border-color: $btn-brand-color-hover;
  outline: none;
}

//Spinner
button.btn-brand,
.button.btn-brand,
input[type="submit"].btn-brand,
input[type="reset"].btn-brand,
input[type="button"].btn-brand {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-light;
    }
    .path {
      stroke: $btn-light;
    }
  }
}

//Flat Brand
.btn-brand-flat {
  color: $btn-brand-color;
  .svgicon {
    fill: $btn-brand-color;
  }
  &:hover,
  &:focus,
  &:hover:focus {
    color: $btn-brand-color-focus;
    outline: none;
    .svgicon {
      fill: $btn-brand-color-focus;
    }
  }
}

//Brand Alt Button
//---------------------------------------
button.btn-brand-alt,
.button.btn-brand-alt,
input[type="submit"].btn-brand-alt,
input[type="reset"].btn-brand-alt,
input[type="button"].btn-brand-alt {
  background-color: transparent;
  color: $btn-brand-color;
  border-color: $btn-brand-color;
  .svgicon {
    fill: $btn-brand-color;
  }
}

.button.btn-brand-alt:focus,
button.btn-brand-alt:focus,
input[type="submit"].btn-brand-alt:focus,
input[type="reset"].btn-brand-alt:focus,
input[type="button"].btn-brand-alt:focus {
  background-color: transparent;
  color: $btn-brand-color-focus;
  border-color: $btn-brand-color-focus;
  outline: none;
  .svgicon {
    fill: $btn-brand-color-focus;
  }
}

.button.btn-brand-alt:hover,
.button.btn-brand-alt:focus:hover,
button.btn-brand-alt:hover,
button.btn-brand-alt:focus:hover,
input[type="submit"].btn-brand-alt:hover,
input[type="submit"].btn-brand-alt:focus:hover,
input[type="reset"].btn-brand-alt:hover,
input[type="reset"].btn-brand-alt:focus:hover,
input[type="button"].btn-brand-alt:hover,
input[type="button"].btn-brand-alt:focus:hover {
  background-color: transparent;
  color: $btn-brand-color-hover;
  border-color: $btn-brand-color-hover;
  outline: none;
  .svgicon {
    fill: $btn-brand-color-hover;
  }
}

//Spinner
button.btn-brand-alt,
.button.btn-brand-alt,
input[type="submit"].btn-brand-alt,
input[type="reset"].btn-brand-alt,
input[type="button"].btn-brand-alt {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-brand-color;
    }
    .path {
      stroke: $btn-brand-color;
    }
  }
}<commit_msg>feat(button): set letter spacing to .5px<commit_after>@import "../pui-variables";

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-flex;
  position: relative;
  height: ($btn-spacing-base*4);
  padding: 0 ($btn-spacing-base*2);
  vertical-align: middle;
  color: $btn-default-color;
  text-align: center;
  font-size: $btn-font-size;
  font-weight: $btn-font-weight;
  line-height: ($btn-spacing-base*4 - 2 * $btn-border-width);
  letter-spacing: .05px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: $btn-border-radius;
  border: $btn-border-width solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  //Transitions
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  -webkit-transition-property: background-color, color, opacity, border;
  transition-property: background-color, color, opacity, border;
  .svgicon {
    font-size: 18px;
    padding: 2px;
    fill: $btn-default-color;
  }
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    margin-right: 2px;
    padding: 2px;
  }
  &:hover,
  &:focus {
    color: $btn-default-color-focus;
    outline: none;
    .svgicon {
      fill: $btn-default-color-focus;
    }
  }
}

button.btn-icon {
  padding: 0 3px;
}

.btn-lg {
  height: ($btn-spacing-base*5);
  line-height: ($btn-spacing-base*5 - 2 * $btn-border-width);
  font-size: $btn-lg-font-size;
  &.btn-icon {
    padding: 0 6px;
  }
  .svgicon {
    font-size: 20px;
  }
}

.btn-sm {
  height: ($btn-spacing-base*3);
  line-height: ($btn-spacing-base*3 - 2 * $btn-border-width);
  font-size: $btn-sm-font-size;
  &.btn-icon {
    padding: 0;
  }
  .svgicon {
    font-size: 14px;
  }
}

button.disabled,
.button.disabled {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

button[disabled], .button[disabled] {
  pointer-events: none;
  cursor: default;
}

//Default Button
//---------------------------------------
button.btn-default,
.button.btn-default,
input[type="submit"].btn-default,
input[type="reset"].btn-default,
input[type="button"].btn-default {
  background-color: $btn-default-color;
  color: $btn-light;
  border-color: $btn-default-color;
  .svgicon {
    fill: $btn-light;
  }
}

.button.btn-default:focus,
button.btn-default:focus,
input[type="submit"].btn-default:focus,
input[type="reset"].btn-default:focus,
input[type="button"].btn-default:focus {
  background-color: $btn-default-color-focus;
  border-color: $btn-default-color-focus;
  outline: none;
}

.button.btn-default:hover,
.button.btn-default:focus:hover,
button.btn-default:hover,
button.btn-default:focus:hover,
input[type="submit"].btn-default:hover,
input[type="submit"].btn-default:focus:hover,
input[type="reset"].btn-default:hover,
input[type="reset"].btn-default:focus:hover,
input[type="button"].btn-default:hover,
input[type="button"].btn-default:focus:hover {
  background-color: $btn-default-color-hover;
  border-color: $btn-default-color-hover;
  outline: none;
}

//Spinner
button.btn-default,
.button.btn-default,
input[type="submit"].btn-default,
input[type="reset"].btn-default,
input[type="button"].btn-default {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-light;
    }
    .path {
      stroke: $btn-light;
    }
  }
}

//Default Alt Button
//---------------------------------------
button.btn-default-alt,
.button.btn-default-alt,
input[type="submit"].btn-default-alt,
input[type="reset"].btn-default-alt,
input[type="button"].btn-default-alt
{
  background-color: transparent;
  color: $btn-default-color;
  border-color: $btn-default-color;
  .svgicon {
    fill: $btn-default-color;
  }
}

.button.btn-default-alt:focus,
button.btn-default-alt:focus,
input[type="submit"].btn-default-alt:focus,
input[type="reset"].btn-default-alt:focus,
input[type="button"].btn-default-alt:focus {
  background-color: transparent;
  color: $btn-default-color-focus;
  border-color: $btn-default-color-focus;
  outline: none;
  .svgicon {
    fill: $btn-default-color-focus;
  }
}

.button.btn-default-alt:hover,
.button.btn-default-alt:focus:hover,
button.btn-default-alt:hover,
button.btn-default-alt:focus:hover,
input[type="submit"].btn-default-alt:hover,
input[type="submit"].btn-default-alt:focus:hover,
input[type="reset"].btn-default-alt:hover,
input[type="reset"].btn-default-alt:focus:hover,
input[type="button"].btn-default-alt:hover,
input[type="button"].btn-default-alt:focus:hover {
  background-color: transparent;
  color: $btn-default-color-hover;
  border-color: $btn-default-color-hover;
  outline: none;
  .svgicon {
    fill: $btn-default-color-hover;
  }
}

//Spinner
button.btn-default-alt,
.button.btn-default-alt,
input[type="submit"].btn-default-alt,
input[type="reset"].btn-default-alt,
input[type="button"].btn-default-alt {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-default-color;
    }
    .path {
      stroke: $btn-default-color;
    }
  }
}

//Default Alt Button WHITE
//---------------------------------------
button.btn-default-alt-wh,
.button.btn-default-alt-wh,
input[type="submit"].btn-default-alt-wh,
input[type="reset"].btn-default-alt-wh,
input[type="button"].btn-default-alt-wh {
  background-color: transparent;
  color: $btn-light;
  border-color: $btn-light;
  .svgicon {
    fill: $btn-light;
  }
}

.button.btn-default-alt-wh:focus,
button.btn-default-alt-wh:focus,
input[type="submit"].btn-default-alt-wh:focus,
input[type="reset"].btn-default-alt-wh:focus,
input[type="button"].btn-default-alt-wh:focus {
  background-color: rgba(255, 255, 255, 0.1);
  color: $btn-light;
  border-color: $btn-light;
  outline: none;
  .svgicon {
    fill: $btn-light;
  }
}

.button.btn-default-alt-wh:hover,
.button.btn-default-alt-wh:focus:hover,
button.btn-default-alt-wh:hover,
button.btn-default-alt-wh:focus:hover,
input[type="submit"].btn-default-alt-wh:hover,
input[type="submit"].btn-default-alt-wh:focus:hover,
input[type="reset"].btn-default-alt-wh:hover,
input[type="reset"].btn-default-alt-wh:focus:hover,
input[type="button"].btn-default-alt-wh:hover,
input[type="button"].btn-default-alt-wh:focus:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: $btn-light;
  border-color: $btn-light;
  outline: none;
  .svgicon {
    fill: $btn-light;
  }
}

//Spinner
button.btn-default-alt-wh,
.button.btn-default-alt-wh,
input[type="submit"].btn-default-alt-wh,
input[type="reset"].btn-default-alt-wh,
input[type="button"].btn-default-alt-wh {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-light;
    }
    .path {
      stroke: $btn-light;
    }
  }
}

//Primary Button
//---------------------------------------
button.btn-primary,
.button.btn-primary,
input[type="submit"].btn-primary,
input[type="reset"].btn-primary,
input[type="button"].btn-primary {
  background-color: $btn-primary-color;
  color: $btn-light;
  border-color: $btn-primary-color;
  .svgicon {
    fill: $btn-light;
  }
}

.button.btn-primary:focus,
button.btn-primary:focus,
input[type="submit"].btn-primary:focus,
input[type="reset"].btn-primary:focus,
input[type="button"].btn-primary:focus {
  background-color: $btn-primary-color-focus;
  border-color: $btn-primary-color-focus;
  outline: none;
}

.button.btn-primary:hover,
.button.btn-primary:focus:hover,
button.btn-primary:hover,
button.btn-primary:focus:hover,
input[type="submit"].btn-primary:hover,
input[type="submit"].btn-primary:focus:hover,
input[type="reset"].btn-primary:hover,
input[type="reset"].btn-primary:focus:hover,
input[type="button"].btn-primary:hover,
input[type="button"].btn-primary:focus:hover {
  background-color: $btn-primary-color-hover;
  border-color: $btn-primary-color-hover;
  outline: none;
}

//Spinner
button.btn-primary,
.button.btn-primary,
input[type="submit"].btn-primary,
input[type="reset"].btn-primary,
input[type="button"].btn-primary {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-light;
    }
    .path {
      stroke: $btn-light;
    }
  }
}

//Flat Primary
.btn-primary-flat {
  color: $btn-primary-color;
  .svgicon {
    fill: $btn-primary-color;
  }
  &:hover,
  &:focus,
  &:hover:focus {
    color: $btn-primary-color-focus;
    outline: none;
    .svgicon {
      fill: $btn-primary-color-focus;
    }
  }
}

//Primary Alt Button
//---------------------------------------
button.btn-primary-alt,
.button.btn-primary-alt,
input[type="submit"].btn-primary-alt,
input[type="reset"].btn-primary-alt,
input[type="button"].btn-primary-alt {
  background-color: transparent;
  color: $btn-primary-color;
  border-color: $btn-primary-color;
  .svgicon {
    fill: $btn-primary-color;
  }
}

.button.btn-primary-alt:focus,
button.btn-primary-alt:focus,
input[type="submit"].btn-primary-alt:focus,
input[type="reset"].btn-primary-alt:focus,
input[type="button"].btn-primary-alt:focus {
  background-color: transparent;
  color: $btn-primary-color-focus;
  border-color: $btn-primary-color-focus;
  outline: none;
  .svgicon {
    fill: $btn-primary-color-focus;
  }
}

.button.btn-primary-alt:hover,
.button.btn-primary-alt:focus:hover,
button.btn-primary-alt:hover,
button.btn-primary-alt:focus:hover,
input[type="submit"].btn-primary-alt:hover,
input[type="submit"].btn-primary-alt:focus:hover,
input[type="reset"].btn-primary-alt:hover,
input[type="reset"].btn-primary-alt:focus:hover,
input[type="button"].btn-primary-alt:hover,
input[type="button"].btn-primary-alt:focus:hover {
  background-color: transparent;
  color: $btn-primary-color-hover;
  border-color: $btn-primary-color-hover;
  outline: none;
  .svgicon {
    fill: $btn-primary-color-hover;
  }
}

//Spinner
button.btn-primary-alt,
.button.btn-primary-alt,
input[type="submit"].btn-primary-alt,
input[type="reset"].btn-primary-alt,
input[type="button"].btn-primary-alt {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-primary-color;
    }
    .path {
      stroke: $btn-primary-color;
    }
  }
}


//Danger Button
//---------------------------------------
button.btn-danger,
.button.btn-danger,
input[type="submit"].btn-danger,
input[type="reset"].btn-danger,
input[type="button"].btn-danger {
  background-color: $btn-danger-color;
  color: $btn-light;
  border-color: $btn-danger-color;
  .svgicon {
    fill: $btn-light;
  }
}

.button.btn-danger:focus,
button.btn-danger:focus,
input[type="submit"].btn-danger:focus,
input[type="reset"].btn-danger:focus,
input[type="button"].btn-danger:focus {
  background-color: $btn-danger-color-focus;
  border-color: $btn-danger-color-focus;
  outline: none;
}

.button.btn-danger:hover,
.button.btn-danger:focus:hover,
button.btn-danger:hover,
button.btn-danger:focus:hover,
input[type="submit"].btn-danger:hover,
input[type="submit"].btn-danger:focus:hover,
input[type="reset"].btn-danger:hover,
input[type="reset"].btn-danger:focus:hover,
input[type="button"].btn-danger:hover,
input[type="button"].btn-danger:focus:hover {
  background-color: $btn-danger-color-hover;
  border-color: $btn-danger-color-hover;
  outline: none;
}

button.btn-danger,
.button.btn-danger,
input[type="submit"].btn-danger,
input[type="reset"].btn-danger,
input[type="button"].btn-danger {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-light;
    }
    .path {
      stroke: $btn-light;
    }
  }
}
//Flat danger
.btn-danger-flat {
  color: $btn-danger-color;
  .svgicon {
    fill: $btn-danger-color;
  }
  &:hover,
  &:focus,
  &:hover:focus {
    color: $btn-danger-color-focus;
    outline: none;
    .svgicon {
      fill: $btn-danger-color-focus;
    }
  }
}
//danger Alt Button
//---------------------------------------
button.btn-danger-alt,
.button.btn-danger-alt,
input[type="submit"].btn-danger-alt,
input[type="reset"].btn-danger-alt,
input[type="button"].btn-danger-alt {
  background-color: transparent;
  color: $btn-danger-color;
  border-color: $btn-danger-color;
  .svgicon {
    fill: $btn-danger-color;
  }
}

.button.btn-danger-alt:focus,
button.btn-danger-alt:focus,
input[type="submit"].btn-danger-alt:focus,
input[type="reset"].btn-danger-alt:focus,
input[type="button"].btn-danger-alt:focus {
  background-color: transparent;
  color: $btn-danger-color-focus;
  border-color: $btn-danger-color-focus;
  outline: none;
  .svgicon {
    fill: $btn-danger-color-focus;
  }
}

.button.btn-danger-alt:hover,
.button.btn-danger-alt:focus:hover,
button.btn-danger-alt:hover,
button.btn-danger-alt:focus:hover,
input[type="submit"].btn-danger-alt:hover,
input[type="submit"].btn-danger-alt:focus:hover,
input[type="reset"].btn-danger-alt:hover,
input[type="reset"].btn-danger-alt:focus:hover,
input[type="button"].btn-danger-alt:hover,
input[type="button"].btn-danger-alt:focus:hover {
  background-color: transparent;
  color: $btn-danger-color-hover;
  border-color: $btn-danger-color-hover;
  outline: none;
  .svgicon {
    fill: $btn-danger-color-hover;
  }
}

button.btn-danger-alt,
.button.btn-danger-alt,
input[type="submit"].btn-danger-alt,
input[type="reset"].btn-danger-alt,
input[type="button"].btn-danger-alt {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-danger-color;
    }
    .path {
      stroke: $btn-danger-color;
    }
  }
}

//Brand Button
//---------------------------------------
button.btn-brand,
.button.btn-brand,
input[type="submit"].btn-brand,
input[type="reset"].btn-brand,
input[type="button"].btn-brand {
  background-color: $btn-brand-color;
  color: $btn-light;
  border-color: $btn-brand-color;
  .svgicon {
    fill: $btn-light;
  }
}

.button.btn-brand:focus,
button.btn-brand:focus,
input[type="submit"].btn-brand:focus,
input[type="reset"].btn-brand:focus,
input[type="button"].btn-brand:focus {
  background-color: $btn-brand-color-focus;
  border-color: $btn-brand-color-focus;
  outline: none;
}

.button.btn-brand:hover,
.button.btn-brand:focus:hover,
button.btn-brand:hover,
button.btn-brand:focus:hover,
input[type="submit"].btn-brand:hover,
input[type="submit"].btn-brand:focus:hover,
input[type="reset"].btn-brand:hover,
input[type="reset"].btn-brand:focus:hover,
input[type="button"].btn-brand:hover,
input[type="button"].btn-brand:focus:hover {
  background-color: $btn-brand-color-hover;
  border-color: $btn-brand-color-hover;
  outline: none;
}

//Spinner
button.btn-brand,
.button.btn-brand,
input[type="submit"].btn-brand,
input[type="reset"].btn-brand,
input[type="button"].btn-brand {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-light;
    }
    .path {
      stroke: $btn-light;
    }
  }
}

//Flat Brand
.btn-brand-flat {
  color: $btn-brand-color;
  .svgicon {
    fill: $btn-brand-color;
  }
  &:hover,
  &:focus,
  &:hover:focus {
    color: $btn-brand-color-focus;
    outline: none;
    .svgicon {
      fill: $btn-brand-color-focus;
    }
  }
}

//Brand Alt Button
//---------------------------------------
button.btn-brand-alt,
.button.btn-brand-alt,
input[type="submit"].btn-brand-alt,
input[type="reset"].btn-brand-alt,
input[type="button"].btn-brand-alt {
  background-color: transparent;
  color: $btn-brand-color;
  border-color: $btn-brand-color;
  .svgicon {
    fill: $btn-brand-color;
  }
}

.button.btn-brand-alt:focus,
button.btn-brand-alt:focus,
input[type="submit"].btn-brand-alt:focus,
input[type="reset"].btn-brand-alt:focus,
input[type="button"].btn-brand-alt:focus {
  background-color: transparent;
  color: $btn-brand-color-focus;
  border-color: $btn-brand-color-focus;
  outline: none;
  .svgicon {
    fill: $btn-brand-color-focus;
  }
}

.button.btn-brand-alt:hover,
.button.btn-brand-alt:focus:hover,
button.btn-brand-alt:hover,
button.btn-brand-alt:focus:hover,
input[type="submit"].btn-brand-alt:hover,
input[type="submit"].btn-brand-alt:focus:hover,
input[type="reset"].btn-brand-alt:hover,
input[type="reset"].btn-brand-alt:focus:hover,
input[type="button"].btn-brand-alt:hover,
input[type="button"].btn-brand-alt:focus:hover {
  background-color: transparent;
  color: $btn-brand-color-hover;
  border-color: $btn-brand-color-hover;
  outline: none;
  .svgicon {
    fill: $btn-brand-color-hover;
  }
}

//Spinner
button.btn-brand-alt,
.button.btn-brand-alt,
input[type="submit"].btn-brand-alt,
input[type="reset"].btn-brand-alt,
input[type="button"].btn-brand-alt {
  .icon-spinner,
  .icon-spinner-md,
  .icon-spinner-sm {
    .ring {
      stroke: $btn-brand-color;
    }
    .path {
      stroke: $btn-brand-color;
    }
  }
}
{'fraction_non_alphanumeric': 0.20946068092799036, 'fraction_numerical': 0.0034046399517927086, 'mean_word_length': 3.6388539482879105, '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': '4039455', 'n_tokens_mistral': 12442, 'n_tokens_neox': 12217, 'n_words': 1559}