/**
 * Creates a visual theme for a Button.  This mixin is not {@link #scale} aware, and therefore
 * does not provide defaults for most parameters, so it is advisable to use one of the
 * following mixins instead when creating a custom buttonUI:
 *
 * #extjs-button-small-ui - creates a button UI for a small button
 * #extjs-button-medium-ui - creates a button UI for a medium button
 * #extjs-button-large-ui - creates a button UI for a large button
 * #extjs-button-toolbar-small-ui - creates a button UI for a small toolbar button
 * #extjs-button-toolbar-medium-ui - creates a button UI for a medium toolbar button
 * #extjs-button-toolbar-large-ui - creates a button UI for a large toolbar button
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {number} [$border-radius=0px]
 * The border-radius of the button
 *
 * @param {number} [$border-width=0px]
 * The border-width of the button
 *
 * @param {color} $border-color
 * The border-color of the button
 *
 * @param {color} $border-color-over
 * The border-color of the button when the cursor is over the button
 *
 * @param {color} $border-color-focus
 * The border-color of the button when focused
 *
 * @param {color} $border-color-pressed
 * The border-color of the button when pressed
 *
 * @param {color} $border-color-focus-over
 * The border-color of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {color} $border-color-focus-pressed
 * The border-color of the button when focused and pressed
 *
 * @param {color} $border-color-disabled
 * The border-color of the button when disabled
 *
 * @param {number} $padding
 * The amount of padding inside the border of the button on all sides
 *
 * @param {number} $text-padding
 * The amount of horizontal space to add to the left and right of the button text
 *
 * @param {color} $background-color
 * The background-color of the button
 *
 * @param {color} $background-color-over
 * The background-color of the button when the cursor is over the button
 *
 * @param {color} $background-color-focus
 * The background-color of the button when focused
 *
 * @param {color} $background-color-pressed
 * The background-color of the button when pressed
 *
 * @param {color} $background-color-focus-over
 * The background-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} $background-color-focus-pressed
 * The background-color of the button when focused and pressed
 *
 * @param {color} $background-color-disabled
 * The background-color of the button when disabled
 *
 * @param {string/list} $background-gradient
 * The background-gradient for the button.  Can be either the name of a predefined gradient
 * or a list of color stops. Used as the `$type` parameter for {@link Global_CSS#background-gradient}.
 *
 * @param {string} $background-gradient-over
 * The background-gradient to use when the cursor is over the button. Can be either the
 * name of a predefined gradient or a list of color stops. Used as the `$type` parameter
 * for {@link Global_CSS#background-gradient}.
 *
 * @param {string} $background-gradient-focus
 * The background-gradient to use when the the button is focused. Can be either the name
 * of a predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 *
 * @param {string} $background-gradient-pressed
 * The background-gradient to use when the the button is pressed. Can be either the name
 * of a predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 *
 * @param {string} $background-gradient-focus-over
 * The background-gradient to use when the the button is focused and the cursor is over
 * the button. Can be either the name of a predefined gradient or a list of color stops.
 * Used as the `$type` parameter for {@link Global_CSS#background-gradient}.
 *
 * @param {string} $background-gradient-focus-pressed
 * The background-gradient to use when the the button is focused and pressed. Can be
 * either the name of a predefined gradient or a list of color stops. Used as the `$type`
 * parameter for {@link Global_CSS#background-gradient}.
 *
 * @param {string} $background-gradient-disabled
 * The background-gradient to use when the the button is disabled. Can be either the name
 * of a predefined gradient or a list of color stops. Used as the `$type` parameter for
 * {@link Global_CSS#background-gradient}.
 *
 * @param {color} $color
 * The text color of the button
 *
 * @param {color} $color-over
 * The text color of the button when the cursor is over the button
 *
 * @param {color} $color-focus
 * The text color of the button when the button is focused
 *
 * @param {color} $color-pressed
 * The text color of the button when the button is pressed
 *
 * @param {color} $color-focus-over
 * The text color of the button when the button is focused and the cursor is over the button
 *
 * @param {color} $color-focus-pressed
 * The text color of the button when the button is focused and pressed
 *
 * @param {color} $color-disabled
 * The text color of the button when the button is disabled
 *
 * @param {number/list} $inner-border-width
 * The inner border-width of the button
 *
 * @param {number/list} $inner-border-width-over
 * The inner border-width of the button when the cursor is over the button
 *
 * @param {number/list} $inner-border-width-focus
 * The inner border-width of the button when focused
 *
 * @param {number/list} $inner-border-width-pressed
 * The inner border-width of the button when pressed
 *
 * @param {number/list} $inner-border-width-focus-over
 * The inner border-width of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {number/list} $inner-border-width-focus-pressed
 * The inner border-width of the button when focused and pressed
 *
 * @param {number/list} $inner-border-width-disabled
 * The inner border-width of the button when disabled
 *
 * @param {color} $inner-border-color
 * The inner border-color of the button
 *
 * @param {color} $inner-border-color-over
 * The inner border-color of the button when the cursor is over the button
 *
 * @param {color} $inner-border-color-focus
 * The inner border-color of the button when focused
 *
 * @param {color} $inner-border-color-pressed
 * The inner border-color of the button when pressed
 *
 * @param {color} $inner-border-color-focus-over
 * The inner border-color of the button when the button is focused and the cursor is over
 * the button
 *
 * @param {color} $inner-border-color-focus-pressed
 * The inner border-color of the button when focused and pressed
 *
 * @param {color} $inner-border-color-disabled
 * The inner border-color of the button when disabled
 *
 * @param {number} $body-outline-width-focus
 * The body outline width of the button when focused
 *
 * @param {string} $body-outline-style-focus
 * The body outline-style of the button when focused
 *
 * @param {color} $body-outline-color-focus
 * The body outline color of the button when focused
 *
 * @param {number} $font-size
 * The font-size of the button
 *
 * @param {number} $font-size-over
 * The font-size of the button when the cursor is over the button
 *
 * @param {number} $font-size-focus
 * The font-size of the button when the button is focused
 *
 * @param {number} $font-size-pressed
 * The font-size of the button when the button is pressed
 *
 * @param {number} $font-size-focus-over
 * The font-size of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {number} $font-size-focus-pressed
 * The font-size of the button when the button is focused and pressed
 *
 * @param {number} $font-size-disabled
 * The font-size of the button when the button is disabled
 *
 * @param {string} $font-weight
 * The font-weight of the button
 *
 * @param {string} $font-weight-over
 * The font-weight of the button when the cursor is over the button
 *
 * @param {string} $font-weight-focus
 * The font-weight of the button when the button is focused
 *
 * @param {string} $font-weight-pressed
 * The font-weight of the button when the button is pressed
 *
 * @param {string} $font-weight-focus-over
 * The font-weight of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} $font-weight-focus-pressed
 * The font-weight of the button when the button is focused and pressed
 *
 * @param {string} $font-weight-disabled
 * The font-weight of the button when the button is disabled
 *
 * @param {string} $font-family
 * The font-family of the button
 *
 * @param {string} $font-family-over
 * The font-family of the button when the cursor is over the button
 *
 * @param {string} $font-family-focus
 * The font-family of the button when the button is focused
 *
 * @param {string} $font-family-pressed
 * The font-family of the button when the button is pressed
 *
 * @param {string} $font-family-focus-over
 * The font-family of the button when the button is focused and the cursor is over the
 * button
 *
 * @param {string} $font-family-focus-pressed
 * The font-family of the button when the button is focused and pressed
 *
 * @param {string} $font-family-disabled
 * The font-family of the button when the button is disabled
 *
 * @param {number} $line-height
 * The line-height of the button text
 *
 * @param {number} $icon-size
 * The size of the button icon
 *
 * @param {number} $glyph-font-size
 * The font-size for the button glyph
 *
 * @param {number} $icon-spacing
 * The space between the button's icon and text
 *
 * @param {color} $glyph-color
 * The color of the button's {@link #glyph} icon
 *
 * @param {number} [$glyph-opacity=1]
 * The opacity of the button's {@link #glyph} icon
 *
 * @param {number} $arrow-width
 * The width of the button's {@link #cfg-menu} arrow
 *
 * @param {number} $arrow-height
 * The height of the button's {@link #cfg-menu} arrow
 *
 * @param {string/list} $arrow-glyph
 * Glyph for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {string/list} $arrow-glyph-color
 * Glyph color for the button arrow when when {@link Global_CSS#$enable-font-icons} is `true`.
 *
 * @param {number} $split-width
 * The width of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} $split-height
 * The height of a {@link Ext.button.Split Split Button}'s arrow
 *
 * @param {number} $split-line-width
 * The default width for a {@link Ext.button.Split Split Button}'s line.
 * Themes that include the line in the arrow background image should set this to 0
 *
 * @param {color} $split-line-color
 * The color for a {@link Ext.button.Split Split Button}'s line.
 * Only applicable when `$split-line-width` is greater than 0.
 *
 * @param {boolean} [$include-ui-menu-arrows=$button-include-ui-menu-arrows]
 * True to include the UI name in the file name of the {@link #cfg-menu}
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-ui-split-arrows=$button-include-ui-split-arrows]
 * True to include the UI name in the file name of the {@link Ext.button.Split Split Button}'s
 * arrow icon. Set this to false to share the same arrow bewteen multiple UIs.
 *
 * @param {boolean} [$include-split-noline-arrows=$button-include-split-noline-arrows]
 * True to add a "-noline" suffix to the file name of the {@link Ext.button.Split Split Button}'s 
 * arrow icon.  Used for hiding the split line when toolbar buttons are in their default
 * state.
 *
 * @param {boolean} [$include-split-over-arrows=$button-include-split-over-arrows]
 * True to use a separate icon for {@link Ext.button.Split Split Button}s when the cursor
 * is over the button.  The over icon file name will have a "-o" suffix
 *
 * @param {number} [$opacity-disabled=1]
 * The opacity of the button when it is disabled
 *
 * @param {number} [$inner-opacity-disabled=1]
 * The opacity of the button's text and icon elements when when the button is disabled
 * 
 * @member Ext.button.Button
 */
