.#{$ns}Picker {
  @include input-text();
  outline: none;

  &.is-focus>&-input {
    border-color: var(--Form-input-onFocused-borderColor);
    box-shadow: var(--Form-input-boxShadow);
    background: var(--Form-input-onFocused-bg);
  }

  &.is-disabled {
    pointer-events: none;
    opacity: var(--Button-onDisabled-opacity);

    .#{$ns}Picker-valueWrap {
      line-height: unset;
      min-height: auto;

      .#{$ns}Picker-values {
        line-height: unset;
      }
    }
  }

  &-placeholder {
    color: var(--saas-font-size-dark-black);
    user-select: none;
    position: absolute;
    height: 100%;
    line-height: calc(var(--Form-input-height) - 0.0625rem*2);
    //Aug
    @include ellipsis();
    width: calc(100% - 35px);
  }

  &-input {
    min-height: var(--Form-input-height);
    padding: 0 0.625rem;
    height: auto;
    @include media-breakpoint-down(sm) {
      background: none;
    }
    color: var(--saas-Title-Text);
  }

  .#{$ns}Picker-values {
    display: inline;
  }

  &-valueWrap {
    flex-grow: 1;
    position: relative;

    >input {
      width: 1rem;
      display: inline-block;
      height: auto;
    }
  }

  .#{$ns}Picker-valueWrap {
    margin-bottom: calc(var(--gap-xs) * -1);
    min-height: calc(var(--Form-input-height) - (0.0625rem*2));
    overflow: hidden;

    .#{$ns}Picker-valueWraps {
      max-width: calc(100% - 16px);
      color: var(--saas-Title-Text);
    }

    .#{$ns}Picker-values {
      display: inline-block;
      @include ellipsis;
      line-height: calc(var(--Form-input-height) - (0.0625rem*2));
    }
  }

  .#{$ns}Picker-value {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    line-height: 24px;
    display: inline-block;
    font-size: var(--Form-input-fontSize);
    color: var(--ResultBox-value-color);
    background: var(--ResultBox-value-bg);
    border-radius: 2px;
    margin: 0 3px;
    padding: 0 var(--gap-xs);
  }


  .#{$ns}Picker-valueIcon {
    cursor: pointer;
    color: var(--ResultBox-icon-color);
    padding: 0 var(--gap-xs);
    line-height: 18px;
    flex-wrap: nowrap;
    display: inline-flex;
    align-items: center;
    user-select: none;
    font-size: 10px;
  }

  .#{$ns}Picker-valueLabel {
    padding: 0 var(--gap-xs);
  }



  &-btn {
    cursor: pointer;
    color: var(--saas-font-size-black);
    position: absolute;
    right: 5px;
    width: 18px;
    height: 100%;
    display: flex;
    align-items: center;
    // line-height: calc(var(--Form-input-height) - 0.0625rem*2);
    // svg {
    //   color: var(--saas-Placeholder-Text);
    // }
    // &:hover {
    //   color: var(--Picker-onHover-iconColor);
    // }
  }

  &-clear {
    display: inline-block;
    @include input-clear();
    line-height: 1;
    margin-right: var(--gap-xs);
  }
}

.#{$ns}PickerControl.is-inline {
  .#{$ns}Picker {
    display: inline-block;
    min-width: px2rem(150px);
    width: 100%;
  }
}

.#{$ns}Picker-ResultBox-overflow {

  .ant-popover-inner-content {
    max-width: 400px;
    max-height: 400px;
    padding: 5px 6px;

    @include media-breakpoint-down(sm) {
      max-width: 200px;
      max-height: 200px;
    }

    .#{$ns}Picker-values {
      display: flex;
      overflow: auto;
      flex-wrap: wrap;

      &::-webkit-scrollbar {
        width: 0;
      }

      .#{$ns}Picker-value {
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        line-height: 24px;
        display: inline-block;
        font-size: var(--Form-input-fontSize);
        color: var(--ResultBox-value-color);
        background: var(--ResultBox-value-bg);
        border-radius: 2px;
        margin-right: var(--gap-xs);
        padding: 0 var(--gap-xs);
        word-wrap: break-word;
        white-space: wrap;
        margin-bottom: 4px;

        .#{$ns}Picker-valueIcon {
          cursor: pointer;
          color: var(--ResultBox-icon-color);
          padding: 0 var(--gap-xs);
          line-height: 18px;
          flex-wrap: nowrap;
          display: inline-flex;
          align-items: center;
          user-select: none;
          font-size: 10px;
        }
      }

      .#{$ns}Picker-valueLabel-background {
        background: transparent;
        font-size: 13px;

        &:hover {
          background: var(--ResultBox-value--onHover-bg);
        }
      }
    }
  }
}