%button {
  @extend %unstyled-button;
  @extend %transition;
  background-color: $c-brand;
  border: 1px solid $c-brand;
  border-radius: 2em;
  color: $c-text--invert;
  cursor: pointer;
  display: inline-block;
  font-family: $f-text;
  font-size: rem-calc(16);
  line-height: 1;
  margin: em-calc(5, 16);
  padding: em-calc(9, 16) em-calc(17, 16) em-calc(10, 16);
  text-align: center;

  svg {
    height: 1em;
    margin: em-calc(-2, 16) 0;
    width: 1em;
  }
}

%button--highlighted {
  background-color: $c-brand--highlight;
  border-color: $c-brand--highlight;
  color: $c-text--invert;
}

%button--discreet {
  background-color: transparent;
  color: $c-brand;
}

%button--invert {
  background-color: transparent;
  border-color: $c-text--invert;
  color: $c-text--invert;
}

%button--reverse {
  background-color: $c-bg;
  border-color: $c-bg;
  color: $c-brand;
}

%button--undercover {
  background-color: transparent;
  border-color: transparent;
  color: $c-brand;
}

%button--floating {
  box-shadow: 0 em-calc(6, 18) em-calc(6, 18) transparentize($c-brand, .8), 0 em-calc(10, 18) em-calc(20, 18) transparentize($c-brand, .9);

  &:hover {
    box-shadow: 0 em-calc(14, 18) em-calc(22, 18) transparentize($c-brand, .8), 0 em-calc(18, 18) em-calc(36, 18) transparentize($c-brand, .9);
  }
}

%button--boss {
  font-size: rem-calc(22);
}

button {
  @extend %button;

  &:hover {
    @extend %button--highlighted;
  }
}

.button {
  @extend %button;
  @extend %unstyled-link;

  &:hover {
    @extend %button--highlighted;
  }
}

.button--discreet {
  @extend %button--discreet;
}

.button--invert {
  @extend %button--invert;
}

.button--reverse {
  @extend %button--reverse;
}

.button--undercover {
  @extend %button--undercover;
}

.button--floating {
  @extend %button--floating;
}

.button--boss {
  @extend %button--boss;
}