@charset "UTF-8";
@import "./common/var.css";
@import "./select-dropdown.css";
@import "./input.css";
@import "./tag.css";
@import "./option.css";
@import "./option-group.css";
@import "./scrollbar.css";
@import './mixins/common.css';

@component-namespace el {

  @b select {
    display: inline-block;
    position: relative;
    min-width: 100px;

    &:hover {
      .el-input__inner {
        /*border-color: var(--select-border-color-hover);*/
      }
    }

    & .el-input__inner {
      cursor: pointer;
      padding-right: 35px;
      text-align: left;
      overflow-x: hidden;
      text-overflow: ellipsis;

      &:focus {
         /*border-color: var(--color-blue-60);*/
         /*@mixin focus-shadow;*/
      }
    }

    & .el-input {
      & .el-input__icon {
        transition: transform .3s;
        transform: translateY(-50%) translateX(0%)  rotateZ(90deg);/* wbx change */
        line-height: 16px;
        top: 50%;
        cursor: pointer;
        font-face:16px; /* wbx add */
        @when reverse {
          transform: translateY(-50%) translateX(0%)  rotateZ(270deg);/* wbx change */
        }

        @when show-close {
          transition: 0s;
          size: 16px;
          font-size: var(--select-font-size);
          right: 8px;
          text-align: center;
          transform: translateY(-50%)  translateX(-20%)  rotateZ(180deg);
          border-radius: var(--border-radius-circle);
          color: var(--select-input-color);

          &:hover {
            color: var(--select-close-hover-color);
          }
        }
      }

      &.is-disabled {
        & .el-input__inner {
          cursor: not-allowed;

          &:hover {
            border-color: var(--select-disabled-border);
          }
        }
        & .el-input__icon{
          color: var(--color-light-grey);
          }
      }
    }

    & > .el-input {
      display: block;
    }

    @e input {
      border: none;
      outline: none;
      padding: 0;
      margin-left: 10px;
      color: var(--select-multiple-input-color);
      font-size: var(--select-font-size);
      vertical-align: baseline;
      appearance: none;
      height: 28px;
      background-color: transparent;
      @when mini {
        height: 14px;
      }
    }

    @e close {
      cursor: pointer;
      position: absolute;
      top: 8px;
      z-index: var(--index-top);
      right: 25px;
      color: var(--select-input-color);
      line-height: 18px;
      font-size: var(--select-input-font-size);

      &:hover {
        color: var(--select-close-hover-color);
      }
    }

    @e tags {
      position: absolute;
      line-height: normal;
      white-space: normal;
      z-index: var(--index-normal);
      top: 50%;
      transform: translateY(-50%);
    }

    & .el-tag__close {
      margin-top: -2px;
    }

    & .el-tag {
      height: var(--select-tag-height);
      line-height: var(--select-tag-height);
      box-sizing: border-box;
      margin: 3px 0 3px 6px;
    }

    @e tag {
      display: inline-block;
      height: var(--select-tag-height);
      line-height: var(--select-tag-height);
      font-size: var(--select-font-size);
      border-radius: var(--border-radius-base);
      color: var(--select-tag-color);
      background-color: var(--select-tag-background);

      & .el-icon-close {
        font-size: var(--select-input-font-size);
      }
    }
    @e ui-label {
      float: left;
      z-index: 1;
      position: absolute;
      margin: 10px;
      pointer-events: none;
      font-size:14px;
      color:var(--color-dark-grey);
      line-height: 20px;
      & .country-name{
        color:transparent;
        display: none;
      }
    }
  }
}
.show-ui-label input{
  color:transparent;
}
.show-ui-label .el-input__inner {
  text-indent: -40px;
}
.el-select__auto{
  display: block;
}
.el-select-dropdown__item .country-name{
  padding-right:50px;
}
input::-ms-clear {display: none;}
