.rounded-button {
  padding: 7px 35px;
  background-color: $primary;
  font-family: Montserrat, sans-serif;
  color: white;
  border: none;
  border-radius: 30px;
  transition: $hover-duration;

  &:hover {
    background-color: darken($primary, $hover-threshold);
    transition: $hover-duration;
    text-decoration: none;
    color: white;
    cursor: pointer;
  }

  &--strong {
    font-weight: bold;
    text-transform: capitalize;
  }

  &--very-strong {
    @extend .rounded-button--strong;
    font-size: 21px;
    padding: 15px 60px;
  }

  &--uppercase {
    text-transform: uppercase;
    font-weight: 500;
  }
}

.rect-button {
  padding: 10px 25px;
  font-family: Montserrat, sans-serif;
  font-size: 21px;
  font-weight: 500;
  border: none;
  border-radius: 3px;
  background-color: $primary;
  color: white;
  transition: $hover-duration;
  text-align: left;
  line-height: 30px;

  &:hover {
    background-color: lighten($primary, $hover-threshold);
    cursor: pointer;
    transition: $hover-duration;
  }

  &--github {
    background-color: $github-color;
    color: black;

    &:hover {
      background-color: darken($github-color, $hover-threshold);
    }
  }

  &--twitter {
    background-color: $twitter-color;
    color: white;

    &:hover {
      background-color: lighten($twitter-color, $hover-threshold);
    }
  }

  &--facebook {
    background-color: $facebook-color;
    color: white;

    &:hover {
      background-color: lighten($facebook-color, $hover-threshold);
    }
  }

  &--fixed-width {
    width: 240px;
  }

  &--small {
    background-color: $background-light;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: $primary;
    transition: $hover-duration;

    &:hover {
      background-color: darken($background-light, $hover-threshold);
      transition: $hover-duration;
    }
  }
}

.rect-button__icon {
  margin-right: 35px;
}