.button {
  font-family: $base-font;
  font-weight: bold;
  border: none;
  background-color: $brand-primary;
  color: $white;
  padding: $medium-spacing $gutter;

  &:hover {
    background-color: darken($brand-primary, 10);
    cursor: pointer;
  }
}

.button-small {
  @include font-size-map($small-font-size);
}

.button-large {
  @include font-size-map($h4-font-size);
}

.button-full-width {
  width: 100%;
}

.button-destructive {
  background-color: $sbc-red;
  &:hover {
    background-color: darken($sbc-red, 10);
  }
}

.button-disabled,
[disabled="disabled"],
[disabled] {
  opacity: 0.5;

  &:hover {
    cursor: default;
    cursor: not-allowed;
    background-color: $brand-primary;
  }
}