
.button {
  font-family: $heading-font-family;
  background-color: none;
  padding: 2px 15px;
  border: 2px solid white;
  color: white;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  opacity: 1;
  transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out, border 0.4s ease-in-out;
}

.button:hover {
  color: $dark-gray;
  background-color: white;
}

.button.button-dark {
  color: $dark-gray;
  background-color: white;
  border-color: $dark-gray;
}

.button.button-dark:hover {
  color: white;
  background-color: $dark-gray;
}

.button.button-large {
  padding: 5px 25px;
  font-size: 16px;
  font-weight: 500;
}

.button.button-xlarge {
  padding: 5px 25px;
  font-size: 16px;
  font-weight: 500;

  @include breakpoint($break-tablet) {
    padding: 18px 30px;
    font-size: 20px;
    font-weight: 400;
  }
}

.button.button-action {
  color: white;
  background-color: $light-blue;
  border-color: $light-blue;
}

.button.button-action:hover {
  background-color: lighten($light-blue, 10%);
  border-color: lighten($light-blue, 10%);
}

.button.button-info {
  color: white;
  background-color: none;
  border: 2px solid white;
}

.button.button-info:hover {
  color: $lighter-blue;
  border-color: $lighter-blue;
}

.button.button-main {
  color: white;
  background-color: $orange;
  border-color: $orange;
}

.button.button-main:hover {
  background-color: $lighter-orange;
  border-color: $lighter-orange;
}

.button.button-rounded {
  padding: 5px 28px;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 19px;

  @include breakpoint(450px) {
    font-size: 1rem;
  }

  @include breakpoint($break-tablet) {
    padding: 6px 38px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 21px;
  }
}

.button.button-rounded-small {
  padding: 2px 14px;
  font-weight: 400;
  border-radius: 9px;

  @include breakpoint(450px) {
  }

  @include breakpoint($break-tablet) {
    padding: 3px 19px;
    border-radius: 10px;
  }
}

.button.button-rounded-border {
  background-color: transparent;
  border-color: $lighter-orange;
}
