/**
 * @class Ext.Tool
 */
 
/**
 * @var {color}
 * Tool color
 */
$tool-color: dynamic($neutral-dark-color);
 
/**
 * @var {number}
 * Tool color when hovered
 */
$tool-hovered-color: dynamic(null);
 
/**
 * @var {number}
 * Tool color when pressed
 */
$tool-pressed-color: dynamic(null);
 
/**
 * @var {number}
 * Tool color when disabled
 */
$tool-disabled-color: dynamic(null);
 
/**
 * @var {color}
 * Tool background-color
 */
$tool-background-color: dynamic(null);
 
/**
 * @var {number}
 * Tool background-color when hovered
 */
$tool-hovered-background-color: dynamic(null);
 
/**
 * @var {number}
 * Tool background-color when pressed
 */
$tool-pressed-background-color: dynamic(null);
 
/**
 * @var {number}
 * Tool background-color when disabled
 */
$tool-disabled-background-color: dynamic(null);
 
/**
 * @var {number}
 * Tool opacity
 */
$tool-opacity: dynamic(null);
 
/**
 * @var {number}
 * Tool opacity when hovered
 */
$tool-hovered-opacity: dynamic(.8);
 
/**
 * @var {number}
 * Tool opacity when pressed
 */
$tool-pressed-opacity: dynamic(.6);
 
/**
 * @var {number}
 * Tool opacity when disabled
 */
$tool-disabled-opacity: dynamic(.3);
 
/**
 * @var {number}
 * Tool border radius
 */
$tool-border-radius: dynamic(null);
 
/**
 * @var {number}
 * Tool border radius in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tool-border-radius-big: dynamic(null);
 
/**
 * @var {number}
 * Tool icon size
 */
$tool-size: dynamic(16px);
 
/**
 * @var {number}
 * Tool icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tool-size-big: dynamic(24px);
 
/**
 * @var {number}
 * Tool width
 */
$tool-width: dynamic(null);
 
/**
 * @var {number}
 * Tool width in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tool-width-big: dynamic(null);
 
/**
 * @var {number}
 * Tool height
 */
$tool-height: dynamic(null);
 
/**
 * @var {number}
 * Tool height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tool-height-big: dynamic(null);
 
/**
 * @var {number}
 * Tool margin
 */
$tool-margin: dynamic(null);
 
/**
 * @var {number}
 * Tool margin in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tool-margin-big: dynamic(null);
 
/**
 * @var {number}
 * Tool font-size
 */
$tool-font-size: dynamic(null);
 
/**
 * @var {number}
 * Tool font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tool-font-size-big: dynamic(null);
 
/**
 * @var {number}
 * The space between Tools
 */
$tool-spacing: dynamic(6px);
 
/**
 * @var {number}
 * The space between Tools in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$tool-spacing-big: dynamic(8px);
 
/**
 * @var {string}
 * Tool cursor
 */
$tool-cursor: dynamic(pointer);
 
/**
 * @var {string}
 * Tool cursor when disabled
 */
$tool-disabled-cursor: dynamic(default);
 
/**
 * @var {number}
 * Tool outline width when focused
 */
$tool-focused-outline-width: dynamic(1px);
 
/**
 * @var {string}
 * Tool outline style when focused
 */
$tool-focused-outline-style: dynamic(solid);
 
/**
 * @var {color}
 * Tool outline color when focused
 */
$tool-focused-outline-color: dynamic($base-color);
 
/**
 * @var {number}
 * Tool outline offset when focused
 */
$tool-focused-outline-offset: dynamic(null);
 
/**
 * @var {Map}
 * Parameters for the `itemheader` tool UI used for tools in a list item header
 */
$tool-itemheader-ui: dynamic(null);
 
/**
 * @var {Map}
 * Parameters for the `rowheader` tool UI used for tools in a grid row header
 * @ui tool-ui
 */
$tool-rowheader-ui: dynamic(null);
 
/**
 * @var {Map}
 * Parameters for the `listitem` tool UI used for tools in a list item
 */
$tool-listitem-ui: dynamic(null);
 
/**
 * @var {Map}
 * Parameters for the `gridcell` tool UI used for tools in a grid cell
 */
$tool-gridcell-ui: dynamic(null);
 
