.btn {
  background: #dddddd;
}

@each $button, $color in $colored-buttons {
  .btn-#{$button},
  .btn-#{$button}:hover,
  .btn-#{$button}:focus,
  .btn-#{$button}:active {
    color: #ffffff !important;
    background-color: $color !important;
    border-color: $color !important;
    &.active {
      background-color: $color !important;
      border-color: $color !important;
    }
  }
  .btn-default,
  .btn-default:hover,
  .btn-default:focus,
  .btn-default:active { color: $text-color !important; }
  
  .is-not-touch-device {
   .btn-#{$button}:hover {
      background-color: darken($color, 10%) !important;
      border-color: darken($color, 10%) !important;
    }
  }
}

.btn.disabled,
.btn[disabled],
.is-not-touch-device .btn.disabled:hover,
.is-not-touch-device .btn[disabled]:hover {
  background-color: #c3c3c3 !important;
  border-color: #c3c3c3 !important;
  color: #ffffff !important;
  opacity: 1;
}

.btn-inverse {
  background: transparent !important;
  border-color: #ccc !important;
  @each $button, $color in $colored-buttons {
    &.btn-#{$button},
    &.btn-#{$button}:hover,
    &.btn-#{$button}:focus,
    &.btn-#{$button}:active {
      color: $color !important;
      border-color: $color !important;
      background: transparent !important;
      &.active {
        color: darken($color, 10%) !important;
        border-color: darken($color, 10%) !important;
        background: transparent !important;
      }
    }
  }
  &.btn-none-border {
    border-color: transparent !important;
    &:hover,
    &:focus,
    &:active {
      border-color: transparent !important;
      box-shadow: 0 0 0 rgb(0, 0, 0) !important;
    }
  }
}
.is-not-touch-device .btn-inverse {
  @each $button, $color in $colored-buttons {
    &.btn-#{$button}:hover {
      color: darken($color, 10%) !important;
      border-color: darken($color, 10%) !important;
    }
  }
}

.btn-inverse.btn.disabled,
.btn-inverse.btn[disabled],
.is-not-touch-device .btn-inverse.btn.disabled:hover,
.is-not-touch-device .btn-inverse.btn[disabled]:hover { 
  background-color: transparent !important;
  border-color: #c3c3c3 !important;
  color: #c3c3c3 !important;
}

.btn.btn-inverse,
.btn.btn-inverse.disabled,
.btn.btn-inverse[disabled] {
  &.btn-none-border {
    border-color: transparent !important;
  }
}

.is-not-touch-device .btn.btn-inverse,
.is-not-touch-device .btn.btn-inverse.disabled,
.is-not-touch-device .btn.btn-inverse[disabled] {
  &.btn-none-border {
    &:hover,
    &:focus,
    &:active {
      border-color: transparent !important;
      box-shadow: 0 0 0 rgb(0, 0, 0) !important;
    }
  }
}
.has-success .input-group .input-group-btn .btn {
  border-color: map-get($colored-buttons, 'success') !important;
}
.has-error .input-group .input-group-btn .btn {
  border-color: map-get($colored-buttons, 'danger') !important;
}
.btn-success.btn-create,
.btn-success.btn-create:focus,
.btn-success.btn-create:active {
  background: #ffffff !important;
  &:hover,
  &.active { background: #ffffff !important; }
}