/**
 * 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-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-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-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-disabled
 * The text color of the button when the button is disabled
 *
 * @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-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-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-disabled
 * The font-family of the button when the button is disabled
 *
 * @param {number} $icon-size
 * The size of the button icon
 *
 * @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 {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 {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-disabled: null,

$padding: null,
$text-padding: null,

$background-color: null,
$background-color-over: null,
$background-color-focus: null,
$background-color-pressed: null,
$background-color-disabled: null,

$background-gradient: null,
$background-gradient-over: null,
$background-gradient-focus: null,
$background-gradient-pressed: null,
$background-gradient-disabled: null,

$color: null,
$color-over: null,
$color-focus: null,
$color-pressed: null,
$color-disabled: null,

$font-size: null,
$font-size-over: null,
$font-size-focus: null,
$font-size-pressed: null,
$font-size-disabled: null,

$font-weight: null,
$font-weight-over: null,
$font-weight-focus: null,
$font-weight-pressed: null,
$font-weight-disabled: null,

$font-family: null,
$font-family-over: null,
$font-family-focus: null,
$font-family-pressed: null,
$font-family-disabled: null,

$box-shadow: null,
$box-shadow-over: null,
$box-shadow-focus: null,
$box-shadow-pressed: null,
$box-shadow-disabled: null,

$icon-size: null,
$glyph-color: null,
$glyph-opacity: 1,
$arrow-width: null,
$arrow-height: null,
$split-width: null,
$split-height: 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: 1,
$inner-opacity-disabled: 1
) {
  .#{$prefix}btn-#{$ui} {
    border-color: $border-color;
  }

  @include x-frame('btn', $ui, $border-radius, $border-width, $padding, $background-color, null, true);

  .#{$prefix}btn-#{$ui} {
    padding-top: top($padding);
    padding-bottom: bottom($padding);

    .#{$prefix}btn-inner {
      font-size: $font-size;
      font-weight: $font-weight;
      font-family: $font-family;
      color: $color;
      padding: 0 $text-padding;
    }

    .#{$prefix}btn-arrow:after {
      position: absolute;
      top: 0px;
      right: 0.33em;
      display: inline-block;
      color: $color;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      font-size: $font-size-base;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: $fa-var-caret-down;
      &:over {
        color: $color-over;
      }
    }

    .#{$prefix}btn-arrow-right {
      padding-right: $arrow-width;
    }

    @if $include-rtl {
      .#{$prefix}rtl.#{$prefix}btn-arrow-right {
        padding-right: 0;
        padding-left: $arrow-width;
      }
    }

    .#{$prefix}btn-arrow-bottom {
      padding-bottom: $arrow-height;
    }

    .#{$prefix}btn-glyph {
      font-size: $font-size;
      color: $glyph-color;
      @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}ie8m & {
          color: mix($glyph-color, $mix-color, $glyph-opacity * 100);
        }
      }
    }
  }

  .#{$prefix}btn-#{$ui}-disabled {
    @if $border-color-disabled != $border-color {
      border-color: $border-color-disabled;
    }
    @if not is-null($background-color-disabled) {
      background-color: $background-color-disabled;
    }
    @if $box-shadow-disabled != null {
      @include box-shadow($box-shadow-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;
      }
    }
  }

//  .#{$prefix}btn-#{$ui}-icon,
//  .#{$prefix}btn-#{$ui}-noicon {
//    .#{$prefix}btn-button {
//      // this is required to prevent IE 6/quirks from crushing the icon.
//      height: $icon-size;
//    }
//    .#{$prefix}btn-inner {
//      line-height: $icon-size;
//    }
//  }

  .#{$prefix}btn-#{$ui}-icon,
  .#{$prefix}btn-#{$ui}-noicon,
  .#{$prefix}btn-#{$ui}-icon-text-left {

    .#{$prefix}btn-arrow-right {
      .#{$prefix}btn-inner {
        padding-right: 0;
      }

      @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}btn-inner {
          padding-right: $text-padding;
          padding-left: 0;
        }
      }
    }
  }

  //icons
  .#{$prefix}btn-#{$ui}-icon {
    .#{$prefix}btn-inner {
      // even though there is no text we set a width and padding as buttons shrink-wrap around this element
      width: $icon-size;
      padding: 0;
    }

    .#{$prefix}btn-icon-el {
      width: $icon-size;
      height: $icon-size;
    }
  }

  .#{$prefix}btn-#{$ui}-icon-text-left {
//    .#{$prefix}btn-button {
      // this is required to prevent IE 6/quirks from crushing the icon.
//      height: $icon-size;
//    }

    .#{$prefix}btn-inner {
//      line-height: $icon-size;
      padding-left: $icon-size + $button-icon-spacing;
    }

    @if $include-rtl {
      .#{$prefix}rtl.#{$prefix}btn-inner {
        padding-left: $text-padding;
        padding-right: $icon-size + $button-icon-spacing;
      }

      .#{$prefix}btn-arrow-right .#{$prefix}rtl.#{$prefix}btn-inner {
        padding-right: $icon-size + $button-icon-spacing;
      }
    }

    .#{$prefix}btn-icon-el {
      width: $icon-size;
      right: auto;

      @if $include-ie {
        .#{$prefix}ie6 &,
        .#{$prefix}quirks .#{$prefix}ie & {
          height: $icon-size;
        }
      }
    }

    @if $include-rtl {
      .#{$prefix}rtl.#{$prefix}btn-icon-el {
        left: auto;
        right: 0;
      }
    }
  }

  .#{$prefix}btn-#{$ui}-icon-text-right {
//    .#{$prefix}btn-button {
      // this is required to prevent IE 6/quirks from crushing the icon.
//      height: $icon-size;
//    }

    .#{$prefix}btn-inner {
      line-height: $icon-size;
      padding-right: $icon-size + $button-icon-spacing;
    }

    @if $include-rtl {
      .#{$prefix}rtl.#{$prefix}btn-inner {
        padding-right: $text-padding;
        padding-left: $icon-size + $button-icon-spacing;
      }
    }

    .#{$prefix}btn-icon-el {
      width: $icon-size;
      left: auto;

      @if $include-ie {
        .#{$prefix}ie6 &,
        .#{$prefix}quirks .#{$prefix}ie & {
          height: $icon-size;
        }
      }
    }

    @if $include-rtl {
      .#{$prefix}rtl.#{$prefix}btn-icon-el {
        left: 0;
        right: auto;
      }
    }
  }

  .#{$prefix}btn-#{$ui}-icon-text-top {
    .#{$prefix}btn-inner {
      padding-top: $icon-size + $button-icon-spacing;
    }

    .#{$prefix}btn-icon-el {
      height: $icon-size;
      bottom: auto;

      @if $include-ie {
        // in IE6 and IE old quirks the width of the icon needs to be stretched
        // so that the icon can be centered using background-position
        .#{$prefix}ie6 &,
        .#{$prefix}quirks .#{$prefix}ie & {
          width: 100%;
        }
      }
    }
  }

  .#{$prefix}btn-#{$ui}-icon-text-bottom {
    .#{$prefix}btn-inner {
      padding-bottom: $icon-size + $button-icon-spacing;
    }

    .#{$prefix}btn-icon-el {
      height: $icon-size;
      top: auto;

      @if $include-ie {
        // in IE6 and IE old quirks the width of the icon needs to be stretched
        // so that the icon can be centered using background-position
        .#{$prefix}ie6 &,
        .#{$prefix}quirks .#{$prefix}ie & {
          width: 100%;
        }
      }
    }
  }

  .#{$prefix}btn-#{$ui}-focus {
    @if $border-color-focus != $border-color {
      border-color: $border-color-focus;
    }
    @if $background-color-focus != null {
      background-color: $background-color-focus;
    }
    @if $box-shadow-focus != null {
      @include box-shadow($box-shadow-focus);
    }

    .#{$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}-over {
    @if $border-color-over != $border-color {
      border-color: $border-color-over;
    }
    @if $background-color-over != null {
      background-color: $background-color-over;
    }
    @if $box-shadow-over != null {
      @include box-shadow($box-shadow-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;
      }
      text-decoration: none;
    }
  }

  .#{$prefix}btn-#{$ui}-menu-active,
  .#{$prefix}btn-#{$ui}-pressed {
    outline: 0;
    background-image: none;

    @if $border-color-pressed != $border-color {
      border-color: $border-color-pressed;
    }
    @if $background-color-pressed != null {
      background-color: $background-color-pressed;
    }
    @if $box-shadow-pressed != null {
      @include box-shadow($box-shadow-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;
      }
    }
  }

  @if $include-slicer-border-radius {
    .#{$prefix}btn-#{$ui}-focus {
      $foo: slicer-background-stretch(btn-#{$ui}-focus, "bottom");
      .#{$prefix}frame-tl,
      .#{$prefix}frame-bl,
      .#{$prefix}frame-tr,
      .#{$prefix}frame-br,
      .#{$prefix}frame-tc,
      .#{$prefix}frame-bc {
        background-image: slicer-corner-sprite(btn-#{$ui}-focus, 'btn/btn-#{$ui}-focus-corners');
      }
      .#{$prefix}frame-ml,
      .#{$prefix}frame-mr {
        background-image: slicer-sides-sprite(btn-#{$ui}-focus, 'btn/btn-#{$ui}-focus-sides');
      }
      .#{$prefix}frame-mc {
        background-color: $background-color-focus;
        @if $background-gradient-focus != null {
          background-image: slicer-frame-background-image(btn-#{$ui}-focus, 'btn/btn-#{$ui}-focus-fbg');
        }
      }
    }

    .#{$prefix}btn-#{$ui}-over {
      $foo: slicer-background-stretch(btn-#{$ui}-over, "bottom");
      .#{$prefix}frame-tl,
      .#{$prefix}frame-bl,
      .#{$prefix}frame-tr,
      .#{$prefix}frame-br,
      .#{$prefix}frame-tc,
      .#{$prefix}frame-bc {
        background-image: slicer-corner-sprite(btn-#{$ui}-over, 'btn/btn-#{$ui}-over-corners');
      }
      .#{$prefix}frame-ml,
      .#{$prefix}frame-mr {
        background-image: slicer-sides-sprite(btn-#{$ui}-over, 'btn/btn-#{$ui}-over-sides');
      }
      .#{$prefix}frame-mc {
        background-color: $background-color-over;
        @if $background-gradient-over != null {
          background-image: slicer-frame-background-image(btn-#{$ui}-over, 'btn/btn-#{$ui}-over-fbg');
        }
      }
    }

    .#{$prefix}btn-#{$ui}-menu-active,
    .#{$prefix}btn-#{$ui}-pressed {
      $foo: slicer-background-stretch(btn-#{$ui}-pressed, "bottom");
      .#{$prefix}frame-tl,
      .#{$prefix}frame-bl,
      .#{$prefix}frame-tr,
      .#{$prefix}frame-br,
      .#{$prefix}frame-tc,
      .#{$prefix}frame-bc {
        background-image: slicer-corner-sprite(btn-#{$ui}-pressed, 'btn/btn-#{$ui}-pressed-corners');
      }
      .#{$prefix}frame-ml,
      .#{$prefix}frame-mr {
        background-image: slicer-sides-sprite(btn-#{$ui}-pressed, 'btn/btn-#{$ui}-pressed-sides');
      }
      .#{$prefix}frame-mc {
        background-color: $background-color-pressed;
        @if $background-gradient-pressed != null {
          background-image: slicer-frame-background-image(btn-#{$ui}-pressed, 'btn/btn-#{$ui}-pressed-fbg');
        }
      }
    }

    .#{$prefix}btn-#{$ui}-disabled {
      $foo: slicer-background-stretch(btn-#{$ui}-disabled, "bottom");
      .#{$prefix}frame-tl,
      .#{$prefix}frame-bl,
      .#{$prefix}frame-tr,
      .#{$prefix}frame-br,
      .#{$prefix}frame-tc,
      .#{$prefix}frame-bc {
        background-image: slicer-corner-sprite(btn-#{$ui}-disabled, 'btn/btn-#{$ui}-disabled-corners');
      }
      .#{$prefix}frame-ml,
      .#{$prefix}frame-mr {
        background-image: slicer-sides-sprite(btn-#{$ui}-disabled, 'btn/btn-#{$ui}-disabled-sides');
      }
      .#{$prefix}frame-mc {
        background-color: $background-color-disabled;
        @if $background-gradient-disabled != null {
          background-image: slicer-frame-background-image(btn-#{$ui}-disabled, 'btn/btn-#{$ui}-disabled-fbg');
        }
      }
    }
  }

  @if $include-slicer-gradient {
    @if $background-gradient-focus != null {
      .#{$prefix}nlg {
        .#{$prefix}btn-#{$ui}-focus {
          background-image: slicer-background-image(btn-#{$ui}-focus, 'btn/btn-#{$ui}-focus-bg');
        }
      }
    }

    @if $background-gradient-over != null {
      .#{$prefix}nlg {
        .#{$prefix}btn-#{$ui}-over {
          background-image: slicer-background-image(btn-#{$ui}-over, 'btn/btn-#{$ui}-over-bg');
        }
      }
    }

    @if $background-gradient-pressed != null {
      .#{$prefix}nlg {
        .#{$prefix}btn-#{$ui}-menu-active,
        .#{$prefix}btn-#{$ui}-pressed {
          background-image: slicer-background-image(btn-#{$ui}-pressed, 'btn/btn-#{$ui}-pressed-bg');
        }
      }
    }

    @if $background-gradient-disabled != null {
      .#{$prefix}nlg {
        .#{$prefix}btn-#{$ui}-disabled {
          background-image: slicer-background-image(btn-#{$ui}-disabled, 'btn/btn-#{$ui}-disabled-bg');
        }
      }
    }
  }

  @if $include-slicer-border-radius {
    .#{$prefix}nbr .#{$prefix}btn-#{$ui} {
      background-image: none;
    }
  }

  $arrow-prefix: '';
  @if $include-ui-split-arrows {
    $arrow-prefix: $ui + '-';
  }
  $arrow-suffix: '';
  @if $include-split-noline-arrows {
    $arrow-suffix: '-noline';
  }

  .#{$prefix}btn-#{$ui} {
    .#{$prefix}btn-split-right {
      background-image: theme-background-image('button/#{$arrow-prefix}s-arrow#{$arrow-suffix}');
      padding-right: $split-width;
    }

    @if $include-rtl {
      .#{$prefix}rtl.#{$prefix}btn-split-right {
        background-image: theme-background-image('button/#{$arrow-prefix}s-arrow#{$arrow-suffix}-rtl');
        padding-right: 0;
        padding-left: $split-width;
      }
    }

    .#{$prefix}btn-split-bottom {
      background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-b#{$arrow-suffix}');
      padding-bottom: $split-height;
    }
  }

  @if $include-split-over-arrows {
    .#{$prefix}btn-#{$ui}-over {
      .#{$prefix}btn-split-right {
        background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-o');
      }
      @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}btn-split-right {
          background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-o-rtl');
        }
      }
      .#{$prefix}btn-split-bottom {
        background-image: theme-background-image('button/#{$arrow-prefix}s-arrow-bo');
      }
    }
  }

  @if $opacity-disabled != 1 {
    .#{$prefix}btn-#{$ui}-disabled {
      @include opacity($opacity-disabled);
    }
  }

  @if $inner-opacity-disabled != 1 {
    .#{$prefix}btn-#{$ui}-disabled {
      .#{$prefix}btn-inner,
      .#{$prefix}btn-icon-el {
        @include opacity($inner-opacity-disabled);
      }
    }
  }

  @include x-slicer(btn-#{$ui}-focus);
  @include x-slicer(btn-#{$ui}-over);
  @include x-slicer(btn-#{$ui}-pressed);
  @include x-slicer(btn-#{$ui}-disabled);
}

@import 'Button_xsmall';
@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-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-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-disabled: $button-default-color-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-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-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-disabled: $button-default-color-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-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-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-disabled: $button-default-color-disabled
  );
}

@include extjs-button-extra-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-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-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-disabled: $button-default-color-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-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-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-disabled: $button-toolbar-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-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-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-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-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-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-disabled: $button-toolbar-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-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-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-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-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-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-disabled: $button-toolbar-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-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-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-disabled: $button-large-font-family-disabled
    );
  }
}

.#{$prefix}btn-focus {
  @include tab-focus();
}

a.#{$prefix}btn:hover,a.#{$prefix}btn:focus {
  text-decoration: none;
}

.#{$prefix}btn-icon-text-left {
  .#{$prefix}btn-icon-el {
    background-position: left center;
  }

  @if $include-rtl {
    .#{$prefix}rtl.#{$prefix}btn-icon-el {
      background-position: right center;
    }
  }
}

.#{$prefix}btn-icon-text-right {
  .#{$prefix}btn-icon-el {
    background-position: right center;
  }

  @if $include-rtl {
    .#{$prefix}rtl.#{$prefix}btn-icon-el {
      background-position: left center;
    }
  }
}

.#{$prefix}btn-icon-text-top .#{$prefix}btn-icon-el {
  background-position: center top;
}

.#{$prefix}btn-icon-text-bottom .#{$prefix}btn-icon-el {
  background-position: center bottom;
}

//.#{$prefix}btn-arrow-right {
//  background-position: right center;
//}
//
//@if $include-rtl {
//  .#{$prefix}rtl.#{$prefix}btn-arrow-right {
//    background-position: left center;
//  }
//}
//
//.#{$prefix}btn-arrow-bottom {
//  background-position: center bottom;
//}
//
//.#{$prefix}btn-arrow {
//  background-repeat: no-repeat;
//}

//split buttons
.#{$prefix}btn-split {
  display: block;
  background-repeat: no-repeat;
}

.#{$prefix}btn-split-right {
  background-position: right center;
}

@if $include-rtl {
  .#{$prefix}rtl.#{$prefix}btn-split-right {
    background-position: 0 center;
  }
}

.#{$prefix}btn-split-bottom {
  background-position: center bottom;
}

.#{$prefix}cycle-fixed-width .#{$prefix}btn-inner {
  text-align: inherit;
}

// bootstrap buttons
@import 'Button_bootstrap';

@include bootstrap-button-ui(
  $ui:'primary',
  $color:$button-primary-color,
  $background-color:$button-primary-background-color,
  $border-color:$button-primary-border-color,
  $glyph-color:$button-primary-color
);
@include bootstrap-button-ui(
  $ui:'success',
  $color:$button-success-color,
  $background-color:$button-success-background-color,
  $border-color:$button-success-border-color,
  $glyph-color:$button-success-color
);
@include bootstrap-button-ui(
  $ui:'info',
  $color:$button-info-color,
  $background-color:$button-info-background-color,
  $border-color:$button-info-border-color,
  $glyph-color:$button-info-color
);
@include bootstrap-button-ui(
  $ui:'warning',
  $color:$button-warning-color,
  $background-color:$button-warning-background-color,
  $border-color:$button-warning-border-color,
  $glyph-color:$button-warning-color
);
@include bootstrap-button-ui(
  $ui:'danger',
  $color:$button-danger-color,
  $background-color:$button-danger-background-color,
  $border-color:$button-danger-border-color,
  $glyph-color:$button-danger-color
);
@include bootstrap-button-ui(
  $ui: 'transparent',
  $color:$button-default-color,
  $background-color:transparent,
  $border-color:transparent,
  $glyph-color:$button-default-glyph-color
);

// pills
@import 'PillButton';
@include pill-button-ui(
  $ui: 'pill'
);
@include pill-button-ui(
$ui: 'pill-toolbar'
);

// input group addon modifiers
.#{$prefix}btn.hmp-input-group-btn-right {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.#{$prefix}btn.hmp-input-group-btn-left {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

