@use "../../typography/index.scss" as *;
@use "../../z-index/index.scss" as *;
@use "../../motion/index.scss" as *;
@use "./variables.scss" as *;

@mixin kendo-dock-manager--layout-base() {

    // DockManager
    .k-dock-manager {
        width: 100%;
        height: 100%;
        border-width: $kendo-dock-manager-border-width;
        border-style: $kendo-dock-manager-border-style;
        border-radius: $kendo-dock-manager-border-radius;
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        overflow: auto;
        box-sizing: border-box;
    }

    // Toolbar
    .k-dock-manager-toolbar {
        border-width: 0 $kendo-dock-manager-border-width 0 0;
        border-color: inherit;
        flex-shrink: 0;
        writing-mode: vertical-lr;
        box-shadow: none;

        &::before {
            height: 0;
        }

        .k-separator-horizontal {
            width:  $kendo-line-height-em;
            height: 0;
            border-width: $kendo-dock-manager-border-width 0 0;
        }
    }

    // Panes
    .k-dock-manager-pane-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-grow: 1;
        overflow: hidden;
    }

    // Splitter
    .k-dock-manager-splitter,
    .k-dock-manager-unpinned-container {
        height: 100%;
        border-width: 0;
        align-items: stretch;

        > .k-pane {
            height: auto;
            flex-direction: column;
            border-color: inherit;
        }

        .k-pane-header {
            display: flex;
            align-items: center;
            justify-content: center;
            padding-block: $kendo-dock-manager-pane-header-padding-y;
            padding-inline: $kendo-dock-manager-pane-header-padding-x;
            border-block-end-width: $kendo-dock-manager-pane-header-border-width;
            border-block-end-style: $kendo-dock-manager-pane-header-border-style;
            border-color: inherit;
        }

        .k-pane-title {
            padding-block: $kendo-dock-manager-pane-title-padding-y;
            padding-inline: $kendo-dock-manager-pane-title-padding-x;
            font-family: $kendo-dock-manager-pane-title-font-family;
            font-size: $kendo-dock-manager-pane-title-font-size;
            line-height: $kendo-dock-manager-pane-title-line-height;
            font-weight: $kendo-dock-manager-pane-title-font-weight;
            flex: 1 1 auto;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .k-pane-scrollable {
            height: 100%;
            display: flex;
            flex-direction: column;
            border-color: inherit;
        }

        .k-pane-content {
            height: 100%;
            padding-block: $kendo-dock-manager-pane-content-padding-y;
            padding-inline: $kendo-dock-manager-pane-content-padding-x;
            overflow: auto;
            flex: 1;
        }

        .k-pane-actions {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: center;
        }

        .k-pane-tabbed {
            padding-block-start: $kendo-dock-manager-tabbed-pane-padding-y;
            padding-block-end: $kendo-dock-manager-tabbed-pane-padding-x;
            padding-inline: $kendo-dock-manager-tabbed-pane-padding-x;
        }

        .k-splitbar {
            border-width: 0 1px;
            border-style: solid;
            border-color: inherit;
        }
        .k-splitbar-vertical {
            border-width: 1px 0;
        }
    }

    // Unpinned pane
    .k-dock-manager-unpinned-container {
        width: $kendo-dock-manager-unpinned-container-width;
        position: absolute;
        display: flex;
        height: 100%;
        border-color: inherit;
        z-index: k-z-index("floating");

        .k-pane {
            display: inline-flex;
            flex-direction: column;
            position: relative;
            flex: 1 1 auto;
            width: 100%;
        }

        .k-splitbar {
            height: 100%;
            position: relative;
            flex: none;
        }
    }

    // Docking preview
    .k-docking-preview {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        border-width: $kendo-dock-manager-dock-preview-border-width;
        border-style: $kendo-dock-manager-dock-preview-border-style;
        border-radius: $kendo-dock-manager-dock-preview-border-radius;
        z-index: k-z-index("top");
    }

    .k-dock-manager-window:has(.k-pane) .k-window-content {
        padding: 0;
    }

}

@mixin kendo-dock-navigator--layout() {

    // DockNavigator
    .k-dock-navigator-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        z-index: k-z-index("overlay", 1);
        pointer-events: none;
    }

    .k-dock-navigator {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        justify-content: center;
        position: absolute;
    }

    .k-dock-indicator {
        padding: $kendo-dock-indicator-padding;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        position: relative;
        pointer-events: all;
        outline-width: $kendo-dock-indicator-outline-width;
        outline-style: $kendo-dock-indicator-outline-style;
        z-index: k-z-index("top", 1);
        transition: color k-transition(emphasis), background-color k-transition(emphasis);

        &.k-dock-indicator-middle {
            filter: none;
        }
    }

    .k-dock-indicator-top {
        grid-area: 1 / 2 / auto;
    }
    .k-dock-indicator-right {
        grid-area: 2 / 3 / auto;
    }
    .k-dock-indicator-bottom {
        grid-area: 3 / 2 / auto;
    }
    .k-dock-indicator-left {
        grid-area: 2 / 1 / auto;
    }
    .k-dock-indicator-middle {
        grid-area: 2 / 2 / auto;
    }

}

@mixin kendo-dock-manager--layout() {
    @include kendo-dock-manager--layout-base();
    @include kendo-dock-navigator--layout();
}