@mixin extjs-button-ui(
    $ui,
 
    $border-radius: 0px,
 
    $border-width: 0px,
 
    $border-color: null,
    $border-color-over: null,
    $border-color-focus: null,
    $border-color-pressed: null,
    $border-color-focus-over: null,
    $border-color-focus-pressed: null,
    $border-color-disabled: null,
 
    $padding: null,
    $text-padding: null,
 
    $background-color: null,
    $background-color-over: null,
    $background-color-focus: null,
    $background-color-pressed: null,
    $background-color-focus-over: null,
    $background-color-focus-pressed: null,
    $background-color-disabled: null,
 
    $background-gradient: null,
    $background-gradient-over: null,
    $background-gradient-focus: null,
    $background-gradient-pressed: null,
    $background-gradient-focus-over: null,
    $background-gradient-focus-pressed: null,
    $background-gradient-disabled: null,
 
    $color: null,
    $color-over: null,
    $color-focus: null,
    $color-pressed: null,
    $color-focus-over: null,
    $color-focus-pressed: null,
    $color-disabled: null,
 
    $inner-border-width: null,
    $inner-border-width-over: null,
    $inner-border-width-focus: null,
    $inner-border-width-pressed: null,
    $inner-border-width-focus-over: null,
    $inner-border-width-focus-pressed: null,
    $inner-border-width-disabled: null,
 
    $inner-border-color: null,
    $inner-border-color-over: null,
    $inner-border-color-focus: null,
    $inner-border-color-pressed: null,
    $inner-border-color-focus-over: null,
    $inner-border-color-focus-pressed: null,
    $inner-border-color-disabled: null,
 
    $body-outline-width-focus: null,
    $body-outline-style-focus: null,
    $body-outline-color-focus: null,
 
    $font-size: null,
    $font-size-over: null,
    $font-size-focus: null,
    $font-size-pressed: null,
    $font-size-focus-over: null,
    $font-size-focus-pressed: null,
    $font-size-disabled: null,
 
    $font-weight: null,
    $font-weight-over: null,
    $font-weight-focus: null,
    $font-weight-pressed: null,
    $font-weight-focus-over: null,
    $font-weight-focus-pressed: null,
    $font-weight-disabled: null,
 
    $font-family: null,
    $font-family-over: null,
    $font-family-focus: null,
    $font-family-pressed: null,
    $font-family-focus-over: null,
    $font-family-focus-pressed: null,
    $font-family-disabled: null,
 
    $icon-size: null,
    $glyph-font-size: null,
    $line-height: $icon-size,
    $icon-spacing: $button-icon-spacing,
    $glyph-color: $button-default-glyph-color,
    $glyph-opacity: $button-default-glyph-opacity,
    $arrow-width: null,
    $arrow-height: null,
    $arrow-glyph: null,
    $arrow-glyph-color: null,
    $split-width: null,
    $split-height: null,
    $split-line-width: null,
    $split-line-color: null,
    $include-ui-menu-arrows: $button-include-ui-menu-arrows,
    $include-ui-split-arrows: $button-include-ui-split-arrows,
    $include-split-noline-arrows: $button-include-split-noline-arrows,
    $include-split-over-arrows: $button-include-split-over-arrows,
    $opacity-disabled: $button-opacity-disabled,
    $inner-opacity-disabled: $button-inner-opacity-disabled 
) {
    $inner-border-max: max( 
        max(top($inner-border-width) right($inner-border-width) bottom($inner-border-width) left($inner-border-width)) 
        max(top($inner-border-width-over) right($inner-border-width-over) bottom($inner-border-width-over) left($inner-border-width-over)) 
        max(top($inner-border-width-focus) right($inner-border-width-focus) bottom($inner-border-width-focus) left($inner-border-width-focus)) 
        max(top($inner-border-width-pressed) right($inner-border-width-pressed) bottom($inner-border-width-pressed) left($inner-border-width-pressed)) 
        max(top($inner-border-width-disabled) right($inner-border-width-disabled) bottom($inner-border-width-disabled) left($inner-border-width-disabled)) 
    );
 
    $frame-size: frame-size($border-width, $inner-border-max, $border-radius);
 
    @include x-frame( 
        $cls: 'btn', 
        $ui: $ui, 
        $border-radius: $border-radius, 
        $border-width: $border-width, 
        $padding: $padding, 
        $background-color: $background-color, 
        $background-gradient: $background-gradient, 
        $table: true, 
        $inner-border-width: $inner-border-width 
    );
 
    .#{$prefix}btn-#{$ui} {
        border-color: $border-color;
        @if not is-null($inner-border-width) and not is-null($inner-border-color) and $inner-border-width != 0 {
            @include inner-border($inner-border-width, $inner-border-color);
        }
    }
 
    .#{$prefix}btn-button-#{$ui} {
        min-height: max($icon-size, $line-height);
 
        @if $include-ie {
            // In ie9m this element is a table cell, so height works like min-height 
            .#{$prefix}ie9m & {
                min-height: auto;
                height: max($icon-size, $line-height);
            }
        }
    }
 
    .#{$prefix}btn-inner-#{$ui} {
        font: $font-weight #{$font-size}/#{$line-height} $font-family;
        color: $color;
        @if $text-padding != 0 {
            padding: 0 $text-padding;
        }
 
        // Where table-based layouts are used (IE8/9) inner el requires max-width in order 
        // for ellipsis to work.  Safari also requires max width because of a bug in its 
        // -webkit-box layout that allows an element to expand beyond its flexed width if 
        // its content is larger than the flexed width. 
        // Rather than target the max rule to all the browsers that need it, we'll just add 
        // it everywhere, and then disable it where it causes problems (IE10p) 
        max-width: 100%;
 
        .#{$prefix}btn-icon-right > &,
        .#{$prefix}btn-icon-left > & {
            // since calc is only supported in IE9+ ellipsis will not work in IE8 when 
            // there is a left or right icon present 
            @if $include-ie {
                .#{$prefix}ie9 & {
                    max-width: calc(100% - #{$icon-size});
                }
            }
 
            // Safari calc() does not handle sub-pixel sizes correctly and therefore the max width 
            // can be larger than its parent and causes text-overflow. We remove 1px from the 
            // calculation to prevent overflow. 
            .#{$prefix}safari8m & {
                max-width: calc(100% - #{$icon-size - 1px});
            }
        }
 
        // Max-width interferes with the layout in IE11.  Fortunately we don't need the hack there 
        .#{$prefix}ie10p & {
            max-width: none;
        }
    }
 
    .#{$prefix}btn-icon-el-#{$ui} {
        font-size: $glyph-font-size;
        height: $icon-size;
        color: $glyph-color;
        line-height: $icon-size;
 
        .#{$prefix}btn-icon-left > &,
        .#{$prefix}btn-icon-right > & {
            width: $icon-size;
        }
 
        .#{$prefix}btn-icon-top > &,
        .#{$prefix}btn-icon-bottom > & {
            min-width: $icon-size;
        }
 
        &.#{$prefix}btn-glyph {
            @if $glyph-opacity != 1 {
                // do not use the opacity mixin because we do not want IE's filter version of 
                // opacity to be included.  We emulate the opacity setting in IE8m by mixing 
                // the icon color into the background color. (see below) 
                opacity: $glyph-opacity;
            }
            // In IE8 and below when a glyph contains partially transparent pixels, we 
            // can't apply an opacity filter to the glyph element, because IE8m will render 
            // the partially transparent pixels of the glyph as black. To work around this, 
            // we emulate the approximate color that the glyph would have if it had opacity 
            // applied by mixing the glyph color with the button's background-color. 
            $mix-color: $background-color;
            @if $mix-color == transparent {
                $mix-color: #fff;
            }
            @if $include-ie {
                .#{$prefix}ie8 & {
                    color: mix($glyph-color, $mix-color, $glyph-opacity * 100);
                }
            }
        }
 
        // when the button contains both icon and text, add $icon-spacing to the icon 
        .#{$prefix}btn-text.#{$prefix}btn-icon-left > & {
            margin-right: max($icon-spacing - $text-padding, 0);
 
            @if $include-rtl {
                &.#{$prefix}rtl {
                    margin-right: 0;
                    margin-left: max($icon-spacing - $text-padding, 0);
                }
            }
        }
 
        .#{$prefix}btn-text.#{$prefix}btn-icon-right > & {
            margin-left: max($icon-spacing - $text-padding, 0);
 
            @if $include-rtl {
                &.#{$prefix}rtl {
                    margin-left: 0;
                    margin-right: max($icon-spacing - $text-padding, 0);
                }
            }
        }
 
        .#{$prefix}btn-text.#{$prefix}btn-icon-top > & {
            margin-bottom: $icon-spacing;
        }
 
        .#{$prefix}btn-text.#{$prefix}btn-icon-bottom > & {
            margin-top: $icon-spacing;
        }
    }
 
    .#{$prefix}btn-arrow-right > {
        .#{$prefix}btn-icon.#{$prefix}btn-no-text.#{$prefix}btn-button-#{$ui} {
            padding-right: $text-padding;
        }
        .#{$prefix}btn-text.#{$prefix}btn-icon-right > .#{$prefix}btn-icon-el-#{$ui} {
            margin-right: $text-padding;
        }
    }
 
    .#{$prefix}btn-arrow-bottom,
    .#{$prefix}btn-split-bottom {
        > .#{$prefix}btn-button-#{$ui} {
            padding-bottom: bottom($padding);
        }
    }
 
    .#{$prefix}btn-wrap-#{$ui} {
        &.#{$prefix}btn-arrow-right:after {
            width: $arrow-width;
            @if $enable-font-icons and ($arrow-glyph != null) {
                @include font-icon($glyph: $arrow-glyph, $pseudo: false);
                color: $arrow-glyph-color;
            } @else {
                @if $include-ui-menu-arrows {
                    background-image: theme-background-image('button/#{$ui}-arrow');
                } @else {
                    background-image: theme-background-image('button/arrow');
                }
                // The arrow can get smashed into oblivion by an outer containing element if 
                // the container is smaller than the button. padding prevents this. 
                padding-right: $arrow-width;
            }
        }
 
        @if $include-rtl and ((not $enable-font-icons) or ($arrow-glyph == null)) {
            &.#{$prefix}rtl.#{$prefix}btn-arrow-right:after {
                @if $include-ui-menu-arrows {
                    background-image: theme-background-image('button/#{$ui}-arrow-rtl');
                } @else {
                    background-image: theme-background-image('button/arrow-rtl');
                }
            }
        }
 
        &.#{$prefix}btn-arrow-bottom:after {
            height: $arrow-height;
            @if $enable-font-icons and ($arrow-glyph != null) {
                @include font-icon($glyph: $arrow-glyph, $pseudo: false, $line-height: $arrow-height);
                color: $arrow-glyph-color;
            } @else {
                @if $include-ui-menu-arrows {
                    background-image: theme-background-image('button/#{$ui}-arrow');
                } @else {
                    background-image: theme-background-image('button/arrow');
                }
            }
        }
    }
 
    $arrow-prefix: '';
    @if $include-ui-split-arrows {
        $arrow-prefix: $ui + '-';
    }
    $arrow-suffix: '';
    @if $include-split-noline-arrows {
        $arrow-suffix: '-noline';
    }
 
    .#{$prefix}btn-wrap-#{$ui} {
        &.#{$prefix}btn-split-right {
            @if $split-line-width > 0 {
                > .#{$prefix}btn-button {
                    padding-right: right($padding);
                    @if $include-rtl {
                        &.#{$prefix}rtl {
                            padding-right: 0;
                            padding-left: right($padding);
                        }
                    }
                    &:after {
                        border-right: $split-line-width solid $split-line-color;
                    }
                }
            }
            &:after {
                width: $split-width;
                @if $enable-font-icons and ($arrow-glyph != null) {
                    @include font-icon($glyph: $arrow-glyph, $pseudo: false);
                    color: $arrow-glyph-color;
                    padding-left: right($padding); // center the arrow in the trigger area 
                } @else {
                    background-image: theme-background-image('button/#{$arrow-prefix}s-arrow#{$arrow-suffix}');
                    // The arrow can get smashed into oblivion by an outer containing element if 
                    // the container is smaller than the button. padding prevents this. 
                    padding-right: $split-width;
                }
            }
        }
 
        @if $include-rtl {
            &.#{$prefix}rtl.#{$prefix}btn-split-right:after {
                @if $enable-font-icons and ($arrow-glyph != null) {
                    padding-left: 0;
                    padding-right: right($padding);
                } @else {
                    background-image: theme-background-image('button/#{$arrow-prefix}s-arrow#{$arrow-suffix}-rtl');
                }
            }
        }
 
        &.#{$prefix}btn-split-bottom {
            @if $split-line-width > 0 {
                > .#{$prefix}btn-button:after {
                    border-bottom: $split-line-width solid $split-line-color;
                }
            }
 
            @if $enable-font-icons and ($arrow-glyph != null) {
                // negate the effect of bottom padding so that the split arrow icon 
                // appears roughly vertically centered by virtue of its line-height 
                margin-bottom: -(bottom($padding));
            }
 
            &:after {
                height: $split-height;
                @if $enable-font-icons and ($arrow-glyph != null) {
                    @include font-icon($glyph: $arrow-glyph, $pseudo: false, $line-height: $split-height);
                    color: $arrow-glyph-color;
                } @else {
                    background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-b#{$arrow-suffix}');
                }
            }
        }
    }
 
    @if $include-split-over-arrows and ((not $enable-font-icons) or ($arrow-glyph == null)) {
        .#{$prefix}btn-over > {
            .#{$prefix}btn-wrap-#{$ui} {
                &.#{$prefix}btn-split-right:after {
                    background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-o');
                }
 
                @if $include-rtl {
                    &.#{$prefix}rtl.#{$prefix}btn-split-right:after {
                        background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-o-rtl');
                    }
                }
 
                &.#{$prefix}btn-split-bottom:after {
                    background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-bo');
                }
            }
        }
    }
 
    .#{$prefix}btn-split-right > {
        .#{$prefix}btn-icon.#{$prefix}btn-no-text.#{$prefix}btn-button-#{$ui} {
            padding-right: $text-padding;
        }
        .#{$prefix}btn-text.#{$prefix}btn-icon-right > .#{$prefix}btn-icon-el-#{$ui} {
            margin-right: $text-padding;
        }
    }
 
    .#{$prefix}btn-focus.#{$prefix}btn-#{$ui} {
        .#{$prefix}keyboard-mode & {
            @if $border-color-focus != $border-color {
                border-color: $border-color-focus;
            }
            @if $background-color-focus != null {
                @include background-gradient($background-color-focus, $background-gradient-focus);
            }
            @if not is-null($inner-border-width-focus) and not is-null($inner-border-color-focus) {
                @include inner-border($inner-border-width-focus, $inner-border-color-focus);
            }
 
            @if not is-null($body-outline-width-focus) and $body-outline-width-focus != 0 {
                .#{$prefix}btn-wrap {
                    $outline-color: if(not is-null($body-outline-color-focus), $body-outline-color-focus, $color);
                    $outline-style: if(not is-null($body-outline-style-focus), $body-outline-style-focus, dotted);
                    outline: $body-outline-width-focus $outline-style $outline-color;
                }
            }
 
            .#{$prefix}btn-inner {
                @if $color-focus != $color {
                    color: $color-focus;
                }
                @if $font-weight-focus != $font-weight {
                    font-weight: $font-weight-focus;
                }
                @if $font-size-focus != $font-size {
                    font-size: $font-size-focus;
                }
                @if $font-family-focus != $font-family {
                    font-family: $font-family-focus;
                }
            }
        }
    }
    
    .#{$prefix}btn-#{$ui} .#{$prefix}btn-arrow-el {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: $split-width + right($padding);
        pointer-events: none;
        
        @if $include-rtl {
            &.#{$prefix}rtl {
                right: inherit;
                left: 0;
            }
        }
    }
    
    .#{$prefix}btn-#{$ui}.#{$prefix}arrow-focus .#{$prefix}btn-arrow-el {
        .#{$prefix}keyboard-mode & {
            @if not is-null($inner-border-width-focus) and not is-null($inner-border-color-focus) {
                border: $inner-border-width-focus solid $inner-border-color-focus;
            }
        }
    }
    
    .#{$prefix}btn-over.#{$prefix}btn-#{$ui} {
        @if $border-color-over != $border-color {
            border-color: $border-color-over;
        }
        @if $background-color-over != null {
            @include background-gradient($background-color-over, $background-gradient-over);
        }
        @if not is-null($inner-border-width-over) and not is-null($inner-border-color-over) {
            @include inner-border($inner-border-width-over, $inner-border-color-over);
        }
 
        .#{$prefix}btn-inner {
            @if $color-over != $color {
                color: $color-over;
            }
            @if $font-weight-over != $font-weight {
                font-weight: $font-weight-over;
            }
            @if $font-size-over != $font-size {
                font-size: $font-size-over;
            }
            @if $font-family-over != $font-family {
                font-family: $font-family-over;
            }
        }
    }
 
    .#{$prefix}btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui} {
        .#{$prefix}keyboard-mode & {
            @if $border-color-focus-over != $border-color-over {
                border-color: $border-color-focus-over;
            }
            @if $background-color-focus-over != $background-color-over or $background-gradient-focus-over != $background-gradient-over {
                @include background-gradient($background-color-focus-over, $background-gradient-focus-over);
            }
            @if not is-null($inner-border-width-focus-over) and not is-null($inner-border-color-focus-over) {
                @include inner-border($inner-border-width-focus-over, $inner-border-color-focus-over);
            }
 
            .#{$prefix}btn-inner {
                @if $color-focus-over != $color-over {
                    color: $color-focus-over;
                }
                @if $font-weight-focus-over != $font-weight-over {
                    font-weight: $font-weight-focus-over;
                }
                @if $font-size-focus-over != $font-size-over {
                    font-size: $font-size-focus-over;
                }
                @if $font-family-focus-over != $font-family-over {
                    font-family: $font-family-focus-over;
                }
            }
        }
    }
 
    // add x-btn class to increase specificity over focus-over rule above 
    .#{$prefix}btn.#{$prefix}btn-menu-active.#{$prefix}btn-#{$ui},
    .#{$prefix}btn.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui} {
        @if $border-color-pressed != $border-color {
            border-color: $border-color-pressed;
        }
        @if $background-color-pressed != null {
            @include background-gradient($background-color-pressed, $background-gradient-pressed);
        }
        @if not is-null($inner-border-width-pressed) and not is-null($inner-border-color-pressed) {
            @include inner-border($inner-border-width-pressed, $inner-border-color-pressed);
        }
 
        .#{$prefix}btn-inner {
            @if $color-pressed != $color {
                color: $color-pressed;
            }
            @if $font-weight-pressed != $font-weight {
                font-weight: $font-weight-pressed;
            }
            @if $font-size-pressed != $font-size {
                font-size: $font-size-pressed;
            }
            @if $font-family-pressed != $font-family {
                font-family: $font-family-pressed;
            }
        }
    }
 
    .#{$prefix}btn-focus.#{$prefix}btn-menu-active.#{$prefix}btn-#{$ui},
    .#{$prefix}btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui} {
        .#{$prefix}keyboard-mode & {
            @if $border-color-focus-pressed != $border-color-pressed {
                border-color: $border-color-focus-pressed;
            }
            @if $background-color-focus-pressed != $background-color-pressed or $background-gradient-focus-pressed != $background-gradient-pressed {
                @include background-gradient($background-color-focus-pressed, $background-gradient-focus-pressed);
            }
            @if not is-null($inner-border-width-focus-pressed) and not is-null($inner-border-color-focus-pressed) {
                @include inner-border($inner-border-width-focus-pressed, $inner-border-color-focus-pressed);
            }
 
            .#{$prefix}btn-inner {
                @if $color-focus-pressed != $color-pressed {
                    color: $color-focus-pressed;
                }
                @if $font-weight-focus-pressed != $font-weight-pressed {
                    font-weight: $font-weight-focus-pressed;
                }
                @if $font-size-focus-pressed != $font-size-pressed {
                    font-size: $font-size-focus-pressed;
                }
                @if $font-family-focus-pressed != $font-family-pressed {
                    font-family: $font-family-focus-pressed;
                }
            }
        }
    }
 
    // add x-btn class to increase specificity over focus-pressed 
    .#{$prefix}btn.#{$prefix}btn-disabled.#{$prefix}btn-#{$ui} {
        @if $border-color-disabled != $border-color {
            border-color: $border-color-disabled;
        }
        @if not is-null($background-color-disabled) {
            @include background-gradient($background-color-disabled, $background-gradient-disabled);
        }
        @if not is-null($inner-border-width-disabled) and not is-null($inner-border-color-disabled) {
            @include inner-border($inner-border-width-disabled, $inner-border-color-disabled);
        }
 
        .#{$prefix}btn-inner {
            @if $color-disabled != $color {
                color: $color-disabled;
            }
            @if $font-weight-disabled != $font-weight {
                font-weight: $font-weight-disabled;
            }
            @if $font-size-disabled != $font-size {
                font-size: $font-size-disabled;
            }
            @if $font-family-disabled != $font-family {
                font-family: $font-family-disabled;
            }
        }
    }
 
    @if $include-slicer-border-radius {
        .#{$prefix}btn-focus {
            .#{$prefix}keyboard-mode & {
                $stretch: slicer-background-stretch('btn-focus.#{$prefix}btn-#{$ui}', 'bottom');
                $frame: slicer-frame('btn-focus.#{$prefix}btn-#{$ui}', $frame-size);
 
                .#{$prefix}btn-#{$ui}-tl,
                .#{$prefix}btn-#{$ui}-bl,
                .#{$prefix}btn-#{$ui}-tr,
                .#{$prefix}btn-#{$ui}-br,
                .#{$prefix}btn-#{$ui}-tc,
                .#{$prefix}btn-#{$ui}-bc {
                    background-image: slicer-corner-sprite('btn-focus.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-corners');
                }
                .#{$prefix}btn-#{$ui}-ml,
                .#{$prefix}btn-#{$ui}-mr {
                    background-image: slicer-sides-sprite('btn-focus.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-sides');
                }
                .#{$prefix}btn-#{$ui}-mc {
                    background-color: $background-color-focus;
                    @if $background-gradient-focus != null {
                        background-image: slicer-frame-background-image('btn-focus.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-fbg');
                    }
                }
            }
        }
 
        .#{$prefix}btn-over {
            $stretch: slicer-background-stretch('btn-over.#{$prefix}btn-#{$ui}', 'bottom');
            $frame: slicer-frame('btn-over.#{$prefix}btn-#{$ui}', $frame-size);
 
            .#{$prefix}btn-#{$ui}-tl,
            .#{$prefix}btn-#{$ui}-bl,
            .#{$prefix}btn-#{$ui}-tr,
            .#{$prefix}btn-#{$ui}-br,
            .#{$prefix}btn-#{$ui}-tc,
            .#{$prefix}btn-#{$ui}-bc {
                background-image: slicer-corner-sprite('btn-over.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-over-corners');
            }
            .#{$prefix}btn-#{$ui}-ml,
            .#{$prefix}btn-#{$ui}-mr {
                background-image: slicer-sides-sprite('btn-over.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-over-sides');
            }
            .#{$prefix}btn-#{$ui}-mc {
                background-color: $background-color-over;
                @if $background-gradient-over != null {
                    background-image: slicer-frame-background-image('btn-over.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-over-fbg');
                }
            }
        }
 
        .#{$prefix}btn-focus.#{$prefix}btn-over {
            .#{$prefix}keyboard-mode & {
                $stretch: slicer-background-stretch('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}', 'bottom');
                $frame: slicer-frame('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}', $frame-size);
 
                .#{$prefix}btn-#{$ui}-tl,
                .#{$prefix}btn-#{$ui}-bl,
                .#{$prefix}btn-#{$ui}-tr,
                .#{$prefix}btn-#{$ui}-br,
                .#{$prefix}btn-#{$ui}-tc,
                .#{$prefix}btn-#{$ui}-bc {
                    background-image: slicer-corner-sprite('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-over-corners');
                }
                .#{$prefix}btn-#{$ui}-ml,
                .#{$prefix}btn-#{$ui}-mr {
                    background-image: slicer-sides-sprite('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-over-sides');
                }
                .#{$prefix}btn-#{$ui}-mc {
                    background-color: $background-color-focus-over;
                    @if $background-gradient-focus-over != null {
                        background-image: slicer-frame-background-image('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-over-fbg');
                    }
                }
            }
        }
 
        // add x-btn class to increase specificity over focus-over rules above 
        .#{$prefix}btn.#{$prefix}btn-menu-active,
        .#{$prefix}btn.#{$prefix}btn-pressed {
            $stretch: slicer-background-stretch('btn-pressed.#{$prefix}btn-#{$ui}', 'bottom');
            $frame: slicer-frame('btn-pressed.#{$prefix}btn-#{$ui}', $frame-size);
 
            .#{$prefix}btn-#{$ui}-tl,
            .#{$prefix}btn-#{$ui}-bl,
            .#{$prefix}btn-#{$ui}-tr,
            .#{$prefix}btn-#{$ui}-br,
            .#{$prefix}btn-#{$ui}-tc,
            .#{$prefix}btn-#{$ui}-bc {
                background-image: slicer-corner-sprite('btn-pressed.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-pressed-corners');
            }
            .#{$prefix}btn-#{$ui}-ml,
            .#{$prefix}btn-#{$ui}-mr {
                background-image: slicer-sides-sprite('btn-pressed.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-pressed-sides');
            }
            .#{$prefix}btn-#{$ui}-mc {
                background-color: $background-color-pressed;
                @if $background-gradient-focus-pressed != null {
                    background-image: slicer-frame-background-image('btn-pressed.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-pressed-fbg');
                }
            }
        }
 
        .#{$prefix}btn-focus.#{$prefix}btn-menu-active,
        .#{$prefix}btn-focus.#{$prefix}btn-pressed {
            .#{$prefix}keyboard-mode & {
                $stretch: slicer-background-stretch('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}', 'bottom');
                $frame: slicer-frame('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}', $frame-size);
 
                .#{$prefix}btn-#{$ui}-tl,
                .#{$prefix}btn-#{$ui}-bl,
                .#{$prefix}btn-#{$ui}-tr,
                .#{$prefix}btn-#{$ui}-br,
                .#{$prefix}btn-#{$ui}-tc,
                .#{$prefix}btn-#{$ui}-bc {
                    background-image: slicer-corner-sprite('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-pressed-corners');
                }
                .#{$prefix}btn-#{$ui}-ml,
                .#{$prefix}btn-#{$ui}-mr {
                    background-image: slicer-sides-sprite('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-pressed-sides');
                }
                .#{$prefix}btn-#{$ui}-mc {
                    background-color: $background-color-focus-pressed;
                    @if $background-gradient-focus-pressed != null {
                        background-image: slicer-frame-background-image('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-focus-pressed-fbg');
                    }
                }
            }
        }
 
        // add x-btn class to increase specificity over focus-pressed 
        .#{$prefix}btn.#{$prefix}btn-disabled {
            $stretch: slicer-background-stretch('btn-disabled.#{$prefix}btn-#{$ui}', 'bottom');
            $frame: slicer-frame('btn-disabled.#{$prefix}btn-#{$ui}', $frame-size);
 
            .#{$prefix}btn-#{$ui}-tl,
            .#{$prefix}btn-#{$ui}-bl,
            .#{$prefix}btn-#{$ui}-tr,
            .#{$prefix}btn-#{$ui}-br,
            .#{$prefix}btn-#{$ui}-tc,
            .#{$prefix}btn-#{$ui}-bc {
                background-image: slicer-corner-sprite('btn-disabled.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-disabled-corners');
            }
            .#{$prefix}btn-#{$ui}-ml,
            .#{$prefix}btn-#{$ui}-mr {
                background-image: slicer-sides-sprite('btn-disabled.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-disabled-sides');
            }
            .#{$prefix}btn-#{$ui}-mc {
                background-color: $background-color-disabled;
                @if $background-gradient-disabled != null {
                    background-image: slicer-frame-background-image('btn-disabled.#{$prefix}btn-#{$ui}', 'btn/btn-#{$ui}-disabled-fbg');
                }
            }
        }
    }
 
    @if $include-slicer-border-radius {
        .#{$prefix}nbr .#{$prefix}btn-#{$ui} {
            background-image: none;
        }
    }
 
    @if $opacity-disabled != 1 {
        .#{$prefix}btn-disabled.#{$prefix}btn-#{$ui} {
            @include opacity($opacity-disabled);
        }
    }
 
    @if $inner-opacity-disabled != 1 {
        .#{$prefix}btn-disabled.#{$prefix}btn-#{$ui} {
            .#{$prefix}btn-inner,
            .#{$prefix}btn-icon-el {
                @include opacity($inner-opacity-disabled);
            }
        }
    }
 
    @if $include-ext-button-segmented and $include-slicer-border-radius {
        // These rules must use !important to overcome the !important border/padding 
        // removal rules from x-frame() 
        .#{$prefix}nbr {
            .#{$prefix}segmented-button-item-horizontal.#{$prefix}btn-#{$ui} {
                &.#{$prefix}segmented-button-first {
                    border-right-width: right($border-width) !important;
                    .#{$prefix}btn-#{$ui}-mc {
                        padding-right: right($padding) !important;
                    }
                }
                &.#{$prefix}segmented-button-middle {
                    border-right-width: right($border-width) !important;
                    .#{$prefix}btn-#{$ui}-mc {
                        padding-right: right($padding) !important;
                        padding-left: left($padding) !important;
                    }
                }
                &.#{$prefix}segmented-button-last {
                    .#{$prefix}btn-#{$ui}-mc {
                        padding-left: left($padding) !important;
                    }
                }
            }
 
            .#{$prefix}segmented-button-item-vertical.#{$prefix}btn-#{$ui} {
                &.#{$prefix}segmented-button-first {
                    border-bottom-width: bottom($border-width) !important;
                    .#{$prefix}btn-#{$ui}-mc {
                        padding-bottom: bottom($padding) !important;
                    }
                }
                &.#{$prefix}segmented-button-middle {
                    border-bottom-width: bottom($border-width) !important;
                    .#{$prefix}btn-#{$ui}-mc {
                        padding-top: top($padding) !important;
                        padding-bottom: bottom($padding) !important;
                    }
                }
                &.#{$prefix}segmented-button-last {
                    .#{$prefix}btn-#{$ui}-mc {
                        padding-top: top($padding) !important;
                    }
                }
            }
 
            .#{$prefix}segmented-button-item.#{$prefix}btn-#{$ui}:after {
                // Inner borders are contained in the framing elements of a button. Since 
                // we have suppressed the borders on the inner edges to remove the rounded 
                // corners, we need to simulate the inner-border using a pseudo el. 
                // Always set up the positioning of the pseudo element just in case 
                // it is needed by the following rules 
                content: ' ';
                border-style: solid;
                border-width: 0;
                position: absolute;
 
                @if not is-null($inner-border-width) and not is-null($inner-border-color) and $inner-border-width != 0 {
                    border-width: $inner-border-width;
                    border-color: $inner-border-color;
                }
            }
 
            .#{$prefix}segmented-button-item-horizontal.#{$prefix}btn-#{$ui} {
                &:after {
                    top: $border-width;
                    right: 0;
                    bottom: $border-width;
                    left: 0;
                }
                &.#{$prefix}segmented-button-first:after {
                    left: $border-width;
                }
                &.#{$prefix}segmented-button-last:after {
                    right: $border-width;
                }
            }
 
            .#{$prefix}segmented-button-item-vertical.#{$prefix}btn-#{$ui} {
                &:after {
                    top: 0;
                    right: $border-width;
                    bottom: 0;
                    left: $border-width;
                }
                &.#{$prefix}segmented-button-first:after {
                    top: $border-width;
                }
                &.#{$prefix}segmented-button-last:after {
                    bottom: $border-width;
                }
            }
 
            .#{$prefix}segmented-button-item {
                @if not is-null($inner-border-width-focus) and not is-null($inner-border-color-focus) {
                    &.#{$prefix}btn-focus.#{$prefix}btn-#{$ui}:after {
                        .#{$prefix}keyboard-mode & {
                            border-width: $inner-border-width-focus;
                            border-color: $inner-border-color-focus;
                        }
                    }
                }
 
                @if not is-null($inner-border-width-over) and not is-null($inner-border-color-over) {
                    &.#{$prefix}btn-over.#{$prefix}btn-#{$ui}:after {
                        border-width: $inner-border-width-over;
                        border-color: $inner-border-color-over;
                    }
                }
 
                @if not is-null($inner-border-width-focus-over) and not is-null($inner-border-color-focus-over) {
                    &.#{$prefix}btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}:after {
                        .#{$prefix}keyboard-mode & {
                            border-width: $inner-border-width-focus-over;
                            border-color: $inner-border-color-focus-over;
                        }
                    }
                }
 
                @if not is-null($inner-border-width-pressed) and not is-null($inner-border-color-pressed) {
                    &.#{$prefix}btn.#{$prefix}btn-menu-active.#{$prefix}btn-#{$ui}:after,
                    &.#{$prefix}btn.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}:after {
                        border-width: $inner-border-width-pressed;
                        border-color: $inner-border-color-pressed;
                    }
                }
 
                @if not is-null($inner-border-width-focus-pressed) and not is-null($inner-border-color-focus-pressed) {
                    &.#{$prefix}btn-focus.#{$prefix}btn-menu-active.#{$prefix}btn-#{$ui}:after,
                    &.#{$prefix}btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}:after {
                        .#{$prefix}keyboard-mode & {
                            border-width: $inner-border-width-focus-pressed;
                            border-color: $inner-border-color-focus-pressed;
                        }
                    }
                }
 
                @if not is-null($inner-border-width-disabled) and not is-null($inner-border-color-disabled) {
                    &.#{$prefix}btn.#{$prefix}btn-disabled.#{$prefix}btn-#{$ui}:after {
                        border-width: $inner-border-width-disabled;
                        border-color: $inner-border-color-disabled;
                    }
                }
            }
        }
    }
 
    @include x-slicer('btn-focus.#{$prefix}btn-#{$ui}');
    @include x-slicer('btn-over.#{$prefix}btn-#{$ui}');
    @include x-slicer('btn-focus.#{$prefix}btn-over.#{$prefix}btn-#{$ui}');
    @include x-slicer('btn-pressed.#{$prefix}btn-#{$ui}');
    @include x-slicer('btn-focus.#{$prefix}btn-pressed.#{$prefix}btn-#{$ui}');
    @include x-slicer('btn-disabled.#{$prefix}btn-#{$ui}');
 
    // Button field or subclass inside cell - calculate top/bottom padding to keep row height correct 
    @if $include-ext-grid-column-widget {
        $ui-height: $icon-size + vertical($padding) + vertical($border-width);
        .#{$prefix}button-#{$ui}-cell > .#{$prefix}grid-cell-inner {
            padding-top:    max(ceil(($grid-row-height - $ui-height) / 2), 0);
            padding-bottom: max(floor(($grid-row-height - $ui-height) / 2), 0);
 
            // vertical-align: top needed when in grid cells to avoid margin stretching the cell-inner 
            >.#{$prefix}btn-#{$ui} {
                vertical-align: top;
            }
        }
    }
}
 
