@layer components.footnotes {

    span.reference {
        position: absolute;
        font-size: .8rem;
        font-size: .75rem;
        inline-size: 20ch;
        inset-inline-start: 95%;
        inset-block-start: 50%;
        padding: 0;
        text-align: start;
        color: inherit;
    }

    div.reference {
        font-size: .8rem;
        letter-spacing: initial;
        margin-block: .5rem;
        margin-inline: auto;
        max-inline-size: 55ch;
        padding-inline: 1rem;
        text-indent: 0;
        text-wrap: balance;
    }

    .footnote {
        --size: .5em;
    }

    button.footnote {
        background: unset;
        border: unset;
        border: var(--border-width) solid transparent;
        border-radius: 50%;
        block-size: var(--size);
        display: inline-grid;
        font-size: inherit;
        inline-size: var(--size);
        outline: none;
        place-content: center;
        position: relative;
    }

    button.footnote:is(:hover, :focus-visible, [aria-expanded="true"]) {
        border-color: var(--purple);
    }

    button.footnote sup {
        border: none;
        inline-size: auto;
        block-size: auto;
        display: inline;
        padding: 0;
        font-feature-settings: "sups" 1;
    }

    button.footnote[aria-expanded="true"] {
        background-color: var(--purple);
    }

    button.footnote[aria-expanded="true"] sup {
        background-color: transparent;
        color: var(--white);
    }

    button.footnote:is(:hover, :focus-visible)[aria-expanded="true"] sup {
        background-color: transparent;
    }

    a.footnote {
        block-size: var(--size);
        inline-size: var(--size);
        border: var(--border-width) solid var(--purple);
        border-radius: 50%;
        display: inline-block;
        text-decoration: none;
    }

    a.footnote sup {
        color: var(--purple);
        border: none;
        inline-size: auto;
        block-size: auto;
        display: inline;
        padding: 0;
        margin-inline: .05em;
        font-feature-settings: "sups" 0;
        font-size: .75em;
        font-weight: 550;
        line-height: .7;
        transform: translateY(20%);
        vertical-align: .2em;
    }

    a.footnote:is(:hover, :focus-visible) sup {
        color: var(--white);
    }
}