@use "../../mixins/index.scss" as *;
@use "../../border-radii/index.scss" as *;
@use "../../z-index/index.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-popup--layout-base() {

    // Animation Container
    .k-animation-container {
        position: absolute;
        overflow: hidden;
        z-index: k-z-index("animation");
        outline: none;

        @include border-bottom-radius-only( $kendo-border-radius-md );

        &-fixed {
            position: fixed;
        }

        &-relative {
            position: relative;
            display: inline-block;
        }
    }

    .k-animation-container:has(.k-child-animation-container > .k-popup) {
        z-index: k-z-index("popup");
    }

    .k-animation-container-shown {
        overflow: visible;
    }

    // Popup
    .k-popup {
        @include border-radius( $kendo-popup-border-radius );
        margin: 0;
        padding: 0;
        border-width: $kendo-popup-border-width;
        border-style: solid;
        box-sizing: border-box;
        font-size: $kendo-popup-font-size;
        line-height: $kendo-popup-line-height;
        display: flex;
        flex-direction: column;
        align-items: stretch;

        .k-item {
            outline: none;
        }
    }

    .k-popup > .k-colorpalette {
        padding-block: $kendo-popup-content-padding-y;
        padding-inline: $kendo-popup-content-padding-x;
    }

    .k-animation-container .k-popup {
        margin-block: $kendo-popup-spacing-y;
    }

    // Transparent popup
    .k-popup.k-popup-transparent {
        border-width: 0;
        background-color: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    // Flush popup
    .k-popup.k-popup-flush {
        padding: 0;
    }

    // Child components
    .k-popup > .k-coloreditor {
        border-width: 0;
    }

    .k-popup .k-column-list {
        max-height: 200px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .k-popup .k-multicheck-wrap {
        max-height: 300px;
        overflow: auto;
    }

    // Legacy shadow
    .k-shadow {
        box-shadow: $kendo-popup-shadow;
    }

}