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

/**
 * @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: 1px !default;

/**
 * @var {string} $button-gradient Default gradient for buttons.
 */
$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;

// Basic button style
.x-button {
    @include background-clip(padding-box);
    @include toolbar-button(#ccc, $button-gradient);

    @if $include-border-radius {
        @include border-radius($button-radius);
    }

    min-height: $button-height;
    padding: .3em .6em;

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

        &:before {
            font-size: 30px;
            line-height: 38px;
        }
    }

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

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

.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 {
  font-weight: bold;
  line-height: 1.2em;
}

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

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

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

  .x-button-icon {
    &:before {
        font-size: 29px;
        line-height: 28px;
    }
  }
}

.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: .045em; // 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.23;

$mask-offset: $button-radius - $overlap-width + $shadow-width - .02;
//$mask-offset: $button-height;

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

.x-button-forward,
.x-button-back {
    position: relative;
    overflow: visible;
    height: $button-height - 0.1;
    z-index: 1;

    &:before, &:after {
        @include insertion(15px, auto, -2px, auto);
        bottom: -2px;
        z-index: 2;
        -webkit-mask: 4px 0 theme_image('default', "tip2_left.png") no-repeat;
        -webkit-mask-size: 15px 100%;
        overflow: hidden;
    }
}

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

    &:before {
        left: -15px;
    }
    &:after {
        left: -14px;
    }
}

.x-button-forward,
.x-toolbar .x-button-forward {
    margin-right: $tip-width - $shadow-width + $toolbar-spacing;
    padding-right: .4em;

    &:before, &:after {
        -webkit-mask: -4px 0 theme_image('default', "tip2_right.png") no-repeat;
    }
    &:before {
        right: -15px;
    }
    &:after {
        right: -14px;
    }
}

// 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;
    min-height: 0;
    text-shadow: none;
    line-height: auto;
    height: 1.9em;
    padding: 0 0.5em;

    @if $include-border-radius {
        @include border-radius(none);
    }

    & > * {
        overflow: visible;
    }

    &.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));
    }
}


// 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(.x-first) {
        border-left: 0;
    }
}

// Badges
$badge-size: 2em !default;
$badge-radius: .2em !default;
$badge-bg-color: darken($alert-color, 10%) !default;
$badge-bg-gradient: $base-gradient !default;

.x-hasbadge {
    overflow: visible;
    .x-badge {
        @extend .x-button-label;

        border-color: darken($badge-bg-color, 10%);
        min-width: $badge-size;
        line-height: 1.2em;
        top: -.2em;
        padding: .1em .3em;

        @include background-clip(padding-box);
        @include color-by-background($badge-bg-color, $contrast: 50%);
        @include background-gradient($badge-bg-color, $badge-bg-gradient);

        @if $include-border-radius {
            @include border-radius($badge-radius);
        }

        @if $include-button-highlights {
            @include bevel-by-background($badge-bg-color);
            @include box-shadow(rgba(#000, .5) 0 .1em .1em);
        }
    }
}

@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.
 * @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);
    }

    @if $include-border-radius {
        .x-button.x-button-#{$ui-label}-round {
            @extend .x-button-round;
        }
    }

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

@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%));
}
