:root {
    --color-theme: #e6dece;
    --color-book: rgb(241, 229, 201);
    --color-paper: rgb(241, 229, 201);
    --color-border: #434343;

    --color-primary: #434343;
    --color-foreground: #434343;
    --color-background: #fcfaf200;

    --color-text-primary: var(--color-primary);
    --color-text-lighting: #ab3b3a;
    --color-text-shadow: #828282;

    --font-size-xx-small: 0.5rem;
    --font-size-x-small: 0.75rem;
    --font-size-small: 1rem;
    --font-size-medium: 1.25rem;
    --font-size-large: 1.5rem;
    --font-size-x-large: 2rem;
    --font-size-xx-large: 2.5rem;
}


.editor,
.cyue-editor {
    grid-area: editor;
    background-color: rgba(176, 176, 40, 0.03);
    font-size: var(--font-size-medium);
    
    display: flex;
    flex-direction: column;
}


.editor *,
.cyue-editor * {
    border-collapse: collapse;
}


.editor-toolbar,
.cyue-editor-toolbar {
    grid-area: editor-toolbar;
    background-color: rgba(176, 176, 40, 0.01);
    border: 2px solid var(--color-primary);
    border-bottom: none;

    box-sizing: border-box;
    padding: 0.25rem;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.editor-toolbar .container-icon,
.cyue-editor-toolbar .container-icon {
    cursor: pointer;
    max-width: 1.5rem;
    min-width: 1rem;
}
.editor-toolbar .icon,
.cyue-editor-toolbar .icon {
    width: 100%;
    height: 100%;
}


.editor-content,
.cyue-editor-content {
    grid-area: editor-content;
    flex: 1;

    background-color: rgba(176, 176, 40, 0.03);
    font-size: inherit;
    border: 2px solid var(--color-primary);

    box-sizing: border-box;
    margin: auto;
    padding: 0.25rem;
    width: 100%;
    height: 100%;
    max-height: 38rem;

    overflow: auto;
    text-align: left;
}
.editor-content *,
.cyue-editor-content * {
    font-size: inherit;
}


@media (min-width: 45rem) {
    .editor,
    .cyue-editor,
    .editor *,
    .cyue-editor * {
        font-size: var(--font-size-large);
    }
}


.editor-content p,
.cyue-editor-content p {
    color: var(--color-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-break: anywhere;
    text-indent: 2em;
    padding: 0.25rem;
}

.editor-content p div,
.cyue-editor-content p div {
    text-indent: 0em;
}

.editor-content p b,
.cyue-editor-content p b,
.editor-content p strong,
.cyue-editor-content p strong {
    color: black;
    border: 1px solid black;
}

.editor-content p i,
.cyue-editor-content p i,
.editor-content p em,
.cyue-editor-content p em {
    border: 1px solid gray;
}


.editor-content p sup,
.cyue-editor-content p sup,
.editor-content p sub,
.cyue-editor-content p sub {
    font:
        1rem 'Fira Sans',
        sans-serif;
}


.editor-content figure,
.cyue-editor-content figure {
    box-sizing: border-box;
    padding: 0.5rem;
    width: 100%;
    border-collapse: collapse;
}
.editor-content figure::before,
.cyue-editor-content figure::before {
    display: inline-block;
    position: relative;
    width: 10%;
    min-width: 1.5rem;
    max-width: 3.5rem;
    left: 100%;
    transform: translate(-100%);

    cursor: pointer;
    content: "×";
    color: red;
    text-align: center;
    border: 2px solid var(--color-primary);
    border-bottom: 0px;
}


.editor-content figure *,
.cyue-editor-content figure * {
    border-collapse: collapse;
}


.editor-content img,
.cyue-editor-content img {
    user-select: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-break: anywhere;
    width: 100%;
    border: 2px solid var(--color-primary);
}

.editor-content figure figcaption,
.cyue-editor-content figure figcaption {
    text-align: center;
    font-size: medium;
    
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-break: anywhere;
}
.editor-content figure figcaption::before,
.cyue-editor-content figure figcaption::before {
    content: attr(placeholder);
    color: gray;
}
.editor-content figure figcaption *,
.cyue-editor-content figure figcaption * {
    font-size: inherit;
}


/* 副标题 */
.editor-content h2,
.cyue-editor-content h2 {
    box-sizing: border-box;
    padding: 0.25rem;
}


/* 列表 */
.editor-content ol,
.cyue-editor-content ol,
.editor-content ul,
.cyue-editor-content ul {
    text-align: left;
    width: 100%;
}

/* 有序列表 */
.editor-content ol,
.cyue-editor-content ol {
    padding-left: 2em;
    list-style-type: decimal;
}

/* 无序列表 */
.editor-content ul,
.cyue-editor-content ul {
    padding-left: 1.2em;
    list-style: disc;
}