.#{$ns}Picker { @include input-text(); outline: none; &.is-focus > &-input { border-color: $Form-input-onFocused-borderColor; box-shadow: $Form-input-boxShadow; @if $Form-input-onFocused-bg !=$Form-input-bg { background-color: $Form-input-onFocused-bg; } } &-placeholder { color: $Form-input-placeholderColor; user-select: none; position: absolute; // margin-top: 2 * $Form-input-borderWidth; line-height: $Form-input-lineHeight; } &-input { min-height: $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: -$gap-xs; line-height: 1; } .#{$ns}Picker-value { cursor: pointer; user-select: none; white-space: nowrap; vertical-align: middle; line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px); display: inline-block; font-size: $Form-selectValue-fontSize; color: $Form-selectValue-color; background: $Form-selectValue-bg; border: px2rem(1px) solid $Form-selectValue-borderColor; border-radius: 2px; margin-right: $gap-xs; margin-bottom: $gap-xs; &.is-disabled { pointer-events: none; opacity: $Button-onDisabled-opacity; } } .#{$ns}Picker-valueIcon { cursor: pointer; border-right: px2rem(1px) solid $Form-selectValue-borderColor; padding: 1px 5px; &:hover { background-color: darken($Form-selectValue-bg, 5%); } } .#{$ns}Picker-valueLabel { padding: 0 $gap-xs; } &-btn { cursor: pointer; color: $Picker-iconColor; &:hover { color: $Picker-onHover-iconColor; } } &-clear { display: inline-block; @include input-clear(); line-height: 1; margin-right: $gap-xs; } } .#{$ns}PickerControl.is-inline { .#{$ns}Picker { display: inline-block; min-width: px2rem(150px); } }