.root {
    position: relative;
    margin: 1em;
    padding: .5em;
    gap: 1em;
    display: grid;

    grid: 100% / repeat(2, minmax(0, 1fr));

    inline-size: calc(100% - 2em);
    block-size: calc(100% - 2em);

    place-content: start;
    background-color: var(--surface-500);
    border-radius: var(--radii-xl);

    & > :is(textarea, .textarea) {
        overflow: auto;
        padding: .5em;
        background-color: transparent;
    }

    & ::highlight(debug) {
        text-decoration: double underline;
        text-decoration-color: cornflowerblue;
    }

    & ::highlight(search-results) {
        background-color: var(--secondary-900);
    }

    & ::highlight(spelling-error) {
        text-decoration-line: spelling-error;
    }

    & ::highlight(grammar-error) {
        text-decoration-line: grammar-error;
    }

    .editor {
        display: block grid;
        grid: auto 1fr / 100%;

        .toolbar {
            display: block grid;
            grid-auto-flow: column;
            place-content: start;
        }

        .search {
            position: absolute;
            inset-inline-end: 0;
            inset-block-start: 0;

            grid-template-columns: 1fr 1fr;

            padding: .5em;
            gap: .5em;

            background-color: var(--surface-700);
            border-radius: var(--radii-m);
            box-shadow: var(--shadow-2);

            &:popover-open {
                display: block grid;
            }

            & > label {
                display: contents;
            }
        }
    }
}