_buttons.scss

/*===============================================
Buttons - Co-op Front-end Toolkit
===============================================*/

@import "variables";
@import "mixins/typography";
@import "mixins/buttons";

.btn {  
  @extend %button-base;
  @include button-colour($text-colour: $white,
                         $hover-text-colour: $white,
                         $active-text-colour: $white,
                         $bg-colour: $button-grey,
                         $hover-bg-colour: $button-grey-highlighted,
                         $active-bg-colour: darken($button-grey-highlighted, 10%));
}

.btn-primary,
.btn--primary {
  @include button-colour($text-colour: $white,
                         $hover-text-colour: $white,
                         $active-text-colour: $white,
                         $bg-colour: $green-blue-mid,
                         $hover-bg-colour: #2B9E9C,
                         $active-bg-colour: #0C6F6D);
}

.btn-primary-dark {
  @include button-colour($text-colour: $white,
                         $hover-text-colour: $white,
                         $active-text-colour: $white,
                         $bg-colour: $button-grey,
                         $hover-bg-colour: $button-grey-highlighted,
                         $active-bg-colour: darken($button-grey-highlighted, 10%));
}

.btn-secondary {
  @include button-colour($text-colour: $coop-link-blue,
                         $hover-text-colour: $coop-link-blue,
                         $bg-colour: $white,
                         $hover-bg-colour: $offwhite);

 &:disabled,
 &.disabled {
   background-color: $offwhite;

   &:hover,
   &:focus {
     background-color: $offwhite;
   }
 }
}

.btn-full {
  @extend %btn-full;
}

.btn-small {
  @extend %btn-small;
}

.btn-medium {
  @extend %btn-medium;
}

.btn-large {
  @extend %btn-large;
}

.btn-pill {
  @extend %btn-pill;
}

.btn-loading {
  @extend %btn-loading;
}

.btn-proceed {
  @extend %btn-proceed;
}

.btn-back {
  @extend %btn-back;
}