/**
 * @var {Map}
 * Parameters for the `gridcolumn` tool UI used for tools in a grid column header
 */
$tool-gridcolumn-ui: dynamic(null);
 
/**
 * @var {Map}
 * Parameters for the `boxscroller` tool UI used for tools in any container using box scroller
 * @ui tool-ui
 */
$tool-boxscroller-ui: dynamic((
    width: 24px, 
    height: 24px, 
    width-big: 32px, 
    height-big: 32px 
));
 
/**
 * @var {Map}
 * Parameters for the `boxscroller` tool UI used for tools in toolbar using box scroller
 * @ui tool-ui
 */
$tool-boxscroller-toolbar-ui:  dynamic((
    color: #fff, 
    opacity: .5, 
    hovered-opacity: .6, 
    pressed-opacity: .7 
));
 
/**
 * @var {Map}
 * Parameters for the `boxscroller` tool UI used for tools in a menu using box scroller
 * @ui tool-ui
 */
$tool-boxscroller-menu-ui: dynamic(null);
 
/**
 * @var {Map}
 * Parameters for the `boxscroller` tool UI used for tools in a tabbar using box scroller
 * @ui tool-ui
 */
$tool-boxscroller-tabbar-ui: dynamic((
    color: #fff, 
    opacity: .5, 
    hovered-opacity: .6, 
    pressed-opacity: .7 
));
 
/**
 * Creates a visual theme for a tool.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {String} [$xtype=tool] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $color
 * The color of tool icon
 *
 * @param {number} $hovered-color
 * Tool color when hovered
 *
 * @param {number} $pressed-color
 * Tool color when pressed
 *
 * @param {number} $disabled-color
 * Tool color when disabled
 *
 * @param {color} $background-color
 * The background color of tool icon
 *
 * @param {number} $hovered-background-color
 * Tool background color when hovered
 *
 * @param {number} $pressed-background-color
 * Tool background color when pressed
 *
 * @param {number} $disabled-background-color
 * Tool background-color when disabled
 *
 * @param {number} $opacity
 * Tool opacity
 *
 * @param {number} $hovered-opacity
 * Tool opacity when hovered
 *
 * @param {number} $pressed-opacity
 * Tool opacity when pressed
 *
 * @param {number} $disabled-opacity
 * Tool opacity when disabled
 *
 * @param {number} $border-radius
 * Tool border radius
 *
 * @param {number} $border-radius-big
 * Tool border radius in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $size
 * Tool icon size
 *
 * @param {number} $size-big
 * Tool icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $width
 * Tool width
 *
 * @param {number} $width-big in the {@link Global_CSS#$enable-big big} sizing scheme
 * Tool width-big
 *
 * @param {number} $height
 * Tool height
 *
 * @param {number} $height-big in the {@link Global_CSS#$enable-big big} sizing scheme
 * Tool height-big
 *
 * @param {number} $margin
 * Tool margin
 *
 * @param {number} $margin-big in the {@link Global_CSS#$enable-big big} sizing scheme
 * Tool margin-big
 *
 * @param {number} $font-size
 * Tool icon font-size
 *
 * @param {number} $font-size-big
 * Tool icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $spacing
 * The space between Tools
 *
 * @param {number} $spacing-big
 * The space between Tools in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $cursor
 * Tool cursor
 *
 * @param {string} $disabled-cursor
 * Tool cursor when disabled
 *
 * @param {number} $focused-outline-width
 * Tool outline width when focused
 *
 * @param {string} $focused-outline-style
 * Tool outline style when focused
 *
 * @param {color} $focused-outline-color
 * Tool outline color when focused
 *
 * @param {number} $focused-outline-offset
 * Tool outline offset when focused
 */
