%btn-common {
  @include btn-base;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

%btn-text {
  @extend %btn-common;
  padding: 0;
  margin: 0;
  line-height: 0;
  color: currentColor;
  vertical-align: inherit;
  background-color: transparent;
}

%btn {
  @extend %btn-common;
  padding: $button-padding-y $button-padding-x;
  margin: $button-margin;
  @include border-radius($button-radius);
  outline-color: $button-outline-color;


  &.w-100 {
    margin-right: 0;
    margin-left: 0;
  }
}

%btn-disabled {
  &[disabled] {
    cursor: default;
    opacity: .7;
    box-shadow: none;
  }
}

%btn-color-set {
  // default color
  @include btn-color($button-default-bg-color);
  // each color-set
  @each $name, $color in $color-set {
    &.#{$name} {
      @include btn-color($color);
    }
  }
}

%btn-flat-color-set {
  // default color
  @include btn-flat-color($button-flat-default-bg-color);
  // each color-set
  @each $name, $color in $color-set {
    &.#{$name} {
      @include btn-flat-color($color);
    }
  }
}

// buttons
.btn {
  @extend %btn;
  @extend %btn-disabled;
  @extend %btn-color-set;
}

.btn-icon {
  @extend %btn-common;
  @extend %btn-disabled;
  @extend %btn-color-set;
  width: 2em;
  height: 2em;
  @include border-radius(50%);
}

.btn-flat {
  @extend %btn;
  @extend %btn-disabled;
  @extend %btn-flat-color-set;
  margin: 0;
}

.btn-text {
  @extend %btn-text;
}