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

@mixin kendo-popup--layout() {

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

        &-fixed {
            position: fixed;
        }

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

    .k-animation-container {
        @include border-bottom-radius-only( var( --kendo-popup-border-radius, #{$kendo-popup-border-radius} ) );
    }

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

    // Popup
    .k-popup {
        margin: 0;
        padding-inline: var( --kendo-popup-padding-x, #{$kendo-popup-padding-x} );
        padding-block: var( --kendo-popup-padding-y, #{$kendo-popup-padding-y} );
        border-width: var( --kendo-popup-border-width, #{$kendo-popup-border-width} );
        border-style: solid;
        border-radius: var( --kendo-popup-border-radius, #{$kendo-popup-border-radius} );
        box-sizing: border-box;
        font-size: var( --kendo-popup-font-size, #{$kendo-popup-font-size} );
        line-height: var( --kendo-popup-line-height, #{$kendo-popup-line-height} );
        display: flex;
        flex-direction: column;
        align-items: stretch;

        .k-item {
            outline: none;
        }
    }

    .k-popup > .k-colorpalette {
        padding-inline: var( --kendo-popup-content-padding-x, #{$kendo-popup-content-padding-x} );
        padding-block: var( --kendo-popup-content-padding-y, #{$kendo-popup-content-padding-y} );
    }

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

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

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

}