/**
 * @class Ext.Button
 */
 
/**
 * @var {color}
 * Button background-color
 */
$button-background-color: dynamic($neutral-light-color);
 
/**
 * @var {color}
 * Button background-color when pressed
 */
$button-pressed-background-color: dynamic(button-pressed-background-color($button-background-color));
 
 
/**
 * @var {list}
 * Button shadow
 */
$button-shadow: dynamic(null);
 
/**
 * @var {list}
 * Button shadow when pressed
 */
$button-pressed-shadow: dynamic(null);
 
/**
 * @var {string/list}
 * Button background-gradient.  Can be either the name of a gradient defined by
 * {@link Global_CSS#background-gradient} or a list of color stops.
 */
$button-background-gradient: dynamic(button-background-gradient($button-background-color));
 
/**
 * @var {string/list}
 * Button background-gradient when pressed.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 */
$button-pressed-background-gradient: dynamic(button-pressed-background-gradient($button-pressed-background-color));
 
/**
 * @var {color}
 * Button text color
 */
$button-color: dynamic($highlight-color);
 
/**
 * @var {color}
 * Button text color when pressed
 */
$button-pressed-color: dynamic($button-color);
 
/**
 * @var {color/list}
 * Button border-color
 */
$button-border-color: dynamic(button-border-color($button-background-color));
 
/**
 * @var {color/list}
 * Button border-color when pressed
 */
$button-pressed-border-color: dynamic(button-pressed-border-color($button-pressed-background-color));
 
/**
 * @var {number/list}
 * Button border-width
 */
$button-border-width: dynamic(1px);
 
/**
 * @var {string/list}
 * Button border-style
 */
$button-border-style: dynamic(solid);
 
/**
 * @var {number}
 * Button border-radius
 */
$button-border-radius: dynamic(.25em);
 
/**
 * @var {number}
 * Button border-radius in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$button-border-radius-big: dynamic(.2em);
 
/**
 * @var {string/number}
 * Button font-weight
 */
$button-font-weight: dynamic($font-weight-bold);
 
/**
 * @var {number}
 * Button font-size
 */
$button-font-size: dynamic(1rem);
 
/**
 * @var {number}
 * Button font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$button-font-size-big: dynamic(null);
 
/**
 * @var {number}
 * Button line-height
 */
$button-line-height: dynamic(1.2308em);
 
/**
 * @var {number}
 * Button line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$button-line-height-big: dynamic(1.6em);
 
/**
 * @var {string}
 * Button font-family
 */
$button-font-family: dynamic($font-family);
 
/**
 * @var {number/list}
 * Button padding
 */
$button-padding: dynamic(.2308em .6em);
 
/**
 * @var {number/list}
 * Button padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$button-padding-big: dynamic(.2em .6em);
 
/**
 * @var {color}
 * Button icon color.
 */
$button-icon-color: dynamic($button-color);
 
/**
 * @var {color}
 * Button icon color when pressed.
 */
$button-pressed-icon-color: dynamic($button-pressed-color);
 
/**
 * @var {color}
 * Button icon color when disabled.
 */
$button-disabled-icon-color: dynamic($button-disabled-color);
 
/**
 * @var {number}
 * Button icon size.
 */
$button-icon-size: dynamic($button-line-height);
 
/**
 * @var {number}
 * Button icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$button-icon-size-big: dynamic($button-line-height-big);
 
/**
 * @var {number}
 * Button icon font-size.  Used for configuring the size of font icons
 */
$button-icon-font-size: dynamic($button-icon-size);
 
/**
 * @var {number}
 * Button icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$button-icon-font-size-big: dynamic($button-icon-size-big);
 
/**
 * @var {number}
 * The space between the button icon and text when the icon is horizontally aligned
 */
$button-icon-horizontal-spacing: dynamic(.6em);
 
/**
 * @var {number}
 * The space between the button icon and text when the icon is horizontally aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$button-icon-horizontal-spacing-big: dynamic($button-icon-horizontal-spacing);
 
/**
 * @var {number}
 * The space between the button icon and text when the icon is vertically aligned
 */
$button-icon-vertical-spacing: dynamic(.2em);
 
