// Every heading has a hidden icon with a link to the anchor for that section.

// The heading itself needs position: relative to make the positioning work
.docs-heading {
  position: relative;
}

.docs-heading-icon {
  display: none;
  position: absolute;
  right: 100%;
  width: 2rem;
  font-size: 2rem;
  top: 0.4rem;
  margin-right: -0.1rem;

  // Link icon
  &::before {
    font-family: 'foundation-icons';
    content: '\f165';
    color: #999;
  }

  // When the title or the icon itself is hovered on, display the icon
  &:hover,
  .docs-heading:hover & {
    display: block;
  }

  // Adjust the icon's size and position for smaller headings
  h3 > & {
    font-size: 1.6rem;
    top: 0.25rem;
    margin-right: -0.3rem;
  }

  h4 > & {
    font-size: 1.6rem;
    top: 0.25rem;
    margin-right: -0.3rem;
  }
}