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

/**
 * @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} $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;

// Basic button style
.x-button {
  @include background-clip(padding-box);
  @include toolbar-button(transparent);
  background-color: transparent;
  min-height: $button-height;
  padding: .3em .6em .5em .6em;

  // Default icon style
  .x-button-icon {
    position: relative;
    width: 20px;
    height: 24px;

    &:before {
      font-size: 24px;
      line-height: 22px;
    }
  }

  &.x-item-disabled {
//    border-color: $disabled-color;
    .x-button-label, .x-button-icon {
//      color: $disabled-color;
    }
  }

  &.x-button-pressing,
  &.x-button-pressed,
  &.x-button-active {
    &,
    .x-button-label,
    .x-button-icon:before {
      color: $background-color;
    }
  }
}

// Button icon alignment
.x-iconalign-left .x-button-label {
  margin-left: .6em;
}
.x-iconalign-right .x-button-label {
  margin-right: .6em;
}
.x-iconalign-top .x-button-label {
  margin-top: .6em;
}
.x-iconalign-bottom .x-button-label {
  margin-bottom: .6em;
}

// Button labels
.x-button-label {
  line-height: 1.2em;
  text-transform: lowercase;
}

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

  .x-hasbadge .x-badge {
    line-height: 1.6em;
  }
}

.x-button-small,
.x-toolbar .x-button-small {
  padding: .2em .4em;
  min-height: 0;

  .x-button-label {
    font-size: $font-size-small;
  }
}

.x-button-forward,
.x-button-back {
  position: relative;
  overflow: visible;
  z-index: 1;
  border-radius: 42px;
  min-width: 42px !important;
  min-height: 42px !important;

  .x-button-label {
    display: none;
  }

  &:before {
    @include absolute-position;
    content: '[';
    font-family: 'Pictos';
    text-align: center;
    font-size: 29px;
    line-height: 37px;
    color: $foreground-color;
  }

  &.x-button-pressing {
    &:before {
      color: $background-color;
    }
  }
}

.x-button-forward {
  &:before {
    content: ']';
  }
}

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

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

// Badges
.x-hasbadge {
  overflow: visible;
}

.x-badge {
  border: 0;
  background-color: $base-color;
  color: #fff;
  font-size: 9pt;
  min-width: 30px;
  right: -3px;
  top: -2px;
  @include ellipsis;
  padding: 0 2px;
}

@if $include-default-icons {
    @include icon('calendar');
    @include icon('action');
    @include icon('add');
    @include icon('arrow_down');
    @include icon('arrow_left');
    @include icon('arrow_right');
    @include icon('arrow_up');
    @include icon('compose');
    @include icon('delete');
    @include icon('organize');
    @include icon('refresh');
    @include icon('reply');
    @include icon('search');
    @include icon('settings');
    @include icon('star');
    @include icon('trash');
    @include icon('maps');
    @include icon('locate');
    @include icon('home');
    @include icon('bookmarks');
    @include icon('download');
    @include icon('favorites');
    @include icon('info');
    @include icon('more');
    @include icon('time');
    @include icon('user');
    @include icon('team');
}

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

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

@if $include-button-uis {
  @include sencha-button-ui('action', 'transparent');
  @include sencha-button-ui('confirm', 'transparent');
  @include sencha-button-ui('decline', 'transparent');
}
