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

@mixin kendo-popover--layout() {

    // Popover
    .k-popover {
        @include border-radius( var( --kendo-popover-border-radius, #{$kendo-popover-border-radius} ) );
        padding: 0;
        border-width: var( --kendo-popover-border-width, #{$kendo-popover-border-width} );
        border-style: var( --kendo-popover-border-style, #{$kendo-popover-border-style} );
        box-sizing: border-box;
        outline: 0;
        font-size: var( --kendo-popover-font-size, #{$kendo-popover-font-size} );
        font-family: var( --kendo-popover-font-family, #{$kendo-popover-font-family} );
        line-height: var( --kendo-popover-line-height, #{$kendo-popover-line-height} );
        display: flex;
        flex-flow: column nowrap;
        z-index: 12000;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

        .k-popover-header {
            margin-block-end: 0;
        }
    }

    // Inner
    .k-popover-inner {
        position: relative;
        border-radius: inherit;
        height: inherit;
    }

    // Header
    .k-popover-header {
        @extend .k-card-title !optional;
        border-width: 0 0 var( --kendo-popover-header-border-width, #{$kendo-popover-header-border-width} );
        border-style: var( --kendo-popover-header-border-style, #{$kendo-popover-header-border-style} );
        padding-inline: var( --kendo-popover-header-padding-x, #{$kendo-popover-header-padding-x} );
        padding-block: var( --kendo-popover-header-padding-y, #{$kendo-popover-header-padding-y} );
    }

    // Body
    .k-popover-body {
        padding-inline: var( --kendo-popover-body-padding-x, #{$kendo-popover-body-padding-x} );
        padding-block-start: var( --kendo-popover-body-padding-y, #{$kendo-popover-body-padding-y} );
        padding-block-end: 0;

        @at-root .k-popover-header + .k-popover-body {
            padding-block-start: 0;
        }
    }

    // Actions
    .k-popover-actions {
        border-width: var( --kendo-popover-actions-border-width, #{$kendo-popover-actions-border-width} ) 0 0;
        padding-inline: var( --kendo-popover-actions-padding-x, #{$kendo-popover-actions-padding-x} );
        padding-block: var( --kendo-popover-actions-padding-y, #{$kendo-popover-actions-padding-y} );
        gap: var( --kendo-popover-actions-gap, $kendo-popover-actions-gap );
    }

    // Callout
    .k-popover-callout {
        margin: 0;
        width: var( --kendo-popover-callout-width, #{$kendo-popover-callout-width} );
        height: var( --kendo-popover-callout-height, #{$kendo-popover-callout-height} );
        border-width: var( --kendo-popover-callout-border-width, #{$kendo-popover-callout-border-width} );
        border-style: var( --kendo-popover-callout-border-style, #{$kendo-popover-callout-border-style} );
        position: absolute;

        &.k-callout-n {
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
        }

        &.k-callout-e {
            top: 50%;
            right: 0;
            transform: translate(50%, -50%) rotate(-45deg);
        }

        &.k-callout-s {
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 50%) rotate(45deg);
        }

        &.k-callout-w {
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%) rotate(45deg);
        }
    }
}