@import 'Button_small';
@import 'Button_medium';
@import 'Button_large';
 
@if $include-button-default-small-ui {
    @include extjs-button-small-ui( 
        $ui: 'default', 
 
        $border-color: $button-default-border-color, 
        $border-color-over: $button-default-border-color-over, 
        $border-color-focus: $button-default-border-color-focus, 
        $border-color-pressed: $button-default-border-color-pressed, 
        $border-color-focus-over: $button-default-border-color-focus-over, 
        $border-color-focus-pressed: $button-default-border-color-focus-pressed, 
        $border-color-disabled: $button-default-border-color-disabled, 
 
        $background-color: $button-default-background-color, 
        $background-color-over: $button-default-background-color-over, 
        $background-color-focus: $button-default-background-color-focus, 
        $background-color-pressed: $button-default-background-color-pressed, 
        $background-color-focus-over: $button-default-background-color-focus-over, 
        $background-color-focus-pressed: $button-default-background-color-focus-pressed, 
        $background-color-disabled: $button-default-background-color-disabled, 
 
        $color: $button-default-color, 
        $color-over: $button-default-color-over, 
        $color-focus: $button-default-color-focus, 
        $color-pressed: $button-default-color-pressed, 
        $color-focus-over: $button-default-color-focus-over, 
        $color-focus-pressed: $button-default-color-focus-pressed, 
        $color-disabled: $button-default-color-disabled, 
 
        $inner-border-width: $button-default-inner-border-width, 
        $inner-border-width-over: $button-default-inner-border-width-over, 
        $inner-border-width-focus: $button-default-inner-border-width-focus, 
        $inner-border-width-pressed: $button-default-inner-border-width-pressed, 
        $inner-border-width-focus-over: $button-default-inner-border-width-focus-over, 
        $inner-border-width-focus-pressed: $button-default-inner-border-width-focus-pressed, 
        $inner-border-width-disabled: $button-default-inner-border-width-disabled, 
 
        $inner-border-color: $button-default-inner-border-color, 
        $inner-border-color-over: $button-default-inner-border-color-over, 
        $inner-border-color-focus: $button-default-inner-border-color-focus, 
        $inner-border-color-pressed: $button-default-inner-border-color-pressed, 
        $inner-border-color-focus-over: $button-default-inner-border-color-focus-over, 
        $inner-border-color-focus-pressed: $button-default-inner-border-color-focus-pressed, 
        $inner-border-color-disabled: $button-default-inner-border-color-disabled, 
 
        $font-size: $button-small-font-size, 
        $font-size-over: $button-small-font-size-over, 
        $font-size-focus: $button-small-font-size-focus, 
        $font-size-pressed: $button-small-font-size-pressed, 
        $font-size-focus-over: $button-small-font-size-focus-over, 
        $font-size-focus-pressed: $button-small-font-size-focus-pressed, 
        $font-size-disabled: $button-small-font-size-disabled, 
 
        $font-weight: $button-small-font-weight, 
        $font-weight-over: $button-small-font-weight-over, 
        $font-weight-focus: $button-small-font-weight-focus, 
        $font-weight-pressed: $button-small-font-weight-pressed, 
        $font-weight-focus-over: $button-small-font-weight-focus-over, 
        $font-weight-focus-pressed: $button-small-font-weight-focus-pressed, 
        $font-weight-disabled: $button-small-font-weight-disabled, 
 
        $font-family: $button-small-font-family, 
        $font-family-over: $button-small-font-family-over, 
        $font-family-focus: $button-small-font-family-focus, 
        $font-family-pressed: $button-small-font-family-pressed, 
        $font-family-focus-over: $button-small-font-family-focus-over, 
        $font-family-focus-pressed: $button-small-font-family-focus-pressed, 
        $font-family-disabled: $button-small-font-family-disabled 
    );
}
 
