// 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;
    @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-pressing, &.x-button-pressed {
      background: 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;
  }
}
