$default-border: e6e6e6;

.btn {

outline: 0;
background-color: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid $default-border;
padding: 6px 12px 7px;
border-radius: 3px;
font-size: 14px;
font-weight: 700;
transition: all .3s;

&:focus,
&:hover:focus {
  @include focus-outline;
}
&.hover,
&:hover {
  transform: translateY(-1px);
}
&.active,
&:active {
  transform: translateY(0);
  box-shadow: none;
  border: 1px solid darken($default-border, 20%);
}
&.disabled,
&:disabled {
  transform: translateY(0);
  cursor: not-allowed;
}
&.btn-sm {
  &, .icon:before {
    font-size: 12px;
  }
  padding: 2px 6px;
  .btn-loader {
    padding: 8px 8px 9px;
    .ring-loader {
      @include size($ring-loader-size-sm);
      div {
        @include size($ring-loader-size-sm);
      }
    }
  }
}
.btn-loader {
  padding: 10px;
}
&.btn-lg {
  font-size: 16px;
  .icon:before {
    font-size: 20px;
  }
  padding: 8px 20px;
  .btn-loader {
    padding: 11px;
    .ring-loader {
      @include size($ring-loader-size-lg);
      div {
        @include size($ring-loader-size-lg);
      }
    }
  }
}
.icon {
  margin-right: .4em;
}

} .btn-loader {

position: relative;

} .btn-block {

display: block;
width: 100%;

} .btn.btn-icon {

outline: 0;
border-radius: 100%;
@include size(48px);
background-color: transparent;
border: 0;
position: relative;
padding: 0;
box-shadow: none;
&:focus {
  @include focus-outline;
}
.icon {
  margin: 0;
  vertical-align: middle;
  transform: translateY(0);
}
@include ripple(48px, 0, 0);

}

.btn .badge {

margin-left: .5rem;
font-weight: 400;

}

@each $classname, $bg, $color, $bg-ex, $bg-disabled, $badge-bg, $badge-color in $btns {

.btn.#{$classname} {
  background-color: $bg;
  color: $color;
  @if $classname == 'btn-secondary' {
    border: 1px solid $default-border;
    box-shadow: none;
  }
  @else {
    border: 0;
    box-shadow: 0 4px 6px 0 rgba(50, 50, 93, .05),
      0 1px 3px 0 rgba(0, 0, 0, .08);
    &.hover,
    &:hover {
      box-shadow: 0 7px 12px 0 rgba(50, 50, 93, .05),
        0 3px 6px 0 rgba(0, 0, 0, .08);
    }
  }

  &.hover,
  &:hover,
  &.active,
  &:active {
    background-color: $bg-ex;
  }
  &.active,
  &:active {
    border: 1px solid darken($bg-ex, 20%);
  }
  &.disabled,
  &:disabled {
    background-color: $bg-disabled;
  }
  .badge {
    background-color: $badge-bg;
    color: $badge-color;
  }
}

}

.btn.btn-link {

background-color: transparent;
color: nth($btn-link, 3);
cursor: pointer;
box-shadow: none;
&.hover,
&:hover,
&.active,
&:active {
  color: nth($btn-link, 4);
}
&.disabled,
&:disabled {
  color: nth($btn-link, 5);
}

}

button.close {

padding: 0;
background-color: transparent;
border: 0;

}

.btn-line {

background-color: #7ec163;
&, &:hover {
  color: #fff;
}

}

.btn-fb {

background-color: #4a9cff;
&, &:hover {
  color: #fff;
}

}

.btn-file {

position: relative;
input[type="file"] {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
}

}