    /**
     * Creates a visual theme for a Toolbar.
     * @param {String} $ui
     * The name of the UI
     *
     * @param {color} [$background-color=$toolbar-background-color]
     * The background color of the toolbar
     *
     * @param {string/list} [$background-gradient=$toolbar-background-gradient]
     * The background gradient of the toolbar
     *
     * @param {color} [$border-color=$toolbar-border-color]
     * The border color of the toolbar
     *
     * @param {number} [$border-width=$toolbar-border-width]
     * The border-width of the toolbar
     *
     * @param {string} [$scroller-cursor=$toolbar-scroller-cursor]
     * The cursor of Toolbar scrollers
     *
     * @param {string} [$scroller-cursor-disabled=$toolbar-scroller-cursor-disabled]
     * The cursor of disabled Toolbar scrollers
     *
     * @param {number} [$scroller-opacity-disabled=$toolbar-scroller-opacity-disabled]
     * The opacity of disabled Toolbar scrollers
     *
     * @param {string} [$tool-background-image=$toolbar-tool-background-image]
     * The sprite to use for {@link Ext.panel.Tool Tools} on a Toolbar
     *
     * @member Ext.toolbar.Toolbar
     */
    @mixin extjs-toolbar-ui(
        $ui,

        $background-color: $toolbar-background-color,
        $background-gradient: $toolbar-background-gradient,

        $border-color: $toolbar-border-color,
        $border-width: $toolbar-border-width,
        $scroller-cursor: $toolbar-scroller-cursor,
        $scroller-cursor-disabled: $toolbar-scroller-cursor-disabled,
        $scroller-opacity-disabled: $toolbar-scroller-opacity-disabled,
        $tool-background-image: $toolbar-tool-background-image
    ) {
        .#{$prefix}toolbar-#{$ui} {
            border-color: $border-color;
            border-width: $border-width;

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

            .#{$prefix}box-scroller {
                cursor: $scroller-cursor;
            }

            .#{$prefix}box-scroller-disabled {
                @if $scroller-opacity-disabled != 1 {
                    @include opacity($scroller-opacity-disabled);
                }
                @if $scroller-cursor-disabled != null {
                    cursor: $scroller-cursor-disabled;
                }
            }

            @if $include-ext-panel-tool {
                .#{$prefix}tool-img {
                    @if $toolbar-tool-background-image != null {
                        background-image: theme-background-image($toolbar-tool-background-image);
                    }
                    @if $background-gradient == null {
                        // EXTJSIV-8846: partially transparent png images do not display correctly
                        // in winXP/IE8m when the image element has a transparent background.
                        // to fix this, we give the element the same background-color as the toolbar.
                        background-color: $background-color;
                    }
                }
            }
        }

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

        @include x-slicer(toolbar-#{$ui});
    }

    .#{$prefix}toolbar {
        font-size: $toolbar-font-size;
        border-style: $toolbar-border-style;
        padding: $toolbar-vertical-spacing 0 $toolbar-vertical-spacing $toolbar-horizontal-spacing;
    }

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

    // RTL - skew item margin the opposite way
    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}toolbar-item {
            margin: 0 0 0 $toolbar-horizontal-spacing;
        }
    }

    .#{$prefix}toolbar-text {
        margin: $toolbar-text-margin;
        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-horizontal {
        margin: $toolbar-separator-horizontal-margin;
        height: $toolbar-separator-horizontal-height;
        border-style: $toolbar-separator-horizontal-border-style;
        border-width: $toolbar-separator-horizontal-border-width;
        border-left-color: $toolbar-separator-color;
        border-right-color: $toolbar-separator-highlight-color;
    }

    // RTL - skew toolbar padding the opposite way
    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}toolbar {
            padding: $toolbar-vertical-spacing $toolbar-horizontal-spacing $toolbar-vertical-spacing 0;
        }
    }

    .#{$prefix}toolbar-footer {
        background: $toolbar-footer-background-color;
        border: $toolbar-footer-border-width;
        margin: $toolbar-footer-margin;

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

        .#{$prefix}toolbar-item {
            margin: 0 $toolbar-footer-horizontal-spacing 0 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('toolbar/more') !important;
        background-position: center center !important;
        background-repeat: no-repeat;
    }

    @if $include-toolbar-default-ui {
        @include extjs-toolbar-ui(
            $ui: 'default'
        );
    }

    .#{$prefix}toolbar-scroll-left {
        background-image: theme-background-image('toolbar/scroll-left');
        background-position: $toolbar-scroll-left-background-x 0;
        width: $toolbar-scroller-width;
        height: $toolbar-scroller-height;
        border-style: solid;
        border-color: $toolbar-scroller-border-color;
        border-width: $toolbar-scroller-border-width;
        margin-top: $toolbar-scroller-margin-top;
    }

    .#{$prefix}toolbar-scroll-left-hover {
        background-position: 0 0;
    }

    .#{$prefix}toolbar-scroll-right {
        background-image: theme-background-image('toolbar/scroll-right');
        width: $toolbar-scroller-width;
        height: $toolbar-scroller-height;
        border-style: solid;
        border-color: $toolbar-scroller-border-color;
        border-width: $toolbar-scroller-border-width;
        margin-top: $toolbar-scroller-margin-top;
    }

    .#{$prefix}toolbar-scroll-right-hover {
        background-position: -$toolbar-scroller-width 0;
    }

    .#{$prefix}toolbar .#{$prefix}box-menu-after {
        margin: 0 $toolbar-horizontal-spacing 0 $toolbar-horizontal-spacing;
    }

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

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

        .#{$prefix}toolbar-text {
            margin: rotate90($toolbar-text-margin);
        }

        .#{$prefix}toolbar-separator-vertical {
            margin: $toolbar-separator-vertical-margin;
            border-style: $toolbar-separator-vertical-border-style;
            border-width: $toolbar-separator-vertical-border-width;
            border-top-color: $toolbar-separator-color;
            border-bottom-color: $toolbar-separator-highlight-color;
        }

        .#{$prefix}box-menu-after,
        .#{$prefix}rtl.#{$prefix}box-menu-after {
            margin: $toolbar-vertical-spacing 0 $toolbar-vertical-spacing 0;
            display: block;
            float: none;
        }
    }