:root {
    /* Colors */
    --lexxy-color-ink: oklch(20% 0 0);
    --lexxy-color-ink-medium: oklch(40% 0 0);
    --lexxy-color-ink-light: oklch(60% 0 0);
    --lexxy-color-ink-lighter: oklch(85% 0 0);
    --lexxy-color-ink-lightest: oklch(96% 0 0);
    --lexxy-color-ink-inverted: white;

    --lexxy-color-accent-dark: oklch(57% 0.19 260);
    --lexxy-color-accent-medium: oklch(75% 0.196 258);
    --lexxy-color-accent-light: oklch(88% 0.026 254);
    --lexxy-color-accent-lightest: oklch(92% 0.026 254);

    --lexxy-color-red: oklch(60% 0.15 27);
    --lexxy-color-green: oklch(60% 0.15 145);
    --lexxy-color-blue: oklch(66% 0.196 258);
    --lexxy-color-purple: oklch(60% 0.15 305);

    --lexxy-color-code-token-att: #d73a49;
    --lexxy-color-code-token-comment: #6a737d;
    --lexxy-color-code-token-function: #6f42c1;
    --lexxy-color-code-token-operator: #d73a49;
    --lexxy-color-code-token-property: #005cc5;
    --lexxy-color-code-token-punctuation: #24292e;
    --lexxy-color-code-token-selector: #22863a;
    --lexxy-color-code-token-variable: #e36209;

    --lexxy-color-canvas: var(--lexxy-color-ink-inverted);
    --lexxy-color-text: var(--lexxy-color-ink);
    --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
    --lexxy-color-link: var(--lexxy-color-accent-dark);
    --lexxy-color-selected: var(--lexxy-color-accent-lightest);
    --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
    --lexxy-color-selected-dark: var(--lexxy-color-blue);
    --lexxy-color-selected-50: color-mix(in oklch, var(--lexxy-color-selected-dark) 50%, transparent);
    --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);

    /* Text color highlights */
    --highlight-1: rgb(136, 118, 38);
    --highlight-2: rgb(185, 94, 6);
    --highlight-3: rgb(207, 0, 0);
    --highlight-4: rgb(216, 28, 170);
    --highlight-5: rgb(144, 19, 254);
    --highlight-6: rgb(5, 98, 185);
    --highlight-7: rgb(17, 138, 15);
    --highlight-8: rgb(148, 82, 22);
    --highlight-9: rgb(102, 102, 102);

    --highlight-bg-1: rgba(229, 223, 6, 0.3);
    --highlight-bg-2: rgba(255, 185, 87, 0.3);
    --highlight-bg-3: rgba(255, 118, 118, 0.3);
    --highlight-bg-4: rgba(248, 137, 216, 0.3);
    --highlight-bg-5: rgba(190, 165, 255, 0.3);
    --highlight-bg-6: rgba(124, 192, 252, 0.3);
    --highlight-bg-7: rgba(140, 255, 129, 0.3);
    --highlight-bg-8: rgba(221, 170, 123, 0.3);
    --highlight-bg-9: rgba(200, 200, 200, 0.3);

    /* Tables */
    --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
    --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);
    --lexxy-color-table-cell-selected: var(--lexxy-color-selected);
    --lexxy-color-table-cell-selected-border: var(--lexxy-color-selected-dark);
    --lexxy-color-table-cell-selected-bg: var(--lexxy-color-accent-lightest);
    --lexxy-color-table-cell-add: var(--lexxy-color-selected-50);
    --lexxy-color-table-cell-toggle: var(--lexxy-color-accent-lightest);
    --lexxy-color-table-cell-remove: oklch(60% 0.15 27 / 0.1);
    --lexxy-table-cell-add-size: 4px;

    /* Typography */
    --lexxy-font-base: system-ui, sans-serif;
    --lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace;
    --lexxy-text-small: 0.875rem;
    --lexxy-content-margin: 1rem;

    /* Focus ring */
    --lexxy-focus-ring-color: var(--lexxy-color-accent-dark);
    --lexxy-focus-ring-offset: -2px;
    --lexxy-focus-ring-size: 2px;

    /* Misc */
    --lexxy-toolbar-button-size: 2lh;
    --lexxy-radius: 0.5ch;
    --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --lexxy-z-popup: 1000;
}
/* Text styles
/* -------------------------------------------------------------------------- */

