@import 'variables';

$heading-anchor-color: lighten($heading-anchor-base-color, 42%);

.heading-anchor {
  color: $heading-anchor-color;

  &:visited {
    color: $heading-anchor-color;
  }

  &:hover {
    color: $heading-anchor-base-color;
    text-decoration: underline;
  }

  &:focus {
    color: $red;
  }
}

@import 'variables';

$heading-anchor-color: lighten($heading-anchor-base-color, 42%);

h1,
h2,
h3,
h4,
h5,
h6 {
  &:hover {
    .heading-anchor {
      visibility: visible;
    }
  }
}

.heading-anchor {
  visibility: hidden;
  color: $heading-anchor-color;

  &:visited {
    color: $heading-anchor-color;
  }

  &:hover {
    color: $heading-anchor-base-color;
    text-decoration: underline;
  }

  &:focus {
    color: $red;
  }
}

Hide heading anchors until heading is hovered
Hide heading anchors until heading is hovered
