@use "sass:map";
@use "../../functions/index.scss" as *;
@use "../../spacing/index.scss" as *;
@use "../../border-radii/index.scss" as *;
@use "_variables.scss" as *;

@mixin kendo-column-menu--layout-base() {

    // Sizes
    @each $size, $value in $kendo-column-menu-sizes {
        $_padding-x: map.get($value, padding-x);
        $_padding-y: map.get($value, padding-y);
        $_font-size: map.get($value, font-size);
        $_line-height: map.get($value, line-height);

        .k-column-menu {
            #{k-when-default($kendo-column-menu-default-size, $size)}
            &.k-column-menu-#{$size} {
                font-size: $_font-size;
                line-height: $_line-height;

                .k-columnmenu-item {
                    padding-block: $_padding-y;
                    padding-inline: $_padding-x;
                    font-size: $_font-size;
                    line-height: $_line-height;
                }
            }
        }

        .k-column-list {

            #{k-when-default($kendo-column-menu-default-size, $size)}
            &.k-column-list-#{$size} {
                font-size: $_font-size;
                line-height: $_line-height;

                .k-column-list-item {
                    padding-block: $_padding-y;
                    padding-inline: $_padding-x;
                    font-size: $_font-size;
                    line-height: $_line-height;
                }
            }
        }

        .k-group-menu {

            #{k-when-default($kendo-column-menu-default-size, $size)}
            &.k-group-menu-#{$size} {
                font-size: $_font-size;
                line-height: $_line-height;

                .k-group-menu-item {
                    padding-block: $_padding-y;
                    padding-inline: $_padding-x;
                    font-size: $_font-size;
                    line-height: $_line-height;
                }
            }
        }
    }

    .k-group-menu .k-group-menu-item-wrap + .k-group-menu-item-wrap {
        border-block-start: 1px solid;
    }

    .k-columnmenu-item-wrapper {
        padding-block: $kendo-column-menu-item-wrapper-padding-y;
    }

    .k-columnmenu-item,
    .k-column-list-item {
        border-radius: $kendo-column-list-item-border-radius;
    }

    .k-group-menu-item {
        display: flex;
        user-select: none;
        gap: k-spacing(1);
    }

    .k-group-menu-item-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-block: calc( k-spacing(1) * -1);
        pointer-events: none;
    }

    .k-group-menu-item-action {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: k-spacing(1);
        border-radius: k-border-radius(md);
        pointer-events: auto;
        cursor: pointer;
    }

    .k-group-menu-item-drag-action {
        cursor: move;
    }
}

@mixin kendo-column-menu--layout() {
    @include kendo-column-menu--layout-base();
}