%button {
  font-size: $base-font-size;

  &:focus,
  &:hover {
    text-decoration: none !important;
  }
}

@mixin regular-button($color: $brand) {
  @include button($background: $color);
  @include inverted-selection;
  @extend %button;
}

@mixin hollow-button($color: $link) {
  @include button($style: hollow, $background: $color);
  @include normal-selection;
  @extend %button;
  margin-bottom: 0;
}

@mixin link {
  color: $link;
  cursor: pointer;

  &:hover,
  &:active {
    color: $link-hover;
    text-decoration: underline;
  }

  &:focus {
    outline: $outline-focus;
  }
}

@mixin base-button {
  font-size: $base-font-size;

  &:focus,
  &:hover {
    text-decoration: none !important;
  }
}

%button {
  @include base-button;
}

@mixin regular-button($color: $brand) {
  @include button($background: $color);
  @include inverted-selection;
  @include base-button;
}

@mixin hollow-button($color: $link) {
  @include button($style: hollow, $background: $color);
  @include normal-selection;
  @include base-button;
  margin-bottom: 0;
}

@mixin link {
  color: $link;
  cursor: pointer;

  &:hover,
  &:active {
    color: $link-hover;
    text-decoration: underline;
  }

  &:focus {
    outline: $outline-focus;
  }
}

Fix mixin for general button styles
Fix mixin for general button styles

Using the placeholder selector, we weren't overwriting the rules in the
mixin called with `@include` in some cases because in the generated CSS
the placeholder selector appeared before the code generated by the calls
to `@include`.
