    @import '../global';

    /**
     * @class Ext.Toolbar
     */

    /**
     * @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($base-color, 10%));
        @include sencha-toolbar-ui('light', $base-color);
      }

      .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, 10%);

      .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-form-label {
          @include color-by-background($color);
          @include bevel-by-background($color);
        }
      }
    }