@use "sass:map";
@use "sass:math";
@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;
@use "../toolbar/_variables.scss" as *;
@use "../button/_variables.scss" as *;
@use "../input/_variables.scss" as *;
@use "../window/_variables.scss" as *;
@use "../core/spacing/_index.scss" as *;

@mixin kendo-editor--layout() {

    // Base
    .k-editor {
        border-width: var( --kendo-editor-border-width, #{$kendo-editor-border-width} );
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: var( --kendo-editor-font-family, #{$kendo-editor-font-family} );
        font-size: var( --kendo-editor-font-size, #{$kendo-editor-font-size} );
        line-height: var( --kendo-editor-line-height, #{$kendo-editor-line-height} );
        display: flex;
        flex-flow: column nowrap;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        &.k-readonly {
            .k-editor-content {
                pointer-events: auto;
            }

            .k-editor-content.k-focus {
                outline-width: 1px;
                outline-style: dashed;
            }
        }
    }


    // Inline editor
    .k-editor-inline {
        @include border-radius( k-border-radius(md) );
        padding-block: k-spacing(0.5);
        padding-inline: k-spacing(1);
        border: 1px solid transparent;
        word-wrap: break-word;
        overflow: auto;
        background: none;
    }

    // Resizable editor
    .k-editor-resizable {
        resize: both;
        overflow: auto;
    }

    // Resizable images
    .k-editor-resize-handles-wrapper {
        position: absolute;
        visibility: hidden;
    }

    // Resizable tables
    .k-editor-resize-wrap-element {
        display: inline-block;
        position: relative;
    }

    .k-editor-resize-handle {
        width: var( --kendo-editor-resize-handle-size, #{$kendo-editor-resize-handle-size} );
        height: var( --kendo-editor-resize-handle-size, #{$kendo-editor-resize-handle-size} );
        border-width: var( --kendo-editor-resize-handle-border-width, #{$kendo-editor-resize-handle-border-width} );
        border-style: solid;
        box-sizing: border-box;
        position: absolute;
        visibility: visible;
        z-index: 100;

        &.northwest {
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            cursor: nw-resize;
        }

        &.north {
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: n-resize;
        }

        &.northeast {
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
            cursor: ne-resize;
        }

        &.southwest {
            left: 0;
            bottom: 0;
            transform: translate(-50%, 50%);
            cursor: sw-resize;
        }

        &.south {
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 50%);
            cursor: s-resize;
        }

        &.southeast {
            right: 0;
            bottom: 0;
            transform: translate(50%, 50%);
            cursor: se-resize;
        }

        &.west {
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%);
            cursor: w-resize;
        }

        &.east {
            top: 50%;
            right: 0;
            transform: translate(50%, -50%);
            cursor: e-resize;
        }
    }

    .ProseMirror-selectednode { // stylelint-disable-line
        outline-width: var( --kendo-editor-selectednode-outline-width, #{$kendo-editor-selectednode-outline-width} );
        outline-style: solid;
    }

    // stylelint-disable selector-no-vendor-prefix ,selector-class-pattern
    .ProseMirror-hideselection {
        caret-color: transparent;

        *::selection,
        *::-moz-selection {
            background: transparent;
        }
    }
    // stylelint-enable selector-no-vendor-prefix ,selector-class-pattern


    // Тoolbar
    .k-editor-toolbar {
        border-width: 0 0 $kendo-toolbar-border-width;
        flex-shrink: 0;

        .k-editor-export {
            .k-icon {
                margin-inline-end: var( --kendo-editor-export-tool-icon-margin-x, #{$kendo-editor-export-tool-icon-margin-x} );
            }

            .k-icon,
            .k-export-tool-text {
                vertical-align: middle;
            }
        }
    }


    // Editor content
    .k-editor-content {
        flex: 1 1 auto;
        overflow-y: auto;

        > .k-iframe {
            width: 100%;
            height: 100%;
            border-width: 0;
            display: block;
        }

        > .ProseMirror { // stylelint-disable-line
            padding: k-spacing(2);
            width: 100%;
            height: 100%;
            position: relative;
            box-sizing: border-box;
            outline: none;
            white-space: pre-wrap;
            overflow: auto;

            table {
                white-space: pre-wrap;
            }

            .k-placeholder::before {
                content: attr(data-placeholder);
                height: 0;
                color: var( --kendo-editor-placeholder-text, #{$kendo-editor-placeholder-text} );
                float: left;
                opacity: var( --kendo-editor-placeholder-opacity, #{$kendo-editor-placeholder-opacity} );
                cursor: text;
                user-select: none;
            }
        }

        // Table styles
        p {
            margin: 0 0 1rem;
        }

        td p,
        th p,
        li p {
            margin: 0;
        }

        table {
            margin: 0;
            border-collapse: collapse;
            table-layout: fixed;
            width: 100%;
            overflow: hidden;
        }

        td,
        th {
            min-width: 1em;
            border: 1px solid;
            padding-block: 3px;
            padding-inline: 5px;
            vertical-align: top;
            box-sizing: border-box;
            position: relative;
        }

        th {
            font-weight: bold;
            text-align: start;
        }
        td {
            text-align: start;
        }

        // Give selected cells a blue overlay
        .selectedCell::after { // stylelint-disable-line
            z-index: 2;
            position: absolute;
            content: "";
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            pointer-events: none;
        }
    }

    .k-edit-form-content {
        flex: 1 1 auto;
        overflow: auto;
        margin-block: (-$kendo-window-inner-padding-y);
        margin-inline: (-$kendo-window-inner-padding-x);
        padding-block: $kendo-window-inner-padding-y;
        padding-inline: $kendo-window-inner-padding-x;
    }

    // Insert table
    .k-ct-popup {
        box-sizing: border-box;
        width: ( $ct-cell-size * 10 - math.div($ct-cell-size, 2) );
        padding: math.div( $ct-cell-size, 4 );

        .k-button {
            width: 100%;
        }

        .k-ct-cell {
            margin: 1px;
            width: $ct-cell-size;
            height: $ct-cell-size;
            box-sizing: border-box;
            border: 1px solid;
            border-color: inherit;
            display: inline-block;
            vertical-align: top;
            overflow: hidden;
            opacity: .7;
            pointer-events: all;
        }
    }

    .k-editor .k-resize-handle {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 13px 13px;
        border-color: transparent;
        border-bottom-color: inherit;
        cursor: se-resize;

        .k-i-arrow-45-down-right,
        .k-i-caret-br {
            display: none;
        }
    }


    // Find and replace dialog
    .k-editor-find-replace {
        .k-content {
            position: relative;
        }

        .k-actions {
            padding: 0;
        }

        .k-search-options {
            display: flex;
            flex-direction: column;
            padding: 10px 0 40px;
        }

        .k-matches-container {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    }

    // Text area in editor dialog
    .k-textarea.k-editor-textarea {
        width: 100%;
        height: 100%;
        resize: none;
    }

    .k-filebrowser {
        max-width: 100%;

        // Breadcrumbs and search
        .k-floatwrap {
            display: flex;

            &::after { display: none; }
        }
        .k-breadcrumbs {
            flex: 1;
        }
        .k-search-wrap {
            margin-inline-start: k-spacing(4);
            width: 150px;
            display: flex;
            align-items: center;

            .k-input {
                flex: 1;
                width: 100px; // fix width for Edge
            }
            .k-icon {
                margin: 0;
                position: static;
            }
        }

        // Filebrowser toolbar
        .k-filebrowser-toolbar {
            margin-block-start: k-spacing(4);
        }

        .k-upload {
            padding: 0;
            border-width: 0;
            background: none;

            .k-upload-button {
                margin: 0;
            }

            .k-upload-status {
                display: none;
            }
        }

        .k-upload-files {
            display: none;
        }

        // Tiles
        .k-tiles {
            display: flex;
            flex-flow: row wrap;
            height: 390px;
            max-height: 50vh;
            margin-block-end: k-spacing(4);
            padding-block: k-spacing(1);
            padding-inline: k-spacing(2);
            border-top-width: 0;
            overflow: auto;
        }

        .k-tile {
            width: 33%;
            height: 90px;
            padding-block: k-spacing(1);
            padding-inline: k-spacing(2);
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden;
            cursor: pointer;
            @include border-radius( k-border-radius(md) );

            .k-i-file,
            .k-i-folder {
                font-size: 4em;
            }

            input {
                width: 100px;
            }

            strong {
                display: block;
                font-weight: 400;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .k-tile-empty {
            display: block;
            margin: auto;

            &.k-selected {
                color: inherit;
                border-width: 0;
                background-image: none;
                background-color: transparent;
            }

            strong {
                opacity: .5;
                font-size: 3em;
                font-weight: 400;
            }
        }

        .k-thumb {
            float: left;
            margin-inline-end: k-spacing(1);
        }

        .k-breadcrumbs-wrap {
            position: absolute;
            inset-inline-start: $kendo-input-md-padding-x;
            inset-block-start: $kendo-input-md-padding-y;

            .k-icon {
                position: static;
                margin-block-start: 0;
            }
        }
    }

    .k-editor-table-wizard-window {

        // Tabstrip wrapper
        .k-tabstrip-wrapper {
            display: flex;
            flex: 1 1 auto;
            overflow: auto;

            .k-tabstrip.k-root-tabs {
                flex: 1 1 auto;
                margin-block-end: 0;
            }
        }

        .k-edit-field > .k-checkbox {
            position: relative; // fix scrolling
        }
    }

    .k-editor-inline {

        .k-table {
            width: 100%;
            border-spacing: 0;
            margin: 0 0 1em;

            &,
            & td {
                outline: 0;
                border-width: 1px;
                border-style: dotted;
            }

            td {
                min-width: 1px;
                padding-block: k-spacing(0.5);
                padding-inline: k-spacing(1);
            }
        }

        .k-element-resize-handle-wrapper {
            position: absolute;
            width: 5px;
            height: 5px;
            border-width: 1px;
            border-style: solid;
            z-index: 100;

            .k-element-resize-handle {
                width: 100%;
                height: 100%;

                &.k-resize-east {
                    cursor: e-resize;
                }

                &.k-resize-north {
                    cursor: n-resize;
                }

                &.k-resize-northeast {
                    cursor: ne-resize;
                }

                &.k-resize-northwest {
                    cursor: nw-resize;
                }

                &.k-resize-south {
                    cursor: s-resize;
                }

                &.k-resize-southeast {
                    cursor: se-resize;
                }

                &.k-resize-southwest {
                    cursor: sw-resize;
                }

                &.k-resize-west {
                    cursor: w-resize;
                }
            }
        }

        .k-column-resize-handle-wrapper {
            position: absolute;
            height: 10px;
            width: 10px;
            cursor: col-resize;
            z-index: 2;

            .k-column-resize-handle {
                width: 100%;
                height: 100%;

                .k-column-resize-marker {
                    width: 2px;
                    height: 100%;
                    margin-block: 0;
                    margin-inline: auto;
                    display: none;
                    opacity: .8;
                }
            }
        }

        .k-row-resize-handle-wrapper {
            position: absolute;
            z-index: 2;
            cursor: row-resize;
            width: 10px;
            height: 10px;

            .k-row-resize-handle {
                display: table;
                width: 100%;
                height: 100%;
            }

            .k-row-resize-marker-wrapper {
                display: table-cell;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                vertical-align: middle;
            }

            .k-row-resize-marker {
                display: none;
                margin: 0;
                padding: 0;
                width: 100%;
                height: 2px;
                opacity: .8;
            }
        }
    }

}