@import '../global';

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

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

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

/**
 * Includes default toolbar styles.
 *
 * @member Ext.Toolbar
 * @xtype toolbar
 */
@mixin sencha-toolbar {
  
  .x-toolbar {
    height: $global-row-height;
    padding: 0 $toolbar-spacing;
    overflow: hidden;
    position: relative;
    
    & > * {
      z-index: 1;
    }
    
    &.x-docked-top {
      border-bottom: .1em solid;
    }

    &.x-docked-bottom {
      border-top: .1em solid;
    }
  }
  
  .x-toolbar-title {
    @include stretch;
    z-index: 0;
    line-height: $global-row-height - .5em;
    font-size: 1.2em;
    text-align: center;
    font-weight: bold;
  }
  
  @if $include-toolbar-uis {
    @include sencha-toolbar-ui('dark', darken($base-color, 10%));
    @include sencha-toolbar-ui('light', $base-color);
  }
}

/**
 * Creates a theme UI for toolbars.
 *
 * @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.
 *
 * @example
 * // SCSS
 * @include sencha-toolbar-ui('sub', #58710D, 'glossy');
 * 
 * // JS
 * var myTb = new Ext.Toolbar({title: 'My Green Glossy Toolbar', ui: 'sub'})
 * 
 * @member Ext.Toolbar
 * @xtype toolbar
 */
@mixin sencha-toolbar-ui($ui-label, $color, $gradient: $toolbar-gradient) {
  
  $toolbar-border-color: darken($color, 50%);
  $toolbar-button-color: darken($color, 10%);
  
  .x-toolbar-#{$ui-label} {
    @include background-gradient($color, $gradient);
    border-color: $toolbar-border-color;
    
    .x-toolbar-title {
      @include color-by-background($color);
      @include bevel-by-background($color);
    }
    
    .x-button, .x-field-select .x-input-text, .x-field-select:before {
      @include toolbar-button($toolbar-button-color, $gradient);
    }
  }
}