@mixin btn-color($color, $inverse: false) {
  $colorified-color: color('#{$color}'); // set local variable to avoid compilation problems with 'black' and 'white' in Mars UI
  @if ($inverse) {
    color: $colorified-color;
    background-color: color('white');
    border: 2px solid $colorified-color;
    @extend %no-shadow;
    &:hover,
    &:active,
    &:active:focus {
      color: darken($colorified-color, $darken-color-percentage);
      border-color: darken($colorified-color, $darken-color-percentage);
      background-color: lighten($colorified-color, 40%);
      text-decoration: none;
    }
  } @else {
    color: color('white');
    background-color: $colorified-color;
    border: 2px solid $colorified-color;
    @extend %no-shadow;
    @include box_shadow_base();
    &:hover,
    &:active,
    &:active:focus {
      background-color: darken($colorified-color, $darken-color-percentage);
      border-color: darken($colorified-color, $darken-color-percentage);
      text-decoration: none;
    }
  }
}

.btn {
  @extend %btn-style;
  padding: $btn-padding-default-vertical $btn-padding-default-horizontal;

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

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

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

      &.btn-inverse {
        @include btn-color(#{$id}, true);

        &.btn-inverse-hero {
          border-color: color('white');
        }
      }
    }
  }

  &.btn-link {
    @include btn-color('secondary', true);
    background: none;
    border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
    box-shadow: none;
    &:hover,
    &:active,
    &:focus {
      border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
      background: none;
      text-decoration: underline;
      &:focus {
        border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
        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-default.disabled {
      border-color: transparent;
      background-color: transparent;
    }
  }
  &.btn-sign_in,
  &.btn-plain {
    color: color('gray-500');
    background: none;
    border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
    box-shadow: none;
    &:hover,
    &:active,
    &:focus {
      background: none;
      border: 2px solid transparent; /* border needed to be consistent with btn pattern but must be transparent b/c link has no background */
      &:focus {
        background: none;
        box-shadow: none;
      }
    }
  }
  &.btn-sign_in {
    &:hover,
    &:active,
    &:focus {
      color: color('secondary');
      &:focus {
        color: color('secondary');
      }
    }
  }
  &.btn-lg {
    font-family: $font-face-regular;
    height: $btn-lg-size;
    font-size: $font-size-400;
    padding: $btn-padding-large-vertical $btn-padding-large-horizontal;
    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: $btn-padding-small-vertical $btn-padding-small-horizontal;
    line-height: 1.6;

    .fa {
      font-size: $icon-sm-size;
      padding-top: 2px;
    }
  }
  &.btn-xs {
    height: $btn-xs-size;
    padding: $btn-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: $btn-padding-small-vertical;
      .btn-action-label {
        padding-top: 4px;
      }
      .btn-action-icon {
        padding-left: 3px;
        padding-right: 3px;
      }
    }
    &.btn-xs {
      padding-top: $btn-padding-xs-vertical;
      .btn-action-label {
        padding-right: 3px;
      }
      .btn-action-icon {
        line-height: 1.2;
      }
    }
  }
  .fa {
    font-size: $icon-size;
  }

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

@mixin btn-block() {
  display: block;
  width: 100%;
}

.btn-block {
  @include btn-block();
}

.btn-block-xs {
  @media (max-width: $screen-xs-max) {
    @include btn-block();
  }
}

.btn-block-sm {
  @media (max-width: $screen-sm-max) {
    @include btn-block();
  }
}

.btn-block-md {
  @media (max-width: $screen-md-max) {
    @include btn-block();
  }
}

.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;
  }
}