/**
 * @var {number}
 * The space between the button icon and text when the icon is vertically aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$button-icon-vertical-spacing-big: dynamic($button-icon-vertical-spacing);
 
/**
 * @var {color}
 * Button color when disabled
 */
$button-disabled-color: dynamic(null);
 
/**
 * @var {number}
 * Button opacity when disabled
 */
$button-disabled-opacity: dynamic(.5);
 
/**
 * @var {color}
 * The background-color of the button's {@link #badgeText badge}
 */
$button-badge-background-color: dynamic(darken($alert-color, 10%));
 
/**
 * @var {string/list}
 * The background-gradient of the button's {@link #badgeText badge} Can be either the name
 * of a gradient defined by {@link Global_CSS#background-gradient} or a list of color stops.
 */
$button-badge-background-gradient: dynamic($base-background-gradient);
 
/**
 * @var {color}
 * The text color of the button's {@link #badgeText badge}
 */
$button-badge-color: dynamic(color-by-background($button-badge-background-color));
 
/**
 * @var {color}
 * The border-color of the button's {@link #badgeText badge}
 */
$button-badge-border-color: dynamic(darken($button-badge-background-color, 10%));
 
/**
 * @var {number/list}
 * The border-radius of the button's {@link #badgeText badge}
 */
$button-badge-border-radius: dynamic(.2em);
 
/**
 * @var {number}
 * The min-width of the button's {@link #badgeText badge}
 */
$button-badge-min-width: dynamic(2em);
 
/**
 * @var {number}
 * The max-width of the button's {@link #badgeText badge}
 */
$button-badge-max-width: dynamic(95%);
 
/**
 * @var {string/number}
 * The font-weight of the button's {@link #badgeText badge}
 */
$button-badge-font-weight: dynamic(null);
 
/**
 * @var {number}
 * The font-size of the button's {@link #badgeText badge}
 */
$button-badge-font-size: dynamic(1em);
 
/**
 * @var {string}
 * The font-family of the button's {@link #badgeText badge}
 */
$button-badge-font-family: dynamic($button-font-family);
 
/**
 * @var {number}
 * The line-height of the button's {@link #badgeText badge}
 */
$button-badge-line-height: dynamic($button-line-height);
 
/**
 * @var {number}
 * Offset of the {@link #badgeText badge} from the top of the button
 */
$button-badge-top: dynamic(-.2em);
 
/**
 * @var {number}
 * Offset of the {@link #badgeText badge} from the right of the button
 */
$button-badge-right: dynamic(0);
 
/**
 * @var {number}
 * Offset of the {@link #badgeText badge} from the bottom of the button
 */
$button-badge-bottom: dynamic(null);
 
/**
 * @var {number}
 * Offset of the {@link #badgeText badge} from the left of the button
 */
$button-badge-left: dynamic(null);
 
/**
 * @var {number}
 * The padding of the button's {@link #badgeText badge}
 */
$button-badge-padding: dynamic(.1em .3em);
 
/**
 * @var {boolean}
 * `true` to include the "action" button UI
 */
$button-action-ui: dynamic($enable-default-uis);
 
/**
 * @var {boolean}
 * `true` to include the "alt" button UI
 */
$button-alt-ui: dynamic($enable-default-uis);
 
/**
 * @var {boolean}
 * `true` to include the "confirm" button UI
 */
$button-confirm-ui: dynamic($enable-default-uis);
 
/**
 * @var {boolean}
 * `true` to include the "decline" button UI
 */
$button-decline-ui: dynamic($enable-default-uis);
 
/**
 * @var {boolean}
 * `true` to include the "round" button UI
 */
$button-round-ui: dynamic($enable-default-uis);
 
/**
 * @var {boolean}
 * `true` to include the "small" button UI
 */
$button-small-ui: dynamic($enable-default-uis);
 
/**
 * @var {boolean}
 * `true` to include the "flat" button UI
 */
$button-flat-ui: dynamic($enable-default-uis);
 
/**
 * @var {boolean}
 * `true` to include the "plain" button UI
 */
$button-plain-ui: dynamic($enable-default-uis);
 
/**
 * @var {boolean}
 * `true` to include the "segmented" button UI
 */
$button-segmented-ui: dynamic($enable-default-uis);
 
