a.btn,
a.cta,
a.cta-2,
button.btn,
button.cta,
button.cta-2  {
  width:100%;
  height: 48px;
  font-family: $montserrat;
  display: block;
  margin: 0 auto;
  @include font-size($button-cta-font-size);
  @include border-radius(25px);
  @include box-shadow-transition();

  @include breakpoint($screen-md){
    width: auto;
  }
}


// Buttons: primary action
a.btn,
button.btn {
  background-color: $colour--btn-light;
  color: $colour--black;
  padding: 13px 30px;
  @include border-radius(25px);
  @include box-shadow-transition();
  @include colour-transition();

  &.secondary {
    background-color: transparent;
    border: 2px solid $colour--white;
    color: $colour--white;
    padding: 10px 30px;
    @include font-size($button-cta-font-size);
    @include border-radius(25px);
  }

  &:hover,
  &:focus {
    background-color: $colour--btn-hover;
    color: $colour--white;

    &.secondary {
      background-color: transparent;
      border: 2px solid $colour--white;
      color: $colour--white;
    }
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0px 4px $colour--system-blue;
  }
  &:active {
    background-color: $colour--btn-on-click;
    color: $colour--white;

    &.secondary {
      background-color: transparent;
      border: 2px solid $colour--white;
      color: $colour--white;
    }
  }
}

// CTAs - classes to be finalised
a.cta,
button.cta {
  background-color: $colour--red;
  color: $colour--white;
  @include border-radius(30px);
  @include box-shadow-transition();
  @include colour-transition();

  &:hover,
  &:focus {
    background-color: $colour--cta-hover;
    color: $colour--white;
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0px 4px $colour--system-blue;
  }
}

a.cta-2,
button.cta-2 {
  background-color: rgba(255,255,255,0);
  border: 2px solid $colour--white;
  color: $colour--white;
  transition: all 0.1s ease-in-out;
  @include border-radius(30px);
  @include colour-transition();
  box-shadow: none;
  padding: 9px 30px;

  &:hover {
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0px 4px $colour--system-blue;
  }

  &.disabled,
  &:disabled {
    border: 2px solid $colour--cta2-disbled;
    color: $colour--cta2-disbled;
    opacity: 1;

    &:hover,
    &:focus {
      background-color: transparent;
    }
  }
}