---
export interface Props {
    floatingCounter: boolean,
    class: string,
};

const { class: classList, floatingCounter} = Astro.props;
---

<span class="counter"></span>
<span class={`sidenote ${classList} ${floatingCounter ? 'floatingCounter' : ''}`}>
    <slot></slot>
</span>

<style>
    :global(body) {
        counter-reset: sidenote unstyled-sidenote;
    }

    .counter {
        counter-increment: unstyled-sidenote;
        margin-left: 0.05rem;
    }
    .counter::after {
        content: counter(unstyled-sidenote);
        font-size: 0.75em;
        position: relative;
        bottom: 0.3em;
        color: #0083c4;
    }

    .sidenote {
        color: var(--content-color-faded);
        font-size: 0.8rem;
    }
    .sidenote.floatingCounter::before {
        content: counter(unstyled-sidenote);
        font-size: 0.75rem;
        color: #0083c4;
        /* Since the sidenote is floated it counts as a positioned element,
        so this would make the counter overlap the start of the text... */
        position: absolute;
        /* ...except that we move it out to the left and up a bit, so
        it's hanging out in space. 100% refers to the width of this
        pseudo-element, so we handle different-sized counters the same. */
        transform: translate(
            calc(-100% - 0.16em),
            -0.12em
        );
    }
</style>