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

    @import '../global';

    /**
     * @class Ext.tab.Bar
     */

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

    /**
     * @var {boolean} $include-top-tabs
     * Optionally exclude top tab styles by setting to false.
     */
    $include-top-tabs: true !default;

    /**
     * @var {boolean} $include-bottom-tabs
     * Optionally exclude bottom tab styles by setting to false.
     */
    $include-bottom-tabs: true !default;

    /**
     * @var {color} $tabs-light
     * Base color for "light" UI tabs.
     */
    $tabs-light: lighten(desaturate($base-color, 10%), 5%) !default;

    /**
     * @var {color} $tabs-light-active
     * Active color for "light" UI tabs.
     */
    $tabs-light-active: saturate($active-color, 20%) !default;

    /**
     * @var {color} $tabs-dark
     * Base color for "dark" UI tabs.
     */
    $tabs-dark: darken($base-color, 20%) !default;

    /**
     * @var {color} $tabs-dark-active
     * Active color for "dark" UI tabs.
     */
    $tabs-dark-active-color: saturate(lighten($active-color, 30%), 70%) !default;

    /**
     * @var {string} $tabs-bar-gradient
     * Background gradient style for tab bars.
     */
    $tabs-bar-gradient: $base-gradient !default;

    /**
     * @class Ext.tab.Tab
     */

    /**
     * @var {string} $tabs-bottom-radius
     * Border-radius for bottom tabs.
     */
    $tabs-bottom-radius: .25em !default;

    /**
     * @var {string} $tabs-bottom-icon-size
     * Icon size for bottom tabs
     */
    $tabs-bottom-icon-size: 1.65em !default;

    /**
     * @var {string} $tabs-bottom-active-gradient
     * Background gradient style for active bottom tabs.
     */
    $tabs-bottom-active-gradient: 'glossy' !default;

    // Private

    $tabs-top-height: $global-row-height - .8em;

    /**
     * Includes default tab styles.
     *
     * @member Ext.tab.Bar
     */
    @mixin sencha-tabs {
      @if $include-top-tabs {
        @include sencha-top-tabs;
      }
      @if $include-bottom-tabs {
        @include sencha-bottom-tabs;
      }

      @if $include-tabbar-uis {
        @include sencha-tabbar-ui('light', $tabs-light, $tabs-bar-gradient, $tabs-light-active);
        @include sencha-tabbar-ui('dark', $tabs-dark, $tabs-bar-gradient, $tabs-dark-active-color);
      }

      // Rules for all tabs
      .x-tab.x-item-disabled span.x-button-label, .x-tab.x-item-disabled .x-button-icon {
        opacity: .5;
      }
      .x-tab.x-draggable {
        opacity: .7;
      }

      .x-tab {
        -webkit-user-select: none;
        overflow: visible !important;
      }
    }

    @mixin sencha-top-tabs {
      .x-tabbar.x-docked-top {
        border-bottom: .1em solid;
        height: $global-row-height;
        padding: 0 .8em;

        .x-tab {
          padding: (($tabs-top-height - 1em) / 2) .8em;
          height: $tabs-top-height;
          @if $include-border-radius { @include border-radius($tabs-top-height / 2); }
        }

        @if ($include-highlights) {
          .x-tab-active {
            -webkit-box-shadow: rgba(#fff, .2) 0 .1em .1em, inset rgba(#000, .3) 0 .1em .2em;
          }
        }

        .x-button-label {
          font-size: .8em;
          line-height: 1.2em;
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
        }
      }
    }

    @mixin sencha-bottom-tabs {
      .x-tabbar.x-docked-bottom {
        border-top: .1em solid;
        height: 3em;
        padding: 0;

        .x-tab {
          @if $include-border-radius { @include border-radius($tabs-bottom-radius); }
          min-width: 3.3em;
          position: relative;
          padding-top: .2em;

          .x-button-icon {
            -webkit-mask-size: $tabs-bottom-icon-size;
            width: $tabs-bottom-icon-size;
            height: $tabs-bottom-icon-size;
            display: block;
            margin: 0 auto;
            position: relative;
          }

          // Start of automatic tab icon shadows...
          // &:before {
          //   @include insertion;
          //   background: red;
          //   width: $tabs-bottom-icon-size;
          //   height: $tabs-bottom-icon-size;
          //   position: absolute;
          //   top: -.1em;
          // }

          .x-button-label {
            margin: 0;
            padding: .1em 0 .2em 0;
            font-size: 9px;
            line-height: 12px;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
          }
        }

        @if ($include-highlights) {
          .x-tab-active {
            -webkit-box-shadow: inset rgba(#fff, .3) 0 0 .1em;
          }
        }
      }

      @if $include-default-icons {
        @include pictos-iconmask('bookmarks');
        @include pictos-iconmask('download');
        @include pictos-iconmask('favorites');
        @include pictos-iconmask('info');
        @include pictos-iconmask('more');
        @include pictos-iconmask('time');
        @include pictos-iconmask('user');
        @include pictos-iconmask('team');
      }
    }

    /**
     * Creates a theme UI for tabbar/tab components.
     *
     *     // SCSS
     *     @include sencha-button-ui('pink', #333, 'matte', #AE537A);
     *
     *     // JS
     *     var tabs = new Ext.tab.Panel({
     *        tabBar: {
     *          ui: 'pink',
     *          dock: 'bottom',
     *          layout: { pack: 'center' }
     *        },
     *        ...
     *     });
     *
     * @param {string} $ui-label The name of the UI being created.
     *   Can not included spaces or special punctuation (used in class names)
     * @param {color} $bar-color Base color for the tab bar.
     * @param {string} $bar-gradient Background gradient style for the tab bar.
     * @param {color} $tab-active-color Background-color for active tab icons.
     *
     * @member Ext.tab.Bar
     */
    @mixin sencha-tabbar-ui($ui-label, $bar-color, $bar-gradient, $tab-active-color) {
      .x-tabbar-#{$ui-label} {
        @include background-gradient($bar-color, $bar-gradient);
        border-color: darken($bar-color, 5%);

        .x-tab {
          @include color-by-background($bar-color, 40%);
        }

        .x-tab-active {
          @include color-by-background($bar-color, 90%);
        }

        .x-tab-pressed {
          @include color-by-background($bar-color, 100%);
        }
      }

      @if $include-bottom-tabs {
        .x-tabbar-#{$ui-label}.x-docked-bottom {
          .x-tab {
            @include bevel-by-background($bar-color);
            .x-button-icon {
              @include mask-by-background($bar-color, 20%, $tabs-bar-gradient);
            }
          }

          .x-tab-active {
            @include background-gradient(lighten($bar-color, 5%), $tabs-bar-gradient);
            @include bevel-by-background(lighten($bar-color, 10%));

            .x-button-icon {
              @include background-gradient($tab-active-color, $tabs-bottom-active-gradient);
            }
          }
        }
      }

      @if $include-top-tabs {
        .x-tabbar-#{$ui-label}.x-docked-top {
          .x-tab-active {
            @include background-gradient(darken($bar-color, 5%), 'recessed');
            @include color-by-background(darken($bar-color, 5%));
          }
        }
      }
    }