.styledSelect { position: relative; border-radius: 4px; cursor: pointer; font-size: 14px } .styledSelect.normal { width: 100%; border: 1px solid var(--borderLightest); background: var(--backgroundLightest); transition: background 0.1s; } .styledSelect.empty { display: inline-block; } .styledSelect:hover { background: var(--backgroundLight); } .styledSelect:focus { outline: none; } .styledSelect.normal:focus { border: 1px solid var(--borderInputFocus); box-shadow: 0 0 0 1px var(--borderInputFocus); background: #fff; } .styledSelect.invalid, .styledSelect.invalid:focus { border: 1px solid var(--danger); box-shadow: none; } .styledSelect > .valueContainer { display: flex; align-items: center; width: 100%; } .styledSelect > .valueContainer.normal { min-height: 32px; padding: 5px 5px 5px 10px; } .styledSelect > .valueContainer > .chevronIcon { margin-left: auto; font-size: 18px; color: var(--textMedium); } .styledSelectTip { padding-top: 6px; color: var(--textMedium); font-size: 12.5px; } .styledSelect > .dropDown { z-index: var(--dropdown); position: absolute; top: 100%; left: 0; border-radius: 0 0 4px 4px; background: #fff; box-shadow: rgba(9, 30, 66, 0.25) 0 4px 8px -2px, rgba(9, 30, 66, 0.31) 0 0 1px; width: 100%; } .styledSelect > .dropDown > .dropDownInput { padding: 10px 14px 8px; width: 100%; border: none; color: var(--textDarkest); background: none; } .styledSelect > .dropDown > .dropDownInput:focus { outline: none; } .styledSelect > .options { max-height: 200px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .styledSelect > .dropDown > .options::-webkit-scrollbar { width: 8px; } .styledSelect > .dropDown > .options::-webkit-scrollbar-track { background: none; } .styledSelect > .dropDown > .options::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--backgroundMedium); } .styledSelect > .dropDown > .options > .option { padding: 8px 14px; word-break: break-word; cursor: pointer; } .styledSelect > .dropDown > .options > .option:last-of-type { margin-bottom: 8px; } .styledSelect > .dropDown > .options > .option.jira-select-option-is-active { background: var(--backgroundLightPrimary); } .styledSelect > .dropDown > .options > .option:hover { background: var(--backgroundLightPrimary); } .styledSelect > .dropDown > .noOptions { padding: 5px 15px 15px; color: var(--textLight); } .styledSelect > .styledIcon { position: absolute; top: 4px; right: 7px; padding: 5px; font-size: 16px; color: var(--textMedium); cursor: pointer; user-select: none; }