    // Toolbar icons used with permission from Drew Wilson
    // http://pictos.drewwilson.com/
    // Pictos icons are (c) 2010 Drew Wilson

    @import '../global';

    /**
     * @class Ext.Button
     */

    /**
     * @var {measurement} $button-height Default height for buttons.
     */
    $button-height: 1.8em;

    /**
     * @var {measurement} $button-radius Default border-radius for buttons.
     */
    $button-radius: .4em !default;

    /**
     * @var {measurement} $button-stroke-weight Default border width for buttons.
     */
    $button-stroke-weight: .1em !default;

    /**
     * @var {string} $button-gradient Default gradient for buttons.
     *
     * See {@link Global_CSS#background-gradient background-gradient}.
     */
    $button-gradient: $base-gradient !default;

    /**
     * @var {string} $toolbar-icon-size Default size (width and height) for toolbar icons.
     */
    $toolbar-icon-size: 1.4em !default;

    /**
     * @var {boolean} $include-button-uis Optionally disable separate button UIs, including action, confirm, and decline.
     */
    $include-button-uis: $include-default-uis !default;

    /**
     * @var {boolean} $include-button-highlights Optionally disable special CSS3 effects on buttons including gradients, text-shadows, and box-shadows.
     */
    $include-button-highlights: $include-highlights !default;

    /**
     * Includes default button styles.
     *
     * See {@link Global_CSS#background-gradient background-gradient}.
     */
    @mixin sencha-buttons {
      // Basic button style
      .x-button {
        @include background-clip(padding-box);
        @if $include-border-radius { @include border-radius($button-radius); }
        @include display-box;
        @include box-align(center);
        @include toolbar-button(#ccc, $button-gradient);
        min-height: $button-height !important;
        padding: .3em .6em;
        position: relative;
        overflow: hidden;
        -webkit-user-select: none;

        // Default icon style
        .x-button-icon {
          width: 2.1em;
          height: 2.1em;
          background-repeat: no-repeat;
          background-position: center;
          display: block;

          &.x-icon-mask {
            width: 1.3em;
            height: 1.3em;
            -webkit-mask-size: 1.3em;
          }
        }

        &.x-item-disabled .x-button-label, &.x-item-disabled .x-button-icon {
          opacity: .5;
        }
      }

      .x-button-round {
        @if $include-border-radius { @include border-radius($button-height/2); }
        padding: .1em $button-height/2;
      }

      // Button icon alignment
      .x-iconalign-left, .x-icon-align-right {
        @include box-orient(horizontal);
      }
      .x-iconalign-top, .x-iconalign-bottom {
        @include box-orient(vertical);
      }
      .x-iconalign-bottom, .x-iconalign-right {
        @include box-direction(reverse);
      }
      .x-iconalign-center {
        @include box-pack(center);
      }
      .x-iconalign-left .x-button-label {
        margin-left: $toolbar-spacing * 1.5;
      }
      .x-iconalign-right .x-button-label {
        margin-right: $toolbar-spacing * 1.5;
      }
      .x-iconalign-top .x-button-label {
        margin-top: $toolbar-spacing * 1.5;
      }
      .x-iconalign-bottom .x-button-label {
        margin-bottom: $toolbar-spacing * 1.5;
      }

      // Button labels
      .x-button-label {
        @include box-flex(1);
        @include box-align(center);
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        font-weight: bold;
        line-height: 1.2em;
        display: block;
        overflow: hidden;
      }

      // Toolbar button styling
      .x-toolbar .x-button {
        margin: 0 .2em;
        padding: .3em .6em;

        .x-button-label {
          font-size: .7em;
        }
      }

      .x-button-small, .x-toolbar .x-button-small {
        @if $include-border-radius { @include border-radius(.3em); }
        padding: .2em .4em;
        min-height: 0;

        .x-button-label {
          font-size: .6em;
        }

        .x-button-icon {
          width: .75em;
          height: .75em;
        }
      }

      // Back/Forward buttons
      $shadow-width: .065em; // Space between tip and its shadow
      $overlap-width: .2em; // how far the mask is clipped

      // $mask-height: $button-height + $button-stroke-weight * 2; // Ugh, this is non-specific... borders?
      $mask-height: $button-height;
      $mask-width: $mask-height/2.33;

      $mask-offset: $button-radius - $overlap-width - $button-stroke-weight + $shadow-width - .02em;

      $tip-width: $mask-width - $mask-offset + $shadow-width;

      .x-button-forward, .x-button-back {
        position: relative;
        overflow: visible;
        height: $button-height;
        z-index: 1;
        &:before, &:after {
          @include insertion($mask-width, $mask-height, -$button-stroke-weight, auto);
          z-index: 2;
          -webkit-mask: $mask-offset 0 theme_image($theme-name, "tip.png") no-repeat;
          -webkit-mask-size: $mask-width $mask-height;
          overflow: hidden;
        }
      }

      .x-button-back,
      .x-toolbar .x-button-back {
        margin-left: $tip-width - $shadow-width + $toolbar-spacing;
        padding-left: .4em;
        &:before {
          left: - $tip-width;
        }
        &:after {
          left: - $tip-width + $shadow-width;
        }
      }

      .x-button-forward,
      .x-toolbar .x-button-forward {
        margin-right: $tip-width - $shadow-width + $toolbar-spacing;
        padding-right: .4em;
        &:before, &:after {
          -webkit-mask: -$mask-offset 0 theme_image($theme-name, "tip_right.png") no-repeat;
        }
        &:before {
          right: - $tip-width;
        }
        &:after {
          right: - $tip-width + $shadow-width;
        }
      }

      // Plain buttons automatically use a margin trick to have a
      // wide gradial glow for pressed state.
      .x-button.x-button-plain,
      .x-toolbar .x-button.x-button-plain {
        background: none;
        border: 0 none;
        @include box-shadow(none);
        @if $include-border-radius { @include border-radius(none); }
        min-height: 0;
        text-shadow: none;
        line-height: auto;
        height: auto;
        padding: 0.5em;

        & > * {
          overflow: visible;
        }

        .x-button-icon {
          -webkit-mask-size: $toolbar-icon-size;
          width: $toolbar-icon-size;
          height: $toolbar-icon-size;
        }

        &.x-button-pressed {
          background: none;
          -webkit-box-shadow: none;

          $mask-radial-glow: lighten($active-color, 50%);
          @include background-image(radial-gradient(fade-out($mask-radial-glow, .3), fade-out($mask-radial-glow, 1) 24px));
          .x-button-icon.x-button-mask {
            @include background-gradient(#fff, 'recessed');
          }
        }
      }

      // SegmentedButtons
      .x-segmentedbutton .x-button {
        margin: 0;

        @if $include-border-radius {
          @include border-radius(0);

          &.x-first {
            @include border-left-radius($button-radius);
          }
          &.x-last {
            @include border-right-radius($button-radius);
          }
        }

        &:not(:first-child) {
          border-left: 0;
        }
      }

      // Badges
      $badge-size: 2em !default;
      $badge-bg-color: darken($alert-color, 20%) !default;
      $badge-bg-gradient: 'glossy';

      .x-hasbadge {
        overflow: visible;
        .x-badge {
          @extend .x-button-label;
          @if $include-border-radius { @include border-radius($badge-size/2); }
          @include background-clip(padding-box);
          padding: .15em .25em;
          z-index: 2;
          @if $include-button-highlights {
            @include bevel-by-background($badge-bg-color);
            -webkit-box-shadow: #000 0 .1em .2em;
          }
          overflow: hidden;
          color: #fff;
          border: 2px solid #fff;
          position: absolute;
          width: auto;
          min-width: $badge-size;
          height: $badge-size;
          line-height: 1.2em;
          font-size: .6em;
          top: -.15em;
          right: 0px;
          max-width: 100%;

          @include background-gradient($badge-bg-color, $badge-bg-gradient);
          display: inline-block;
        }
      }

      @if $include-default-icons {
        @include pictos-iconmask('action');
        @include pictos-iconmask('add');
        @include pictos-iconmask('arrow_down');
        @include pictos-iconmask('arrow_left');
        @include pictos-iconmask('arrow_right');
        @include pictos-iconmask('arrow_up');
        @include pictos-iconmask('compose');
        @include pictos-iconmask('delete');
        @include pictos-iconmask('organize');
        @include pictos-iconmask('refresh');
        @include pictos-iconmask('reply');
        @include pictos-iconmask('search');
        @include pictos-iconmask('settings');
        @include pictos-iconmask('star');
        @include pictos-iconmask('trash');
        @include pictos-iconmask('maps');
        @include pictos-iconmask('locate');
        @include pictos-iconmask('home');
      }

      @if $include-button-uis {
        @include sencha-button-ui('action', $active-color);
        @include sencha-button-ui('confirm', desaturate(darken($confirm-color, 10%), 5%));
        @include sencha-button-ui('decline', desaturate(darken($alert-color, 10%), 5%));
      }
    }

    /**
     * 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.
     */
    @mixin sencha-button-ui($ui-label, $color, $gradient: $button-gradient) {
      .x-button.x-button-#{$ui-label}, .x-button.x-button-#{$ui-label}-round, .x-button.x-button-#{$ui-label}-small {
        @include toolbar-button($color, $gradient);
      }

      .x-button.x-button-#{$ui-label}-round {
        @extend .x-button-round;
      }

      .x-button.x-button-#{$ui-label}-small {
        @extend .x-button-small;
      }
    }