// Permalinks to page headings
// Implemented as empty <a> tags inside the <hN> tags, showing up as chain icons
h1, h2, h3, h4, h5, h6 {
  .docs-heading-anchor {
    &, &:hover, &:visited {
      color: $content-heading-color;
    }
  }

  .docs-heading-anchor-permalink {
    visibility: hidden;
    vertical-align: middle;
    margin-left: 0.5em;
    font-size: 0.7rem;

    &::before {
      @include font-awesome;
      // fa-link
      content: "\f0c1";
    }
  }
  // the permalinks icon is only shown if the user hovers over the heading
  &:hover .docs-heading-anchor-permalink {
    visibility: visible;
  }
}

@if $documenter-is-dark-theme {
  .docs-light-only {
    display: none !important;
  }
} @else {
  .docs-dark-only {
    display: none !important;
  }
}

pre {
  position: relative;
  overflow: hidden;

  code, code.hljs {
    padding: 0 $documenter-container-left-padding !important;
    overflow: auto;
    display: block;
  }

  code:first-of-type, code.hljs:first-of-type {
    padding-top: 0.5rem !important;
  }

  code:last-of-type, code.hljs:last-of-type {
    padding-bottom: 0.5rem !important;
  }

  .copy-button {
    opacity: 0.2;
    transition: opacity 0.2s;
    position: absolute;
    right: 0em;
    top: 0em;
    padding: 0.5em;
    width: 2.5em;
    height: 2.5em;
    background: transparent;
    border: none;
    font-family: "Font Awesome 6 Free";
    color: $body-color;
    cursor: pointer;
    text-align: center;

    &:focus, &:hover {
      opacity: 1;
      background: adjust-color($body-color, $alpha: -0.9);
      color: $link;
    }

    &.success {
      color: $green;
      opacity: 1;
    }

    &.error {
      color: $red;
      opacity: 1;
    }
  }

  &:hover .copy-button {
    opacity: 1;
  }
}

.link-icon {
  &:hover {
    color: $link;
  }
}
