.#{$ns}ResultBox { @include input-input(); flex-wrap: wrap; padding: 0 px2rem(3px); min-height: $Form-input-height; align-items: center; &.is-error { border-color: $Form-input-onError-borderColor; background-color: $Form-input-onError-bg; } &.is-focused, &:focus { outline: none; 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; } } &.is-clickable:not(.is-disabled) { cursor: pointer; &:hover { 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; } } } &.is-error.is-focused { border-color: $Form-input-onError-borderColor; } &.is-disabled { color: $text--muted-color; background: $Form-input-onDisabled-bg; border-color: $Form-input-onDisabled-borderColor; } &-singleValue { padding: 0 ($Form-input-paddingX - px2rem(3px)); } &-clear { @include input-clear(); width: px2rem(26px); height: px2rem(26px); margin: 0 px2rem(-2px); margin-left: auto; &:hover { background: $ResultBox-value-bg; } > svg { width: px2rem(12px); height: px2rem(12px); } } > svg { display: inline-block; width: px2rem(14px); color: $icon-color; } > a { cursor: pointer; } &-value { background: $ResultBox-value-bg; color: $ResultBox-value-color; font-size: $Form-input-fontSize; padding: 0 px2rem(5px); min-height: px2rem(24px); flex-wrap: nowrap; display: inline-flex; align-items: center; margin: 2px 3px; user-select: none; > a { cursor: pointer; margin-left: px2rem(5px); color: $ResultBox-icon-color; &:hover { color: $ResultBox-icon--onHover-color; } > svg { width: px2rem(10px); height: px2rem(10px); } } &:hover { background: $ResultBox-value--onHover-bg; } &.is-disabled { pointer-events: none; color: $ResultBox-value--onDisabled-color; > a { color: $ResultBox-icon--onDisabled-color; } } } &-placeholder { color: $Form-input-placeholderColor; user-select: none; margin-left: 8px; } > input { padding-left: 8px; min-height: 24px; } }