/**
 * Creates a visual theme for a Toolbar.
 
 * @param {String} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @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 {string/list} [$vertical-spacing=$toolbar-vertical-spacing]
 * The vertical spacing of the toolbar's items
 *
 * @param {string/list} [$horizontal-spacing=$toolbar-horizontal-spacing]
 * The horizontal spacing of the toolbar's items
 *
 * @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 {number} [$border-style=$toolbar-border-style]
 * The border-style of the toolbar
 *
 * @param {number} [$spacer-width=$toolbar-spacer-width]
 * The width of the toolbar's {@link Ext.toolbar.Spacer Spacers}
 *
 * @param {color} [$separator-color=$toolbar-separator-color]
 * The main border-color of the toolbar's {@link Ext.toolbar.Separator Separators}
 *
 * @param {color} [$separator-highlight-color=$toolbar-separator-highlight-color]
 * The highlight border-color of the toolbar's {@link Ext.toolbar.Separator Separators}
 *
 * @param {number/list} [$separator-horizontal-margin=$toolbar-separator-horizontal-margin]
 * The margin of {@link Ext.toolbar.Separator Separators} when the toolbar is horizontally aligned
 *
 * @param {number} [$separator-horizontal-height=$toolbar-separator-horizontal-height]
 * The height of {@link Ext.toolbar.Separator Separators} when the toolbar is vertically aligned
 *
 * @param {string} [$separator-horizontal-border-style=$toolbar-separator-horizontal-border-style]
 * The border-style of {@link Ext.toolbar.Separator Separators} when the toolbar is horizontally aligned
 *
 * @param {number} [$separator-horizontal-border-width=$toolbar-separator-horizontal-border-width]
 * The border-width of {@link Ext.toolbar.Separator Separators} when the toolbar is horizontally aligned
 *
 * @param {number/list} [$separator-vertical-margin=$toolbar-separator-vertical-margin]
 * The margin of {@link Ext.toolbar.Separator Separators} when the toolbar is vertically aligned
 *
 * @param {string} [$separator-vertical-border-style=$toolbar-separator-vertical-border-style]
 * The border-style of {@link Ext.toolbar.Separator Separators} when the toolbar is vertically aligned
 *
 * @param {number} [$separator-vertical-border-width=$toolbar-separator-vertical-border-width]
 * The border-width of {@link Ext.toolbar.Separator Separators} when the toolbar is vertically aligned
 *
 * @param {string} [$text-font-family=$toolbar-text-font-family]
 * The default font-family of the toolbar's text items
 *
 * @param {number} [$text-font-size=$toolbar-text-font-size]
 * The default font-size of the toolbar's text items
 *
 * @param {number} [$text-font-weight=$toolbar-text-font-weight]
 * The default font-weight of the toolbar's text items
 *
 * @param {color} [$text-color=$toolbar-text-color]
 * The color of the toolbar's text items
 *
 * @param {number} [$text-line-height=$toolbar-text-line-height]
 * The line-height of the toolbar's text items
 *
 * @param {number/list} [$text-padding=$toolbar-text-padding]
 * The padding of the toolbar's text items
 *
 * @param {number} [$scroller-width=$toolbar-scroller-width]
 * The width of the scroller buttons
 *
 * @param {number} [$scroller-height=$toolbar-scroller-height]
 * The height of the scroller buttons
 *
 * @param {number} [$scroller-vertical-width=$toolbar-scroller-vertical-width]
 * The width of scrollers on vertically aligned toolbars
 *
 * @param {number} [$scroller-vertical-height=$toolbar-scroller-vertical-height]
 * The height of scrollers on vertically aligned toolbars
 *
 * @param {color} [$scroller-border-color=$toolbar-scroller-border-color]
 * The border-color of the scroller buttons
 *
 * @param {color} [$scroller-border-width=$toolbar-scroller-border-width]
 * The border-width of the scroller buttons
 *
 * @param {color} [$scroller-vertical-border-color=$toolbar-scroller-vertical-border-color]
 * The border-color of scroller buttons on vertically aligned toolbars
 *
 * @param {color} [$scroller-vertical-border-width=$toolbar-scroller-vertical-border-width]
 * The border-width of scroller buttons on vertically aligned toolbars
 *
 * @param {number/list} [$scroller-top-margin=$toolbar-scroller-top-margin]
 * The margin of "top" scroller buttons
 *
 * @param {number/list} [$scroller-right-margin=$toolbar-scroller-right-margin]
 * The margin of "right" scroller buttons
 *
 * @param {number/list} [$scroller-bottom-margin=$toolbar-scroller-bottom-margin]
 * The margin of "bottom" scroller buttons
 *
 * @param {number/list} [$scroller-left-margin=$toolbar-scroller-left-margin]
 * The margin of "left" scroller buttons
 *
 * @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=$toolbar-scroller-opacity]
 * The opacity of Toolbar scroller buttons. Only applicable when
 * `$classic-scrollers` is `false`.
 *
 * @param {number} [$scroller-opacity-over=$toolbar-scroller-opacity-over]
 * The opacity of hovered Toolbar scroller buttons. Only applicable when
 * `$classic-scrollers` is `false`.
 *
 * @param {number} [$scroller-opacity-pressed=$toolbar-scroller-opacity-pressed]
 * The opacity of pressed Toolbar scroller buttons. Only applicable when
 * `$classic-scrollers` is `false`.
 *
 * @param {number} [$scroller-opacity-disabled=$toolbar-scroller-opacity-disabled]
 * The opacity of disabled Toolbar scroller buttons.
 *
 * @param {color} [$scroller-glyph-color=$toolbar-scroller-glyph-color]
 * The color to use for toolbar scroller icons when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$scroller-top-glyph=$toolbar-scroller-top-glyph]
 * Glyph for the "top" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$scroller-right-glyph=$toolbar-scroller-right-glyph]
 * Glyph for the "right" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$scroller-bottom-glyph=$toolbar-scroller-bottom-glyph]
 * Glyph for the "bottom" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$scroller-left-glyph=$toolbar-scroller-left-glyph]
 * Glyph for the "left" scroller icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string} [$tool-background-image=$toolbar-tool-background-image]
 * The sprite to use for {@link Ext.panel.Tool Tools} on a Toolbar
 *
 * @param {color} [$tool-glyph-color=$toolbar-tool-glyph-color]
 * The color to use for the Toolbar's tool icons when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$menu-overflow-glyph-color=$toolbar-menu-overflow-glyph-color]
 * The color to use for the {@link #overflowHandler menu overflow} "more" icon when
 * {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$menu-overflow-glyph=$toolbar-menu-overflow-glyph]
 * Glyph for the {@link #overflowHandler menu overflow} "more" icon when
 * {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {boolean} [$classic-scrollers=$toolbar-classic-scrollers]
 * `true` to use classic-style scroller buttons.  When `true` scroller buttons are given
 * their hover state by changing their background-position,  When `false` scroller buttons
 * are given their hover state by applying opacity.
 *
 * @member Ext.toolbar.Toolbar
 */