/**
 * Creates a visual theme for a Button.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {color} $background-color
 * Button background-color
 *
 * @param {color} $pressed-background-color
 * Button background-color when pressed
 *
 * @param {list} $shadow
 * Button shadow
 *
 * @param {list} $pressed-shadow
 * Button shadow when pressed
 *
 * @param {string/list} $background-gradient
 * Button background-gradient.  Can be either the name of a gradient defined by
 * {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {string/list} $pressed-background-gradient
 * Button background-gradient when pressed.  Can be either the name of a gradient
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {color} $color
 * Button text color
 *
 * @param {color} $pressed-color
 * Button text color when pressed
 *
 * @param {color/list} $border-color
 * Button border-color
 *
 * @param {color/list} $pressed-border-color
 * Button border-color when pressed
 *
 * @param {number/list} $border-width
 * Button border-width
 *
 * @param {number/list} $border-style
 * Button border-style
 *
 * @param {number} $border-radius
 * Button border-radius
 *
 * @param {number} $border-radius-big
 * Button border-radius in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string/number} $font-weight
 * Button font-weight
 *
 * @param {number} $font-size
 * Button font-size
 *
 * @param {number} $font-size-big
 * Button font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $line-height
 * Button line-height
 *
 * @param {number} $line-height-big
 * Button line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {font-family} $font-family
 * Button font-family
 *
 * @param {number/list} $padding
 * Button padding
 *
 * @param {number/list} $padding-big
 * Button padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $icon-color
 * Button icon color.
 *
 * @param {color} $pressed-icon-color
 * Button icon color when pressed.
 *
 * @param {color} $disabled-icon-color
 * Button icon color when disabled.
 *
 * @param {number} $icon-size
 * Button icon size
 *
 * @param {number} $icon-size-big
 * Button icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-font-size
 * Button icon font-size.  Used for configuring the size of font icons
 *
 * @param {number} $icon-font-size-big
 * Button icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-horizontal-spacing
 * The space between the button icon and text when the icon is horizontally aligned
 *
 * @param {number} $icon-horizontal-spacing-big
 * The space between the button icon and text when the icon is horizontally aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-vertical-spacing
 * The space between the button icon and text when the icon is vertically aligned
 *
 * @param {number} $icon-vertical-spacing-big
 * The space between the button icon and text when the icon is vertically aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $disabled-color
 * Button color when disabled
 *
 * @param {number} $disabled-opacity
 * Button opacity when disabled
 *
 * @param {color} $badge-background-color
 * The background-color of the button's {@link #badgeText badge}
 *
 * @param {string/list} $badge-background-gradient
 * The background-gradient of the button's {@link #badgeText badge} Can be either the name
 * of a gradient defined by {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {color} $badge-color
 * The text color of the button's {@link #badgeText badge}
 *
 * @param {color} $badge-border-color
 * The border-color of the button's {@link #badgeText badge}
 *
 * @param {number/list} $badge-border-radius
 * The border-radius of the button's {@link #badgeText badge}
 *
 * @param {number} $badge-min-width
 * The min-width of the button's {@link #badgeText badge}
 *
 * @param {number} $badge-max-width
 * The max-width of the button's {@link #badgeText badge}
 *
 * @param {string/number} $badge-font-weight
 * The font-weight of the button's {@link #badgeText badge}
 *
 * @param {number} $badge-font-size
 * The font-size of the button's {@link #badgeText badge}
 *
 * @param {string} $badge-font-family
 * The font-family of the button's {@link #badgeText badge}
 *
 * @param {number} $badge-line-height
 * The line-height of the button's {@link #badgeText badge}
 *
 * @param {number} $badge-top
 * Offset of the {@link #badgeText badge} from the top of the button
 *
 * @param {number} $badge-right
 * Offset of the {@link #badgeText badge} from the right of the button
 *
 * @param {number} $badge-bottom
 * Offset of the {@link #badgeText badge} from the bottom of the button
 *
 * @param {number} $badge-left
 * Offset of the {@link #badgeText badge} from the left of the button
 *
 * @param {number} $badge-padding
 * The padding of the button's {@link #badgeText badge}
 *
 * @member Ext.Button
 */