:where(.lexxy-content) {
    color: var(--lexxy-color-ink);

    h1, h2, h3, h4, h5, h6 {
        display: block;
        font-weight: bold;
        hyphens: auto;
        margin-block: 0 var(--lexxy-content-margin);
        overflow-wrap: break-word;
        text-wrap: balance;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.875rem; }
    h6 { font-size: 0.75rem; }

    p,
    ul,
    ol,
    dl,
    blockquote,
    figure,
    .attachment,
    .attachment-gallery {
        margin-block: 0 var(--lexxy-content-margin);
        position: relative;

        &:not(lexxy-editor &) {
            overflow-wrap: break-word;
            text-wrap: pretty;
        }
    }

    .lexxy-content__italic {
        font-style: italic;
    }

    .lexxy-content__bold {
        font-weight: bold;
    }

    .lexxy-content__strikethrough {
        text-decoration: line-through;
    }

    .lexxy-content__underline {
        text-decoration: underline;
    }

    .lexxy-content__strikethrough.lexxy-content__underline {
        text-decoration: line-through underline;
    }

    mark,
    .lexxy-content__highlight {
        background-color: transparent;
        color: inherit;
    }

    blockquote {
        border-inline-start: 0.25em solid var(--lexxy-color-ink-lighter);
        font-style: italic;
        margin: var(--lexxy-content-margin) 0;
        padding: 0.5lh 2ch;

        p:last-child {
            margin-block-end: 0;
        }
    }

    p:empty {
        display: none;
    }

    a {
        color: var(--lexxy-color-link);
        text-decoration: underline;
    }

    img,
    video,
    embed,
    object {
        inline-size: auto;
        margin-inline: auto;
        max-block-size: 32rem;
        object-fit: contain;

        a:has(&) {
            display: inline-block;
        }
    }

    code, pre {
        background-color: var(--lexxy-color-ink-lightest);
        border-radius: var(--lexxy-radius);
        color: var(--lexxy-color-ink);
        font-family: var(--lexxy-font-mono);
        font-size: 0.9em;
        padding: 0.25ch 0.5ch;

        &:is(pre),
        &[data-language] {
            border-radius: var(--lexxy-radius);
            display: block;
            hyphens: none;
            margin-block: 0 var(--lexxy-content-margin);
            overflow-x: auto;
            padding: 1ch;
            tab-size: 2;
            text-wrap: nowrap;
            white-space: pre;
            word-break: break-word;
        }
    }

    ol, ul:not(.lexxy-prompt-menu) {
        margin-inline-start: calc(var(--lexxy-content-margin) * 1.5);
        padding: 0;
    }

    ul {
        list-style-type: disc;
    }

    ol {
        list-style-type: decimal;
    }

    li.lexxy-nested-listitem {
        list-style-type: none;

        ol, ul {
            margin-block-end: 0;
        }
    }

    hr {
        border: 0;
        border-block-end: 1px solid currentColor;
        inline-size: 20%;
        margin: calc(0.5em + var(--lexxy-content-margin)) 0;
    }

    .horizontal-divider {
        margin: 0;
        padding: calc(0.5em + var(--lexxy-content-margin)) 0;

        hr {
            margin: 0;
        }
    }

    *:has(+ .horizontal-divider) {
        margin-block-end: 0;
    }

    > :last-child {
        margin-block-end: 0;
    }

    /* Keywords and attributes */
    .code-token__attr,
    .token.attr-name,
    .token.atrule,
    .token.attr,
    .token.keyword {
        color: var(--lexxy-color-code-token-att);
    }

    /* Constants, booleans, numbers, properties, tags */
    .code-token__property,
    .token.boolean,
    .token.constant,
    .token.number,
    .token.property,
    .token.symbol,
    .token.tag {
        color: var(--lexxy-color-code-token-property);
    }

    /* Strings, selectors, and built-in constructs */
    .code-token__selector,
    .token.attr-value,
    .token.builtin,
    .token.char,
    .token.inserted,
    .token.line,
    .token.selector,
    .token.string {
        color: var(--lexxy-color-code-token-selector);
    }

    /* Comments and meta information */
    .code-token__comment,
    .token.cdata,
    .token.comment,
    .token.doctype,
    .token.prolog {
        color: var(--lexxy-color-code-token-comment);
        font-style: italic;
    }

    /* Operators and symbolic entities */
    .code-token__operator,
    .token.deleted,
    .token.entity,
    .token.operator,
    .token.url,
    code[data-language="diff"] .code-token__operator + .code-token__selector {
        color: var(--lexxy-color-code-token-operator);
    }

    /* Functions and class names */
    .code-token__function,
    .token.class,
    .token.class-name,
    .token.function {
        color: var(--lexxy-color-code-token-function);
    }

    /* Variables, regex, namespaces, important */
    .code-token__variable,
    .token.important,
    .token.namespace,
    .token.regex,
    .token.variable {
        color: var(--lexxy-color-code-token-variable);
    }

    /* Punctuation */
    .code-token__punctuation,
    .token.punctuation {
        color: var(--lexxy-color-code-token-punctuation);
    }

    /* Tables */
    :where(.lexxy-content__table-wrapper) {
        margin: 0;
        margin-block: 1ch;
        overflow-x: auto;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        inline-size: calc(100% - 0.5ch);
        margin: 0.25ch;

        th,
        td {
            border: 1px solid var(--lexxy-color-ink-lighter);
            min-width: 5ch;
            max-width: 50ch;
            padding: 1ch;
            text-align: start;
            word-break: normal;

            *:last-child {
                margin-block-end: 0;
            }

            &.lexxy-content__table-cell--header {
                background-color: var(--lexxy-color-table-header-bg);
                font-weight: bold;
            }

            *:is(code, pre) {
                hyphens: auto;
                text-wrap: wrap;
                white-space: pre-wrap;
            }
        }
    }


    /* Attachments
    /* ------------------------------------------------------------------------ */

    p:has(.attachment) {
        text-align: center;
    }

    .attachment {
        --lexxy-attachment-gap: 0.75ch;

        block-size: auto;
        box-sizing: border-box;
        border-radius: var(--lexxy-radius);
        display: block;
        inline-size: fit-content;
        margin-inline: auto;
        max-inline-size: 100%;
        min-inline-size: 10ch;
        padding: var(--lexxy-attachment-gap);
        position: relative;
        text-align: center;
    }

    .attachment__caption {
        color: var(--lexxy-color-text-subtle);
        display: block;
        font-size: var(--lexxy-text-small);
        padding: 1ch;
    }

    .attachment__icon {
        aspect-ratio: 4/5;
        background-color: color-mix(var(--lexxy-attachment-icon-color), transparent 90%);
        block-size: 3lh;
        border: 1px solid var(--lexxy-attachment-icon-color);
        border-block-start-width: 1.5ch;
        border-radius: var(--lexxy-radius);
        box-sizing: border-box;
        color: var(--lexxy-attachment-icon-color);
        display: grid;
        font-size: var(--lexxy-text-small);
        font-weight: bold;
        inline-size: auto;
        overflow: hidden;
        place-content: center;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .attachment--preview {
        img, video {
            border-radius: var(--lexxy-radius);
            block-size: auto;
            display: block;
            margin-inline: auto;
            max-inline-size: 100%;
            user-select: none;
        }

        > a {
            display: block;
        }

        .attachment__caption {
            padding-block-end: 0.5ch;
        }
    }

    .attachment--file {
        --lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);

        align-items: center;
        display: flex;
        flex-wrap: wrap;
        inline-size: auto;

        .attachment__caption {
            display: grid;
            flex: 1;
            text-align: start;
        }

        .attachment__name {
            color: var(--lexxy-color-ink);
            font-weight: bold;
        }
    }

    .attachment--psd,
    .attachment--key,
    .attachment--sketch,
    .attachment--ai,
    .attachment--eps,
    .attachment--indd,
    .attachment--svg,
    .attachment--ppt,
    .attachment--pptx {
        --lexxy-attachment-icon-color: var(--lexxy-color-red);
    }

    .attachment--css,
    .attachment--php,
    .attachment--json,
    .attachment--htm,
    .attachment--html,
    .attachment--rb,
    .attachment--erb,
    .attachment--ts,
    .attachment--js {
        --lexxy-attachment-icon-color: var(--lexxy-color-purple);
    }

    .attachment--txt,
    .attachment--pages,
    .attachment--rtf,
    .attachment--md,
    .attachment--doc,
    .attachment--docx {
        --lexxy-attachment-icon-color: var(--lexxy-color-blue);
    }

    .attachment--csv,
    .attachment--numbers,
    .attachment--xls,
    .attachment--xlsx {
        --lexxy-attachment-icon-color: var(--lexxy-color-green);
    }

    .attachment--error {
        padding-block: 2ch;
    }


    /* Image galleries */
    /* ------------------------------------------------------------------------ */

    .attachment-gallery {
        display: block;
        text-align: center;

        .attachment {
            display: inline-flex;
            flex-direction: column;
            gap: 0;
            inline-size: calc(33.333% - 0.8ch);
            vertical-align: top;

            .attachment__caption {
                padding-block-end: 1ch;
            }
        }

        &.attachment-gallery--2,
        &.attachment-gallery--4 {
            .attachment {
                inline-size: calc(50% - 0.8ch);
            }
        }
    }


    /* Custom attachments such as mentions, etc. */
    /* ------------------------------------------------------------------------ */

    action-text-attachment[content-type^="application/vnd.actiontext"] {
        --lexxy-attachment-bg-color: transparent;
        --lexxy-attachment-image-size: 1em;
        --lexxy-attachment-text-color: currentColor;

        align-items: center;
        background: var(--lexxy-attachment-bg-color);
        border-radius: var(--lexxy-radius);
        color: var(--lexxy-attachment-text-color);
        display: inline-flex;
        gap: 0.25ch;
        margin: 0;
        padding: 0;
        position: relative;
        white-space: normal;

        img {
            block-size: var(--lexxy-attachment-image-size);
            border-radius: 50%;
            inline-size: var(--lexxy-attachment-image-size);
        }
    }


    /* Horizontal divider */
    /* ------------------------------------------------------------------------ */

    .horizontal-divider {
        margin: 0;
        margin-block-end: .5em;
        padding: 1.5em 0 .5em;

        hr {
            border: 0;
            border-block-end: 1px solid currentColor;
            inline-size: 20%;
            margin: 0;
        }
    }
}

