/* STANDARD */
.btn {
  border-radius: $btn-border-radius;
  margin-bottom: 5px;

  @extend .white;

  &:focus {
    outline: none !important;
  }
}

.btn-xs {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1;
}

.btn-large {
  width: 411px;
  height: 33px;
}

.btn-wide {
  min-width: 137px;
}

.btn-middle-align {
  margin-bottom: 0;
}

.btn-square {
  border-radius: 0;
}

/* BUTTONS */
.btn-primary {
  background-color: $button-green;
  border-color: $button-green;

  &:hover,
  &:focus,
  &:active,
  &.active,
  &:active:focus,
  &:active:hover,
  &.active:hover,
  &.active:focus,
  &.dropdown-toggle {
    background-color: darken($button-green, 10%);
    border-color: darken($button-green, 10%);
    background-image: none;
  }

  &.disabled,
  &.disabled:hover,
  &.disabled:focus,
  &.disabled:active,
  &.disabled.active,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &[disabled]:active,
  &.active[disabled] {
    background-color: lighten($button-green, 10%);
    border-color: lighten($button-green, 10%);
  }
}

.btn-purple {
  background-color: $blueberry;
  border-color: $blueberry;

  &:hover,
  &:focus,
  &:active,
  &.active,
  &:active:focus,
  &:active:hover,
  &.active:hover,
  &.active:focus,
  &.dropdown-toggle {
    background-color: darken($blueberry, 3%);
    border-color: darken($blueberry, 3%);
    background-image: none;

    @extend .white;
  }

  &.disabled,
  &.disabled:hover,
  &.disabled:focus,
  &.disabled:active,
  &.disabled.active,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &[disabled]:active,
  &.active[disabled] {
    background-color: lighten($blueberry, 4%);
    border-color: lighten($blueberry, 4%);
  }
}

.btn-success {
  background-color: $blue;
  border-color: $blue;

  &:hover,
  &:focus,
  &:active,
  &.active,
  &:active:focus,
  &:active:hover,
  &.active:hover,
  &.active:focus,
  &.dropdown-toggle {
    background-color: darken($blue, 3%);
    border-color: darken($blue, 3%);
    background-image: none;
  }

  &.disabled,
  &.disabled:hover,
  &.disabled:focus,
  &.disabled:active,
  &.disabled.active,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &[disabled]:active,
  &.active[disabled] {
    background-color: lighten($blue, 10%);
    border-color: lighten($blue, 10%);
  }
}

.btn-info {
  background-color: $very-light-pink;
  border-color: $very-light-pink;

  &:hover,
  &:focus,
  &:active,
  &.active,
  &:active:focus,
  &:active:hover,
  &.active:hover,
  &.active:focus,
  &.dropdown-toggle {
    background-color: darken($very-light-pink, 10%);
    border-color: darken($very-light-pink, 10%);
    background-image: none;
  }

  &.disabled,
  &.disabled:hover,
  &.disabled:focus,
  &.disabled:active,
  &.disabled.active,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &[disabled]:active,
  &.active[disabled] {
    background-color: lighten($very-light-pink, 10%);
    border-color: lighten($very-light-pink, 10%);
  }
}

.btn-default {
  color: inherit;
  background: $white;
  border: 1px solid $border-color;

  &:hover,
  &:focus,
  &:active,
  &.active,
  &:active:focus,
  &:active:hover,
  &.active:hover,
  &.active:focus,
  &.dropdown-toggle {
    color: inherit;
    background: inherit;
    background-image: none;
  }

  &.disabled,
  &.disabled:hover,
  &.disabled:focus,
  &.disabled:active,
  &.disabled.active,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &[disabled]:active,
  &.active[disabled] {
    color: #cacaca;
  }
}

.modal-footer .btn + .btn {
  margin-bottom: 5px;
  margin-left: 5px;
}

.btn-danger {
  background-color: $red;
  border-color: $red;

  &:hover,
  &:focus,
  &:active,
  &.active,
  &:active:focus,
  &:active:hover,
  &.active:hover,
  &.active:focus,
  &.dropdown-toggle {
    background-color: darken($red, 10%);
    border-color: darken($red, 10%);
    background-image: none;
  }

  &.disabled,
  &.disabled:hover,
  &.disabled:focus,
  &.disabled:active,
  &.disabled.active,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &[disabled]:active,
  &.active[disabled] {
    background-color: lighten($red, 10%);
    border-color: lighten($red, 10%);
  }
}

.no-click {
  cursor: default;
}
