@import 'common/variable.scss';
@import 'common/mixins.scss';
.#{$--css-prefix}{
  &select{
    position:relative;
    @include var-height();
    box-sizing:border-box;
    @include disabled();
    padding-left:0.2rem;
    &--size{
      &-default{
        @include var-height();
      }
      &-small{
        @include var-height($--box-size-height-small);
      }
    }
    &--inner{
      height:100%;
      @include flexbox('center');
      .vx-arrow{
        margin-left:6px;
        margin-right:0.28rem;
        margin-top:-0.1rem;
        transition: transform 0.18s ease 0s;
      }
    }
    &.is-focus{
      .vx-arrow{
        transform:rotate(-135deg)!important;
        margin-top:0.1rem;
      }
    }
    &--placeholder{
      @include flexbox;
      @include flexbox-item;
      span{
        margin:auto 0;
        display:block;
        @include lineClamp;
        @include placeholder;
      }
    }
    &--picker{
      .#{$--css-prefix}popup--inner{
        overflow:visible;
      }
      .vx-popup--body{
        max-height:8rem;
        max-height: 65.2vh;
      }
      .vx-popup--center{
        .vx-popup--body{
          background:#fff;
          max-width:80%;
          min-width:60%;
        }
      }
    }
  }
  &option-picker{
    .#{$--css-prefix}{
      &checkbox{
        &.is-checked{
          // @include var-color();
        }
      }
    }
    &--header{
      position:relative;
      @include divider;
      background-position:bottom;
      @include flexbox;
    }
    &--placeholder{
      @include var-height($--box-size-height-default, 'line-height');
      @include lineClamp;
      @include button;
      @include var-color($--color-light);
      @include flexbox-item;
    }
    &--cancel,&--confirm{
      @include button;
      @include var-height();
      width: 1.5rem;
      @include var-color($--color-assist);
    }
    &--confirm{
      @include var-color();
      &[disabled]{
        @include var-color($--color-assist);
      }
    }
  }
}