// Buttons
//
// Buttons are normally used for key messages, or key call-to-actions. For less important messages, a link may be more appropriate (see Links). Buttons text uses the Black weight of the Sailec font.

.btn {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  padding: 16px 30px;
  cursor: pointer;
  transition: 0;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border: none;
  font-family: $montserrat;
  font-weight: 700;
  font-size: 15px;
  line-height: 15px;
  @include border-radius(30px);
  span {
    font-size: inherit;
    font-weight: inherit;
  }

  @include breakpoint($screen-md) {
    width: auto;
    padding: 21px 30px;
    font-size: 18px;
    line-height: 18px;
  }

  &.btn--full-width {
    display: block;
    width: 100%;
    @include breakpoint($screen-md) {
      display: inline-block;
      width: auto;
    }
  }
  + .btn {
    margin-top: 30px;
    @include breakpoint($screen-md) {
      margin-top: 0;
      margin-left: 25px;
    }
  }
  &--fixed-width {
    width: 100%;
  }
}

p + p {
  .btn {
    margin-top: 10px;
  }
} 

/* button(font_colour, bg_colour, hover bg-colour, hover font_colour) */
.btn--black,
.btn--deep-violet {
  @include cr_button_types($colour-white, $colour-deep-violet, $colour-grey, $colour-deep-violet);
}

.btn--red {
  @include cr_button_types($colour-white, $colour-red, $colour-light-coral, $hover-text-colour:$colour-deep-violet);
}

.btn--white {
  @include cr_button_types($colour-deep-violet, $colour-white, $colour-grey, $colour-deep-violet);
}

/* Brand new Secondary buttons */
.btn--grey {
  @include cr_button_types($colour-deep-violet, $colour-grey, $colour-light-grey, $hover-text-colour:$colour-deep-violet);
}
.btn--coral {
  @include cr_button_types($colour-deep-violet, $colour-coral, $colour-light-coral, $hover-text-colour:$colour-deep-violet);
}
.btn--orange {
  @include cr_button_types($colour-deep-violet, $colour-orange, $colour-light-orange, $hover-text-colour:$colour-deep-violet);
}
.btn--yellow {
  @include cr_button_types($colour-deep-violet, $colour-yellow, $colour-light-yellow, $hover-text-colour:$colour-deep-violet);
}
.btn--green {
  @include cr_button_types($colour-deep-violet, $colour-green, $colour-light-green, $hover-text-colour:$colour-deep-violet);
}
.btn--blue {
  @include cr_button_types($colour-deep-violet, $colour-blue, $colour-light-blue, $hover-text-colour:$colour-deep-violet);
}
.btn--purple {
  @include cr_button_types($colour-deep-violet, $colour-purple, $colour-light-purple, $hover-text-colour:$colour-deep-violet);
}
.btn--magenta {
  @include cr_button_types($colour-deep-violet, $colour-magenta, $colour-light-magenta, $hover-text-colour:$colour-deep-violet);
}
.btn--teal {
  @include cr_button_types($colour-deep-violet, $colour-teal, $colour-light-teal, $hover-text-colour:$colour-deep-violet);
}


/* Brand new Secondary Light buttons */
.btn--light-grey {
  @include cr_button_types($colour-deep-violet, $colour-light-grey, $colour-dark-grey);
}
.btn--light-coral {
  @include cr_button_types($colour-deep-violet, $colour-light-coral, $colour-dark-coral);
}
.btn--light-orange {
  @include cr_button_types($colour-deep-violet, $colour-light-orange, $colour-dark-orange);
}
.btn--light-yellow {
  @include cr_button_types($colour-deep-violet, $colour-light-yellow, $colour-dark-yellow);
}
.btn--light-green {
  @include cr_button_types($colour-deep-violet, $colour-light-green, $colour-dark-green);
}
.btn--light-blue {
  @include cr_button_types($colour-deep-violet, $colour-light-blue, $colour-dark-blue);
}
.btn--light-magenta {
  @include cr_button_types($colour-deep-violet, $colour-light-magenta, $colour-dark-magenta);
}
.btn--light-purple {
  @include cr_button_types($colour-deep-violet, $colour-light-purple, $colour-dark-purple);
}
.btn--light-teal {
  @include cr_button_types($colour-deep-violet, $colour-light-teal, $colour-dark-teal);
}

/* Brand new Secondary Dark buttons */
.btn--dark-grey {
  @include cr_button_types($colour-white, $colour-dark-grey, $colour-grey, $colour-deep-violet);
}
.btn--dark-coral {
  @include cr_button_types($colour-white, $colour-dark-coral, $colour-coral, $colour-deep-violet);
}
.btn--dark-orange {
  @include cr_button_types($colour-white, $colour-dark-orange, $colour-orange, $colour-deep-violet);
}
.btn--dark-yellow {
  @include cr_button_types($colour-white, $colour-dark-yellow, $colour-yellow, $colour-deep-violet);
}
.btn--dark-green {
  @include cr_button_types($colour-white, $colour-dark-green, $colour-green, $colour-deep-violet);
}
.btn--dark-blue {
  @include cr_button_types($colour-white, $colour-dark-blue, $colour-blue, $colour-deep-violet);
}
.btn--dark-magenta {
  @include cr_button_types($colour-white, $colour-dark-magenta, $colour-magenta, $colour-deep-violet);
}
.btn--dark-purple {
  @include cr_button_types($colour-white, $colour-dark-purple, $colour-purple, $colour-deep-violet);
}
.btn--dark-teal {
  @include cr_button_types($colour-white, $colour-dark-teal, $colour-teal, $colour-deep-violet);
}


/* Backward compatibility; old class names, new colour vars */
.btn--royal-blue {
  @include cr_button_types($colour-deep-violet, $colour-royal-blue, $colour-dark-blue);
}
.btn--mint-green {
  @include cr_button_types($colour-deep-violet, $colour-teal, $colour-red);
}

/* Membership donate button, new colour var */
.btn--membership-red {
  @include cr_button_types($colour-white, $colour-donate-red, $colour-donate-dark-red, $colour-white);
}