/**
 * Creates a visual theme for a Breadcrumb.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {string} [$ui-button-ui=$breadcrumb-button-ui]
 * The name of the button UI that will be used with this breadcrumb UI. Used for overriding
 * the button arrows for the given button UI when it is used inside a breadcrumb with this UI.
 *
 * @param {number} [$ui-button-spacing=$breadcrumb-button-spacing]
 * The space between the breadcrumb buttons
 *
 * @param {number} [$ui-arrow-width=$breadcrumb-arrow-width]
 * The width of the breadcrumb arrows when
 * {@link Ext.toolbar.Breadcrumb#useSplitButtons} is `false`
 *
 * @param {number} [$ui-split-width=$breadcrumb-split-width]
 * The width of breadcrumb arrows when {@link Ext.toolbar.Breadcrumb#useSplitButtons}
 * is `true`
 *
 * @param {boolean} [$ui-include-menu-active-arrow=$breadcrumb-include-menu-active-arrow]
 * `true` to include a separate background-image for menu arrows when a breadcrumb button's
 * menu is open
 *
 * @param {boolean} [$ui-include-split-over-arrow=$breadcrumb-include-split-over-arrow]
 * `true` to include a separate background-image for split arrows when a breadcrumb button's
 * arrow is hovered
 *
 * @param {string} [$ui-folder-icon=$breadcrumb-folder-icon]
 * The background-image for the "folder" icon
 *
 * @param {string} [$ui-folder-open-icon=$breadcrumb-folder-open-icon]
 * The background-image for the "open folder" icon
 *
 * @param {string} [$ui-leaf-icon=$breadcrumb-leaf-icon]
 * The background-image for the "leaf" icon
 *
 * @param {string/list} [$ui-folder-glyph=$breadcrumb-folder-glyph]
 * Glyph for the "folder" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-folder-glyph-color=$breadcrumb-folder-glyph-color]
 * The color to use for the "folder" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-folder-open-glyph=$breadcrumb-folder-open-glyph]
 * Glyph for the "open folder" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-folder-open-glyph-color=$breadcrumb-folder-open-glyph-color]
 * The color to use for the "open folder" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-leaf-glyph=$breadcrumb-leaf-glyph]
 * Glyph for the "leaf" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-leaf-glyph-color=$breadcrumb-leaf-glyph-color]
 * The color to use for the "leaf" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-arrow-glyph=$breadcrumb-arrow-glyph]
 * Glyph for the "arrow" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-arrow-glyph-rtl=$breadcrumb-arrow-glyph-rtl]
 * Glyph for the "arrow" icon when {@link Global_CSS#$enable-font-icons} is `true` and rtl is `true`.
 *
 * @param {color} [$ui-arrow-glyph-color=$breadcrumb-arrow-glyph-color]
 * The color to use for the "arrow" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} [$ui-arrow-expanded-glyph=$breadcrumb-arrow-expanded-glyph]
 * Glyph for the "expanded arrow" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {color} [$ui-arrow-expanded-glyph-color=$breadcrumb-arrow-expanded-glyph-color]
 * The color to use for the "expanded arrow" icon when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {number} [$ui-scroller-width=$breadcrumb-scroller-width]
 * The width of Breadcrumb scrollers
 *
 * @param {number} [$ui-scroller-height=$breadcrumb-scroller-height]
 * The height of Breadcrumb scrollers
 *
 * @param {color} [$ui-scroller-border-color=$breadcrumb-scroller-border-color]
 * The border-color of Breadcrumb scrollers
 *
 * @param {number} [$ui-scroller-border-width=$breadcrumb-scroller-border-width]
 * The border-width of Breadcrumb scrollers
 *
 * @param {number/list} [$ui-scroller-top-margin=$breadcrumb-scroller-top-margin]
 * The margin of "top" scroller buttons
 *
 * @param {number/list} [$ui-scroller-right-margin=$breadcrumb-scroller-right-margin]
 * The margin of "right" scroller buttons
 *
 * @param {number/list} [$ui-scroller-bottom-margin=$breadcrumb-scroller-bottom-margin]
 * The margin of "bottom" scroller buttons
 *
 * @param {number/list} [$ui-scroller-left-margin=$breadcrumb-scroller-left-margin]
 * The margin of "left" scroller buttons
 *
 * @param {string} [$ui-scroller-cursor=$breadcrumb-scroller-cursor]
 * The cursor of Breadcrumb scrollers
 *
 * @param {string} [$ui-scroller-cursor-disabled=$breadcrumb-scroller-cursor-disabled]
 * The cursor of disabled Breadcrumb scrollers
 *
 * @param {number} [$ui-scroller-opacity=$breadcrumb-scroller-opacity]
 * The opacity of Breadcrumb scroller buttons. Only applicable when
 * `$ui-classic-scrollers` is `false`.
 *
 * @param {number} [$ui-scroller-opacity-over=$breadcrumb-scroller-opacity-over]
 * The opacity of hovered Breadcrumb scroller buttons. Only applicable when
 * `$ui-classic-scrollers` is `false`.
 *
 * @param {number} [$ui-scroller-opacity-pressed=$breadcrumb-scroller-opacity-pressed]
 * The opacity of pressed Breadcrumb scroller buttons. Only applicable when
 * `$ui-classic-scrollers` is `false`.
 *
 * @param {number} [$ui-scroller-opacity-disabled=$breadcrumb-scroller-opacity-disabled]
 * The opacity of disabled Breadcrumb scroller buttons.
 *
 * @param {boolean} [$ui-classic-scrollers=$breadcrumb-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.Breadcrumb
 */