@mixin tool-ui(
    $ui: null,
    $xtype: tool,
    $color: null,
    $hovered-color: null,
    $pressed-color: null,
    $disabled-color: null,
    $background-color: null,
    $hovered-background-color: null,
    $pressed-background-color: null,
    $disabled-background-color: null,
    $opacity: null,
    $hovered-opacity: null,
    $pressed-opacity: null,
    $disabled-opacity: null,
    $border-radius: null,
    $border-radius-big: null,
    $size: null,
    $size-big: null,
    $width: null,
    $width-big: null,
    $height: null,
    $height-big: null,
    $margin: null,
    $margin-big: null,
    $font-size: null,
    $font-size-big: null,
    $spacing: null,
    $spacing-big: null,
    $cursor: null,
    $disabled-cursor: null,
    $focused-outline-width: null,
    $focused-outline-style: null,
    $focused-outline-color: null,
    $focused-outline-offset: null
) {
    $ui-suffix: ui-suffix($ui);
 
    .#{$prefix}#{$xtype}#{$ui-suffix} {
        width: $width;
        height: $height;
        margin: $margin;
        cursor: $cursor;
        border-radius: $border-radius;
 
        @if $enable-big {
            .#{$prefix}big & {
                width: $width-big;
                height: $height-big;
                margin: $margin-big;
                border-radius: $border-radius-big;
            }
        }
 
        .#{$prefix}icon-el {
            background-color: $background-color;
            opacity: $opacity;
 
            @include icon( 
                $color: $color, 
                $size: $size, 
                $size-big: $size-big, 
                $font-size: $font-size, 
                $font-size-big: $font-size-big 
            );
        }
 
        @if $spacing != null {
            &.#{$prefix}start {
                margin: 0 $spacing 0 0;
 
                @if $enable-big {
                    .#{$prefix}big & {
                        margin: 0 $spacing-big 0 0;
                    }
                }
 
                .#{$prefix}reverse > & {
                    margin: 0 0 0 $spacing;
 
                    @if $enable-big {
                        .#{$prefix}big & {
                            margin: 0 0 0 $spacing-big;
                        }
                    }
                }
 
                .#{$prefix}vertical > & {
                    margin: 0 0 $spacing;
 
                    @if $enable-big {
                        .#{$prefix}big & {
                            margin: 0 0 $spacing-big;
                        }
                    }
                }
 
                .#{$prefix}vertical.#{$prefix}reverse > & {
                    margin: $spacing 0 0;
 
                    @if $enable-big {
                        .#{$prefix}big & {
                            margin: $spacing-big 0 0;
                        }
                    }
                }
            }
 
            &.#{$prefix}end {
                margin: 0 0 0 $spacing;
 
                @if $enable-big {
                    .#{$prefix}big & {
                        margin: 0 0 0 $spacing-big;
                    }
                }
 
                .#{$prefix}reverse > & {
                    margin: 0 $spacing 0 0;
 
                    @if $enable-big {
                        .#{$prefix}big & {
                            margin: 0 $spacing-big 0 0;
                        }
                    }
                }
 
                .#{$prefix}vertical > & {
                    margin: $spacing 0 0;
 
                    @if $enable-big {
                        .#{$prefix}big & {
                            margin: $spacing-big 0 0;
                        }
                    }
                }
 
                .#{$prefix}vertical.#{$prefix}reverse > & {
                    margin: 0 0 $spacing;
 
                    @if $enable-big {
                        .#{$prefix}big & {
                            margin: 0 0 $spacing-big;
                        }
                    }
                }
            }
        }
 
        &.#{$prefix}hovered {
            color: $hovered-color;
            background-color: $hovered-background-color;
 
            .#{$prefix}icon-el {
                opacity: $hovered-opacity;
            }
        }
 
        &.#{$prefix}pressed {
            color: $pressed-color;
            background-color: $pressed-background-color;
 
            .#{$prefix}icon-el {
                opacity: $pressed-opacity;
            }
        }
 
        &.#{$prefix}focused {
            .#{$prefix}keyboard-mode & {
                @include outline($focused-outline-width, $focused-outline-style, $focused-outline-color, $focused-outline-offset);
            }
        }
 
        &.#{$prefix}disabled {
            cursor: $disabled-cursor;
        }
 
        // Passive (purely decorative) Tools are set disabled, but they must not 
        // *appear* disabled. 
        &.#{$prefix}disabled:not(.#{$prefix}passive) {
            color: $disabled-color;
            background-color: $disabled-background-color;
 
            .#{$prefix}icon-el {
                opacity: $disabled-opacity;
            }
        }
    }
}
 
// ---------------------------------------------------------------- 
// Global variables that do not affect the UI 
// ---------------------------------------------------------------- 
 
//# fashion replaces $panel-tool-close-icon 
/**
 * @var {string/list}
 * The "close" tool icon
 */
