.btn {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  padding: 21px 40px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  font-family: $font-bold;
  font-size: 18px;
  line-height: 18px;
  background-color: $colour-red;
  color: $colour-white;
  @include border-radius(30px);
  span {
    font-size: inherit;
    font-weight: inherit;
  }
  &:hover {
    background-color: $colour-purple;
  }
  // Full width on SM breakpoint only
  &.btn--full-width {
    display: block;
    width: 100%;
    @include breakpoint($screen-md) {
      display: inline-block;
      width: auto;
    }
  }
}

/* Process $buttonList colour variations through our btn-variation mixin. */
@each $button in $buttonList {
  @include btn-variation( $button );
}

/* Force white colour on black bg hover and focus state */
.btn.btn--white {
  &:hover,
  &:focus {
    color: $colour-white;
  }
}

/**
 * Buttons display as stack block for xs
 */
.btn + .btn {
  margin-top: 30px;
}

/**
 * Buttons display as inline block for md and large breakpoints.
 */
.btn {
  &.btn--fixed-width {
    width: 100%;
  }
}
@include breakpoint($screen-md) {
  .btn {
    display: inline-block;
    width: auto;
    font-size: 18px;
    &.btn--fixed-width {
      width: 100%;
      min-width: 290px;
    }
  }
  .btn + .btn {
    margin-top: 0;
    margin-left: 25px;
  }
}

/*
 * Add icon to btn
 */
.btn {
  .icon {
    height: 20px;
    font-weight: normal;
    line-height: 20px;
    &:before {
      position: relative;
      top: 9px;
      line-height: 0;
    }
  }
  .icon + span,
  span + .icon {
    margin-left: 5px;
  }
}

/**
 * Adds large buttons.
 */
.btn--lg {
  padding-top: 19px;
  padding-bottom: 19px;
  font-size: 18px;
  line-height: 22px;
}

/**
 * Large button styles for >= md breakpoint.
 */
@include breakpoint($screen-md) {
  .btn--lg {
    height: 70px;
    padding: 24px 70px;
    @include border-radius(35px);
  }
}

/* for a large group of buttons */
@include breakpoint($screen-md) {
  .btn:first-child:not(:only-child) {
    margin-bottom: 20px;
  }
  .btn + .btn {
    margin-bottom: 20px;
  }
}

/* Ghost button 
less padding because ghost buttons have borders */
.btn--white-ghost,
.btn--black-ghost {
  padding: 19px 38px;
}
.btn--black-ghost {
  border: 2px solid $colour-dark-blue;
  &:hover {
    color: $colour-white;
  }
}
.btn--white-ghost {
  border: 2px solid $colour-white;
  &:hover {
    color: $colour-dark-blue;
  }
}

/* small buttons for content wall */
.content-wall {
  .btn {
    padding: 16px 32px;
    font-size: 16px;
  }
  .btn--white-ghost,
  .btn--black-ghost {
    padding: 14px 30px;
  }
}