.btn {
  text-decoration: none;
  outline: 0;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  font-size: 1rem;

  &--outline,
  &--solid {
    height: 45px;
    line-height: 45px;

    @media #{$screen-xs-min} {
      height: $button-height;
      line-height: $button-height;
    }
  }

  &--outline {
    border: solid 2px $color-white;
    color: $color-white;
    background: transparent;
    border-radius: 100px;
    transition: all 0.5s ease;
    &:hover {
      background: $brand-yellow;
      color: $color-body;
    }

    &.btn--white {
      border-color: white;
      color: white;

      &:hover {
        background: white;
        color: $color-body;
      }
    }

    &.btn--black {
      border-color: #000;
      color: #000;

      &:hover {
        background: #000;
        color: white;
      }
    }

    &.btn--purple {
      border-color: white;
      color: white;

      &:hover {
        border-color: $brand-yellow;
        background: $brand-yellow;
        color: $color-body;
      }
    }

    &.btn--purple-light {
      border-color: white;
      background: white;
      color: #711bed;

      &:hover {
        background: transparent;
        color: white;
      }
    }

    &.btn--blue-dark {
      border-color: white;
      color: white;

      &:hover {
        border-color: $brand-yellow;
        background: $brand-yellow;
        color: $color-blue-dark;
      }
    }

    &.btn--blue-light {
      border-color: white;
      color: white;

      &:hover {
        border-color: $brand-yellow;
        background: $brand-yellow;
        color: #1555f4;
      }
    }

    &.btn--pink {
      border-color: white;
      background: white;
      color: $color-pink;

      &:hover {
        border-color: $brand-yellow;
        background: $brand-yellow;
      }
    }

    &.btn--pink-light {
      border-color: $color-pink;
      color: $color-pink;

      &:hover {
        background: $color-pink;
        color: white;
      }
    }

    &.btn--pink-dark {
      border-color: white;
      color: white;

      &:hover {
        border-color: $brand-yellow;
        background: $brand-yellow;
        color: $color-pink;
      }
    }

    &.btn--green {
      border-color: white;
      color: white;

      &:hover {
        background: white;
        color: $color-green;
      }
    }

    &.btn--red {
      border-color: white;
      color: white;

      &:hover {
        background: white;
        color: $brand-red;
      }
    }
  }

  &--solid {
    background: $color-body;
    color: white;
  }

  &--rounded {
    border-radius: calc(#{$button-height} / 2);
    padding: 0 2rem;
  }
}