@use 'ngx-tethys/styles/variables.scss';
@use './variables.scss' as theVariables;
@use './mixins.scss' as mixins;

.the-editor {
    position: relative;
    display: block;
    max-width: 100%;
    border: 1px solid variables.$gray-200;
    border-radius: 3px;

    &.the-editor-readonly {
        border: none;

        .the-editable-container {
            margin: 0;
            padding: 0;

            &.max-height {
                overflow-x: hidden;
                overflow-y: auto;
            }

            .the-editor-typo {
                min-height: initial;
                padding: 0;

                .slate-block-card {
                    overflow: hidden;
                }
            }
        }

        .slate-element-hr {
            &:hover {
                background: none;
                cursor: inherit;
            }
        }
        .the-check-item {
            input[type='checkbox'] {
                cursor: auto;
            }
            input[type='checkbox']:not(:checked):hover {
                border-color: variables.$gray-300;
            }
        }
        .the-todo-item-selectable {
            input[type='checkbox']:hover {
                cursor: pointer;
            }
        }
    }

    &.the-mobile-editor {
        .the-editable-container {
            padding-top: 0;
            margin-top: 0;
        }
    }

    .the-editor-disabled {
        .the-check-item {
            input[type='checkbox'] {
                cursor: auto;
            }
            input[type='checkbox']:not(:checked):hover {
                border-color: variables.$gray-300;
            }
        }
    }

    .the-editable-container {
        position: relative;
        margin-top: -41px;
        padding-top: 41px;

        &.max-height {
            overflow-y: scroll;
        }

        @include mixins.the-toolbar-divider-spacing();

        .slate-block-hidden {
            display: none;
        }
    }
}
.the-editor-typo {
    // list style
    ul,
    ol,
    li {
        list-style: inherit;
    }

    ol {
        list-style-type: decimal;

        ol {
            list-style-type: lower-alpha;

            ol {
                list-style-type: lower-roman;
            }
        }
    }

    ul {
        list-style-type: disc;

        ul {
            list-style-type: circle;

            ul {
                list-style-type: square;
            }
        }
    }

    [the-underlined][the-strike] {
        text-decoration: underline line-through;
    }

    [the-strike] {
        text-decoration: line-through;
    }

    [the-underlined] {
        text-decoration: underline;
    }

    [the-italic] {
        font-style: italic;
    }

    [the-bold] {
        font-weight: bold;
    }

    [the-code-line] {
        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;
    }

    .leaf-with-placeholder {
        &[data-slate-leaf='true'] {
            display: flow-root;
        }
    }
    [data-slate-placeholder] {
        overflow: hidden;
        color: initial;
        font-weight: initial;
        font-style: initial;
        text-decoration: initial;
        text-overflow: ellipsis;
        background-color: initial;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .the-break-char {
        font-size: 0;
        line-height: 0;
    }

    // list: fontSize, li marginLeft, multiDigit li marginLeft
    @each $size, $liMl,
        $liMultiDigitMl in (12, 13, 14, 15, 16, 18, 20, (24 null 35px), (28 null 42px), (32 33px 50px), (40 40px 62px), (48 50px 78px))
    {
        [the-font-size='#{$size}'] {
            font-size: #{$size}px;
            line-height: theVariables.$font-size-line-height;
        }
        .slate-element-list-item {
            &.font-size-#{$size} {
                &::marker {
                    font-size: #{$size}px;
                }
            }
        }
        .slate-element-numbered-list {
            .slate-element-list-item {
                &.font-size-#{$size} {
                    margin-left: $liMl;

                    &[data-multi-digit] {
                        margin-left: $liMultiDigitMl;
                    }
                }
            }
        }
        .slate-element-bulleted-list {
            .slate-element-list-item {
                &.font-size-#{$size} {
                    @if $size == 40 {
                        margin-left: 2.2em;
                    }
                    @if $size == 48 {
                        margin-left: 2.5em;
                    }
                }
            }
        }
    }

    // indent
    @for $i from 1 through 17 {
        [the-indent='#{$i}'] {
            padding-left: $i * 2em;
        }
        // list
        ol[the-level='#{$i}'],
        ul[the-level='#{$i}'] {
            padding-left: $i * 2em;
        }
        .the-check-item[the-level='#{$i}'] {
            padding-left: calc(#{$i * 2em} + 2em);
        }
    }
}

.the-plugin-toolbar-popover .thy-popover-container {
    padding: 4px;
    @include mixins.common-toolbar-icon-color();
}

.the-table-contextmenu-panel,
.the-plugin-toolbar-popover,
.the-toolbar-container {
    // 屏蔽颜色选择面板给宿主元素附加的 :focus 样式
    .thy-color-picker:not(.disabled):focus {
        border: none !important;
    }
    .thy-default-picker-active {
        background-color: rgba(variables.$primary, 0.1);
        border-radius: 0.25rem;
        .thy-icon {
            color: variables.$primary;
        }
    }
}