@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-drawer--layout() {

    // Container
    .k-drawer-container {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
    }

    kendo-drawer.k-drawer,
    kendo-drawer .k-drawer-wrapper {
        transition: none;
    }


    // Drawer
    .k-drawer {
        height: 100%;
        max-width: 100%;
        border-width: 0;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: var( --kendo-drawer-font-family, #{$kendo-drawer-font-family} );
        font-size: var( --kendo-drawer-font-size, #{$kendo-drawer-font-size} );
        line-height: var( --kendo-drawer-line-height, #{$kendo-drawer-line-height} );
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        transition: all 300ms ease-in-out;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        // Borders
        .k-drawer-mini &.k-drawer-start,
        .k-drawer-expanded &.k-drawer-start {
            border-inline-end-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
        }

        .k-drawer-mini &.k-drawer-end,
        .k-drawer-expanded &.k-drawer-end {
            border-inline-start-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
        }

        // Position
        &.k-drawer-start {
            top: 0;
            inset-inline-start: 0;
        }
        &.k-drawer-end {
            top: 0;
            inset-inline-end: 0;
        }
    }


    // Content
    .k-drawer-content {
        flex: 1 1 auto;
        overflow: auto;
        padding-block: var( --kendo-drawer-content-padding-y, #{$kendo-drawer-content-padding-y} );
        padding-inline: var( --kendo-drawer-content-padding-x, #{$kendo-drawer-content-padding-x} );
    }


    // Overlay
    .k-drawer-overlay {
        .k-drawer {
            max-width: 80vw; // limit width
            position: fixed;
            z-index: 10002;
            border: 0;
        }

        > .k-overlay {
            display: none;
        }
        &.k-drawer-expanded > .k-overlay {
            display: block;
        }
    }


    // Push drawer
    .k-drawer-push {
        display: flex;
        flex-direction: row;

        .k-drawer {
            height: auto;
            position: relative;
            align-self: stretch;
        }

        &:has(.k-drawer.k-drawer-end) {
            flex-direction: row-reverse;
        }
    }


    // Drawer items
    .k-drawer-wrapper {
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin; // Scrollbar styles for Mozilla
        transition: all 300ms ease-in-out;

        // Scrollbar styles for Chrome, Safari and Opera
        &::-webkit-scrollbar {
            width: var( --kendo-drawer-scrollbar-width, #{$kendo-drawer-scrollbar-width} );
        }
        &::-webkit-scrollbar-thumb {
            border-radius: var( --kendo-drawer-scrollbar-radius, #{$kendo-drawer-scrollbar-radius} );
        }
    }
    .k-drawer-items {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .k-drawer-item {
        padding-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
        padding-block: var( --kendo-drawer-item-padding-y, #{$kendo-drawer-item-padding-y} );
        outline: 0;
        color: inherit;
        font-size: var( --kendo-drawer-item-font-size, #{$kendo-drawer-item-font-size} );
        line-height: var( --kendo-drawer-item-line-height, #{$kendo-drawer-item-line-height} );
        position: relative;
        display: flex;
        align-items: center;
        flex-flow: row nowrap;
        gap: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
        cursor: pointer;

        &::before {
            content: "";
            border-width: 0;
            border-inline-start-width: var( --kendo-drawer-item-ripple-border-width, #{$kendo-drawer-item-ripple-border-width} );
            border-style: solid;
            border-color: var( --kendo-drawer-item-ripple-border, #{$kendo-drawer-item-ripple-border} );
            height: 100%;
            display: block;
            position: absolute;
            inset-block-start: 0;
            z-index: 2;
            opacity: 0;
            transition: opacity .3s;
            pointer-events: none;
        }

        > .k-drawer-link {
            margin-inline: calc( var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} ) * -1 );
            margin-block: calc( var( --kendo-drawer-item-padding-y, #{$kendo-drawer-item-padding-y} ) * -1 );
            padding-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
            padding-block: var( --kendo-drawer-item-padding-y, #{$kendo-drawer-item-padding-y} );
            color: inherit;
            display: flex;
            flex-flow: row nowrap;
            flex: 1 0 auto;
            gap: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
        }

        .k-icon {
            flex-shrink: 0;
            padding-inline: var( --kendo-drawer-icon-padding-x, #{$kendo-drawer-icon-padding-x} );
            padding-block: var( --kendo-drawer-icon-padding-y, #{$kendo-drawer-icon-padding-y} );
            box-sizing: content-box;

            &.k-i-none {
                margin: 0;
            }
        }

        .k-item-text {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &.k-selected {
            &::before {
                opacity: 1;
            }

            .k-item-text {
                font-weight: var( --kendo-drawer-item-selected-font-weight, #{$kendo-drawer-item-selected-font-weight} );
            }
        }

        .k-drawer-toggle {
            margin-inline-start: auto;
            cursor: pointer;
            display: flex;
        }

        // Hierarchy items
        @for $i from 1 through $kendo-drawer-item-level-count {
            &.k-level-#{$i} {
                padding-inline-start: calc( ( $i + 1 ) * var( --kendo-drawer-item-level-padding-x, #{$kendo-drawer-item-level-padding-x} ) );
            }
        }
    }

    :is(.k-drawer-start, .k-drawer-left) .k-drawer-item::before {
        inset-inline-start: 0;
    }

    :is(.k-drawer-end, .k-drawer-right) .k-drawer-item::before {
        inset-inline-end: 0;
    }

    // Separator
    .k-drawer-separator {
        padding: 0;
        height: 1px;
    }



    // Mini mode
    .k-drawer-mini .k-drawer-wrapper {
        width: var( --kendo-drawer-mini-initial-width, #{$kendo-drawer-mini-initial-width} );
    }
}