@use 'sass:math';
@use 'ngx-tethys/styles/variables.scss';
@use './variables.scss' as theVariables;

.the-editor-typo {
    display: flow-root;
    min-height: 250px;
    padding: 28px 30px;
    font-size: theVariables.$the-font-size-base;
    word-break: break-word;

    h1,
    h2,
    h3,
    h4 {
        margin: 0;
        padding: 0;
        font-weight: bold;
    }
    h1 {
        font-size: theVariables.$headline-one-size;
        line-height: theVariables.$headline-one-lineHeight;
    }
    h2 {
        font-size: theVariables.$headline-two-size;
        line-height: theVariables.$headline-two-lineHeight;
    }
    h3 {
        font-size: theVariables.$headline-three-size;
        line-height: theVariables.$headline-three-lineHeight;
    }
    h4 {
        font-size: theVariables.$headline-four-size;
        line-height: theVariables.$headline-four-lineHeight;
    }
    h5 {
        font-size: theVariables.$headline-five-size;
        line-height: theVariables.$headline-five-lineHeight;
    }
    h6 {
        font-size: theVariables.$the-font-size-base;
        line-height: theVariables.$headline-six-lineHeight;
    }
    // margin
    ul,
    ol,
    dl {
        margin: 0;
        padding: 0;
        .slate-element-list-item {
            margin-bottom: math.div(theVariables.$block-mb, 2);
            margin-left: 2em;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    blockquote {
        margin-right: 0;
        margin-left: 0;
        padding-left: 10px !important;
        color: variables.$gray-600;
        border-left: 4px solid variables.$gray-200;
    }
    .slate-element-hr {
        padding: 18px 0;
        border: 1px solid transparent;
        border-radius: 2px 2px;
        user-select: text;
        hr {
            box-sizing: border-box;
            width: 100%;
            margin: 0;
            padding: 0;
            border-top: 1px solid variables.$gray-200;
        }
        &.slate-focus-element,
        &:hover {
            background-color: #f4f4f4;
            cursor: text;
        }
    }
    &.pointer-paint {
        cursor:
            url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAUCAYAAACTQC2+AAAABGdBTUEAALGPC/xhBQAAATtJREFUSA3dlTFLA0EQhU+jlSkEG63EYGdlZZFG7QUbSyG/QP/C/Q0rqzQWQX+BwUKwtrexEFRQtFSI35NZWDa3soOHhQ8eM/v2zWw2N9xVVVUdwXUYoFxaq5il2wa8hvtG5dJaxYx16xFvLN8i3lmehiFC6Y94wbsTGsxZosajKA/7aewjrKZiyTocJO9DSYHT82r+YXyQs0eRfYBrD/Y1DB58OMyfeM/hrWq8N9qlZkmFBXiPPd6D7ikWUxwjrKWirTeJkzDeNYttKIxhDUuxiFGjfAnfMkUX3hs19emYqFt9P48mU6zVLEQPFjCfwgk8gyuwEd6pS5t0EQYmHhCXLZ8Kvz1oqmFO+H8HxVOXfZC5vwNd46y3xbx5ni1mQ4+dJ6NyDw4xX0GN9484YfcRhg+fcmmt408+5V99wSyVTWN94gAAAABJRU5ErkJggg==)
                5 10,
            text;
    }
    code {
        margin: 0 4px;
        padding: 2px 3px;
        color: variables.$gray-700;
        font-size: inherit;
        font-family: monospace;
        line-height: inherit;
        text-indent: 0;
        word-wrap: break-word;
        background-color: rgba(243, 243, 243, 0.8);
        border: 1px solid variables.$gray-300;
        border-radius: 2px;
    }
    .slate-element-hr {
        display: block;
    }
    .slate-element-block-quote {
        padding: math.div(theVariables.$default-text-space, 2) 0;
    }
    .slate-block-card {
        &:not(.slate-block-card-table) {
            padding: math.div(theVariables.$default-text-space, 2) 0;
        }

        .card-left,
        .card-right {
            bottom: math.div(theVariables.$default-text-space, 2);
            line-height: 16px; // cursor default height
        }
        &.slate-block-card-table {
            .card-left,
            .card-right {
                bottom: 0px;
            }
        }
        &.slate-block-card-hr {
            .card-left,
            .card-right {
                bottom: 16px; // ((39+8) - 15)/2
            }
        }
    }
    .slate-element-table-content,
    .slate-element-paragraph {
        line-height: theVariables.$block-line-heith;
    }
    & .slate-block:not(:last-child),
    & .slate-block-card:not(:last-child) {
        margin-bottom: theVariables.$block-mb;
    }
    .CodeMirror-focused .CodeMirror-selected {
        background: theVariables.$selection-background;
    }
    // 处理 block-card 图文混排
    .slate-block,
    .slate-block-card {
        clear: both;

        &.slate-element-paragraph,
        &[class^='slate-element-heading'] {
            clear: none;
        }
        &.slate-element-numbered-list,
        &.slate-element-bulleted-list,
        &.slate-element-block-quote {
            display: flow-root;
            clear: none;
        }
    }

    .slate-block-card {
        &[layout^='wrap-'] {
            clear: inherit;
            max-width: 100%;
        }
        &[layout='wrap-left'] {
            z-index: 1;
            float: left;

            .image-content {
                margin: 0 12px 0 auto;
            }
        }
        &[layout='wrap-right'] {
            z-index: 1;
            float: right;

            .image-content {
                margin: 0 auto 0 12px;
            }
        }
    }

    // 处理相邻图文混排时的布局
    [layout^='wrap-'] + [layout^='wrap-'] + .slate-block {
        clear: both !important;
    }
}