/* === Columns Picker === */
.picker-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 13000;
}

.picker-columns {
    width: 100%;
    height: 260px;
    z-index: 11500;
    &.picker-modal-inline, .popover & {
        height: 216px;
    }
    @media (orientation: landscape) and (max-height: 415px) {
        &:not(.picker-modal-inline) {
            height: 216px;
        }
    }
}
.popover.popover-picker-columns {
    width: 280px;
}
.picker-items {
    .flexbox();
    .justify-content(center);
    padding: 0;
    text-align: right;
    font-size: 24px;
    -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);
}
.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:#000;
        .flexbox();
        .align-items(center);
    }
}
.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:#707274;
    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: #000;
        .transform(translate3d(0,0,0) rotateX(0deg));
    }
}
.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;
}