$tool-close-icon: dynamic($fa-var-close $font-icon-font-family);
 
/**
 * @var {string/list}
 * The "disclosure" tool icon
 */
$tool-disclosure-icon: dynamic($fa-var-arrow-circle-right $font-icon-font-family);
 
//# fashion replaces $panel-tool-minimize-icon 
/**
 * @var {string/list}
 * The "minimize" tool icon
 */
$tool-minimize-icon: dynamic($ext-var-minimize ExtJS);
 
//# fashion replaces $panel-tool-maximize-icon 
/**
 * @var {string/list}
 * The "maximize" tool icon
 */
$tool-maximize-icon: dynamic($fa-var-expand $font-icon-font-family);
 
//# fashion replaces $panel-tool-restore-icon 
/**
 * @var {string/list}
 * The "restore" tool icon
 */
$tool-restore-icon: dynamic($fa-var-compress $font-icon-font-family);
 
//# fashion replaces $panel-tool-toggle-up-icon 
/**
 * @var {string/list}
 * The up "toggle" tool icon
 */
$tool-toggle-up-icon: dynamic($fa-var-chevron-up $font-icon-font-family);
 
//# fashion replaces $panel-tool-toggle-down-icon 
/**
 * @var {string/list}
 * The down "toggle" tool icon
 */
$tool-toggle-down-icon: dynamic($fa-var-chevron-down $font-icon-font-family);
 
//# fashion replaces $panel-tool-gear-icon 
/**
 * @var {string/list}
 * The "gear" tool icon
 */
$tool-gear-icon: dynamic($fa-var-cog $font-icon-font-family);
 
//# fashion replaces $panel-tool-prev-icon 
/**
 * @var {string/list}
 * The "prev" tool icon
 */
$tool-prev-icon: dynamic($fa-var-chevron-left $font-icon-font-family);
 
//# fashion replaces $panel-tool-next-icon 
/**
 * @var {string/list}
 * The "next" tool icon
 */
$tool-next-icon: dynamic($fa-var-chevron-right $font-icon-font-family);
 
//# fashion replaces $panel-tool-pin-icon 
/**
 * @var {string/list}
 * The "pin" tool icon
 */
$tool-pin-icon: dynamic($fa-var-thumb-tack $font-icon-font-family);
 
//# fashion replaces $panel-tool-unpin-icon 
/**
 * @var {string/list}
 * The "unpin" tool icon
 */
$tool-unpin-icon: dynamic($ext-var-unpin ExtJS);
 
//# fashion replaces $panel-tool-right-icon 
/**
 * @var {string/list}
 * The "right" tool icon
 */
$tool-right-icon: dynamic($fa-var-caret-right $font-icon-font-family);
 
//# fashion replaces $panel-tool-left-icon 
/**
 * @var {string/list}
 * The "left" tool icon
 */
$tool-left-icon: dynamic($fa-var-caret-left $font-icon-font-family);
 
//# fashion replaces $panel-tool-down-icon 
/**
 * @var {string/list}
 * The "down" tool icon
 */
$tool-down-icon: dynamic($fa-var-caret-down $font-icon-font-family);
 
 
//# fashion replaces $panel-tool-up-icon 
/**
 * @var {string/list}
 * The "up" tool icon
 */
$tool-up-icon: dynamic($fa-var-caret-up $font-icon-font-family);
 
//# fashion replaces $panel-tool-refresh-icon 
/**
 * @var {string/list}
 * The "refresh" tool icon
 */
$tool-refresh-icon: dynamic($fa-var-refresh $font-icon-font-family);
 
//# fashion replaces $panel-tool-plus-icon 
/**
 * @var {string/list}
 * The "plus" tool icon
 */
$tool-plus-icon: dynamic($fa-var-plus $font-icon-font-family);
 
//# fashion replaces $panel-tool-menu-icon 
/**
 * @var {string/list}
 * The "menu" tool icon
 */
$tool-menu-icon: dynamic($fa-var-bars $font-icon-font-family);
 
//# fashion replaces $panel-tool-minus-icon 
/**
 * @var {string/list}
 * The "minus" tool icon
 */
$tool-minus-icon: dynamic($fa-var-minus $font-icon-font-family);
 
