    @import '../global';

    $picker-row-height: 2.5em !default;
    $picker-active-border: .12em solid $active-color !default;
    $picker-sheet-radius: .4em !default;
    $picker-title-color: darken(desaturate($base-color, 10%), 25%) !default;
    $picker-title-bg-color: lighten(saturate($base-color, 10%), 5%) !default;
    $picker-title-bg-gradient: $base-gradient !default;
    $include-picker-highlights: $include-highlights !default;
    $picker-bar-gradient: $base-gradient !default;

    @mixin sencha-picker {

      .x-sheet.x-picker {
        padding: 0;
      }

      .x-sheet.x-picker .x-sheet-inner {
        position: relative;
        background-color: #fff;
        @if $include-border-radius { @include border-radius($picker-sheet-radius); }
        @include background-clip(padding-box);
        overflow: hidden;
        margin: $sheet-padding;

        @if $include-picker-highlights {
          &:before, &:after {
            z-index: 1;
            @include insertion(100%, 30%, 0, 0);
          }

          &:before {
            top: auto;
            @if $include-border-radius { @include border-bottom-radius($picker-sheet-radius); }
            bottom: 0;
            @include background-image(linear-gradient(color-stops(#fff, #bbb)));
          }
          &:after {
            @if $include-border-radius { @include border-top-radius($picker-sheet-radius); }
            @include background-image(linear-gradient(color-stops(#bbb, #fff)));
          }
        }

        .x-picker-slot {
          .x-body {
            border-left: 1px solid #999999;
            border-right: 1px solid #ACACAC;
          }

          &:first-child {
            .x-body {
              border-left: 0;
            }
          }

          &:last-child {
            .x-body {
              border-left: 0;
              border-right: 0;
            }
          }
        }
      }

      .x-picker-slot .x-scroll-view {
        z-index: 2;
        position: relative;

        @if $include-highlights {
          -webkit-box-shadow: rgba(#000,.4) -1px 0 1px;
        }
        &:first-child {
          -webkit-box-shadow: none;
        }
      }

      .x-picker-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        @include display-box;
        @include box-align(stretch);
        @include box-orient(vertical);
        @include box-pack(center);
        pointer-events: none;
      }

      .x-picker-bar {
        border-top: $picker-active-border;
        border-bottom: $picker-active-border;
        height: $picker-row-height;
        @include background-gradient(hsla(hue($active-color), 90, 50, .3), $picker-bar-gradient);
        @if $include-highlights {
          -webkit-box-shadow: rgba(#000,0.2) 0 .2em .2em;
        }
      }

      .x-use-titles {
        .x-picker-bar {
          margin-top: 1.5em;
        }
      }

      .x-picker-slot-title {
        height: 1.5em;
        position:relative;
        z-index: 2;
        @include background-gradient($picker-title-bg-color, $picker-title-bg-gradient);
        border-top: 1px solid $picker-title-bg-color;
        border-bottom: 1px solid darken($picker-title-bg-color, 20%);
        -webkit-box-shadow: 0px .1em .3em rgba(0, 0, 0, 0.3);
        padding: 0.2em 1.02em;

        > div {
          font-weight: bold;
          font-size: 0.8em;
          color: $picker-title-color;
          @if $include-picker-highlights {
            @include bevel-text('light');
          }
        }
      }

      .x-picker-slot {
        .x-dataview-inner {
          width: 100%;
        }

        .x-dataview-item {
          vertical-align: middle;
          height: $picker-row-height;
          line-height: $picker-row-height;
          font-weight: bold;
          padding: 0 10px;
        }

        .x-picker-item {
          @include ellipsis;
        }
      }

      .x-picker-right {
          text-align: right;
      }
      .x-picker-center {
          text-align: center;
      }
      .x-picker-left {
          text-align: left;
      }
    }