:where(lexxy-editor) {
    --lexxy-editor-padding: 1ch;
    --lexxy-editor-rows: 8lh;
    @supports (min-block-size: attr(rows lh)) {
        --lexxy-editor-rows: attr(rows lh, 8lh);
    }
    --lexxy-toolbar-gap: 2px;
    --lexxy-toolbar-spacing: 0.5ch;

    border: 1px solid var(--lexxy-color-ink-lighter);
    border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
    background-color: var(--lexxy-color-canvas);
    display: block;
    overflow: visible;
    position: relative;
    transition: opacity 150ms;

    p.provisional-paragraph {
        display: block;

        &.hidden {
            block-size: 0.5ch;
            margin: 0;
        }
    }

    input,
    button,
    summary {
        &:focus-visible {
            outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
            outline-offset: var(--lexxy-focus-ring-offset);
        }
    }

    summary {
        list-style: none;

        &::-webkit-details-marker {
            display: none;
        }
    }

    button,
    summary {
        -webkit-appearance: none;
        appearance: none;
        background: var(--lexxy-color-canvas);
        border: none;
        border-radius: var(--lexxy-radius);
        cursor: pointer;
        line-height: normal;
        font-size: inherit;
        inline-size: auto;
        padding: 0;

        @media(any-hover: hover) {
            &:hover:not([aria-disabled="true"]) {
                background: var(--lexxy-color-ink-lightest);
            }
        }
    }

    .node--selected {
        outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
        outline-offset: var(--lexxy-focus-ring-offset);
    }

    /* Tables */
    /* ------------------------------------------------------------------------ */

    table {
        th, td {
            position: relative;
            transition: all 0.1s ease-in-out;

            /* Used for column and row adding visualizations */
            &:after {
                box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent inset;
                content: "";
                display: block;
                inset-block-start: -1px;
                inset-block-end: -1px;
                inset-inline-start: -1px;
                inset-inline-end: -1px;
                pointer-events: none;
                position: absolute;
                transition: box-shadow 0.1s ease-in-out;
                z-index: 2;
            }

            &.lexxy-content__table-cell--selected {
                background-color: var(--lexxy-color-table-cell-selected-bg);
            }

            &.lexxy-content__table-cell--focus {
                &:after {
                    box-shadow: 0 0 0 0 transparent, 0 0 0 2px var(--lexxy-color-table-cell-selected-border) inset;
                }
            }

            &.lexxy-content__table-cell--highlight {
                &[data-action="insert"] {
                    &[data-child-type="row"] {
                        &[data-direction="after"] {
                            &:after {
                                box-shadow:
                                        0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add),
                                        0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add) inset;
                            }
                        }
                        &[data-direction="before"] {
                            &:after {
                                box-shadow:
                                        0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add),
                                        0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add) inset;
                            }
                        }
                    }
                    &[data-child-type="column"] {
                        &[data-direction="after"] {
                            &:after {
                                box-shadow:
                                        var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add),
                                        calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add) inset;
                            }
                        }
                        &[data-direction="before"] {
                            &:after {
                                box-shadow:
                                        calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add),
                                        var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add) inset;
                            }
                        }
                    }
                }
                &[data-action="delete"] {
                    background-color: var(--lexxy-color-table-cell-remove);
                    color: var(--lexxy-color-red);

                    &:after { box-shadow: 0 0 0 0 transparent; }
                }
                &[data-action="toggle"] {
                    background-color: var(--lexxy-color-table-cell-toggle);

                    &:after { box-shadow: 0 0 0 0 transparent; }
                }
            }
        }

        tr.lexxy-content__table-cell--highlight[data-action="delete"] {
            th, td {
                background-color: var(--lexxy-color-table-cell-remove);
                color: var(--lexxy-color-red);

                &:after { box-shadow: 0 0 0 0 transparent; }
            }
        }

        &.lexxy-content__table--selection {
            ::selection {
                background: transparent;
            }
        }
    }

    &:has(.lexxy-content__table-cell--selected) {
        lexxy-table-tools {
            visibility: hidden;
        }
    }

    [data-lexical-linebreak] {
        block-size: 0;
        display: contents;
        inline-size: 0;
    }

    /* Attachments */
    /* ------------------------------------------------------------------------ */

    action-text-attachment {
        cursor: pointer;
    }

    .attachment {
        background-color: var(--lexxy-color-canvas);

        progress {
            max-inline-size: 10ch;
            margin: auto;
        }

        &.attachment--preview {
            progress {
                inset-block-start: 2ch;
                inset-inline-start: 0;
                inset-inline-end: 0;
                position: absolute;
            }

            lexxy-node-delete-button {
                inset-block-start: 1.5ch;
                inset-inline-end: 1.5ch;
                inset-inline-start: unset;
            }
        }

        &.attachment--error {
            background: color-mix(var(--lexxy-color-red) 10%, transparent);
            padding: 2ch;

            &:before {
                align-items: center;
                aspect-ratio: 1;
                background: var(--lexxy-color-red);
                block-size: 1.5lh;
                border-radius: 50%;
                color: white;
                content: "!";
                display: flex;
                justify-content: center;
                margin: auto;
            }

            > div {
                flex: 1;
                font-size: 0.85em;
                padding: 1ch;
                text-align: start;
            }
        }
    }

    .attachment[draggable] {
        cursor: grab;
    }

    .attachment.lexxy-dragging {
        opacity: 0.4;
    }

    [class*="lexxy-drop-target--"] {
        position: relative;
    }

    /* Horizontal line indicator for block and list drops */
    .lexxy-drop-target--block-before::before,
    .lexxy-drop-target--block-after::after,
    .lexxy-drop-target--list-before::before,
    .lexxy-drop-target--list-after::after {
        background-color: var(--lexxy-focus-ring-color);
        block-size: 3px;
        border-radius: 1px;
        content: "";
        inset-inline: 0;
        pointer-events: none;
        position: absolute;
        transform: translate(0, 0.5ch);
    }

    .lexxy-drop-target--block-before::before,
    .lexxy-drop-target--list-before::before {
        transform: translate(0, -0.5ch);
    }

    .lexxy-drop-target--block-before::before,
    .lexxy-drop-target--list-before::before {
        inset-block-start: -2px;
    }

    .lexxy-drop-target--block-after::after,
    .lexxy-drop-target--list-after::after {
        inset-block-end: -2px;
    }

    /* Vertical line indicator for gallery merge and reorder */
    .lexxy-drop-target--gallery-before::before,
    .lexxy-drop-target--gallery-after::after {
        background-color: var(--lexxy-focus-ring-color);
        border-radius: 1px;
        content: "";
        inset-block: 0;
        inline-size: 3px;
        pointer-events: none;
        position: absolute;
    }

    .lexxy-drop-target--gallery-before::before {
        inset-inline-start: -4px;
    }

    .lexxy-drop-target--gallery-after::after {
        inset-inline-end: -4px;
    }

    .attachment:hover:not(.node--selected) {
        outline: var(--lexxy-focus-ring-size) solid color-mix(in oklch, var(--lexxy-focus-ring-color) 30%, transparent);
        outline-offset: var(--lexxy-focus-ring-offset);
    }

    .attachment--file {
        lexxy-node-delete-button {
            inset-block-start: 50%;
            inset-inline-end: 1ch;
            inset-inline-start: unset;
            transform: translate(0, -50%);
        }
    }

    /* Image galleries */
    /* ------------------------------------------------------------------------ */

    .attachment-gallery {
        --lexxy-attachment-gallery-columns: 3;
        --lexxy-attachment-gallery-gap: 0.4ch;
        --lexxy-focus-ring-offset: -6px;

        padding: 0;

        .attachment {
            background: transparent;
            box-sizing: border-box;
            margin: var(--lexxy-attachment-gallery-gap);
            padding: 0;
            padding-block-end: var(--lexxy-attachment-gap);
            vertical-align: top;

            img {
                box-sizing: border-box;
                padding: 1ch;
                padding-block-end: 0;
            }


            &.attachment--error {
                background: color-mix(var(--lexxy-color-red) 10%, transparent);
                padding: 2ch;

                > div {
                    text-align: center;
                }
            }
        }
    }

    .attachment__caption {
        textarea {
            background: transparent;
            block-size: fit-content;
            border: 0;
            border-radius: var(--lexxy-radius);
            box-sizing: border-box;
            color: inherit;
            display: block;
            font-size: inherit;
            font-family: inherit;
            inline-size: 100%;
            max-inline-size: 100%;
            padding: 0;
            resize: none;
            text-align: center;

            &:focus {
                background: var(--lexxy-color-canvas);
                outline: 0;
            }

            &:placeholder-shown {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            @supports (field-sizing: content) {
                field-sizing: content;
                inline-size: 100%;
            }
        }
    }
}