@mixin extjs-breadcrumb-ui(
    $ui: null,
    $ui-button-ui: $breadcrumb-button-ui,
    $ui-button-spacing: $breadcrumb-button-spacing,
    $ui-arrow-width: $breadcrumb-arrow-width,
    $ui-split-width: $breadcrumb-split-width,
    $ui-include-menu-active-arrow: $breadcrumb-include-menu-active-arrow,
    $ui-include-split-over-arrow: $breadcrumb-include-split-over-arrow,
    $ui-folder-icon: $breadcrumb-folder-icon,
    $ui-folder-open-icon: $breadcrumb-folder-open-icon,
    $ui-leaf-icon: $breadcrumb-leaf-icon,
    $ui-folder-glyph: $breadcrumb-folder-glyph,
    $ui-folder-glyph-color: $breadcrumb-folder-glyph-color,
    $ui-folder-open-glyph: $breadcrumb-folder-open-glyph,
    $ui-folder-open-glyph-color: $breadcrumb-folder-open-glyph-color,
    $ui-leaf-glyph: $breadcrumb-leaf-glyph,
    $ui-leaf-glyph-color: $breadcrumb-leaf-glyph-color,
    $ui-arrow-glyph: $breadcrumb-arrow-glyph,
    $ui-arrow-glyph-rtl: $breadcrumb-arrow-glyph-rtl,
    $ui-arrow-glyph-color: $breadcrumb-arrow-glyph-color,
    $ui-arrow-expanded-glyph: $breadcrumb-arrow-expanded-glyph,
    $ui-arrow-expanded-glyph-color: $breadcrumb-arrow-expanded-glyph-color,
    $ui-scroller-width: $breadcrumb-scroller-width,
    $ui-scroller-height: $breadcrumb-scroller-height,
    $ui-scroller-border-color: $breadcrumb-scroller-border-color,
    $ui-scroller-border-width: $breadcrumb-scroller-border-width,
    $ui-scroller-cursor: $breadcrumb-scroller-cursor,
    $ui-scroller-cursor-disabled: $breadcrumb-scroller-cursor-disabled,
    $ui-scroller-top-margin: $breadcrumb-scroller-top-margin,
    $ui-scroller-right-margin: $breadcrumb-scroller-right-margin,
    $ui-scroller-bottom-margin: $breadcrumb-scroller-bottom-margin,
    $ui-scroller-left-margin: $breadcrumb-scroller-left-margin,
    $ui-scroller-opacity: $breadcrumb-scroller-opacity,
    $ui-scroller-opacity-over: $breadcrumb-scroller-opacity-over,
    $ui-scroller-opacity-pressed: $breadcrumb-scroller-opacity-pressed,
    $ui-scroller-opacity-disabled: $breadcrumb-scroller-opacity-disabled,
    $ui-classic-scrollers: $breadcrumb-classic-scrollers 
) {
    .#{$prefix}breadcrumb-btn-#{$ui} {
        margin: 0 0 0 $ui-button-spacing;
    }
 
    .#{$prefix}breadcrumb-icon-folder-#{$ui} {
        @if $enable-font-icons and ($ui-folder-glyph != null) {
            @include font-icon($ui-folder-glyph);
            color: $ui-folder-glyph-color;
        } @else {
            background-image: theme-background-image($ui-folder-icon);
        }
 
        .#{$prefix}btn-menu-active & {
            @if $enable-font-icons and ($ui-folder-open-glyph != null) {
                @include font-icon($ui-folder-open-glyph);
                color: $ui-folder-open-glyph-color;
            } @else {
                background-image: theme-background-image($ui-folder-open-icon);
            }
        }
    }
 
    .#{$prefix}breadcrumb-icon-leaf-#{$ui} {
        @if $enable-font-icons and ($ui-leaf-glyph != null) {
            @include font-icon($ui-leaf-glyph);
            color: $ui-leaf-glyph-color;
        } @else {
            background-image: theme-background-image($ui-leaf-icon);
        }
    }
 
    .#{$prefix}btn-wrap-#{$ui-button-ui}-small.#{$prefix}btn-arrow:after {
        .#{$prefix}breadcrumb-btn & {
            width: $ui-arrow-width;
            background-image: theme-background-image('breadcrumb/#{$ui}-arrow');
        }
 
        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}breadcrumb-btn & {
                background-image: theme-background-image('breadcrumb/#{$ui}-arrow-rtl');
            }
        }
 
        @if $ui-include-menu-active-arrow {
            .#{$prefix}btn-menu-active.#{$prefix}breadcrumb-btn & {
                background-image: theme-background-image('breadcrumb/#{$ui}-arrow-open');
            }
 
            @if $include-rtl {
                .#{$prefix}rtl.#{$prefix}btn-menu-active.#{$prefix}breadcrumb-btn & {
                    background-image: theme-background-image('breadcrumb/#{$ui}-arrow-open-rtl');
                }
            }
        }
    }
 
    .#{$prefix}btn-wrap-#{$ui-button-ui}-small.#{$prefix}btn-split:after {
        .#{$prefix}breadcrumb-btn & {
            width: $ui-split-width;
 
            @if $enable-font-icons and ($ui-arrow-glyph !=  null) {
                @include font-icon($ui-arrow-glyph, $pseudo: false);
                color: $ui-arrow-glyph-color;
                // !important needed to override base button styles which are far more specific 
                background: none !important;
            } @else {
                background-image: theme-background-image('breadcrumb/#{$ui}-split-arrow');
            }
        }
 
        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}breadcrumb-btn & {
                @if $enable-font-icons and ($ui-arrow-glyph-rtl !=  null) {
                    @include font-icon($ui-arrow-glyph-rtl, $pseudo: false);
                    background: none !important;
                } @else {
                    background-image: theme-background-image('breadcrumb/#{$ui}-split-arrow-rtl');
                }
            }
        }
 
        @if $ui-include-split-over-arrow and ((not $enable-font-icons) or ($ui-arrow-glyph == null)) {
            .#{$prefix}btn-over.#{$prefix}breadcrumb-btn & {
                background-image: theme-background-image('breadcrumb/#{$ui}-split-arrow-over');
            }
 
            @if $include-rtl {
                .#{$prefix}rtl.#{$prefix}btn-over.#{$prefix}breadcrumb-btn & {
                    background-image: theme-background-image('breadcrumb/#{$ui}-split-arrow-over-rtl');
                }
            }
        }
 
        @if $ui-include-menu-active-arrow {
            .#{$prefix}btn-menu-active.#{$prefix}breadcrumb-btn & {
                @if $enable-font-icons and ($ui-arrow-expanded-glyph !=  null) {
                    @include font-icon($ui-arrow-expanded-glyph, $pseudo: false);
                    color: $ui-arrow-expanded-glyph-color;
                    // !important needed to override base button styles which are far more specific 
                    background: none !important;
                } @else {
                    background-image: theme-background-image('breadcrumb/#{$ui}-split-arrow-open');
                }
            }
 
            @if $include-rtl and ((not $enable-font-icons) or ($ui-arrow-glyph == null)) {
                .#{$prefix}rtl.#{$prefix}btn-menu-active.#{$prefix}breadcrumb-btn & {
                    background-image: theme-background-image('breadcrumb/#{$ui}-split-arrow-open-rtl');
                }
            }
        }
    }
 
    @if $include-ext-layout-container-boxoverflow-scroller {
        @include extjs-box-scroller-ui( 
            $ui: $ui, 
            $type: 'breadcrumb', 
            $horizontal-width: $ui-scroller-width, 
            $horizontal-height: $ui-scroller-height, 
            $top-margin: $ui-scroller-top-margin, 
            $right-margin: $ui-scroller-right-margin, 
            $bottom-margin: $ui-scroller-bottom-margin, 
            $left-margin: $ui-scroller-left-margin, 
            $horizontal-border-color: $ui-scroller-border-color, 
            $horizontal-border-width: $ui-scroller-border-width, 
            $cursor: $ui-scroller-cursor, 
            $cursor-disabled: $ui-scroller-cursor-disabled, 
            $align: middle, 
            $opacity: $ui-scroller-opacity, 
            $opacity-over: $ui-scroller-opacity-over, 
            $opacity-pressed: $ui-scroller-opacity-pressed, 
            $opacity-disabled: $ui-scroller-opacity-disabled, 
            $classic: $ui-classic-scrollers, 
            $include-vertical: false 
        );
    }
}
 
@if $include-breadcrumb-default-ui {
    @include extjs-breadcrumb-ui( 
        $ui: 'default' 
    );
}