@use '../visual-design/theme';

h1,
h2,
h3,
h4,
h5,
h6,
.signature {
  a.anchor {
    display: block;
    float: left;
    vertical-align: middle;
    margin-top: -3px;
    width: var(--gutter-sesqui);
    background: none;
    border: 0;

    &::after {
      visibility: hidden;
      font: {
        size: 1rem;
        weight: normal;
      }

      content: '\1F517';
    }
  }

  &:hover a.anchor::after {
    visibility: visible;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  a.anchor {
    margin-left: var(--gutter-sesqui-negative);
  }

  &:target {
    animation-name: highlight-header;
    animation-duration: 5s;
  }
}

@keyframes highlight-header {
  from {
    background-color: theme.$sl-color--dawn-pink;
  }

  to {
    background-color: unset;
  }
}

.signature {
  a.anchor {
    margin-left: -2.5rem;
  }

  .sl-c-callout--function:target & {
    animation-name: highlight-signature;
    animation-duration: 5s;
  }
}

@keyframes highlight-signature {
  from {
    background-color: theme.$sl-color--dawn-pink;
  }

  to {
    background-color: var(--color-code--bg);
  }
}