Heading.astro

---
const { id, level } = Astro.props;

const Element = `h${level}`;

export interface Props {
  id: string;
  level: 1 | 2 | 3 | 4 | 5 | 6;
}

import Icon from "../common/Icon.astro";
---

<div class="heading" id={id}>
  <a href={`#${id}`}><Icon name="link" group="solid" /></a>
  <Element><slot /></Element>
</div>

<style lang="scss">
  :global(details.accordion > summary div.heading) {
    margin: 0px;
  }

  div.heading {
    width: calc(100% + 3em);
    margin: 2em 0px 0px -3em;
    display: flex;
    align-items: center;

    & > a {
      color: white;
      opacity: 0;
      font-size: 1.25em;
      padding: 0.25em 0.5em;
      transition: opacity 0.3s ease-in-out;
    }

    :global(h1),
    :global(h2),
    :global(h3),
    :global(h4),
    :global(h5),
    :global(h6) {
      width: 100%;
      margin: 0px;
      text-align: left;
      position: relative;
      word-break: break-word;

      &::after {
        content: "";
        display: block;
        width: 0.1em;
        height: 100%;
        background-color: var(--link-color);
        position: absolute;
        bottom: 0px;
        border-radius: 99em;
        left: -0.15em;
        z-index: -1;
        padding: 0px;
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
        transition: clip-path cubic-bezier(0.65, 0.05, 0.36, 1) 0.75s;
      }
    }

    &:hover {
      a {
        opacity: 1;
      }
    }

    &:target {
      :global(h1),
      :global(h2),
      :global(h3),
      :global(h4),
      :global(h5),
      :global(h6) {
        &::after {
          clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
        }
      }
      a {
        opacity: 1;
      }
    }

    &:global(+ p) {
      margin-top: 0.25em;
    }
  }

  @media screen and (max-width: 800px) {
    div.heading {
      width: 100%;
      margin: 2em auto 0px -1.5em;

      & > a {
        font-size: 0.9em;
      }
    }
  }
</style>