@mixin extjs-toolbar-ui(
    $ui,
 
    $background-color: $toolbar-background-color,
    $background-gradient: $toolbar-background-gradient,
 
    $vertical-spacing: $toolbar-vertical-spacing,
    $horizontal-spacing: $toolbar-horizontal-spacing,
 
    $border-color: $toolbar-border-color,
    $border-width: $toolbar-border-width,
    $border-style: $toolbar-border-style,
 
    $spacer-width: $toolbar-spacer-width,
    $separator-color: $toolbar-separator-color,
    $separator-highlight-color: $toolbar-separator-highlight-color,
    $separator-horizontal-margin: $toolbar-separator-horizontal-margin,
    $separator-horizontal-height: $toolbar-separator-horizontal-height,
    $separator-horizontal-border-style: $toolbar-separator-horizontal-border-style,
    $separator-horizontal-border-width: $toolbar-separator-horizontal-border-width,
    $separator-vertical-margin: $toolbar-separator-vertical-margin,
    $separator-vertical-border-style: $toolbar-separator-vertical-border-style,
    $separator-vertical-border-width: $toolbar-separator-vertical-border-width,
 
    $text-font-family: $toolbar-text-font-family,
    $text-font-size: $toolbar-text-font-size,
    $text-font-weight: $toolbar-text-font-weight,
    $text-color: $toolbar-text-color,
    $text-line-height: $toolbar-text-line-height,
    $text-padding: $toolbar-text-padding,
 
    $scroller-width: $toolbar-scroller-width,
    $scroller-height: $toolbar-scroller-height,
    $scroller-vertical-width: $toolbar-scroller-vertical-width,
    $scroller-vertical-height: $toolbar-scroller-vertical-height,
    $scroller-border-color: $toolbar-scroller-border-color,
    $scroller-border-width: $toolbar-scroller-border-width,
    $scroller-vertical-border-color: $toolbar-scroller-vertical-border-color,
    $scroller-vertical-border-width: $toolbar-scroller-vertical-border-width,
    $scroller-top-margin: $toolbar-scroller-top-margin,
    $scroller-right-margin: $toolbar-scroller-right-margin,
    $scroller-bottom-margin: $toolbar-scroller-bottom-margin,
    $scroller-left-margin: $toolbar-scroller-left-margin,
    $scroller-cursor: $toolbar-scroller-cursor,
    $scroller-cursor-disabled: $toolbar-scroller-cursor-disabled,
    $scroller-opacity: $toolbar-scroller-opacity,
    $scroller-opacity-over: $toolbar-scroller-opacity-over,
    $scroller-opacity-pressed: $toolbar-scroller-opacity-pressed,
    $scroller-opacity-disabled: $toolbar-scroller-opacity-disabled,
    $scroller-glyph-color: $toolbar-scroller-glyph-color,
    $scroller-top-glyph: $toolbar-scroller-top-glyph,
    $scroller-right-glyph: $toolbar-scroller-right-glyph,
    $scroller-bottom-glyph: $toolbar-scroller-bottom-glyph,
    $scroller-left-glyph: $toolbar-scroller-left-glyph,
 
    $tool-background-image: $toolbar-tool-background-image,
    $tool-glyph-color: $toolbar-tool-glyph-color,
    $menu-overflow-glyph-color: $toolbar-menu-overflow-glyph-color,
    $menu-overflow-glyph: $toolbar-menu-overflow-glyph,
    $classic-scrollers: $toolbar-classic-scrollers 
) {
    $ui-padding: $vertical-spacing 0 $vertical-spacing $horizontal-spacing;
    .#{$prefix}toolbar-#{$ui} {
        padding: $ui-padding;
 
        @if $include-rtl {
            &.#{$prefix}rtl {
                padding: $vertical-spacing $horizontal-spacing $vertical-spacing 0;
            }
        }
 
        border-style: $border-style;
        border-color: $border-color;
        border-width: $border-width;
 
        @include background-gradient($background-color, $background-gradient);
 
        @if $include-ext-panel-tool {
            .#{$prefix}tool-img {
                @if $enable-font-icons {
                    color: $tool-glyph-color;
                } @else if not is-null($tool-background-image) {
                    background-image: theme-background-image($tool-background-image);
                }
                @if is-null($background-gradient) {
                    // 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;
                }
            }
        }
 
        .#{$prefix}toolbar-item {
            margin: 0 $horizontal-spacing 0 0;
 
            @if $include-rtl {
                &.#{$prefix}rtl {
                    margin: 0 0 0 $horizontal-spacing;
                }
            }
        }
 
        .#{$prefix}toolbar-separator-horizontal {
            margin: $separator-horizontal-margin;
            height: $separator-horizontal-height;
            border-style: $separator-horizontal-border-style;
            border-width: $separator-horizontal-border-width;
            border-left-color: $separator-color;
            border-right-color: $separator-highlight-color;
        }
 
        .#{$prefix}box-menu-after {
            margin: 0 $horizontal-spacing;
        }
    }
 
    .#{$prefix}toolbar-#{$ui}-vertical {
        padding: $vertical-spacing $horizontal-spacing 0;
 
        @if $include-rtl {
            &.#{$prefix}rtl {
                padding: $vertical-spacing $horizontal-spacing 0;
            }
        }
 
        .#{$prefix}toolbar-item {
            margin: 0 0 $vertical-spacing 0;
            @if $include-rtl {
                &.#{$prefix}rtl {
                    margin: 0 0 $vertical-spacing 0;
                }
            }
        }
 
        .#{$prefix}toolbar-separator-vertical {
            margin: $separator-vertical-margin;
            border-style: $separator-vertical-border-style;
            border-width: $separator-vertical-border-width;
            border-top-color: $separator-color;
            border-bottom-color: $separator-highlight-color;
        }
 
        .#{$prefix}box-menu-after {
            margin: $vertical-spacing 0;
        }
    }
 
    @if $include-slicer-gradient and not is-null($background-gradient) {
        .#{$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);
    }
 
    .#{$prefix}toolbar-text-#{$ui} {
        padding: $text-padding;
        color: $text-color;
        font: $text-font-weight #{$text-font-size}/#{$text-line-height} $text-font-family;
    }
 
    .#{$prefix}toolbar-spacer-#{$ui} {
        width: $spacer-width;
    }
 
    @if $include-ext-layout-container-boxoverflow-scroller {
        @include extjs-box-scroller-ui( 
            $ui: $ui, 
            $type: 'toolbar', 
            $horizontal-width: $scroller-width, 
            $horizontal-height: $scroller-height, 
            $vertical-width: $scroller-vertical-width, 
            $vertical-height: $scroller-vertical-height, 
            $top-margin: $scroller-top-margin, 
            $right-margin: $scroller-right-margin, 
            $bottom-margin: $scroller-bottom-margin, 
            $left-margin: $scroller-left-margin, 
            $glyph-color: $scroller-glyph-color, 
            $top-glyph: $scroller-top-glyph, 
            $right-glyph: $scroller-right-glyph, 
            $bottom-glyph: $scroller-bottom-glyph, 
            $left-glyph: $scroller-left-glyph, 
            $horizontal-border-color: $scroller-border-color, 
            $horizontal-border-width: $scroller-border-width, 
            $vertical-border-color: $scroller-vertical-border-color, 
            $vertical-border-width: $scroller-vertical-border-width, 
            $container-padding: $ui-padding, 
            $cursor: $scroller-cursor, 
            $cursor-disabled: $scroller-cursor-disabled, 
            $align: middle, 
            $opacity: $scroller-opacity, 
            $opacity-over: $scroller-opacity-over, 
            $opacity-pressed: $scroller-opacity-pressed, 
            $opacity-disabled: $scroller-opacity-disabled, 
            $classic: $classic-scrollers, 
            $include-vertical: if($ui == 'footer', false, true) 
        );
    }
 
    // EXTJSIV-8846: partially transparent png images do not display correctly 
    // in winXP/IE8 when the image element has a transparent background. 
    // to fix this, we give the element the same background-color as the toolbar. 
    .#{$prefix}ie8 {
        .#{$prefix}box-scroller-toolbar-#{$ui} {
            background-color: $background-color;
        }
    }
 
    @if $include-ext-layout-container-boxoverflow-menu {
        .#{$prefix}toolbar-more-icon {
            @if $enable-font-icons and ($menu-overflow-glyph != null) {
                @include font-icon($menu-overflow-glyph);
                color: $menu-overflow-glyph-color;
            } @else {
                background-image: theme-background-image('toolbar/#{$ui}-more');
 
                @if $include-rtl {
                    &.#{$prefix}rtl {
                        background-image: theme-background-image('toolbar/#{$ui}-more-left');
                    }
                }
            }
        }
    }
 
    @include x-slicer(toolbar-#{$ui});
}
 
@if $include-toolbar-default-ui {
    @include extjs-toolbar-ui( 
        $ui: 'default' 
    );
}
 
@if $include-toolbar-footer-ui {
    @include extjs-toolbar-ui( 
        $ui: 'footer', 
        $background-color: $toolbar-footer-background-color, 
        $border-width: $toolbar-footer-border-width, 
        $vertical-spacing: $toolbar-footer-vertical-spacing, 
        $horizontal-spacing: $toolbar-footer-horizontal-spacing 
    );
}