.#{$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);
  }

  &-placeholder {
    color: var(--Form-input-placeholderColor);
    user-select: none;
    position: absolute;
    // margin-top: 2 * var(--Form-input-borderWidth);
    line-height: var(--Form-input-lineHeight);
  }

  &-input {
    min-height: var(--Form-input-height);
    height: auto;
  }

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

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

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

  .#{$ns}Picker-valueWrap {
    margin-bottom: calc(var(--gap-xs) * -1);
    line-height: 1;
  }

  .#{$ns}Picker-value {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    vertical-align: middle;
    line-height: calc(
      var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
    );
    display: inline-block;
    font-size: var(--Form-selectValue-fontSize);
    color: var(--Form-selectValue-color);
    background: var(--Form-selectValue-bg);
    border: px2rem(1px) solid var(--Form-selectValue-borderColor);
    border-radius: 2px;
    margin-right: var(--gap-xs);
    margin-bottom: var(--gap-xs);
  }

  .#{$ns}Picker-valueIcon {
    cursor: pointer;
    border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
    padding: 1px 5px;

    &:hover {
      background: var(--Form-selectValue-onHover-bg);
    }
  }

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

  &-btn {
    cursor: pointer;
    color: var(--Picker-iconColor);

    &: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);
  }
}