@include exports("toolbar/layout") {

    // Base
    .k-toolbar {
        @include use-background-clip();
        margin: 0;
        // Until flex gap is available in chrome
        // padding: $toolbar-padding-y $toolbar-padding-x;
        padding: ($toolbar-padding-y / 2) $toolbar-padding-x;
        border-width: $toolbar-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $toolbar-font-family;
        font-size: $toolbar-font-size;
        line-height: $toolbar-line-height;
        list-style: none;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        &::before {
            content: "";
            height: $toolbar-button-calc-size;
        }

        &.k-toolbar-resizable {
            flex-wrap: nowrap;
        }

        > * {
            // Until flex gap is available in chrome
            margin-top: ($toolbar-padding-y / 2);
            margin-bottom: ($toolbar-padding-y / 2);
            margin-right: $toolbar-spacing;
            flex-shrink: 0;
            display: inline-flex;
            align-items: stretch;
            align-content: center;
            vertical-align: middle;

            > label {
                margin-right: $toolbar-spacing;
            }
        }
        > :last-child {
            margin-right: 0;
        }

        .k-button,
        .k-button-group,
        .k-separator,
        .k-split-button,
        .k-textbox,
        .k-widget,
        label {
            align-self: center;
        }
        .k-split-button > .k-button {
            align-self: stretch;
        }


        // Button
        .k-button {
            padding: $toolbar-button-padding-y $toolbar-button-padding-x;
            line-height: $toolbar-button-line-height;
        }

        // Toggle button
        .k-toggle-button {}


        // Button group
        .k-button-group {}


        // Split button
        .k-split-button {}


        // Dropdowns and Inputs
        // .k-autocomplete,
        // .k-dateinput-wrap,
        // .k-multiselect-wrap,
        // .k-numeric-wrap,
        .k-picker-wrap,
        .k-dropdown-wrap {
            &::before {
                @extend .k-button-overlay;
            }
        }


        // Overflow anchor
        .k-overflow-anchor {
            @include border-radius( 0 );
            margin: 0;
            padding: $toolbar-padding-y;
            width: $toolbar-inner-calc-size;
            height: 100%;
            border-width: 0;
            border-color: inherit;
            background-clip: padding-box;
            box-sizing: border-box;
            justify-content: center;
            position: absolute;
            top: 0;
            right: 0;

            &::before {
                display: block;
            }
        }


        // Separator
        .k-separator,
        .k-toolbar-separator {
            width: 0;
            height: $line-height-em;
            border-width: 0 0 0 1px;
            border-style: solid;
        }


        // Spacer
        .k-spacer,
        .k-toolbar-spacer {
            height: $line-height-em;
            flex: 1 1 auto;
        }


        // Template
        .k-toolbar-template {
            align-self: center;
            align-items: center;
        }

    }


    // Angular specific
    kendo-toolbar-renderer {
        border-color: inherit;
    }


    // Overflow container
    .k-overflow-container {

        // Group
        .k-overflow-tool-group {
            display: block;
        }

        // Button
        .k-overflow-button {
            width: 100%;
        }

        // Button group
        .k-button-group {
            display: flex;
            flex-direction: column;

            .k-button {
                margin: if( $button-border-width == 0, null, 0);
            }
        }

        // Hidden items
        .k-overflow-hidden {
            display: none;
        }
    }




    // RTL
    .k-toolbar {

        &.k-rtl,
        .k-rtl &,
        &[dir="rtl"],
        [dir="rtl"] & {

            > * {
                margin-right: 0;
                margin-left: $toolbar-spacing;

                > label {
                    margin-right: 0;
                    margin-left: $toolbar-spacing;
                }
            }
            > :last-child {
                margin-left: 0;
            }

            .k-overflow-anchor {
                margin: 0;
                right: auto;
                left: 0;
            }
        }
    }

}