@import '@beisen-phoenix/style-token/css/variable.scss';

$preCls:'phoenix';

.#{$preCls}-select {
  font-family: $family;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: $M9;
  background: $M9;
  min-height: 26px;
  min-width: 100px;
  overflow: hidden;
  box-sizing: border-box;
  height: auto;
  cursor: pointer;
  @include Fs-1;
  @include smoothing;
  &--large {
    @include Fs-2;
    height: 32px;
  }
  &--small {
    height: 26px;
  }
  &--normal {
    height: 30px;
  }
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: $Ra-2;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    content: '';
    z-index: 1;
    
  }
  &.#{$preCls}-select {
    &--editable {
      &.#{$preCls}-select__placeHolder {
        cursor: text;
      }
      
      &:hover {      
        .phoenix-select__switchArrow {
          cursor: pointer;
          &--hide {
            display: none;
          }
        }
        .phoenix-select__clearIcon {
          cursor: pointer;
          &--show {
            display: block;
          }
        }
      }
      .#{$preCls}-select__inputWrapper--emptyMultiValue {
        &.#{$preCls}-select__inputWrapper--isSearch {
          cursor: text;
        }
      }
    }
    &--borderColorable {
      &::before{
        border-color: $M6;
        pointer-events: none;
      }
      &:active::before,
      &:focus::before {
        border-color: $S4;
      } 
      &:hover {
        &::before {
          border-color: $S5;
        }
      }
    }
    &--active::before {
      border-color: $S4;
    }
    &--error::before {
      border-color: $F-red;
    }
    &--disabled {
      color: $M5;
      background-color: rgba($M6, 0.3);
      cursor: not-allowed;
      &::before {
        border-color: $M6;
        z-index: 0;
      }
      .#{$preCls}-select__input--disabled {
        cursor: not-allowed;
      }
    }
    &--exsitMultiValue {
      height: auto;
      padding-top: 4px;
      padding-bottom: 1px;
      &.#{$preCls}-select {
        &--large {
          min-height: 32px;
          padding-top: 5px;
          padding-bottom: 2px;
        }
        &--small {
          min-height: 26px;
          padding-top: 2px;
          padding-bottom: 0px;
        }
        &--normal {
          min-height: 30px;
          padding-top: 4px;
          padding-bottom: 1px;
        }
      }
    }
  }
  &__calcEle {
    display: inline-block;
    opacity: 0;
    z-index: -1;
    position: absolute;
  }
  &__placeHolder {
    display: none;
    position: absolute;
    top: 50%;
    left: 8px;
    max-width: calc(100% - 32px);
    height: 20px;
    margin-top: -10px;
    overflow: hidden;
    color: $M5;
    @include Fs-1;
    line-height: 20px;
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis;
    &--show {
      display: block;
    }
    &--large {
      @include Fs-2;
    }
    &--active {
      text-overflow: unset;
    }
  }
  
  &__content {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 $Sp-8 0 8px;
    @include scrollBar;
  }
  &__inputWrapper {
    position: relative;
    float: left;
    overflow: hidden;
    max-width: 100%;
    width: auto;
    @include Fs-1;
    &--emptyMultiValue {
      height: 26px;
      width: 99%;
    }
  }
  &__input {
    &::-ms-clear {
      display: none;
    }
    display: inline-block;
    font-family: $family;
    padding: 0;
    margin: 0;
    max-width: 100%;
    background: transparent;
    border-width: 0;
    outline: 0;
    border: none;
    min-width: 10px;
    @include Fs-1;
    line-height: 26px;
    color: $M1;
    height: 26px;
    width: 100%;
    &--large {
      @include Fs-2;
    }
    &--unText {
      cursor: pointer;
      color: transparent;
      text-shadow: 0 0 0 $M1;
    }
    &--multiInput {
      width: 10px;
      height: 20px;
    }
    &--disabled {
      cursor: not-allowed;
    }
  }
  &__tipWrapper {
    display: flex;
    align-items: center;
    font-family: $family;
    box-sizing: border-box;
    color: $M1;
    width: 100%;
    background-color: #fff;
    pointer-events: none;
    padding-right: $Sp-8;
    padding-left: $Sp-3;
    left: 0;
    position: absolute;
    height: 100%;
    opacity: 0;
    @include Fs-1;
    cursor: pointer;
    &--visible {
      opacity: 1;
    }
    &--large {
      @include Fs-2;
    }
    &--isSearch {
      cursor: text;
      &.#{$preCls}-select__tipWrapper--active {
        color: $M5 
      }
    }
    &--disabled {
      color: $M2;
      background-color: transparent;
    }
  }
  &__tipEle {
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    &--isSearch {
      cursor: text;
    }
  }
  &__switchArrow {
    font-size: 12px;
    height: 12px;
    margin-left: $Sp-2;
    position: absolute;
    right: $Sp-3;
    top: 50%;
    transform: translateY(-50%);
    svg {
      display: block;
    }
    &--disabled {
      cursor: not-allowed;
    }
    &--adjustArrow {
      right: 16px;
    }
  }
  &__clearIcon {
    z-index: 1;
    display: none;
    font-size: 12px;
    height: 12px;
    margin-left: $Sp-2;
    position: absolute;
    right: $Sp-3;
    top: 50%;
    transform: translateY(-50%);
    svg {
      display: block;
    }
  }
  &__tagItem {
    box-sizing: border-box;
    height: 20px;
    line-height: 20px;
    position: relative;
    float: left;
    max-width: 99%;
    margin: 0 $Sp-2 $Sp-2 0;
    padding: 0 $Sp-3 0 $Sp-3;
    overflow: hidden;
    @include Fs-1; 
    background-color: $M7;
    border-radius: $Ra-2;
    cursor: pointer;
    &--itemDisabled {
      padding-right: $Sp-3;
      cursor: not-allowed;
    }
    &--selectDisabled {
      color: $M2;
      cursor: not-allowed;
    }
    &--small {
      margin-bottom: 3px;
    }
  }
  &__tag {
    max-width: 120px;
    display: inline-block;
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    color: $M2;
    &--safari {
      &::before {
        content: '';
        display: block;
      }
    }
  }
  &__tagIcon {
    margin-left: $Sp-2;
    padding-top: 2px;
    float: right;
    cursor: pointer;
  }
}