@import '../global';

/**
 * @class Ext.Toolbar
 */

/**
 * @var {color} $toolbar-base-color
 * The primary color variable from which toolbars derive their light and dark UIs.
 */
$toolbar-base-color: $base-color !default;

/**
 * @var {measurement} $toolbar-spacing
 * Space between items in a toolbar (like buttons and fields)
 */
$toolbar-spacing: .2em !default;

/**
 * @var {string} $toolbar-gradient
 * Background gradient style for toolbars.
 */
$toolbar-gradient: $base-gradient !default;

/**
 * @var {boolean} $include-toolbar-uis
 * Optionally disable separate toolbar UIs (light and dark).
 */
$include-toolbar-uis: $include-default-uis !default;

/**
 * Includes default toolbar styles.
 */
@mixin sencha-toolbar {

  .x-toolbar {
    padding: 0 $toolbar-spacing;
    overflow: hidden;
    position: relative;
    height: $global-row-height;

    & > * {
      z-index: 1;
    }

    &.x-docked-top {
      border-bottom: .1em solid;
    }

    &.x-docked-bottom {
      border-top: .1em solid;
    }

    &.x-docked-left {
      width: 7em;
      height: auto;
      padding: $toolbar-spacing;
      border-right: .1em solid;
    }

    &.x-docked-right {
      width: 7em;
      height: auto;
      padding: $toolbar-spacing;
      border-left: .1em solid;
    }
  }

  .x-title {
    line-height: $global-row-height - .5em;
    font-size: 1.2em;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0.3em;
    max-width: 100%;

    .x-innerhtml {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 .3em;
    }
  }

  @if $include-toolbar-uis {
    @include sencha-toolbar-ui('dark', darken($toolbar-base-color, 10%));
    @include sencha-toolbar-ui('light', $toolbar-base-color);
    @include sencha-toolbar-ui('neutral', $neutral-color);

    .x-toolbar.x-toolbar-neutral .x-toolbar-inner .x-button.x-button-pressing {
      $mask-radial-glow: lighten($base-color, 25);
      @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');
      }
    }
  }

  .x-navigation-bar {
    .x-container {
      overflow: visible;
    }
  }
}

/**
 * Creates a theme UI for toolbars.
 *
 *     // SCSS
 *     @include sencha-toolbar-ui('sub', #58710D, 'glossy');
 *
 *     // JS
 *     var myTb = new Ext.Toolbar({title: 'My Green Glossy Toolbar', ui: 'sub'})
 *
 * @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: $toolbar-gradien Background gradient style for the UI.
 */
@mixin sencha-toolbar-ui($ui-label, $color, $gradient: $toolbar-gradient) {

  $toolbar-border-color: darken($color, 50%);
  $toolbar-button-color: darken($color, 5%);

  .x-toolbar-#{$ui-label} {
    @include background-gradient($color, $gradient);
    border-color: $toolbar-border-color;

    .x-title {
      @include color-by-background($color);
      @include bevel-by-background($color);
    }

    &.x-docked-top {
      border-bottom-color: $toolbar-border-color;
    }

    &.x-docked-bottom {
      border-top-color: $toolbar-border-color;
    }

    &.x-docked-left {
      border-right-color: $toolbar-border-color;
    }

    &.x-docked-right {
      border-left-color: $toolbar-border-color;
    }

    .x-button,
    .x-field-select .x-component-outer,
    .x-field-select .x-component-outer:before {
      @include toolbar-button($toolbar-button-color, $gradient);
    }

    .x-label,
    .x-form-label {
      font-weight: bold;
      @include color-by-background($color);
      @include bevel-by-background($color);
    }
  }
}