// 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: block;
  width: 100%;
  height: auto;
  min-height: 60px;
  margin: 0 auto;
  padding: 20px 40px;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border: none;
  font-family: $font-bold--sr18;
  font-size: 18px;
  line-height: 18px;
  transition: background-color .1s linear;
  box-sizing: border-box;

  @include border-radius(30px);
  span {
    font-size: inherit;
    font-weight: inherit;
  }

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

  &.btn--full-width {
    @include breakpoint($screen-md) {
      display: block;
      width: 100%;
    }
  }
  + .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 types (font_colour, bg_colour)
.btn--black {
  @include sr_button_types($colour-white, $colour-black);
}
.btn--dark-blue {
  @include sr_button_types($colour-white, $colour-dark-blue);
}
.btn--dark-blue-lighter {
  @include sr_button_types($colour-white, $colour-dark-blue-lighter);
}
.btn--white-smoke {
  @include sr_button_types($colour-dark-blue, $colour-white-smoke);
}
.btn--white {
  @include sr_button_types($colour-dark-blue, $colour-white);
}

/* This variation has a custom hover state, so we'll just add it here
rather than including it in a common mixin */
.btn--ruby {
  @include sr_button_types($colour-white, $colour-ruby);

  // Psuedo-element that's faded-in to act as our new hoverstate
  &:before {    
    background-image: linear-gradient(90deg, $colour-purple, $colour-ruby);
    content: '';    
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -100;
    transition: opacity 0.8s;
    display: block;
  }

  // Fade in custom psuedo-element
  &:hover {
    &:before {
      opacity: 1;
    }
  }
}

// Bespoke for SR18 OTN
.btn.btn--alternate {
  @extend .btn--ruby;
  margin-top: 10px;
  font-size: 24px;
  line-height: 24px;
  padding: 28px 26px;

  @include breakpoint($screen-md) {
    padding: 28px 36px;
  }
}

// SR19 buttons type (font_colour, bg_colour)
.btn--SR19-light-blue {
  @include sr19_button_types($colour-SR19-black, $colour-SR19-light-blue, $colour-SR19-white, $colour-SR19-dark-blue);
}

.btn--SR19-black{
  @include sr19_button_types($colour-SR19-white, $colour-SR19-black, $colour-SR19-black, $colour-SR19-white);
}

.btn--SR19-white{
  @include sr19_button_types($colour-SR19-black, $colour-SR19-white, $colour-SR19-white, $colour-SR19-black);
}

// SR20 buttons type (font_colour, bg_colour)
.btn--SR20-red {
  @include sr20_button_types($colour-SR20-white, $colour-SR20-red);
}

.btn--SR20-dark-blue {
  @include sr20_button_types($colour-SR20-white, $colour-SR20-dark-blue);
}

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

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

.btn--SR20-yellow {
  @include sr20_button_types($colour-SR20-deep-violet, $colour-SR20-yellow);
}

.btn--SR20-green {
  @include sr20_button_types($colour-SR20-deep-violet, $colour-SR20-green);
}

.btn--SR20-cyan-blue {
  @include sr20_button_types($colour-SR20-deep-violet, $colour-SR20-cyan-blue);
}

.btn--SR20-purple {
  @include sr20_button_types($colour-SR20-white, $colour-SR20-purple);
}

 .cookie-consent.cc_container.cc_banner--drupal .cc_message .btn:first-child:not(:only-child) {
  height: auto;
  min-height: 0;
}