button:focus {
  outline: none !important;
}

.btn {
  &:focus {
    box-shadow: none !important;
  }
}

.btn-secondary:focus,
.btn-secondary.focus {
  box-shadow: 0 -1px 8px rgba($gray-600, 0.6) !important;
}

// line-height map
$btn-line-height-map: (
 'xl': $btn-line-height-xl,
 'lg': $btn-line-height-lg,
 'sm': $btn-line-height-sm,
 'xs': $btn-line-height-xs
);

// padding map
$btn-padding-map: (
 'xl': $btn-padding-y-xl $btn-padding-x-xl,
 'lg': $btn-padding-y-lg $btn-padding-x-lg,
 'sm': $btn-padding-y-sm $btn-padding-x-sm,
 'xs': $btn-padding-y-xs $btn-padding-x-xs
);

// default attributes
.btn {
 cursor: pointer;
 line-height: $btn-line-height;
 box-shadow: none;
 outline: none !important;

 &.active,
 &:active,
 &.focus,
 &:focus {
   outline: none !important;
 }

 &:not(.disabled):not([disabled]) {
   &.active,
   &:active,
   &.focus,
   &:focus {
     -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .08) !important;
     -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .08) !important;
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, .08) !important;
   }
 }

 &:not(.btn-default):not(.btn-secondary) {
   border: none !important;
 }

 @each $tier in $tiers {
   &.btn-#{$tier} {
     line-height: map-get($btn-line-height-map, $tier);
   }
 }
}

// reset background color on events
@each $name, $colors in $color-map {
 .btn-#{$name} {
   background-color: nth($colors, 3);
   color: $color-white !important;

   &.active,
   &:active,
   &.focus,
   &:focus,
   &:hover {
     background-color: nth($colors, 4);
   }

   &.active,
   &:active,
   &.focus,
   &:focus {
     &:hover {
       background-color: nth($colors, 5);
     }
   }

   &.disabled,
   &[disabled] {
     background-color: nth($colors, 2) !important;
   }
 }
}

// add shadow button type
.btn-shadow {
 @extend .box-shadow;
 background-color: $color-white;
 color: $color-black-lighter;

 &.active,
 &:active,
 &.focus,
 &:focus,
 &:hover {
   background-color: $color-white-dark;
 }

 &.active,
 &:active,
 &.focus,
 &:focus {
   text-shadow: 0 2px 3px $color-white;

   &:hover {
     background-color: $color-white-darker;
   }
 }

 &.disabled,
 &[disabled] {
   background-color: $color-white-dark !important;
 }
}

// labeled buttons
.btn-default,
.btn-secondary {
 background-color: $color-white;
 border-color: #dadada !important;
 color: $color-black-lighter;
 padding: 0 ($btn-padding-x - 1 / $font-size-root-value);
 line-height: $btn-line-height - 2 / $font-size-root-value;

 &.active,
 &:active,
 &.focus,
 &:focus,
 &:hover {
   background-color: $color-white-dark;
 }

 &.active,
 &:active,
 &.focus,
 &:focus {
   border: 0;
   padding: $btn-padding-y $btn-padding-x;
   line-height: $btn-line-height;

   &:hover {
     background-color: $color-white-darker;
   }

   @each $tier in $tiers {
     &.btn-#{$tier} {
       padding: map-get($btn-padding-map, $tier);
       line-height: map-get($btn-line-height-map, $tier);
     }
   }
 }

 @each $tier in $tiers {
   $paddings: map-get($btn-padding-map, $tier);
   &.btn-#{$tier} {
     padding: nth($paddings, 1) (nth($paddings, 2) - 1 / $font-size-root-value);
     line-height: map-get($btn-line-height-map, $tier) - 2 / $font-size-root-value;
   }
 }
}

.btn-primary {
 @extend .btn-blue;
}

.btn-success {
 @extend .btn-green;
}

.btn-info {
 @extend .btn-cyan;
}

.btn-warning {
 @extend .btn-yellow;
}

.btn-danger {
 @extend .btn-red;
}

// button circle
.btn-circle {
 border-radius: 50% !important;
 width: $btn-line-height;
 height: $btn-line-height;
 padding: 0 !important;
 text-align: center;

 &.btn-xl {
   width: $btn-line-height-xl;
   height: $btn-line-height-xl;
 }

 &.btn-lg {
   width: $btn-line-height-lg;
   height: $btn-line-height-lg;
 }

 &.btn-sm {
   width: $btn-line-height-sm;
   height: $btn-line-height-sm;
 }

 &.btn-xs {
   width: $btn-line-height-xs;
   height: $btn-line-height-xs;
 }
}

.btn-circle-fw {
 margin: 0 $btn-fw-margin;

 &.btn-xl {
   margin: 0 $btn-fw-margin-xl;
 }

 &.btn-lg {
   margin: 0 $btn-fw-margin-lg;
 }

 &.btn-sm {
   margin: 0 $btn-fw-margin-sm;
 }

 &.btn-xs {
   margin: 0 $btn-fw-margin-xs;
 }
}

// // Button sizes
// .btn-xl {
//  @include button-size($btn-padding-y-xl, $btn-padding-x-xl, $font-size-xl, $btn-line-height-xl, $btn-border-radius-xl);
// }

// .btn-xs {
//  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-xs, $btn-line-height-xl, $btn-border-radius-xs);
// }