@use "../icons/_variables.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-file-manager--layout() {

    // File Manager
    .k-filemanager {
        border-width: var( --kendo-file-manager-border-width, #{$kendo-file-manager-border-width} );
        border-style: solid;
        box-sizing: border-box;
        font-family: var( --kendo-file-manager-font-family, #{$kendo-file-manager-font-family} );
        font-size: var( --kendo-file-manager-font-size, #{$kendo-file-manager-font-size} );
        line-height: var( --kendo-file-manager-line-height, #{$kendo-file-manager-line-height} );
        display: flex;
        flex-flow: column nowrap;
    }


    // Toolbar
    .k-filemanager-header {
        border-color: inherit;
    }
    .k-filemanager-toolbar {
        border-width: 0;
        border-bottom-width: var( --kendo-file-manager-toolbar-border-width, #{$kendo-file-manager-toolbar-border-width} );
        border-color: inherit;
        flex-shrink: 0;
        z-index: 1;
    }


    // Content Wrapper
    .k-filemanager-content-container {
        border-color: inherit;
        box-sizing: border-box;
        flex: 1 1 0%;
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        overflow: hidden;
    }

    .k-filemanager-splitter {
        border-width: 0;
    }


    // Navigation
    .k-filemanager-navigation {
        padding-inline: var( --kendo-file-manager-navigation-padding-x, #{$kendo-file-manager-navigation-padding-x} );
        padding-block: var( --kendo-file-manager-navigation-padding-y, #{$kendo-file-manager-navigation-padding-y} );
        width: var( --kendo-file-manager-navigation-width, #{$kendo-file-manager-navigation-width} );
        border-width: 0;
        border-right-width: var( --kendo-file-manager-navigation-border-width, #{$kendo-file-manager-navigation-border-width} );
        border-style: solid;
        border-color: inherit;
        box-sizing: border-box;
        flex-shrink: 0;
        overflow: auto;
    }
    .k-filemanager-treeview {
        overflow: visible;
    }


    // Content
    .k-filemanager-content {
        border-color: inherit;
        flex: 1 1 0%;
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
        overflow: hidden;
    }

    // Filemanager view
    .k-filemanager-view {
        overflow: auto;
    }

    // Breadcrumb
    .k-filemanager-breadcrumb {
        padding-inline: var( --kendo-file-manager-breadcrumb-padding-x, #{$kendo-file-manager-breadcrumb-padding-x} );
        padding-block: var( --kendo-file-manager-breadcrumb-padding-y, #{$kendo-file-manager-breadcrumb-padding-y} );
        border-width: 0;
        border-bottom-width: var( --kendo-file-manager-breadcrumb-border-width, #{$kendo-file-manager-breadcrumb-border-width} );
        flex-shrink: 0;
    }


    // Filemanager listview
    .k-filemanager-listview {
        border-width: 0;
        flex: 1 1 0%;

        // Listview item
        .k-listview-item {
            padding-inline: var( --kendo-file-manager-listview-item-padding-x, #{$kendo-file-manager-listview-item-padding-x} );
            padding-block: var( --kendo-file-manager-listview-item-padding-y, #{$kendo-file-manager-listview-item-padding-y} );
            width: var( --kendo-file-manager-listview-item-width, #{$kendo-file-manager-listview-item-width} );
            height: var( --kendo-file-manager-listview-item-height, #{$kendo-file-manager-listview-item-height} );
            text-align: center;
        }

        // File preview
        .k-file-preview {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        // File name
        .k-file-name {
            margin-block-start: calc( var( --kendo-file-manager-spacer, #{$kendo-file-manager-spacer} ) / 2 );
            display: block;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        // Edit mode
        .k-file-edit-input input {
            width: 100%;
        }
    }


    // Filemanager grid
    .k-filemanager-grid {
        border-width: 0;
        flex: 1 1 0%;

        // File preview
        .k-file-preview {
            margin-inline-end: var( --kendo-icon-spacing, .5rem );
            display: inline-flex;
            flex-direction: row;
            vertical-align: middle;
        }

        // File name
        .k-file-name {
            display: inline-flex;
            flex-direction: row;
            vertical-align: middle;
        }
    }


    // Filemanager preview
    .k-filemanager-preview {
        padding-inline-start: var( --kendo-file-manager-preview-padding-x, #{$kendo-file-manager-preview-padding-x} );
        padding-inline-end: var( --kendo-file-manager-preview-padding-x, #{$kendo-file-manager-preview-padding-x} );
        padding-block-start:  calc( var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} ) * 3 );
        padding-block-end: var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} );
        width: var( --kendo-file-manager-preview-width, #{$kendo-file-manager-preview-width} );
        min-height: calc( ( var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} ) * 4 ) + var( --kendo-icon-size, 1rem ) * 2 + ( var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} ) * 3 ) );
        border-width: 0;
        border-left-width: var( --kendo-file-manager-preview-border-width, #{$kendo-file-manager-preview-border-width} );
        border-style: solid;
        border-color: inherit;
        box-sizing: border-box;
        text-align: center;
        overflow-y: auto;
        flex-shrink: 0;

        // File preview
        .k-file-preview {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        // File name
        .k-file-name {
            margin-block-start: var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} );
            display: block;
        }
        .k-single-file-selected { font-weight: var( --kendo-font-weight-bold, bold ); }
        .k-multiple-files-selected { font-weight: var( --kendo-font-weight-bold, bold ); }

        // File Meta
        .k-file-meta {
            margin-inline: 0;
            margin-block-start: var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} );
            margin-block-end: 0;
            box-sizing: border-box;
            text-align: start;
            display: flex;
            flex-flow: row wrap;
            grid-column-gap: $kendo-file-manager-preview-column-gap;
        }
        .k-file-meta-label {
            display: inline-block;
        }
        .k-file-meta-value {
            margin: 0;
        }
        .k-file-type {
            text-transform: capitalize;
        }
        .k-line-break {
            margin-inline: 0;
            margin-block-start: var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} );
            margin-block-end: 0;
            width: 100%;
            flex: 1 1 100%;
            flex-flow: row nowrap;
        }
    }


    // Resizing Handle
    .k-filemanager .k-splitbar {
        flex-shrink: 0;
        display: inline-flex;
        position: relative;
        border-width: 0 1px;
        border-style: solid;
        border-color: inherit;
    }


    // Upload Dialog
    .k-filemanager-upload-dialog .k-upload-files {
        max-height: 200px;
        overflow-y: auto;
    }


    // Drag Hint
    // TODO: use drag-hint styles
    .k-filemanager-drag-hint {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .k-filemanager-drag-hint .k-icon {
        margin-inline-end: var( --kendo-icon-spacing, .5rem );

    }

}