.root {
    --ce-bg: var(--mantine-color-white);
    --ce-border-color: var(--mantine-color-default-border);

    border: 1px solid var(--ce-border-color);
    border-radius: var(--mantine-radius-lg);
    z-index: 1;
    background-color: var(--ce-bg);
    display: flex;
    flex-direction: column;
    flex: 1;

    @mixin light {
        --ce-bg: var(--mantine-color-white);
    }

    @mixin dark {
        --ce-bg: var(--mantine-color-black);
    }
}

.actions {
    border-bottom: 1px solid var(--ce-border-color);
}

.editor {
    flex: 1;
}

/*
 * The find widget's buttons (close, "Find in Selection", etc.) show a pointer-style hover tooltip.
 * A monaco bug (microsoft/monaco-editor#5208, #5139) makes that tooltip reposition on layout, which
 * fires a mouseout on the button, disposes the tooltip, then re-triggers it, in a rapid add/remove
 * loop (confirmed via DOM MutationObserver: ~12 add/remove cycles while hovering the X button). The
 * flicker swallows the click, so the button becomes unclickable. Reproduced on monaco 0.55.1 and
 * 0.56.0, with both the CDN and local loaders, so it is not fixed by upgrading monaco.
 *
 * Hiding only the pointer-style hover container stops the loop while leaving normal editor content
 * hovers (code symbols, markers) working. The container is appended to `document.body`, outside the
 * component subtree, so this rule must be global; the buttons keep their aria-label/title, so
 * functionality and accessibility are preserved.
 */
:global {
    .workbench-hover-container:has(.workbench-hover-pointer) {
        display: none !important;
    }
}

.error {
    --ce-border-color: var(--mantine-color-error);
}

.disabled {
    @mixin light {
        --ce-bg: var(--mantine-color-gray-1);
        --ce-border-color: var(--mantine-color-default-border);

        :global {
            .monaco-editor {
                --vscode-editor-background: var(--ce-bg);
                --vscode-editorGutter-background: var(--ce-bg);
            }
        }
    }
}