//# fashion replaces $panel-tool-search-icon 
/**
 * @var {string/list}
 * The "search" tool icon
 */
$tool-search-icon: dynamic($fa-var-search $font-icon-font-family);
 
//# fashion replaces $panel-tool-save-icon 
/**
 * @var {string/list}
 * The "save" tool icon
 */
$tool-save-icon: dynamic($fa-var-check $font-icon-font-family);
 
//# fashion replaces $panel-tool-help-icon 
/**
 * @var {string/list}
 * The "help" tool icon
 */
$tool-help-icon: dynamic($fa-var-question $font-icon-font-family);
 
//# fashion replaces $panel-tool-print-icon 
/**
 * @var {string/list}
 * The "print" tool icon
 */
$tool-print-icon: dynamic($fa-var-print $font-icon-font-family);
 
//# fashion replaces $panel-tool-expand-icon 
/**
 * @var {string/list}
 * The "expand" tool icon
 */
$tool-expand-icon: dynamic($ext-var-expand ExtJS);
 
//# fashion replaces $panel-tool-collapse-icon 
/**
 * @var {string/list}
 * The "collapse" tool icon
 */
$tool-collapse-icon: dynamic($ext-var-collapse ExtJS);
 
//# fashion replaces $panel-tool-resize-icon 
/**
 * @var {string/list}
 * The "resize" tool icon
 */
$tool-resize-icon: dynamic($fa-var-arrows-h $font-icon-font-family);
 
//# fashion replaces $panel-tool-move-icon 
/**
 * @var {string/list}
 * The "move" tool icon
 */
$tool-move-icon: dynamic($fa-var-arrows $font-icon-font-family);
 
//# fashion replaces $panel-tool-expand-bottom-icon 
/**
 * @var {string/list}
 * The downward "expand" tool icon
 */
$tool-expand-bottom-icon: dynamic($fa-var-caret-down $font-icon-font-family);
 
//# fashion replaces $panel-tool-collapse-bottom-icon 
/**
 * @var {string/list}
 * The downward "collapse" tool icon
 */
$tool-collapse-bottom-icon: dynamic($fa-var-caret-down $font-icon-font-family);
 
//# fashion replaces $panel-tool-expand-top-icon 
/**
 * @var {string/list}
 * The upward "expand" tool icon
 */
$tool-expand-top-icon: dynamic($fa-var-caret-up $font-icon-font-family);
 
//# fashion replaces $panel-tool-collapse-top-icon 
/**
 * @var {string/list}
 * The upward "collapse" tool icon
 */
$tool-collapse-top-icon: dynamic($fa-var-caret-up $font-icon-font-family);
 
//# fashion replaces $panel-tool-expand-left-icon 
/**
 * @var {string/list}
 * The left "expand" tool icon
 */
$tool-expand-left-icon: dynamic($fa-var-caret-left $font-icon-font-family);
 
//# fashion replaces $panel-tool-collapse-left-icon 
/**
 * @var {string/list}
 * The left "collapse" tool icon
 */
$tool-collapse-left-icon: dynamic($fa-var-caret-left $font-icon-font-family);
 
//# fashion replaces $panel-tool-expand-right-icon 
/**
 * @var {string/list}
 * The right "expand" tool icon
 */
$tool-expand-right-icon: dynamic($fa-var-caret-right $font-icon-font-family);
 
//# fashion replaces $panel-tool-collapse-right-icon 
/**
 * @var {string/list}
 * The right "collapse" tool icon
 */
$tool-collapse-right-icon: dynamic($fa-var-caret-right $font-icon-font-family);
 
/**
 * @var {string/list}
 * The scroll up tool icon used by box scroller
 */
$tool-scroll-up-icon: dynamic($fa-var-chevron-up $font-icon-font-family);
 
/**
 * @var {string/list}
 * The scroll down tool icon used by box scroller
 */
$tool-scroll-down-icon: dynamic($fa-var-chevron-down $font-icon-font-family);
 
/**
 * @var {string/list}
 * The scroll left tool icon used by box scroller
 */
$tool-scroll-left-icon: dynamic($fa-var-chevron-left $font-icon-font-family);
 
/**
 * @var {string/list}
 * The scroll right tool icon used by box scroller
 */
$tool-scroll-right-icon: dynamic($fa-var-chevron-right $font-icon-font-family);