.b-btn-primary {
  transition: background-color 0.3s ease-out;
  color: $color-white;
  border: 1px solid $color-gray-darker;
  background-color: #333;
}

.b-btn-primary {
  &:hover {
    color: $color-white;
    border: 1px solid $color-gray;
    background-color: $color-gray;
  }

  &:focus {
    color: $color-white;
  }
}

.b-btn-danger {
  transition: background-color 0.3s ease-out;
  color: $color-white;
  background-color: $color-danger;
}

.b-btn-danger {
  &:hover {
    color: $color-white;
    background-color: darken($color-danger, 15%);
  }

  &:focus {
    color: $color-white;
  }
}

.b-btn-outline-danger {
  transition: color 0.3s ease, background-color 0.3s ease;
  color: $color-danger;
  border: 1px solid $color-danger;
  background-color: transparent;
}

.b-btn-outline-danger {
  &:hover {
    color: $color-white;
    background-color: $color-danger;
  }

  &:focus {
    color: $color-white;
    background-color: $color-danger;
  }
}

.b-btn-alternative {
  transition: background-color 0.3s ease-out;
  color: $text-color;
  background-color: $color-white;
}

.b-btn-alternative {
  &:hover {
    color: $text-color;
    background-color: $color-gray-light;
  }
}

.b-btn {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 0;

  i {
    padding-right: 6px;
  }
}

.b-btn-settings {
  margin-bottom: 12px;
}

.b-btn-block {
  display: block;
  float: left;
  clear: left;

  margin-left: 0px !important;
}

.b-btn--container {
  margin-top: 32px;
  margin-bottom: 40px;
}
