@use "sass:map";
@use "../core/_index.scss" as *;
@use "../core/functions/index.scss" as *;
@use "../button/_variables.scss" as *;
@use "./_variables.scss" as *;
@use "@progress/kendo-theme-core/scss/components/toolbar/_layout.scss" as *;

@mixin kendo-toolbar--layout() {
    @include kendo-toolbar--layout-base();

    .k-toolbar {

        // Template item
        .k-toolbar-item:focus,
        .k-toolbar-item.k-focus {
            outline-width: $kendo-toolbar-item-focus-outline-width;
            outline-style: $kendo-toolbar-item-focus-outline-style;
        }

        &::before {
            height: $kendo-button-inner-calc-size;
        }

        #{k-when-default($kendo-toolbar-default-size, "sm")}
        &.k-toolbar-sm{
            &::before {
                height: $kendo-button-sm-inner-calc-size;
            }
        }

        #{k-when-default($kendo-toolbar-default-size, "md")}
        &.k-toolbar-md {
            &::before {
                height: $kendo-button-md-inner-calc-size;
            }
        }

        #{k-when-default($kendo-toolbar-default-size, "lg")}
        &.k-toolbar-lg {
            &::before {
                height: $kendo-button-lg-inner-calc-size;
            }
        }

    }

    .k-overflow-container .k-overflow-button {
        gap: .5rem ;
    }
}