    /**
     * Creates base structure for Toolbar
     * @member Ext.toolbar.Toolbar
     */
    @mixin extjs-toolbar {
        .#{$prefix}toolbar {
            font-size: $toolbar-font-size;

            border: 1px solid;

            padding: $toolbar-vertical-spacing 0 $toolbar-vertical-spacing $toolbar-horizontal-spacing;

            .#{$prefix}form-item-label{
                font-size: $toolbar-font-size;
                line-height: 15px;
            }

            .#{$prefix}toolbar-item {
                margin: 0 $toolbar-horizontal-spacing 0 0;
            }

            .#{$prefix}toolbar-text {
                margin-left: 4px;
                margin-right: 6px;
                white-space: nowrap;
                color: $toolbar-text-color;
                line-height: $toolbar-text-line-height;
                font-family: $toolbar-text-font-family;
                font-size: $toolbar-text-font-size;
                font-weight: $toolbar-text-font-weight;
            }

            .#{$prefix}toolbar-separator {
                display: block;
                font-size: 1px;
                overflow: hidden;
                cursor: default;
                border: 0;
            }

            .#{$prefix}toolbar-separator-horizontal {
                margin: 0 3px 0 2px;

                height: 14px;
                width: 0px;

                border-left: 1px solid $toolbar-separator-color;
                border-right: 1px solid $toolbar-separator-highlight-color;
            }
        }

        @if $include-ie {
            .#{$prefix}quirks .#{$prefix}ie .#{$prefix}toolbar .#{$prefix}toolbar-separator-horizontal {
                width: 2px;
            }
        }

        .#{$prefix}toolbar-footer {
            background: transparent;
            border: 0px none;
            margin-top: 3px;

            padding: $toolbar-footer-vertical-spacing 0 $toolbar-footer-vertical-spacing $toolbar-footer-horizontal-spacing;

            .#{$prefix}box-inner {
                border-width: 0;
            }

            .#{$prefix}toolbar-item {
                margin: 0 $toolbar-footer-horizontal-spacing 0 0;
            }
        }

        .#{$prefix}toolbar-vertical {
            padding: $toolbar-vertical-spacing $toolbar-horizontal-spacing 0 $toolbar-horizontal-spacing;

            .#{$prefix}toolbar-item {
                margin: 0 0 $toolbar-horizontal-spacing 0;
            }

            .#{$prefix}toolbar-text {
                margin-top: 4px;
                margin-bottom: 6px;
            }

            .#{$prefix}toolbar-separator-vertical {
                margin: 2px 5px 3px 5px;

                height: 0px;
                width: 10px;
                line-height: 0px;

                border-top: 1px solid $toolbar-separator-color;
                border-bottom: 1px solid $toolbar-separator-highlight-color;
            }
        }

        .#{$prefix}toolbar-scroller {
            padding-left: 0;
        }

        .#{$prefix}toolbar-spacer {
            width: $toolbar-spacer-width;
        }

        // Background for overflow button inserted by the Menu box overflow handler within a toolbar
        .#{$prefix}toolbar-more-icon {
            background-image: theme-background-image($theme-name, 'toolbar/more.gif') !important;
            background-position: 2px center !important;
            background-repeat: no-repeat;
        }

        @include extjs-toolbar-ui(
            'default',
            $background-color: $toolbar-background-color,
            $background-gradient: $toolbar-background-gradient,
            $border-color: $toolbar-border-color
        );

        //plain toolbars have no border
        //by default they get no color, so they are transparent. IE6 doesnt support transparent borders
        //so we must set the width to 0.
        .#{$prefix}toolbar-plain {
            border: 0;
        }
    }

    /**
     * Creates a visual theme for an Toolbar.
     * @param {String} $ui The name of the UI
     * @param {Color} $background-color The background color of the toolbar (defaults to transparent)
     * @param {Gradient/color-stops} $background-gradient The background gradient of the toolbar (defaults to null)
     * @param {Color} $border-color The border color of the toolbar (defaults to null)
     * @member Ext.toolbar.Toolbar
     */
    @mixin extjs-toolbar-ui(
        $ui,

        $background-color: transparent,
        $background-gradient: null,

        $border-color: null
    ) {
        .#{$prefix}toolbar-#{$ui} {
            @if $border-color != null {
                border-color: $border-color;
            }

            @include background-gradient($background-color, $background-gradient);
        }

        @if not $supports-gradients or $compile-all {
            @if $background-gradient != null {
                .#{$prefix}nlg {
                    .#{$prefix}toolbar-#{$ui} {
                        background-image: theme-background-image($theme-name, 'toolbar/toolbar-#{$ui}-bg.gif') !important;
                        background-repeat: repeat-x;
                    }
                }
            }
        }
    }