/* Placeholder */
:where(.lexxy-editor--empty) {
    .lexxy-editor__content:not(:has(h1, h2, h3, h4, h5, h6, table, ul, ol, figure, .attachment-gallery))::before {
        content: attr(placeholder);
        color: currentColor;
        cursor: text;
        opacity: 0.66;
        pointer-events: none;
        position: absolute;
        white-space: pre-line;
    }
}

:where(.lexxy-editor__content) {
    min-block-size: var(--lexxy-editor-rows);
    outline: 0;
    padding: var(--lexxy-editor-padding);
}

:where(.lexxy-editor--drag-over) {
    background-color: var(--lexxy-color-selected);
    border-radius: var(--lexxy-radius);
    outline: 2px dashed var(--lexxy-color-selected-dark);
}

:where([data-lexical-cursor]) {
    animation: blink 1s infinite;
    block-size: 1lh;
    border-inline-start: 1.5px solid currentColor;
    line-height: inherit;
    margin-block: 0 var(--lexxy-content-margin);
}

@keyframes blink {
    0% { opacity: 1; }
    60% { opacity: 1; }
    100% { opacity: 0;}
}

/* --------------------------------------------------------------------------
/* Toolbar */

:where(lexxy-toolbar) {
    --lexxy-toolbar-icon-size: 1.125em;

    border-block-end: 1px solid var(--lexxy-color-ink-lighter);
    color: currentColor;
    display: flex;
    font-size: inherit;
    gap: var(--lexxy-toolbar-gap);
    max-inline-size: 100%;
    padding: 2px;
    position: relative;

    &[data-attachments="false"] button[name="image"],
    &[data-attachments="false"] button[name="file"] {
        display: none;
    }

    &[data-upload="file"] button[name="image"] {
        display: none;
    }

    &[data-upload="image"] button[name="file"] {
        display: none;
    }

    .lexxy-editor__toolbar-button {
        aspect-ratio: 1;
        block-size: var(--lexxy-toolbar-button-size);
        border: 0;
        border-radius: var(--lexxy-radius);
        color: currentColor;
        display: grid;
        line-height: inherit;
        place-items: center;

        &:is(:active):not([aria-disabled="true"]),
        &[aria-pressed="true"] {
            background-color: var(--lexxy-color-selected);

            &:hover {
                background-color: var(--lexxy-color-selected-hover);
            }
        }

        &[aria-disabled="true"] {
            cursor: default;
            opacity: 0.3;
        }

        svg {
            -webkit-touch-callout: none;
            block-size: var(--lexxy-toolbar-icon-size);
            fill: currentColor;
            grid-area: 1/1;
            inline-size: var(--lexxy-toolbar-icon-size);
            user-select: none;
        }

        &.lexxy-editor__toolbar-group-end {
            position: relative;
            margin-inline-end: calc(var(--lexxy-toolbar-spacing) + 1px);

            &:after {
                background-color: var(--lexxy-color-ink-lighter);
                content: "";
                display: block;
                width: 1px;
                height: 60%;
                inset-inline-end: calc(-1 * var(--lexxy-toolbar-spacing));
                inset-block-start: 20%;
                position: absolute;
                pointer-events: none;
            }
        }
    }

    .lexxy-editor__toolbar-spacer {
        flex: 1;
    }
}