@if $include-button-default-medium-ui {
    @include extjs-button-medium-ui( 
        $ui: 'default', 
 
        $border-color: $button-default-border-color, 
        $border-color-over: $button-default-border-color-over, 
        $border-color-focus: $button-default-border-color-focus, 
        $border-color-pressed: $button-default-border-color-pressed, 
        $border-color-focus-over: $button-default-border-color-focus-over, 
        $border-color-focus-pressed: $button-default-border-color-focus-pressed, 
        $border-color-disabled: $button-default-border-color-disabled, 
 
        $background-color: $button-default-background-color, 
        $background-color-over: $button-default-background-color-over, 
        $background-color-focus: $button-default-background-color-focus, 
        $background-color-pressed: $button-default-background-color-pressed, 
        $background-color-focus-over: $button-default-background-color-focus-over, 
        $background-color-focus-pressed: $button-default-background-color-focus-pressed, 
        $background-color-disabled: $button-default-background-color-disabled, 
 
        $color: $button-default-color, 
        $color-over: $button-default-color-over, 
        $color-focus: $button-default-color-focus, 
        $color-pressed: $button-default-color-pressed, 
        $color-focus-over: $button-default-color-focus-over, 
        $color-focus-pressed: $button-default-color-focus-pressed, 
        $color-disabled: $button-default-color-disabled, 
 
        $inner-border-width: $button-default-inner-border-width, 
        $inner-border-width-over: $button-default-inner-border-width-over, 
        $inner-border-width-focus: $button-default-inner-border-width-focus, 
        $inner-border-width-pressed: $button-default-inner-border-width-pressed, 
        $inner-border-width-focus-over: $button-default-inner-border-width-focus-over, 
        $inner-border-width-focus-pressed: $button-default-inner-border-width-focus-pressed, 
        $inner-border-width-disabled: $button-default-inner-border-width-disabled, 
 
        $inner-border-color: $button-default-inner-border-color, 
        $inner-border-color-over: $button-default-inner-border-color-over, 
        $inner-border-color-focus: $button-default-inner-border-color-focus, 
        $inner-border-color-pressed: $button-default-inner-border-color-pressed, 
        $inner-border-color-focus-over: $button-default-inner-border-color-focus-over, 
        $inner-border-color-focus-pressed: $button-default-inner-border-color-focus-pressed, 
        $inner-border-color-disabled: $button-default-inner-border-color-disabled, 
 
        $font-size: $button-medium-font-size, 
        $font-size-over: $button-medium-font-size-over, 
        $font-size-focus: $button-medium-font-size-focus, 
        $font-size-pressed: $button-medium-font-size-pressed, 
        $font-size-focus-over: $button-medium-font-size-focus-over, 
        $font-size-focus-pressed: $button-medium-font-size-focus-pressed, 
        $font-size-disabled: $button-medium-font-size-disabled, 
 
        $font-weight: $button-medium-font-weight, 
        $font-weight-over: $button-medium-font-weight-over, 
        $font-weight-focus: $button-medium-font-weight-focus, 
        $font-weight-pressed: $button-medium-font-weight-pressed, 
        $font-weight-focus-over: $button-medium-font-weight-focus-over, 
        $font-weight-focus-pressed: $button-medium-font-weight-focus-pressed, 
        $font-weight-disabled: $button-medium-font-weight-disabled, 
 
        $font-family: $button-medium-font-family, 
        $font-family-over: $button-medium-font-family-over, 
        $font-family-focus: $button-medium-font-family-focus, 
        $font-family-pressed: $button-medium-font-family-pressed, 
        $font-family-focus-over: $button-medium-font-family-focus-over, 
        $font-family-focus-pressed: $button-medium-font-family-focus-pressed, 
        $font-family-disabled: $button-medium-font-family-disabled 
    );
}
 
