@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;
        /* line-height: 1.2; */
        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);
        /* line-height: 1; */
        outline: none;
        place-content: center;
        position: relative;
        /* transform: translateX(-25%) translateY(-50%); */
        /* transform: translateY(-50%); */
    }

    button.footnote:is(:hover, :focus-visible, [aria-expanded="true"]) {
        /* inline-size: var(--size); */
        border-color: var(--purple);
        /* transform: translateX(0) translateY(-50%); */
    }

    button.footnote sup {
        /* color: var(--purple); */
        border: none;
        inline-size: auto;
        block-size: auto;
        display: inline;
        padding: 0;
        /* margin-inline: .05em; */
        font-feature-settings: "sups" 1;
        /* font-size: .75em; */
        /* font-weight: 550; */
        /* line-height: .7; */
        /* vertical-align: 0.14em; */
        /* transform: translateY(20%); */
        /* z-index: -1; */
        /* place-items: center; */
    }

    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;
        /* vertical-align: 0.14em; */
        transform: translateY(20%);
        vertical-align: .2em;
        /* z-index: -1; */
        /* place-items: center; */
    }

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