/* === Columns Picker === */
.weui-picker-modal {
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  border-radius: 0;
  opacity: 0.6;
  
  color: @color-text;
  transition-duration: .3s;
  height: 13rem;
  background: #EFEFF4;

  transform: translate3d(0, 100%, 0);
  transition-property: transform, opacity;

  &.picker-modal-inline {
    height: 10.8rem;
    opacity: 1;
    position: static;
    transform: translate3d(0, 0, 0);
    .toolbar {
      display: none;
    }
  }

  &.picker-columns-single {
    .picker-items-col {
      width: 100%;
    }
  }

  &.weui-picker-modal-visible {
    opacity: 1;
    transform: translate3d(0,0,0);
  }

  .picker-modal-inner {
    position: relative;
    height: 10.8rem;
  }

  .picker-columns {
      width: 100%;
      height: 13rem;
      z-index: 11500;
      &.picker-modal-inline, .popover & {
          height: 10rem;
      }
      @media (orientation: landscape) and (max-height: 415px) {
          &:not(.picker-modal-inline) {
              height: 10rem;
          }
      }
  }
  .popover.popover-picker-columns {
      width: 14rem;
  }
  .picker-items {
      .flexbox();
      .justify-content(center);
      width: 100%;
      padding: 0;
      text-align: right;
      font-size: 1rem;
      font-weight: normal;
      -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
      -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
  }
  .bar + .picker-items {
    height: (13rem - 2.2rem);
  }
  .picker-items-col {
      overflow: hidden;
      position: relative;
      max-height: 100%;

      &.picker-items-col-left {
          text-align: left;
      }
      &.picker-items-col-center {
          text-align: center;
      }
      &.picker-items-col-right {
          text-align: right;
      }
      &.picker-items-col-divider {
          color: @color-text;
          .flexbox();
          .align-items(center);
      }
  }
  .picker-items-col-wrapper {
      transition: 300ms;
      
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
  }
  .picker-item {
      height: 32px;
      line-height: 32px;
      padding: 0 10px;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      color: @color-text-gray;
      left: 0;
      top: 0;
      width: 100%;
      box-sizing: border-box;
      transition: 300ms;
      .picker-items-col-absolute &{
          position: absolute;
      }
      &.picker-item-far {
          pointer-events: none;
      }
      &.picker-selected {
          color: @color-text;
          transform: translate3d(0,0,0);
          transform: rotateX(0deg);
      }
      &.picker-before-selected {
      }
      &.picker-after-selected {
      }
  }
  .picker-center-highlight {
      height: 32px;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      width: 100%;
      top: 50%;
      margin-top: -16px;
      .hairline(top, @color-hairline);
      .hairline(bottom, @color-hairline);
      pointer-events: none;
  }
  // 3D Picker
  .picker-3d {
      .picker-items {
          overflow: hidden;
          -webkit-perspective: 1200px;
          perspective: 1200px;
      }
      .picker-items-col, .picker-items-col-wrapper, .picker-item {
          -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
      }
      .picker-items-col {
          overflow: visible;
      }
      .picker-item {
          -webkit-transform-origin: center center -110px;
          transform-origin: center center -110px;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
      }
  }
  
}

.weui-picker-overlay, .weui-picker-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  width: 100%;
  z-index: 100;
}


.city-picker {
  .col-province {
    width: 5rem;
  }
  .col-city {
    width: 6rem;
  }
  .col-district {
    width: 5rem;
  }
}

.weui-picker-container {
  .weui_cells {
    margin: 0;
    text-align: left;
  }
}