/* --------------------------------------------------------------------------
/* Dropdowns */

:where(.lexxy-editor__toolbar-dropdown) {
    user-select: none;
    -webkit-user-select: none;

    &.lexxy-editor__toolbar-dropdown--chevron {
        summary {
            aspect-ratio: unset;
            gap: 0.5ch;
            grid-template-columns: 2fr 1fr;
            padding-inline: 0.75ch;

            &:after {
                block-size: 0.3ch;
                border-block-end: 2px solid currentcolor;
                border-inline-end: 2px solid currentcolor;
                content: "";
                display: inline-block;
                inline-size: 0.3ch;
                transform: rotate(45deg);
            }
        }
    }

    summary ~ * {
        background-color: var(--lexxy-color-canvas);
        border: 2px solid var(--lexxy-color-selected-hover);
        border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
        box-sizing: border-box;
        box-shadow: var(--lexxy-shadow);
        color: var(--lexxy-color-ink);
        display: flex;
        gap: var(--lexxy-toolbar-gap);
        margin: 0;
        padding: var(--lexxy-toolbar-spacing);
        position: absolute;
        z-index: 3;
    }

    &:is([open]) > .lexxy-editor__toolbar-button {
        background-color: var(--lexxy-color-selected-hover);
        border-end-end-radius: 0;
        border-end-start-radius: 0;

        &:hover {
            background-color: var(--lexxy-color-selected-hover);
        }
    }

    [overflowing] &:not(.lexxy-editor__toolbar-overflow) summary ~ * {
        inset-inline-end: var(--lexxy-toolbar-spacing);
        inset-inline-start: var(--lexxy-toolbar-spacing);
    }

    button {
        color: var(--lexxy-color-text);

        &:hover {
            opacity: 0.8;
        }
    }

    .lexxy-editor__toolbar-dropdown-list {
        border-start-start-radius: 0;
        flex-direction: column;
        gap: 0.1ch;
        padding: 0.1ch;

        button {
            align-items: center;
            display: flex;
            flex-direction: row;
            gap: 1ch;
            padding: 1ch;

            &[aria-pressed="true"] {
                background-color: var(--lexxy-color-selected);

                &:hover {
                    background-color: var(--lexxy-color-selected-hover);
                }
            }

            span {
                font-size: var(--lexxy-text-small);
            }

            svg {
                block-size: 1lh;
                inline-size: 1lh;
            }
        }

        .separator {
            background: var(--lexxy-color-ink-lighter);
            block-size: 1px;
            inline-size: 100%;
        }
    }


    /* --------------------------------------------------------------------------
    /* Overflow menu */

    &.lexxy-editor__toolbar-overflow {
        display: none;
        justify-self: flex-end;
        z-index: 1;

        summary ~ * {
            border-start-end-radius: 0;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            inset-inline-end: var(--lexxy-toolbar-gap);
        }
    }


    /* --------------------------------------------------------------------------
    /* Link dropdown */

    lexxy-link-dropdown {
        font-size: var(--lexxy-text-small);
        inset-inline-start: var(--lexxy-toolbar-spacing);
        inset-inline-end: var(--lexxy-toolbar-spacing);

        form {
            display: flex;
            flex: 1;
            gap: var(--lexxy-toolbar-spacing);

            [overflowing] & {
                display: block;

                .lexxy-editor__toolbar-dropdown-actions {
                    margin-block-start: var(--lexxy-toolbar-spacing);
                }
            }
        }

        .lexxy-editor__toolbar-dropdown-actions {
            display: flex;
            flex: 1;
            gap: var(--lexxy-toolbar-spacing);
        }

        input[type="url"] {
            background-color: var(--lexxy-color-canvas);
            border: 1px solid var(--lexxy-color-ink-lighter);
            border-radius: var(--lexxy-radius);
            color: var(--lexxy-color-text);
            block-size: var(--lexxy-toolbar-button-size);
            box-sizing: border-box;
            font-size: var(--lexxy-text-small);
            flex: 2;
            inline-size: 100%;
            line-height: normal;
            padding-block: 0;
            padding-inline: 1ch;
        }

        button {
            background-color: var(--lexxy-color-ink-lightest);
            inline-size: 100%;
            padding-inline: 2ch;
        }

        button[type="submit"] {
            background-color: var(--lexxy-color-accent-dark);
            color: var(--lexxy-color-ink-inverted);

            &:hover {
                background-color: var(--lexxy-color-accent-medium);
            }
        }
    }


    /* --------------------------------------------------------------------------
    /* Color dropdown */

    &:has(lexxy-highlight-dropdown) {
        position: relative;

        [overflowing] & {
            position: static;
        }
    }

    lexxy-highlight-dropdown {
        --max-inline-size: calc(var(--max-colors) * (var(--lexxy-toolbar-button-size) + var(--lexxy-toolbar-spacing)));
        border-start-start-radius: 0;
        display: flex;
        gap: var(--lexxy-toolbar-spacing);
        flex-direction: column;
        font-size: var(--lexxy-text-small);
        inset-inline-start: 0;
        max-inline-size: var(--max-inline-size);

        button {
            position: relative;
        }

        .lexxy-highlight-colors {
            display: grid;
            gap: var(--lexxy-toolbar-gap);
            grid-template-columns: repeat(auto-fill, minmax(var(--lexxy-toolbar-button-size), 1fr));
            max-inline-size: var(--max-inline-size);

            button {
                block-size: unset;
                inline-size: 100%;

                &:after {
                    align-self: center;
                    content: "Aa";
                    display: inline-block;
                    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                    position: absolute;
                    inset-block-start: 0;
                    inset-block-end: 0;
                    inset-inline-end: 0;
                    inset-inline-start: 0;
                }

                &[aria-pressed="true"] {
                    background-color: transparent;
                    box-shadow: 0 0 0 2px currentColor inset;

                    &:after {
                        content: "✓";
                    }
                }
            }
        }

        .lexxy-editor__toolbar-dropdown-reset {
            background-color: var(--lexxy-color-ink-lightest);

            &:is([disabled]) {
                display: none;
            }
        }
    }
}

