@mixin btn-color($color, $inverse: false) {
  @if ($inverse) {
    color: color('#{$color}');
    background-color: color('white');
    border: 2px solid color('#{$color}');
    @extend %no-shadow;
    &:hover,
    &:active,
    &:active:focus {
      color: color('#{$color}-dark');
      background-color: color('white');
      text-decoration: underline;
    }
  } @else {
    color: color('white');
    background-color: color('#{$color}');
    border: 0;
    &:hover,
    &:active,
    &:active:focus {
      background-color: color('#{$color}-dark');
      text-decoration: none;
    }
  }
}

.btn {
  @extend %btn-style;

  &:hover,
  &:active {
    background-color: color('white');
  }
  &.btn-inverse {
    @include btn-color('gray');
  }

  &.btn-default {
    color: $color-gray-600;
    &:hover,
    &:active,
    &:focus {
      background-color: color('white');
    }
    &.disabled {
      background-color: color('silver');
    }
    &.btn-inverse {
      @include btn-color('gray');
    }
  }

  // creates a button style for each color in core color dictionary
  @each $id, $color in $core_colors {
    @at-root #{&}.btn-#{$id} {
      @include btn-color(#{$id});
      &.btn-inverse {
        @include btn-color(#{$id}, true);
      }
    }
  }

  &.btn-link {
    @include btn-color('secondary', true);
    background: none;
    border: 0;
    box-shadow: none;
    &:hover,
    &:active,
    &:focus {
      border: 0;
      background: none;
      text-decoration: underline;
      &:focus {
        border: 0;
        background: none;
        box-shadow: none;
      }
    }
    &.btn-inverse {
      color: color('white');
      border: 2px solid color('white');
      &:hover,
      &:active,
      &:focus,
      &:active:focus {
        color: color('white');
        border: 2px solid color('white');
      }
    }
  }
  &.btn-sign_in,
  &.btn-plain {
    color: color('gray-500');
    background: none;
    border: 0;
    box-shadow: none;
    &:hover,
    &:active,
    &:focus {
      background: none;
      border: 0;
      &:focus {
        background: none;
        box-shadow: none;
      }
    }
  }
  &.btn-sign_in {
    &:hover,
    &:active,
    &:focus {
      color: color('secondary');
      &:focus {
        color: color('secondary');
      }
    }
  }
  &.btn-lg {
    @extend %font-face-regular;
    height: $btn-lg-size;
    font-size: font-size(400);
    padding: $padding-large-horizontal $btn-padding-large-horizontal;
    border-radius: $border-radius-large;
    line-height: 1.8;

    .fa {
      font-size: $icon-lg-size;

      &:after {
        padding-bottom: 2px;
      }
    }
  }
  &.btn-sm {
    font-size: font-size('small');
    height: $btn-sm-size;
    padding: $padding-small-vertical $btn-padding-small-horizontal;
    line-height: 1.6;
    border-radius: $border-radius-small;

    .fa {
      font-size: $icon-sm-size;
      padding-top: 4px;
    }
  }
  &.btn-xs {
    height: $btn-xs-size;
    padding: $padding-xs-vertical $btn-padding-xs-horizontal;
    font-size: font-size('small');
    line-height: 1.8;

    .fa {
      font-size: $icon-xs-size;
    }
  }

  &.btn-icon {
    width: $btn-size;
    height: $btn-size;
    padding: 0;
    .fa {
      width: 100%;
      text-align: center;
      line-height: 1.4;
    }
    &.btn-lg {
      width: $btn-lg-size;
      height: $btn-lg-size;
      .fa {
        line-height: 1.2;
      }
    }
    &.btn-sm {
      width: $btn-sm-size;
      height: $btn-sm-size;
      .fa {
        line-height: 0.9;
      }
    }
    &.btn-xs {
      width: $btn-xs-size;
      height: $btn-xs-size;
      padding-left: 1px;
      .fa {
        line-height: 1.5;
      }
    }
  }

  // Because of Action buttons particular formatting, it requires some special positioning adjustments
  &.btn-action {

    &.btn-link {
      &:hover,
      &:active,
      &:focus {
        text-decoration: none;
      }
    }

    .btn-action-label {
      margin: 0;
      padding-top: 0px;
      vertical-align: top;
      &:hover {
        cursor: pointer;
      }
    }
    .btn-action-icon {
      padding-left: 4px;
      padding-right: 4px;
    }
    &.btn-lg {
      .btn-action-icon {
        padding-left: 7px;
        padding-right: 7px;
        line-height: 0.9;
      }
    }
    &.btn-sm {
      padding-top: 4px;
      .btn-action-label {
        padding-top: 4px;
      }
      .btn-action-icon {
        padding-left: 3px;
        padding-right: 3px;
      }
    }
    &.btn-xs {
      padding-top: 4px;
      .btn-action-label {
        padding-right: 3px;
      }
      .btn-action-icon {
        line-height: 1.2;
      }
    }
  }
  .fa {
    font-size: $icon-size;
  }

  &.btn-no-padding {
    padding: 0;
  }
}

.btn-group {
  .btn-icon .fa {
    vertical-align: middle;
  }
  .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-left: 1px solid color('gray-400');
    border-right: 1px solid color('gray-400');
    // compensating for bootstraps -1px offset
    margin-right: 1px;
  }
}
// take the default user agent styling off of <button> elements
.btn-reset {
  border: 0;
  background: none;

  &:hover,
  &:focus,
  &:active {
    outline: none;
    cursor: default!important;
  }
}