@use "../../mixins/index.import.scss" as *;
@use "./variables.scss" as *;

@mixin kendo-action-sheet--layout-base() {

    // Action sheet container
    .k-actionsheet-container {
        width: 100%;
        height: 100%;
        max-width: clamp(100vw, 100%, 100%);
        max-height: clamp(100vh, 100%, 100%);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        overflow: hidden;
        transform: translateZ(0);

        // Overlay
        > .k-overlay {
            position: absolute;
            z-index: 1;
        }

        // Nested animation container
        > .k-animation-container {
            width: 100%;
            height: 100%;
            border-radius: 0;
            overflow: hidden;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            pointer-events: none;

            > .k-child-animation-container {
                position: absolute;
            }
        }

        // No animation container
        > .k-actionsheet {
            position: absolute;
            z-index: 2;
        }

        // Enable mouse events for action sheet
        .k-actionsheet {
            pointer-events: all;
        }
    }


    // Actionsheet
    .k-actionsheet {
        padding-block: $kendo-actionsheet-padding-y;
        padding-inline: $kendo-actionsheet-padding-y;
        width: var( --kendo-actionsheet-width, #{$kendo-actionsheet-width} );
        height: var( --kendo-actionsheet-height, #{$kendo-actionsheet-height} );
        max-width: var( --kendo-actionsheet-max-width, #{$kendo-actionsheet-max-width} );
        max-height: var( --kendo-actionsheet-max-height, #{$kendo-actionsheet-max-height} );
        border-width: 0;
        border-style: solid;
        box-sizing: border-box;
        font-size: $kendo-actionsheet-font-size;
        font-family: $kendo-actionsheet-font-family;
        line-height: $kendo-actionsheet-line-height;
        overflow: hidden;
        position: relative;
        // TODO: Remove once k-actionsheet-view is adopted in all suites.
        display: flex;
        flex-flow: column nowrap;

        .k-actionsheet-view {
            display: flex;
            flex-flow: column nowrap;
            height: 100%;
        }

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


    // Actionsheet titlebar
    .k-actionsheet-titlebar {
        padding-block: $kendo-actionsheet-titlebar-padding-y;
        padding-inline: $kendo-actionsheet-titlebar-padding-x;
        border-bottom-width: if( $kendo-actionsheet-titlebar-border-width, $kendo-actionsheet-titlebar-border-width, null );
        border-bottom-style: solid;
        font-size: $kendo-actionsheet-titlebar-font-size;
        font-family: $kendo-actionsheet-titlebar-font-family;
        line-height: $kendo-actionsheet-titlebar-line-height;
        flex: none;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        gap: $kendo-actionsheet-titlebar-gap;
    }
    .k-actionsheet-titlebar-group {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        width: 100%;
    }
    .k-actionsheet-title {
        flex: 1;
    }
    .k-actionsheet-subtitle {
        font-size: $kendo-actionsheet-subtitle-font-size;
        line-height: $kendo-actionsheet-subtitle-line-height;
    }
    .k-actionsheet-actions {
        flex: none;
    }


    // Actionsheet content
    .k-actionsheet-content {
        flex: 1;
        overflow: auto;
        position: relative;
    }


    // Actionsheet footer
    .k-actionsheet-footer {
        flex: none;
        border-top-width: $kendo-actionsheet-footer-border-width;
        border-top-style: solid;
    }


    // Actionsheet items
    .k-actionsheet-items {
        margin: 0;
        padding: 0;
        list-style: none;
        flex: none;
    }


    // Actionsheet item
    .k-actionsheet-item {
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-flow: row nowrap;
        outline: none;
    }
    .k-actionsheet-action {
        margin: 0;
        padding-block: $kendo-actionsheet-item-padding-y;
        padding-inline: $kendo-actionsheet-item-padding-x;
        min-height: $kendo-actionsheet-item-min-height;
        box-sizing: border-box;
        color: inherit;
        text-decoration: none;
        outline: 0;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        gap: $kendo-actionsheet-item-spacing;
    }
    .k-actionsheet-item-text {
        display: flex;
        flex-flow: column nowrap;
    }
    .k-actionsheet-item-title {
        font-weight: $kendo-actionsheet-item-title-font-weight;
        text-transform: $kendo-actionsheet-item-title-text-transform;
    }
    .k-actionsheet-item-description {
        font-size: $kendo-actionsheet-item-description-font-size;
    }


    // Actionsheet separator
    .k-actionsheet .k-hr {
        margin: 0;
        flex: none;
    }


    // Action sheet position
    .k-actionsheet-top {
        @include border-bottom-radius( $kendo-actionsheet-border-radius );
        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
        border-top-width: if( $kendo-actionsheet-border-width, 0, null );
        top: 0;
        inset-inline-start: 50%;
        transform: translateX( -50% );
    }
    .k-actionsheet-bottom {
        @include border-top-radius( $kendo-actionsheet-border-radius );
        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
        border-bottom-width: if( $kendo-actionsheet-border-width, 0, null );
        bottom: 0;
        inset-inline-start: 50%;
        transform: translateX( -50% );
    }
    .k-actionsheet-left {
        @include border-right-radius( $kendo-actionsheet-border-radius );
        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
        border-left-width: if( $kendo-actionsheet-border-width, 0, null );
        left: 0;
        top: 50%;
        transform: translateY( -50% );
    }
    .k-actionsheet-right {
        @include border-left-radius( $kendo-actionsheet-border-radius );
        border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
        border-right-width: if( $kendo-actionsheet-border-width, 0, null );
        right: 0;
        top: 50%;
        transform: translateY( -50% );
    }
    .k-actionsheet-fullscreen {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        height: 100%;
    }


    // Action sheet in popup
    .k-animation-container > .k-actionsheet {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
    }


    // Adaptive action sheet
    .k-adaptive-actionsheet {
        max-width: 100%;
        width: 100%;
        font-size: $kendo-adaptive-actionsheet-font-size;

        .k-actionsheet-titlebar {
            padding-block: $kendo-adaptive-actionsheet-titlebar-padding-y;
            padding-inline: $kendo-adaptive-actionsheet-titlebar-padding-x;
        }

        .k-actionsheet-content {
            padding-block: $kendo-adaptive-actionsheet-content-padding-y;
            padding-inline: $kendo-adaptive-actionsheet-content-padding-x;
        }

        .k-actionsheet-footer {
            padding-block: $kendo-adaptive-actionsheet-footer-padding-y;
            padding-inline: $kendo-adaptive-actionsheet-footer-padding-x;
        }

        .k-actionsheet-filter {
            width: calc( 360px - #{$kendo-adaptive-actionsheet-titlebar-padding-x} * 2 );
        }
        .k-actionsheet-content,
        .k-actionsheet-footer {
            margin-inline: auto;
            width: min(100%, 360px);
        }

        .k-list-container,
        .k-treeview {
            height: 100%;
        }
        .k-list-filter {
            width: 100%;
            padding-inline: 0;
        }

        .k-menu-group {
            height: 100%;
            overflow: auto;
            position: static;
        }

        .k-calendar {
            margin-inline: auto;
            border-width: 0;
            display: flex;
        }

        .k-timeselector {
            height: 100%;
            border-width: 0;
            overflow: hidden;

            .k-time-part {
                display: contents;
            }

            .k-time-list-wrapper {
                height: 100%;
            }
        }

        .k-datetime-wrap {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
        }
        .k-datetime-selector {
            flex: 1 1 auto;
        }

        .k-datetime-calendar-wrap {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            flex: 0 0 100%;
        }

        .k-datetime-time-wrap {
            width: 100%;
            position: absolute;
            top: 0;
            left: 100%;
            bottom: 0;
            flex: 0 0 100%;
        }

        .k-scrollable-wrap {
            height: 100%;
            overflow-y: auto;
        }

        .k-data-table {
            max-height: 100%;
            overflow: hidden;
            display: flex;
            flex-flow: column nowrap;
        }

        .k-coloreditor {
            min-width: 100%;
            height: 100%;
            border: 0;
            overflow: auto;
            scrollbar-width: none;

            &::-webkit-scrollbar {
                display: none;
            }

            .k-coloreditor-header {
                padding: 0;
            }

            .k-coloreditor-views {
                padding-inline: 0;
            }
        }

        .k-colorgradient-canvas {
            .k-hsv-gradient {
                aspect-ratio: 1;
                height: 100%;
            }
        }
    }


    // Legacy action sheet
    // TODO: remove when kendo-jquery migrate
    .k-actionsheet-jq {
        &.k-actionsheet {
            height: auto;
        }

        .k-actionsheet-header {
            @extend .k-actionsheet-titlebar !optional;
            align-items: flex-start;
        }

        .k-actionsheet-action {
            align-items: center;
        }
    }

    // RTL
    .k-rtl,
    [dir="rtl"] {
        .k-actionsheet-top,
        .k-actionsheet-bottom {
            transform: translateX( 50% );
        }
    }

}


@mixin kendo-action-sheet--layout() {
    @include kendo-action-sheet--layout-base();
}