/* --------------------------------------------------------------------------
/* Floating controls */
:where(.lexxy-floating-controls) {
    --button-size: 2.3lh;
    --floating-tools-radius: calc(var(--lexxy-radius) * 1.5);

    color: var(--lexxy-color-ink-inverted);
    font-size: var(--lexxy-text-small);
    line-height: 1;
    position: absolute;
    z-index: 2;

    button,
    summary {
        align-items: center;
        background: transparent;
        block-size: var(--button-size);
        color: var(--lexxy-color-ink-inverted);
        display: flex;
        justify-content: center;
        line-height: inherit;
        min-block-size: var(--button-size);
        min-inline-size: var(--button-size);
        user-select: none;
        -webkit-user-select: none;

        @media(any-hover: hover) {
            &:hover:not([aria-disabled="true"]),
            [open] &:is(summary) {
                background: var(--lexxy-color-ink-medium);

                svg {
                    opacity: 1;
                }
            }

            &:focus-visible {
                outline-color: var(--lexxy-focus-ring-color);
            }
        }
    }

    button {
        aspect-ratio: 1 / 1;
        font-weight: bold;

        svg {
            block-size: 1.125em;
            inline-size: 1.125em;
            fill: currentColor;
            opacity: 0.8;
            padding: 1px; /* Fixes weird Safari SVG clipping issue */
        }

        span {
            display: none;
        }
    }

    summary {
        box-shadow: 0 0 0 1px inset rgba(128, 128, 128, 0.3);
        padding: 0 1.25ch;
    }

    .lexxy-floating-controls__group {
        background-color: var(--lexxy-color-ink);
        border-radius: var(--floating-tools-radius);
        padding: 0.25ch;
    }


    /* --------------------------------------------------------------------------
    /* Table Tools */

    &:is(lexxy-table-tools) {
        flex-direction: row;
        gap: 0.25ch;
        inset-inline-start: var(--lexxy-editor-padding);
        transform: translate(-50%, -120%);

        .lexxy-table-control {
            align-items: stretch;
            display: flex;
            flex-direction: row;
            gap: 0.25ch;
            white-space: nowrap;

            .lexxy-table-control__more-menu {
                gap: 0;
                position: relative;

                .lexxy-table-control__more-menu-details {
                    background: var(--lexxy-color-ink);
                    border-radius: var(--floating-tools-radius);
                    display: flex;
                    flex-direction: column;
                    gap: 0.25ch;
                    inset-block-start: 110%;
                    inset-inline-start: 50%;
                    padding: 0.25ch;
                    position: absolute;
                    transform: translateX(-50%);

                    button {
                        aspect-ratio: unset;
                        flex-direction: row;
                        font-weight: normal;
                        gap: 1ch;
                        justify-content: flex-start;
                        padding: 0.75ch;
                        padding-inline-end: 1.5ch;
                        white-space: nowrap;

                        span {
                            display: inline-block;
                        }

                        svg {
                            block-size: 1.3lh;
                            inline-size: 1.3lh;
                            fill: currentColor;
                        }
                    }
                }
            }

            .lexxy-table-control__button--delete-table {
                align-items: center;
                block-size: auto;
                font-weight: normal;
                justify-content: center;

                svg {
                    block-size: 1.125em;
                    inline-size: 1.125em;
                    min-block-size: 1.125em;
                    min-inline-size: 1.125em;
                }

                span {
                    align-items: center;
                    background: var(--lexxy-color-ink);
                    border-radius: var(--floating-tools-radius);
                    color: color-mix(in srgb, var(--lexxy-color-ink-inverted) 80%, transparent);
                    display: flex;
                    inset-inline-end: calc(var(--button-size) + 1ch);
                    inset-block-start: 0;
                    inset-block-end: 0;
                    inset-inline-start: 0;
                    justify-content: center;
                    padding: 0.5ch 1ch;
                    position: absolute;
                    transition: all 0.2s ease-out;
                    opacity: 0;
                    pointer-events: none;
                    white-space: nowrap;
                }

                &:hover {
                    background-color: var(--lexxy-color-red);

                    svg { color: var(--lexxy-color-ink-inverted); }

                    span {
                        opacity: 1;
                    }
                }
            }
        }
    }


    /* --------------------------------------------------------------------------
    /* Attachment delete button */

    &:is(lexxy-node-delete-button) {
        inset-block-start: 0;
        inset-inline-start: 100%;
        opacity: 0;
        pointer-events: none;

        .node--selected & {
            opacity: 1;
            pointer-events: auto;
        }

        .lexxy-node-delete:hover {
            background-color: var(--lexxy-color-red);
        }
    }


    /* --------------------------------------------------------------------------
    /* Language picker */

    &:is(lexxy-code-language-picker) {
        inset-inline-end: var(--lexxy-editor-padding);

        select {
            -webkit-appearance: none;
            appearance: none;
            background-color: var(--lexxy-color-canvas);
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
            background-position: center right 1ch;
            background-repeat: no-repeat;
            background-size: 1ch;
            block-size: 1.5lh;
            border: 1px solid var(--lexxy-color-ink-lighter);
            border-radius: var(--lexxy-radius);
            color: var(--lexxy-color-ink);
            font-family: var(--lexxy-font-base);
            font-size: var(--lexxy-text-small);
            font-weight: normal;
            margin: 0.5ch 0.5ch 0 -0.5ch;
            padding: 0 2ch 0 1ch;
            text-align: start;

            @media (prefers-color-scheme: dark) {
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
            }
        }
    }
}


