@mixin upcase {
  text-transform: uppercase;
}

@mixin bold-up-text {
  font-weight: 700;
  text-transform: uppercase;
}

@mixin background-hover-effect($color) {
  transition: background .2s;

  &:hover {
    background-color: lighten( $color, 4% );
  }
}

@mixin disable-selection {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin active-light {
  color: $primary-color;
  background-color: $body-bg;
}

@mixin active-dark {
  color: $body-bg;
  background-color: $primary-color;
}

%btn-light {
  @include active-light;
}

%btn-dark {
  @include active-dark;
  @include background-hover-effect( $primary-color );
}

@mixin upcase {
  text-transform: uppercase;
}

@mixin bold-up-text {
  font-weight: 700;
  text-transform: uppercase;
}

@mixin background-hover-effect($color) {
  transition: background .2s;

  &:hover {
    background-color: lighten( $color, 4% );
  }
}

@mixin disable-selection {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin link {
  color: $anchor-font-color;
  line-height: inherit;
  text-decoration: $anchor-text-decoration;

  &:hover,
  &:focus {
    color: $anchor-font-color-hover;
    @if $anchor-text-decoration-hover != $anchor-text-decoration {
      text-decoration: $anchor-text-decoration-hover;
    }
  }
}

@mixin active-light {
  color: $primary-color;
  background-color: $body-bg;
}

@mixin active-dark {
  color: $body-bg;
  background-color: $primary-color;
}

%btn-light {
  @include active-light;
}

%btn-dark {
  @include active-dark;
  @include background-hover-effect( $primary-color );
}

%btn-link {
  @include link;
}

Copy link styling into a mixin
Copy link styling into a mixin