@mixin button-ui(
    $ui: null,
 
    $background-color: null,
    $pressed-background-color: null,
 
    $shadow: null,
    $pressed-shadow: null,
 
    $background-gradient: null,
    $pressed-background-gradient: null,
 
    $color: null,
    $pressed-color: null,
 
    $border-color: null,
    $pressed-border-color: null,
 
    $border-width: null,
    $border-style: null,
 
    $border-radius: null,
    $border-radius-big: null,
 
    $font-weight: null,
    $font-size: null,
    $font-size-big: null,
    $line-height: null,
    $line-height-big: null,
    $font-family: null,
 
    $padding: null,
    $padding-big: null,
 
    $icon-color: null,
    $pressed-icon-color: null,
    $disabled-icon-color: null,
    $icon-size: null,
    $icon-size-big: null,
    $icon-font-size: null,
    $icon-font-size-big: null,
    $icon-horizontal-spacing: null,
    $icon-horizontal-spacing-big: null,
    $icon-vertical-spacing: null,
    $icon-vertical-spacing-big: null,
 
    $disabled-color: null,
    $disabled-opacity: null,
 
    $badge-background-color: null,
    $badge-background-gradient: null,
    $badge-color: null,
    $badge-border-color: null,
    $badge-border-radius: null,
    $badge-min-width: null,
    $badge-max-width: null,
    $badge-font-weight: null,
    $badge-font-size: null,
    $badge-font-family: null,
    $badge-line-height: null,
    $badge-top: null,
    $badge-right: null,
    $badge-bottom: null,
    $badge-left: null,
    $badge-padding: null
) {
    $ui-suffix: ui-suffix($ui);
 
    @if $background-color != null and $background-color != transparent {
        @if $pressed-background-color == null {
            $pressed-background-color: button-pressed-background-color($background-color);
        }
 
        @if $border-color == null {
            $border-color: button-border-color($background-color);
        }
 
        @if $color == null {
            $color: button-color($background-color);
        }
 
        @if $background-gradient == null {
            $background-gradient: button-background-gradient($background-color);
        }
    }
 
    @if $pressed-background-color != null {
        @if $pressed-border-color == null {
            $pressed-border-color: button-pressed-border-color($pressed-background-color);
        }
 
        @if $pressed-color == null {
            $pressed-color: button-pressed-color($pressed-background-color);
        }
 
        @if $pressed-background-gradient == null {
            $pressed-background-gradient: button-pressed-background-gradient($pressed-background-color);
        }
    }
 
    @if $icon-color == null {
        $icon-color: $color;
    }
 
    @if $pressed-icon-color == null {
        @if $pressed-color == null and $pressed-background-color != null {
            $pressed-icon-color: button-pressed-color($pressed-background-color);
        } @else {
            $pressed-icon-color: $pressed-color;
        }
    }
 
    .#{$prefix}button#{$ui-suffix} {
        color: $color;
        padding: $padding;
        box-shadow: $shadow;
        @include font($font-weight, $font-size, $line-height, $font-family);
        @include border($border-width, $border-style, $border-color);
 
        @if $enable-border-radius {
            @include border-radius($border-radius);
        }
 
        @if $enable-big {
            .#{$prefix}big & {
                padding: $padding-big;
                font-size: $font-size-big;
                line-height: $line-height-big;
                @include border-radius($border-radius-big);
            }
        }
 
        @include background-gradient($background-color, $background-gradient);
 
        &.#{$prefix}button-pressing, &.#{$prefix}button-pressed {
            color: $pressed-color;
            box-shadow: $pressed-shadow;
            @include background-gradient($pressed-background-color, $pressed-background-gradient);
            border-color: $pressed-border-color;
        }
 
        .#{$prefix}button-icon {
            width: $icon-size;
            height: $icon-size;
            @include icon($font-size: $icon-font-size, $font-size-big: $icon-font-size-big);
 
            @if $enable-big {
                .#{$prefix}big & {
                    width: $icon-size-big;
                    height: $icon-size-big;
                }
            }
 
 
            color: $icon-color;
        }
 
        &.#{$prefix}button-pressing, &.#{$prefix}button-pressed {
            .#{$prefix}button-icon {
                color: $pressed-icon-color;
            }
        }
 
        &.#{$prefix}disabled .#{$prefix}button-icon {
            color: $disabled-icon-color;
        }
 
        &.#{$prefix}iconalign-left .#{$prefix}button-icon {
            margin-right: $icon-horizontal-spacing;
 
            @if $enable-big and $icon-horizontal-spacing-big != $icon-horizontal-spacing {
                .#{$prefix}big & {
                    margin-right: $icon-horizontal-spacing-big;
                }
            }
        }
 
        &.#{$prefix}iconalign-right .#{$prefix}button-icon {
            margin-left: $icon-horizontal-spacing;
 
            @if $enable-big and $icon-horizontal-spacing-big != $icon-horizontal-spacing {
                .#{$prefix}big & {
                    margin-left: $icon-horizontal-spacing-big;
                }
            }
        }
 
        &.#{$prefix}iconalign-top .#{$prefix}button-icon {
            margin-bottom: $icon-vertical-spacing;
 
            @if $enable-big and $icon-vertical-spacing-big != $icon-vertical-spacing {
                .#{$prefix}big & {
                    margin-bottom: $icon-vertical-spacing-big;
                }
            }
        }
 
        &.#{$prefix}iconalign-bottom .#{$prefix}button-icon {
            margin-top: $icon-vertical-spacing;
 
            @if $enable-big and $icon-vertical-spacing-big != $icon-vertical-spacing {
                .#{$prefix}big & {
                    margin-top: $icon-vertical-spacing-big;
                }
            }
        }
 
        .#{$prefix}button-label {
            // prevents the button height from shrinking when it has no text 
            min-height: $line-height;
        }
 
        @if $icon-size != null or $icon-horizontal-spacing != null {
 
            $horz-spacing: $icon-horizontal-spacing;
            @if $horz-spacing == null {
                $horz-spacing: $button-icon-horizontal-spacing;
            }
 
            $size: $icon-size;
            @if $size == null {
                $size: $button-icon-size;
            }
 
            &.#{$prefix}iconalign-right > .#{$prefix}button-label {
                padding-left: calc(#{$size or $default-calc-value} + #{$horz-spacing or $default-calc-value});
            }
 
            &.#{$prefix}iconalign-left > .#{$prefix}button-label {
                padding-right: calc(#{$size or $default-calc-value} + #{$horz-spacing or $default-calc-value});
            }
        }
 
        @if $enable-big and ($icon-size-big != null or $icon-horizontal-spacing != null) {
 
            $horz-spacing: $icon-horizontal-spacing-big;
            @if $horz-spacing == null {
                $horz-spacing: $button-icon-horizontal-spacing-big;
            }
 
            $size: $icon-size-big;
            @if $size == null {
                $size: $button-icon-size-big;
            }
 
            &.#{$prefix}iconalign-right > .#{$prefix}button-label {
                .#{$prefix}big & {
                    padding-left: calc(#{$size or $default-calc-value} + #{$horz-spacing or $default-calc-value});
                }
            }
 
            &.#{$prefix}iconalign-left > .#{$prefix}button-label {
                .#{$prefix}big & {
                    padding-right: calc(#{$size or $default-calc-value} + #{$horz-spacing or $default-calc-value});
                }
            }
        }
 
        &.#{$prefix}disabled {
            opacity: $disabled-opacity;
            color: $disabled-color;
        }
 
        .#{$prefix}badge {
            border-color: $badge-border-color;
            min-width: $badge-min-width;
 
            @include font($badge-font-weight, $badge-font-size, $badge-line-height, $badge-font-family);
 
            top: $badge-top;
            right: $badge-right;
            bottom: $badge-bottom;
            left: $badge-left;
            padding: $badge-padding;
            max-width: $badge-max-width;
            color: $badge-color;
 
            @include background-gradient($badge-background-color, $badge-background-gradient);
 
            @if $enable-border-radius {
                @include border-radius($badge-border-radius);
            }
        }
    }
}
 
