@mixin button---alter() {
}

@mixin button() {
  display: inline-block;
  font-family: $button-font-family;
  font-size: $button-font-size;
  font-weight: $button-font-weight;
  letter-spacing: $button-letter-spacing;
  text-transform: $button-text-transform;
  text-align: center;
  height: $button-height;
  line-height: $button-line-height;
  padding: button-padding-y() button-padding-x();
  border: $button-border-width solid transparent;
  border-radius: $button-border-radius;
  box-shadow: none;
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.4s;
  i {
    line-height: 1;
  }
  &:hover,
  &:focus,
  &:active,
  &.active {
    outline: none;
    text-decoration: none;
  }
  &.disabled,
  &:disabled {
    opacity: 0.65;
    cursor: not-allowed;
  }
  @include button---alter;
}

@mixin button--color---alter($name) {
}

@mixin button--color($name) {
  $color: color($name);
  $active-color: darken($color, 5%);
  background-color: $color;
  border-color: $color;
  color: color-yiq($color);
  box-shadow: none;
  &:hover,
  &:focus,
  &:active,
  &.active {
    background-color: $active-color;
    border-color: $active-color;
    color: color-yiq($color);
    box-shadow: 0 2px 3px rgba($color, 0.08);
  }
  @include button--color---alter($name);
}

@mixin button--outline---alter($name) {
}

@mixin button--outline($name) {
  @include button--color($name);
  $color: color($name);
  background-color: transparent;
  color: $color;
  @include button--outline---alter($name);
}

@mixin button--transparent---alter($name) {
}

@mixin button--transparent($name) {
  $color: color($name);
  $active-color: darken($color, 5%);
  background-color: transparent;
  border-color: transparent;
  color: $color;
  &:hover,
  &:focus,
  &:active,
  &.active {
    color: $active-color;
  }
  @include button--transparent---alter($name);
}

@mixin button--size-extra---alter($height, $line-height, $font-size, $border-radius) {
}

@mixin button--size-extra($height, $line-height, $font-size, $border-radius) {
  $padding: calc-padding($height, $line-height, $button-border-width, $button-border-width, $button-padding-ratio);
  height: $height;
  line-height: $line-height;
  padding: map-get($padding, y) map-get($padding, x);
  font-size: $font-size;
  border-radius: $border-radius;
  @include button--size-extra---alter($height, $line-height, $font-size, $border-radius);
}

@mixin button--size---alter($name) {
}

@mixin button--size($size) {
  $height: map-get-deep($button-sizes, $size, height);
  $line-height: map-get-deep($button-sizes, $size, line-height);
  $font-size: map-get-deep($button-sizes, $size, font-size);
  $border-radius: map-get-deep($button-sizes, $size, border-radius);
  height: $height;
  line-height: $line-height;
  padding: button-padding-y($size) button-padding-x($size);
  font-size: $font-size;
  border-radius: $border-radius;
  @include button--size---alter($size);
}

@mixin button--link---alter() {
}

@mixin button--link() {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: $link-color;
  text-decoration: $link-decoration;
  text-transform: none;
  &:hover,
  &:focus,
  &:active,
  &.active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }
  @include button--link---alter;
}

@mixin button--block---alter {
}

@mixin button--block {
  display: inline-block;
  width: 100%;
  text-align: center;
  @include button--block---alter;
}