.sn-select { align-items: center; border: $border-default; border-color: var(--sn-light-grey); border-radius: $border-radius-default; box-sizing: border-box; display: flex; padding: .5rem .625rem .5rem 1rem; position: relative; &.sn-select--blank { .sn-select__value { color: var(--sn-grey); } } &.sn-select--search.sn-select--open { .sn-select__value { display: none; } } &.sn-select--search:not(.sn-select--open) { line-height: normal; } .sn-select__value { all: unset; display: inline-block; flex-grow: 1; line-height: 1.625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } &.disabled { background: var(--sn-sleepy-grey); pointer-events: none; .caret { border-top-color: var(--sn-grey); } } &.error { border-color: var(--sn-delete-red); } .sn-select__options { display: none; } .sn-select__search-input { background: transparent; border: 0; display: none; height: 26px; outline: 0; padding: 0; width: calc(100% - 1.5em); } &.sn-select--open { background: $color-white; border-color: var(--sn-science-blue); .sn-select__search-input { display: block; } .sn-select__options { background: var(--sn-white); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; box-shadow: $flyout-shadow; display: block; left: 0; max-height: 300px; overflow: hidden; top: 2.5rem; width: 100%; z-index: 9999; } .sn-select__option { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .select__option-placeholder { color: var(--sn-grey); } .sn-select__no-options { color: var(--sn-grey); padding: .5em; } .sn-select__option:hover { background: var(--sn-super-light-grey); } } }