@mixin button($cta: false) {
  cursor: pointer;
  display: inline-block;
  color: $white;
  padding: 0.5em 1em;
  border-radius: 0.125em;
  font-weight: $font-weight-bold;
  line-height: 1.125;
  text-align: center;
  margin-bottom: 0.25em;

  &[disabled] {
    background-color: $gray-dark;
    color: $white;
  }

  + button {
    margin-left: 0.25em;
  }

  @if $cta {
    background-color: $color-cta;
    color: $button-cta-text-color;

    &:hover:not([disabled]) {
      background-color: $color-cta-highlight;
    }
  }
}