.button {
  background-color: $color-white;
  border: 1px solid $color-dark-grey;
  border-radius: 5px;
  color: $color-grey;
  display: inline-block;
  font-size: 20px;
  font-weight: normal;
  margin: 7px;
  padding: 14px 10px;
  text-transform: uppercase;
  width: 90%;
  cursor: pointer;
  font-family: $base-font-family;
  &.purple {
    background-color: $color-purple;
    color: $color-white;
    &:hover {
      background-color: $color-dark-purple;
    }
  }
  &:hover {
    background-color: $color-lime;
  }
  &.selected {
    background-color: $color-lime;
    color: $color-black;
    cursor: default;
  }
  @include breakpoint($screen-s) {
    width: auto;
  }
  &.no-margin-left {
    margin-left: 0px;
  }
}

a.button {
  font-size: 16px;
  font-weight: normal;
  padding: 14px 10px;
  text-decoration: none;

  @include breakpoint($screen-m) {
    font-size: 20px;
    width: auto;
  }
}

button,
.button {
  font-family: $base-font-family;
}
