---
interface Props {
  id: string;
  marker: string;
  type: string;
  content: string;
  title: string;
}

const {id, marker, type, content, title} = Astro.props
---

<div class="note" id={id} style={`position-anchor: --note-${id}; --marker: "${marker}"`}>
  <div class="container content">
    {title && <header class="title">{title}</header>}
    <span class="badge">{type.toUpperCase()}</span>
    <p class="body">{content}</p>
    <footer class="backref">
      <a href={`#ref-${id}`}>↩</a>
    </footer>
  </div>
</div>

<style>
  .note {
    scroll-margin-top: calc(var(--layout-header-height) + var(--size-8));
    font-size: clamp(1rem, 2.5vw, 1.25rem);

    @supports (anchor-name: --test) {
      @media (--bp-desktop) {
        position: absolute;
        top: calc(anchor(top) - var(--size-10));
      }
    }
  }

  .container {
    position: relative;
    padding: var(--space-10) var(--space-8) var(--space-6) var(--space-14);
    border: var(--space-1) solid var(--color-surface-inverse);
    box-shadow: var(--color-shadow);

    &::before {
      content: var(--marker);

      position: absolute;
      top: 0;
      left: 0;

      display: flex;
      align-items: flex-start;
      justify-content: center;

      width: var(--space-10);
      height: 100%;

      font-family: var(--font-mono);
      font-size: var(--type-4);
      line-height: 1.875;
      color: var(--color-primary);

      background: var(--color-surface-inverse);
    }

    & .title {
      @mixin typo_body-alt;
      @mixin my var(--size-0);

      font-family: var(--font-header);
      font-weight: 900;
      text-transform: uppercase;
    }

    & .badge {
      @mixin px var(--size-4);
      @mixin py var(--size-2);
      @mixin typo_code;

      position: absolute;
      top: 0;
      right: 0;

      color: var(--color-text-inverse);

      background: var(--color-surface-inverse);
    }

    & .body {
      @mixin typo_body-small;
    }

    & .backref {
      @mixin mt var(--size-4);

      text-align: right;

       & a {
         @mixin pa var(--size-2);

         font-weight: 700;
         color: var(--text-color-tertiary);
         transition:
           color var(--motion-normal) var(--ease-out),
           background var(--motion-normal) var(--ease-out);

         &:hover {
           color: var(--color-text-inverse);
           text-decoration: none;
           background: var(--color-primary);
       }
      }
    }
  }
</style>