@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 {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(30%,#ffffff), color-stop(70%,#ffffff), color-stop(100%,#bbbbbb));
      background: -webkit-linear-gradient(top,  #bbbbbb 0%,#ffffff 30%,#ffffff 70%,#bbbbbb 100%);
    //  &: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;
      }

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

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

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

    @if $include-highlights {
      @include box-shadow(rgba(#000,.4) -1px 0 1px);
    }
    &:first-child {
      @include 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 {
      @include 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%);
    @include box-shadow(rgba(0, 0, 0, 0.3) 0px .1em .3em);
    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% !important;
    }

    .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;
  }
}