/**
 * Generates style rules for the "alt" button UI. This mixin is invoked automatically
 * when {@link #$button-alt-ui} is `true`.
 *
 * Can be overridden in derived themes to customize the look and feel of the "alt" UI.
 *
 * @member Ext.Button
 * @protected
 */
@mixin button-alt-ui {
    @include button-ui( 
        $ui: 'alt', 
        $color: $panel-tool-color, 
        $background-color: transparent, 
        $border-width: 0, 
        $pressed-background-color: transparent 
    );
}
 
/**
 * Generates style rules for the "action" button UI. This mixin is invoked automatically
 * when {@link #$button-action-ui} is `true`.
 *
 * Can be overridden in derived themes to customize the look and feel of the "action" UI.
 *
 * @member Ext.Button
 * @protected
 */
@mixin button-action-ui {
    @include button-ui( 
        $ui: 'action', 
        $background-color: $base-highlight-color 
    );
}
 
/**
 * Generates style rules for the "confirm" button UI. This mixin is invoked automatically
 * when {@link #$button-confirm-ui} is `true`.
 *
 * Can be overridden in derived themes to customize the look and feel of the "confirm" UI.
 *
 * @member Ext.Button
 * @protected
 */
@mixin button-confirm-ui {
    @include button-ui( 
        $ui: 'confirm', 
        $background-color: desaturate(darken($confirm-color, 10%), 5%) 
    );
}
 
