// Placeholders
%btn-reset {
  background-color: transparent;
  border: 0;
  color: $pure-black;
  display: inline-block;
  font-weight: $font-bold;
  padding: 0;
  transition: background-color $transition-default;

  &:hover {
    text-decoration: none;
  }
}

// Custom styles
.c-btn {
  @extend %btn-reset;
  @include sq-font-size(1);
  padding: pxToRem(13) pxToRem(48);

  @media #{$mq-medium} {
    @include sq-font-size(.875);
    padding: pxToRem(7) pxToRem(13);
  }

  // Color
  &--red {
    background-color: $cherry;
    color: $pure-white;

    &:hover {
      background-color: $marine-blue;
    }
  }

  &--grey {
    background-color: $tuatara;
    color: $pure-white;

    &:hover {
      background-color: darken($tuatara, 5%);
    }
  }

  // Size
  &--full {
    display: block;
    text-align: center;
  }
}