| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 | @import '../style/var';.van-picker {  position: relative;  background-color: @picker-background-color;  user-select: none;  &__toolbar {    display: flex;    align-items: center;    justify-content: space-between;    height: @picker-toolbar-height;  }  &__cancel,  &__confirm {    height: 100%;    padding: @picker-action-padding;    font-size: @picker-action-font-size;    background-color: transparent;    border: none;    cursor: pointer;    &:active {      opacity: @active-opacity;    }  }  &__confirm {    color: @picker-confirm-action-color;  }  &__cancel {    color: @picker-cancel-action-color;  }  &__title {    max-width: 50%;    font-weight: @font-weight-bold;    font-size: @picker-title-font-size;    line-height: @picker-title-line-height;    text-align: center;  }  &__columns {    position: relative;    display: flex;    cursor: grab;  }  &__loading {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    z-index: 3;    display: flex;    align-items: center;    justify-content: center;    color: @picker-loading-icon-color;    background-color: @picker-loading-mask-color;  }  &__frame {    position: absolute;    top: 50%;    right: @padding-md;    left: @padding-md;    z-index: 2;    transform: translateY(-50%);    pointer-events: none;  }  &__mask {    position: absolute;    top: 0;    left: 0;    z-index: 1;    width: 100%;    height: 100%;    background-image: linear-gradient(        180deg,        hsla(0, 0%, 100%, 0.9),        hsla(0, 0%, 100%, 0.4)      ),      linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));    background-repeat: no-repeat;    background-position: top, bottom;    // fix rendering failure during animation on safari    transform: translateZ(0);    pointer-events: none;  }  &-column {    flex: 1;    overflow: hidden;    font-size: @picker-option-font-size;    &__wrapper {      transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);    }    &__item {      display: flex;      align-items: center;      justify-content: center;      padding: 0 @padding-base;      color: @picker-option-text-color;      &--disabled {        cursor: not-allowed;        opacity: @picker-option-disabled-opacity;      }    }  }}
 |