.anchored-heading {

$icon-width: 23px;
$icon-height: 14px;
$icon-spacing: 3px;

position: relative;

&__icon {
  position: absolute;
  width: $icon-width;
  left: -($icon-width + ($icon-spacing * 2));
  padding: 0 $icon-spacing;
  margin-top: -1px;

  opacity: 0;
  display: none;

  text-decoration: none;
  text-indent: -9999em;

  background-image: file-url('anchored-heading-icon.png');
  background-repeat: no-repeat;
  background-position: center center;

  @include device-pixel-ratio {
    background-image: file-url('anchored-heading-icon-2x.png');
    background-size: $icon-width $icon-height;
  }

  @include media(tablet) {
    display: block;
  }

  &:before {
    // zero width space character so that the link behaves like it has text,
    // has height, sits on the baseline, etc.
    content: "\200b";
  }
}

&:hover &__icon {
  @include media(tablet) {
    opacity: 1;
  }
}

&__icon:focus {
  @include media(tablet) {
    opacity: 1;
    outline-width: 1px;
    padding: 0 ($icon-spacing - 1);
  }
}

}