//
// Anchor links must be included to hide/auto-show anchor links.
//

h1 {
  .anchor {
    display: none;
  }
}

h2,
h3,
h4,
h5,
h6 {
  .anchor {
    color: inherit !important;
    float: left;
    opacity: 0;
    position: relative;
    line-height: 1.15;
    text-decoration: none !important;
    transition: opacity 0.1s ease-in-out;

    &:hover {
      opacity: 1;
    }

    &:focus {
      outline: none;
    }
  }

  &:hover {
    .anchor {
      opacity: 1;
      text-decoration: none !important;
    }
  }
}

h2 {
  .anchor {
    margin-left: -25px;
    padding-right: 10px;
  }
}

h3 {
  .anchor {
    margin-left: -20px;
    padding-right: 8px;
  }
}

h4 {
  .anchor {
    margin-left: -15px;
    padding-right: 6px;
  }
}