%btn {
  display       : inline-block;
  padding       : 10px 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  @include rem-size(12);
  border-radius : 25px;
  font-weight   : $sbold;
  cursor        : pointer;
}

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

%btn__secondary {
  background: $white;
  border    : 2px solid $lightblue;
  color     : $lightblue;
}
%btn__tertiary {
  background: $darkblue;
  color     : $white;
}

// 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, $red, 3px, 3px);

    margin-left: 10px;
  }
}

%btn__arrow--left {
  @extend %btn__arrow;

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

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

    margin-right: 10px;
  }
}

.btn {
  @extend %btn;

  &__arrow {
    @extend %btn__arrow;
  }
}

.btn__primary {
  @extend %btn__primary;
  display        : flex;

  justify-content: center;
  align-items    : center;
  align-content  : center;
  box-shadow     : 0 4px 8px 0 $lipstick-30;

  svg {
    margin-right: 10px;
  }

  &:focus,
  &:hover {
    background: $darkblue;
    box-shadow: 0 4px 8px 0 $peacock-blue-10;
  }

  path {
    fill: $white !important;
  }
}

.btn__tertiary {
  @extend %btn__tertiary;
  display        : flex;

  justify-content: center;
  align-items    : center;
  align-content  : center;
  box-shadow: 0 4px 8px 0 $peacock-blue-10;

  svg {
    margin-right: 10px;
  }

  &:focus,
  &:hover {
    background: $darkblue;
    box-shadow: 0 4px 8px 0 $peacock-blue-10;
  }

  path {
    fill: $white !important;
  }
}

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

.btn__secondary {
  @extend %btn__secondary;

  &:focus,
  &:hover {
    background: $white;
    border    : 2px solid $darkblue;
    color     : $darkblue;
  }
}

.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;
}