/* --------------------------------------------------------------------------
/* Prompt */

:where(.lexxy-prompt-menu) {
    --lexxy-prompt-avatar-size: 24px;
    --lexxy-prompt-padding: 0.5ch;

    --lexxy-prompt-offset-x: 0;
    --lexxy-prompt-offset-y: 0;

    background-color: var(--lexxy-color-canvas);
    border-radius: calc(var(--lexxy-prompt-padding) * 2);
    box-shadow: var(--lexxy-shadow);
    color: var(--lexxy-color-ink);
    font-family: var(--lexxy-font-base);
    font-size: var(--lexxy-text-small);
    list-style: none;
    inset-block-start: var(--lexxy-prompt-offset-y);
    inset-inline-start: var(--lexxy-prompt-offset-x);
    margin: 0;
    max-block-size: 200px;
    max-inline-size: min(20ch, calc(100% - var(--lexxy-prompt-offset-x)));
    min-inline-size: 20ch;
    overflow: auto;
    padding: var(--lexxy-prompt-padding);
    position: absolute;
    visibility: hidden;
    z-index: var(--lexxy-z-popup);

    &[data-clipped-at-right] {
        inset-inline-start: unset;
        inset-inline-end: 1ch;
    }

    &[data-clipped-at-bottom] {
        inset-block-start: unset;
        inset-block-end: var(--lexxy-prompt-offset-y);
    }
}

