.button--pill {
  background-color: transparent;
  border-radius: $space--base;
  border: $border;
  min-width: 50px;
  padding: $space--x-small $space--small;

  @include breakpoint(medium_up) {
    min-width: 65px;
  }

  @include breakpoint(large_up) {
    min-width: 75px;
  }

  &--100 {
    @extend .button--pill;
    width: 100px;
  }

  &--280 {
    @extend .button--pill;
    width: 280px;
  }

  &--active-red {
    background-color: $accent-red;
    color: $neutral-white;
  }
}