/**
 * Generates style rules for the "decline" button UI. This mixin is invoked automatically
 * when {@link #$button-decline-ui} is `true`.
 *
 * Can be overridden in derived themes to customize the look and feel of the "decline" UI.
 *
 * @member Ext.Button
 * @protected
 */
@mixin button-decline-ui {
    @include button-ui( 
        $ui: 'decline', 
        $background-color: desaturate(darken($alert-color, 10%), 5%) 
    );
}
 
/**
 * Generates style rules for the "round" button UI. This mixin is invoked automatically
 * when {@link #$button-round-ui} is `true`.
 *
 * Can be overridden in derived themes to customize the look and feel of the "round" UI.
 *
 * @member Ext.Button
 * @protected
 */
@mixin button-round-ui {
    @include button-ui( 
        $ui: 'round', 
        $border-radius: 10000px, 
        $border-radius-big: 20000px 
    );
}
 
/**
 * Generates style rules for the "flat" button UI. This mixin is invoked automatically
 * when {@link #$button-flat-ui} is `true`.
 *
 * Can be overridden in derived themes to customize the look and feel of the "flat" UI.
 *
 * @member Ext.Button
 * @protected
 */
@mixin button-flat-ui {
    @include button-ui( 
        $ui: 'flat', 
        $border-width: 0, 
        $background-color: transparent 
    );
}
 
/**
 * Generates style rules for the "flat" button UI. This mixin is invoked automatically
 * when {@link #$button-flat-ui} is `true`.
 *
 * Can be overridden in derived themes to customize the look and feel of the "flat" UI.
 *
 * @member Ext.Button
 * @protected
 */
@mixin button-plain-ui {
    @include button-ui( 
        $ui: 'plain', 
        $border-width: 0, 
        $background-color: transparent 
    );
}
 
/**
 * Generates style rules for the "segmented" button UI. This mixin is invoked automatically
 * when {@link #$button-segmented-ui} is `true`. This UI will be applied to
 * buttons that are used inside `Ext.SegmentedButton`.
 *
 * Can be overridden in derived themes to customize the look and feel of the "segmented" UI.
 *
 * @member Ext.Button
 * @protected
 */
@mixin button-segmented-ui {
    // Do nothing by default 
}
 
/**
 * Creates a theme UI for buttons.
 * Also automatically generates UIs for {ui-label}-round and {ui-label}-small.
 *
 *     // SCSS
 *     @include sencha-button-ui('secondary', #99A4AE, 'glossy');
 *
 *     // JS
 *     var cancelBtn = new Ext.Button({text: 'Cancel', ui: 'secondary'});
 *
 * @param {string} $ui-label The name of the UI being created.
 *   Can not included spaces or special punctuation (used in class names)
 * @param {color} $color Base color for the UI.
 * @param {string} $gradient Default gradient for the UI.
 *
 * @member Ext.Button
 * @deprecated 6.0 Use {@link #button-ui} instead
 */
@mixin sencha-button-ui($ui-label, $color, $gradient: $button-background-gradient) {
    @include button-ui( 
        $ui: $ui-label, 
        $background-color: $color, 
        $background-gradient: $gradient 
    );
}