.button {
  display: inline-block;
  width: rem(250);
  height: rem(60);
  padding: rem(19);
  border: 2px solid var(--btn-bg, $brand-primary);
  border-radius: 3px;
  background: var(--btn-bg, $brand-primary);
  font-family: $font-family-sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--btn-text, $white);
  line-height: normal;
  letter-spacing: rem(2);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.5s;
  vertical-align: middle;

  &:hover,
  &:focus {
    background: $white;
    color: var(--btn-active-text, $brand-primary);
  }

  &.button-small {
    width: rem(150);
    height: rem(40);
    padding: rem(6.5);
  }

  &.button-wide {
    width: 19.0625rem;
  }

  &.button-inverse {
    background: $white;
    color: var(--btn-inverse-text, $brand-primary);

    &:hover,
    &:focus {
      color: var(--btn-inverse-active-text, $white);
      background: var(--btn-bg, $brand-primary);
    }
  }
}

@media (min-width: $medium) {
  .button {
    width: 275px;
  }
}