:root
{
    --editor-surface: var(--rz-panel-background-color, #191922);
    --editor-surface-2: var(--rz-base-background-color, #12121a);
    --editor-elevated: color-mix(in srgb, var(--editor-surface) 82%, #ffffff 6%);
    --editor-border: var(--rz-border-color, rgba(255, 255, 255, .09));
    --editor-text: var(--rz-text-color, #eef1f6);
    --editor-muted: var(--rz-text-secondary-color, rgba(255, 255, 255, .55));
    --editor-primary: var(--rz-primary, #4b6cff);
    --editor-radius: 12px;
}

:root
{
    --editor-panel: linear-gradient(180deg, color-mix(in srgb, var(--editor-surface) 100%, #ffffff 5%) 0%, var(--editor-surface) 100%);
}

html, body, #app
{
    background: var(--editor-surface-2);
    color: var(--editor-text);
}

.rz-button
{
    border-radius: 0;
}

.rz-button:before,
.rz-navigation-item-link:before,
.rz-menu-toggle:before,
.rz-sidebar-toggle:before,
.rz-html-editor-button:before,
.rz-toc-link:before,
.rz-ripple:before
{
    display: none !important;
}

.editor-toolbar-divider
{
    background: var(--editor-border);
    height: 1.4rem;
    width: 1px;
}

.doc-editable
{
    cursor: pointer;
    outline: 1px dashed transparent;
    outline-offset: -1px;
    transition: outline-color .1s ease;
}

.doc-editable:hover
{
    outline-color: color-mix(in srgb, var(--editor-primary) 55%, transparent);
}

.doc-editable.doc-selected
{
    outline: 2px solid var(--editor-primary);
    outline-offset: -2px;
}