@if $include-button-default-large-ui {
    @include extjs-button-large-ui( 
        $ui: 'default', 
 
        $border-color: $button-default-border-color, 
        $border-color-over: $button-default-border-color-over, 
        $border-color-focus: $button-default-border-color-focus, 
        $border-color-pressed: $button-default-border-color-pressed, 
        $border-color-focus-over: $button-default-border-color-focus-over, 
        $border-color-focus-pressed: $button-default-border-color-focus-pressed, 
        $border-color-disabled: $button-default-border-color-disabled, 
 
        $background-color: $button-default-background-color, 
        $background-color-over: $button-default-background-color-over, 
        $background-color-focus: $button-default-background-color-focus, 
        $background-color-pressed: $button-default-background-color-pressed, 
        $background-color-focus-over: $button-default-background-color-focus-over, 
        $background-color-focus-pressed: $button-default-background-color-focus-pressed, 
        $background-color-disabled: $button-default-background-color-disabled, 
 
        $color: $button-default-color, 
        $color-over: $button-default-color-over, 
        $color-focus: $button-default-color-focus, 
        $color-pressed: $button-default-color-pressed, 
        $color-focus-over: $button-default-color-focus-over, 
        $color-focus-pressed: $button-default-color-focus-pressed, 
        $color-disabled: $button-default-color-disabled, 
 
        $inner-border-width: $button-default-inner-border-width, 
        $inner-border-width-over: $button-default-inner-border-width-over, 
        $inner-border-width-focus: $button-default-inner-border-width-focus, 
        $inner-border-width-pressed: $button-default-inner-border-width-pressed, 
        $inner-border-width-focus-over: $button-default-inner-border-width-focus-over, 
        $inner-border-width-focus-pressed: $button-default-inner-border-width-focus-pressed, 
        $inner-border-width-disabled: $button-default-inner-border-width-disabled, 
 
        $inner-border-color: $button-default-inner-border-color, 
        $inner-border-color-over: $button-default-inner-border-color-over, 
        $inner-border-color-focus: $button-default-inner-border-color-focus, 
        $inner-border-color-pressed: $button-default-inner-border-color-pressed, 
        $inner-border-color-focus-over: $button-default-inner-border-color-focus-over, 
        $inner-border-color-focus-pressed: $button-default-inner-border-color-focus-pressed, 
        $inner-border-color-disabled: $button-default-inner-border-color-disabled, 
 
        $font-size: $button-large-font-size, 
        $font-size-over: $button-large-font-size-over, 
        $font-size-focus: $button-large-font-size-focus, 
        $font-size-pressed: $button-large-font-size-pressed, 
        $font-size-focus-over: $button-large-font-size-focus-over, 
        $font-size-focus-pressed: $button-large-font-size-focus-pressed, 
        $font-size-disabled: $button-large-font-size-disabled, 
 
        $font-weight: $button-large-font-weight, 
        $font-weight-over: $button-large-font-weight-over, 
        $font-weight-focus: $button-large-font-weight-focus, 
        $font-weight-pressed: $button-large-font-weight-pressed, 
        $font-weight-focus-over: $button-large-font-weight-focus-over, 
        $font-weight-focus-pressed: $button-large-font-weight-focus-pressed, 
        $font-weight-disabled: $button-large-font-weight-disabled, 
 
        $font-family: $button-large-font-family, 
        $font-family-over: $button-large-font-family-over, 
        $font-family-focus: $button-large-font-family-focus, 
        $font-family-pressed: $button-large-font-family-pressed, 
        $font-family-focus-over: $button-large-font-family-focus-over, 
        $font-family-focus-pressed: $button-large-font-family-focus-pressed, 
        $font-family-disabled: $button-large-font-family-disabled 
    );
}
 
