@mixin link-color {
  color: $link-color;

  .u-bg-dark &,
  .u-bg-reset .u-bg-dark & {
    color: $link-color-inverse;
  }

  .u-bg-reset & {
    color: $link-color;
  }
}

@mixin link-state-colors {
  &:hover {
    color: $link-hover-color;
  }

  &:active {
    color: $link-active-color;
  }

  .u-bg-dark &,
  .u-bg-reset .u-bg-dark & {
    &:hover  { color: $link-hover-color-inverse;  }
    &:active { color: $link-active-color-inverse; }
  }

  .u-bg-reset & {
    &:hover  { color: $link-hover-color;  }
    &:active { color: $link-active-color; }
  }
}

@mixin link-underline {
  background-image: linear-gradient(
    to bottom,
    currentColor 1px,
    transparent  1px
  );
  background-position: 0 .925em;
  background-repeat: repeat-x;
  background-size: 1px 1px;


  @media
  only screen and ( min-resolution: 192dpi),     // IE doesn't support dppx
  only screen and ( min-resolution: 2dppx) {     // Standard
    background-image: linear-gradient(
      to bottom,
      currentColor .5px,
      transparent  .5px
    );
  }
}