:where(.lexxy-prompt-menu--visible) {
    visibility: initial;
}

:where(.lexxy-prompt-menu__item) {
    align-items: center;
    border-radius: var(--lexxy-radius);
    cursor: pointer;
    display: flex;
    gap: var(--lexxy-prompt-padding);
    padding: var(--lexxy-prompt-padding);

    &:hover {
        background-color: var(--lexxy-color-ink-lightest);
    }

    &[aria-selected] {
        background-color: var(--lexxy-color-selected);
    }

    img {
        block-size: var(--lexxy-prompt-avatar-size);
        border-radius: 50%;
        flex-shrink: 0;
        inline-size: var(--lexxy-prompt-avatar-size);
        margin: 0;
    }

    + & {
        margin-top: 2px;
    }
}

:where(.lexxy-prompt-menu__item--empty) {
    color: var(--lexxy-color-ink-medium);
    padding: var(--lexxy-prompt-padding);
}


/* --------------------------------------------------------------------------
/* Custom attachments */
action-text-attachment[content-type^="application/vnd.actiontext"] {
    &.node--selected {
        --lexxy-attachment-bg-color: var(--lexxy-color-accent-dark);
        --lexxy-attachment-text-color: var(--lexxy-color-ink-inverted);

        outline: none;
    }

    lexxy-node-delete-button {
        inset-inline-start: 0;
        line-height: 1lh;

        .lexxy-floating-controls__group {
            --button-size: 1lh;

            background-color: var(--lexxy-color-accent-dark);
            padding: 0;

            button {
                border-radius: 50%;
            }
        }
    }
}