//
// PICKER
//

.picker {
  position:relative;
  display: inline-block;
  overflow:hidden;
  background: $picker-spinning-wheel-background;

  .list-item {
    @include border-radius(0);
    padding: px-to-rem(10);
    border-top: none;
    border-bottom: none;
    border: none;
    background: none;
    margin-top: 0 !important;
  }

  .scrollbarV {
    display:none;
  }

  .placeholder-item {
    box-sizing:border-box;
  }

  .list {
    background: none;
    border: none !important;
  }

  .list-item * {
    color: $picker-spinning-wheel-text-color;
  }

  .scroll {
    display: block;
    float:left;
    width: auto;
  }

  .scroll + .scroll {
    border-left: $picker-spinning-wheel-divider-width solid $picker-spinning-wheel-divider-color;
  }
}

.picker:after {
  @include background($picker-spinning-wheel-overlay);
  @include pointer-none();
  content :"";
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:transparent !important;
}

.picker:before {
  @include transform(translate3d(0,-50%,0));
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: none;
  border-top: $picker-highlight-border-width solid $picker-highlight-color;
  border-bottom: $picker-highlight-border-width solid $picker-highlight-color;
  background-color:transparent !important;
}

.picker[data-items="3"]:before {
  display: block;
  height: 33.3%;
}

.picker[data-items="5"]:before {
  display: block;
  height: 20%;
}

.picker[data-items="7"]:before {
  display: block;
  height: 14.28%;
}

.picker[data-items="9"]:before {
  display: block;
  height:  11.11%;
}

// Android 4.4 on Chrome bug with pointer-events:none
.root.android.v4 .picker:after {
  display:none !important;
}

//
// Deprecated CSS rules for qx.ui.mobile.dialog.Picker
//
// Please remove when qx.ui.mobile.dialog.Picker is deleted.
//

.picker-dialog {
  @extend .popup;

  .picker-slot {
    @include transition(all no-ease);

    position:relative;
    top: -($picker-height*0.5);

    padding-top: $picker-height;
    padding-bottom:  $picker-height;
  }

  .picker-slot * {
    -webkit-backface-visibility:hidden;
  }

  .picker-label {
    position: relative;

    color:  $picker-spinning-wheel-text-color;

    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: $picker-label-font-size;
    line-height: $picker-label-height;
    padding-left: px-to-rem(5);
    padding-right: px-to-rem(5);

    top: -$picker-label-height * 0.5;
  }

  .picker-container {
    @include border-radius($picker-spinning-wheel-border-radius);
    @include background($picker-spinning-wheel-background);
    @include flex-justify-content(flex-start);
    overflow:hidden;
    position:relative;
    height: $picker-height;
  }

  // Spinning Wheel Overlay Gradient
  .picker-container.css-pointer-true:after {
    @include border-radius($picker-spinning-wheel-border-radius);
    @include background($picker-spinning-wheel-overlay);
    @include pointer-none();

    content:"";

    background-color:transparent !important;
    background-size: 100% $picker-height;


    width: 100%;
    height: 100%;
    z-index: 1000;
    position:absolute;
    top: 0px;
    left: 0px;
  }

  // Divider
  .picker-slot:not(:last-child) {
    border-right:  $picker-spinning-wheel-divider-width solid $picker-spinning-wheel-divider-color;
  }

  // Selected Area Overlay
  .picker-container:before {
    @include pointer-none();

    content:"";

    position:absolute;
    width:100%;
    z-index:1001;

    top: $picker-height*0.5;
    left: 0px;

    height: $picker-label-height;
    margin-top: -($picker-label-height*0.5) - ($picker-highlight-border-width);

    border-top:  $picker-highlight-border-width solid $picker-highlight-color;
    border-bottom:  $picker-highlight-border-width solid $picker-highlight-color;
  }
}