/* === Columns Picker === */
.picker-columns {
    width: 100%;
    height: 13rem;
    z-index: 11500;
    &.picker-modal-inline, {
        height: 10rem;
    }
    @media (orientation: landscape) and (max-height: 415px) {
        &:not(.picker-modal-inline) {
            height: 10rem;
        }
    }
}

.picker-items {
    .flexbox();
    .justify-content(center);
    padding: 0;
    text-align: right;
    font-size: 1.2rem;
    -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);
    }
    &-normal {
        width: 100%;
    }
}
.picker-items-col-wrapper {
    transition: 300ms;
    
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.picker-item {
    height: 36px;
    line-height: 36px;
    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: 36px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    margin-top: -18px;
    .hairline(top, #a8abb0);
    .hairline(bottom, #a8abb0);
    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;
    }
}

.picker-modal .bar {
  position: relative;
  top: 0;
  .hairline(top, #a8abb0);
  .hairline(bottom, #a8abb0);
}
.picker-modal .bar .title {
  color: @color-text-secondary;
  font-weight: normal;
}

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