@if $include-ext-toolbar-toolbar {
    @if $include-button-default-toolbar-small-ui {
        @include extjs-button-toolbar-small-ui( 
            $ui: 'default', 
 
            $border-color: $button-toolbar-border-color, 
            $border-color-over: $button-toolbar-border-color-over, 
            $border-color-focus: $button-toolbar-border-color-focus, 
            $border-color-pressed: $button-toolbar-border-color-pressed, 
            $border-color-focus-over: $button-toolbar-border-color-focus-over, 
            $border-color-focus-pressed: $button-toolbar-border-color-focus-pressed, 
            $border-color-disabled: $button-toolbar-border-color-disabled, 
 
            $background-color: $button-toolbar-background-color, 
            $background-color-over: $button-toolbar-background-color-over, 
            $background-color-focus: $button-toolbar-background-color-focus, 
            $background-color-pressed: $button-toolbar-background-color-pressed, 
            $background-color-focus-over: $button-toolbar-background-color-focus-over, 
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed, 
            $background-color-disabled: $button-toolbar-background-color-disabled, 
 
            $color: $button-toolbar-color, 
            $color-over: $button-toolbar-color-over, 
            $color-focus: $button-toolbar-color-focus, 
            $color-pressed: $button-toolbar-color-pressed, 
            $color-focus-over: $button-toolbar-color-focus-over, 
            $color-focus-pressed: $button-toolbar-color-focus-pressed, 
            $color-disabled: $button-toolbar-color-disabled, 
 
            $inner-border-width: $button-toolbar-inner-border-width, 
            $inner-border-width-over: $button-toolbar-inner-border-width-over, 
            $inner-border-width-focus: $button-toolbar-inner-border-width-focus, 
            $inner-border-width-pressed: $button-toolbar-inner-border-width-pressed, 
            $inner-border-width-focus-over: $button-toolbar-inner-border-width-focus-over, 
            $inner-border-width-focus-pressed: $button-toolbar-inner-border-width-focus-pressed, 
            $inner-border-width-disabled: $button-toolbar-inner-border-width-disabled, 
 
            $inner-border-color: $button-toolbar-inner-border-color, 
            $inner-border-color-over: $button-toolbar-inner-border-color-over, 
            $inner-border-color-focus: $button-toolbar-inner-border-color-focus, 
            $inner-border-color-pressed: $button-toolbar-inner-border-color-pressed, 
            $inner-border-color-focus-over: $button-toolbar-inner-border-color-focus-over, 
            $inner-border-color-focus-pressed: $button-toolbar-inner-border-color-focus-pressed, 
            $inner-border-color-disabled: $button-toolbar-inner-border-color-disabled, 
 
            $font-size: $button-small-font-size, 
            $font-size-over: $button-small-font-size-over, 
            $font-size-focus: $button-small-font-size-focus, 
            $font-size-pressed: $button-small-font-size-pressed, 
            $font-size-focus-over: $button-small-font-size-focus-over, 
            $font-size-focus-pressed: $button-small-font-size-focus-pressed, 
            $font-size-disabled: $button-small-font-size-disabled, 
 
            $font-weight: $button-small-font-weight, 
            $font-weight-over: $button-small-font-weight-over, 
            $font-weight-focus: $button-small-font-weight-focus, 
            $font-weight-pressed: $button-small-font-weight-pressed, 
            $font-weight-focus-over: $button-small-font-weight-focus-over, 
            $font-weight-focus-pressed: $button-small-font-weight-focus-pressed, 
            $font-weight-disabled: $button-small-font-weight-disabled, 
 
            $font-family: $button-small-font-family, 
            $font-family-over: $button-small-font-family-over, 
            $font-family-focus: $button-small-font-family-focus, 
            $font-family-pressed: $button-small-font-family-pressed, 
            $font-family-focus-over: $button-small-font-family-focus-over, 
            $font-family-focus-pressed: $button-small-font-family-focus-pressed, 
            $font-family-disabled: $button-small-font-family-disabled 
        );
    }
 
    @if $include-button-default-toolbar-medium-ui {
        @include extjs-button-toolbar-medium-ui( 
            $ui: 'default', 
 
            $border-color: $button-toolbar-border-color, 
            $border-color-over: $button-toolbar-border-color-over, 
            $border-color-focus: $button-toolbar-border-color-focus, 
            $border-color-pressed: $button-toolbar-border-color-pressed, 
            $border-color-focus-over: $button-toolbar-border-color-focus-over, 
            $border-color-focus-pressed: $button-toolbar-border-color-focus-pressed, 
            $border-color-disabled: $button-toolbar-border-color-disabled, 
 
            $background-color: $button-toolbar-background-color, 
            $background-color-over: $button-toolbar-background-color-over, 
            $background-color-focus: $button-toolbar-background-color-focus, 
            $background-color-pressed: $button-toolbar-background-color-pressed, 
            $background-color-focus-over: $button-toolbar-background-color-focus-over, 
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed, 
            $background-color-disabled: $button-toolbar-background-color-disabled, 
 
            $color: $button-toolbar-color, 
            $color-over: $button-toolbar-color-over, 
            $color-focus: $button-toolbar-color-focus, 
            $color-pressed: $button-toolbar-color-pressed, 
            $color-focus-over: $button-toolbar-color-focus-over, 
            $color-focus-pressed: $button-toolbar-color-focus-pressed, 
            $color-disabled: $button-toolbar-color-disabled, 
 
            $inner-border-width: $button-toolbar-inner-border-width, 
            $inner-border-width-over: $button-toolbar-inner-border-width-over, 
            $inner-border-width-focus: $button-toolbar-inner-border-width-focus, 
            $inner-border-width-pressed: $button-toolbar-inner-border-width-pressed, 
            $inner-border-width-focus-over: $button-toolbar-inner-border-width-focus-over, 
            $inner-border-width-focus-pressed: $button-toolbar-inner-border-width-focus-pressed, 
            $inner-border-width-disabled: $button-toolbar-inner-border-width-disabled, 
 
            $inner-border-color: $button-toolbar-inner-border-color, 
            $inner-border-color-over: $button-toolbar-inner-border-color-over, 
            $inner-border-color-focus: $button-toolbar-inner-border-color-focus, 
            $inner-border-color-pressed: $button-toolbar-inner-border-color-pressed, 
            $inner-border-color-focus-over: $button-toolbar-inner-border-color-focus-over, 
            $inner-border-color-focus-pressed: $button-toolbar-inner-border-color-focus-pressed, 
            $inner-border-color-disabled: $button-toolbar-inner-border-color-disabled, 
 
            $font-size: $button-medium-font-size, 
            $font-size-over: $button-medium-font-size-over, 
            $font-size-focus: $button-medium-font-size-focus, 
            $font-size-pressed: $button-medium-font-size-pressed, 
            $font-size-focus-over: $button-medium-font-size-focus-over, 
            $font-size-focus-pressed: $button-medium-font-size-focus-pressed, 
            $font-size-disabled: $button-medium-font-size-disabled, 
 
            $font-weight: $button-medium-font-weight, 
            $font-weight-over: $button-medium-font-weight-over, 
            $font-weight-focus: $button-medium-font-weight-focus, 
            $font-weight-pressed: $button-medium-font-weight-pressed, 
            $font-weight-focus-over: $button-medium-font-weight-focus-over, 
            $font-weight-focus-pressed: $button-medium-font-weight-focus-pressed, 
            $font-weight-disabled: $button-medium-font-weight-disabled, 
 
            $font-family: $button-medium-font-family, 
            $font-family-over: $button-medium-font-family-over, 
            $font-family-focus: $button-medium-font-family-focus, 
            $font-family-pressed: $button-medium-font-family-pressed, 
            $font-family-focus-over: $button-medium-font-family-focus-over, 
            $font-family-focus-pressed: $button-medium-font-family-focus-pressed, 
            $font-family-disabled: $button-medium-font-family-disabled 
        );
    }
 
    @if $include-button-default-toolbar-large-ui {
        @include extjs-button-toolbar-large-ui( 
            $ui: 'default', 
 
            $border-color: $button-toolbar-border-color, 
            $border-color-over: $button-toolbar-border-color-over, 
            $border-color-focus: $button-toolbar-border-color-focus, 
            $border-color-pressed: $button-toolbar-border-color-pressed, 
            $border-color-focus-over: $button-toolbar-border-color-focus-over, 
            $border-color-focus-pressed: $button-toolbar-border-color-focus-pressed, 
            $border-color-disabled: $button-toolbar-border-color-disabled, 
 
            $background-color: $button-toolbar-background-color, 
            $background-color-over: $button-toolbar-background-color-over, 
            $background-color-focus: $button-toolbar-background-color-focus, 
            $background-color-pressed: $button-toolbar-background-color-pressed, 
            $background-color-focus-over: $button-toolbar-background-color-focus-over, 
            $background-color-focus-pressed: $button-toolbar-background-color-focus-pressed, 
            $background-color-disabled: $button-toolbar-background-color-disabled, 
 
            $color: $button-toolbar-color, 
            $color-over: $button-toolbar-color-over, 
            $color-focus: $button-toolbar-color-focus, 
            $color-pressed: $button-toolbar-color-pressed, 
            $color-focus-over: $button-toolbar-color-focus-over, 
            $color-focus-pressed: $button-toolbar-color-focus-pressed, 
            $color-disabled: $button-toolbar-color-disabled, 
 
            $inner-border-width: $button-toolbar-inner-border-width, 
            $inner-border-width-over: $button-toolbar-inner-border-width-over, 
            $inner-border-width-focus: $button-toolbar-inner-border-width-focus, 
            $inner-border-width-pressed: $button-toolbar-inner-border-width-pressed, 
            $inner-border-width-focus-over: $button-toolbar-inner-border-width-focus-over, 
            $inner-border-width-focus-pressed: $button-toolbar-inner-border-width-focus-pressed, 
            $inner-border-width-disabled: $button-toolbar-inner-border-width-disabled, 
 
            $inner-border-color: $button-toolbar-inner-border-color, 
            $inner-border-color-over: $button-toolbar-inner-border-color-over, 
            $inner-border-color-focus: $button-toolbar-inner-border-color-focus, 
            $inner-border-color-pressed: $button-toolbar-inner-border-color-pressed, 
            $inner-border-color-focus-over: $button-toolbar-inner-border-color-focus-over, 
            $inner-border-color-focus-pressed: $button-toolbar-inner-border-color-focus-pressed, 
            $inner-border-color-disabled: $button-toolbar-inner-border-color-disabled, 
 
            $font-size: $button-large-font-size, 
            $font-size-over: $button-large-font-size-over, 
            $font-size-focus: $button-large-font-size-focus, 
            $font-size-pressed: $button-large-font-size-pressed, 
            $font-size-focus-over: $button-large-font-size-focus-over, 
            $font-size-focus-pressed: $button-large-font-size-focus-pressed, 
            $font-size-disabled: $button-large-font-size-disabled, 
 
            $font-weight: $button-large-font-weight, 
            $font-weight-over: $button-large-font-weight-over, 
            $font-weight-focus: $button-large-font-weight-focus, 
            $font-weight-pressed: $button-large-font-weight-pressed, 
            $font-weight-focus-over: $button-large-font-weight-focus-over, 
            $font-weight-focus-pressed: $button-large-font-weight-focus-pressed, 
            $font-weight-disabled: $button-large-font-weight-disabled, 
 
            $font-family: $button-large-font-family, 
            $font-family-over: $button-large-font-family-over, 
            $font-family-focus: $button-large-font-family-focus, 
            $font-family-pressed: $button-large-font-family-pressed, 
            $font-family-focus-over: $button-large-font-family-focus-over, 
            $font-family-focus-pressed: $button-large-font-family-focus-pressed, 
            $font-family-disabled: $button-large-font-family-disabled 
        );
    }
}