@layer components {
    .ui-document {
        --document-indent: var(--spaceing-lg);

        .ui-divider {
            padding-left: var(--document-indent);
        }

        .ui-document-header {
            padding-left: var(--document-indent);
        }
    }

    @media (min-width: 600px) {
        .ui-document {
            --document-indent: var(--spaceing-xl);
        }
    }

    .ui-document-title {
        padding:var(--spaceing-md) 3px var(--spaceing-md) var(--document-indent);
        > input[type="text"] {
            margin-left: -7px;
            padding-left: 7px;
            &:focus {
                outline: none;
            }
        }
    }

    .ui-document-header {
        min-height: 68px;
        border-bottom: 1px solid var(--border-color-light);
        display: flex;
        align-items: center;
        padding: 5px 15px;
        gap:7px;
        position: relative;
        .title {
            font-weight: bold;
            letter-spacing: 1px;
        }
        .corner-label {
            position: absolute;
            bottom:0;
            left: 0;
            padding: 2px 6px;
            background-color: var(--signal);
            font-size: 9px;
            border-bottom-right-radius: 5px;
            color: var(--solid-text-color);
            letter-spacing: 1px;

        }
    }

    .ui-document-header:has(+ .ui-divider) {
        border-bottom: none;
    }

    .ui-document-breadcrumbs {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 10px;
        padding: 0 7px;
        min-height: 28px;
        color: var(--ui-500);
        a:link, a:visited {
            text-decoration: underline;
            text-underline-offset: 2px;
            text-decoration-color: var(--ui-100);
        }
        i {
            color: var(--ui-300);
        }

    }

    .ui-document-rich-content {
        padding: 10px var(--document-indent);
        min-height: 100px;
        line-height: var(--line-height-xl);
        font-size: var(--font-size-md);
        --lexxy-color-ink:var(--text-color);
    }

    .ui-document-rich-content-editor {
        min-height: 100px;
        line-height: var(--line-height-xl);
        font-size: var(--font-size-md);

        --lexxy-color-ink:var(--text-color);
        --lexxy-color-canvas:transparent;

        --lexxy-color-ink-lighter: var(--border-color-light);

        lexxy-toolbar {
            background-color:var(--ui-50);
            padding-left: calc(var(--document-indent) - 13px);
        }
        .lexxy-editor__content {
            padding: 5px 10px 5px var(--document-indent) ;
        }

        &.simple {
            :where(lexxy-editor) {
                --lexxy-editor-rows: 0 !important;
            }

            :where(lexxy-toolbar) {
                display: none !important;
            }
        }
    }

    .ui-box .ui-document-rich-content-editor {
        lexxy-editor {
            border: none !important;
            --lexxy-radius: 0;
        }
    }
}