%btn {
  display       : inline-block;
  padding       : 15px 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  @include rem-size(12);
}

%btn__primary {
  background: $black;
  color     : $white;
}

%btn__secondary {
  background: $white;
  border    : 2px solid $black;
  color     : $black;
}

// TO DELETE :
%btn__arrow {
  position       : relative;

  display        : flex;
  justify-content: space-around;
  align-items    : center;

  text-transform : uppercase;
  letter-spacing : 1px;
  @include rem-size(12);

}

%btn__arrow--right {
  @extend %btn__arrow;

  &:after {
    display    : block;
    content    : '';

    @include triangle(right, $black, 3px, 3px);

    margin-left: 10px;
  }
}

%btn__arrow--left {
  @extend %btn__arrow;

  &:before {
    display     : block;
    content     : '';

    @include triangle(left, $black, 3px, 3px);

    margin-right: 10px;
  }
}

.btn, .button {
  @extend %btn;

  &__arrow {
    @extend %btn__arrow;
  }
}

.btn__primary, .button-primary {
  @extend %btn__primary;
}

.btn__primary--center {
  @extend %btn__primary;
  display: table;
  margin : 30px auto 0;
}

.btn__secondary, .button-secondary {
  @extend %btn__secondary;
}

.btn__secondary--center {
  @extend %btn__secondary;
  display: table;
  margin : 30px auto 0;
}

.btn__arrow--right {
  @extend %btn__arrow--right;
}

.btn__arrow--left {
  @extend %btn__arrow--left;
}