.bx-select { display: flex; align-items: center; flex: 0 1 auto; select { // Render offscreen instead of "display: none" so we could get its size position: absolute !important; top: -9999px !important; left: -9999px !important; visibility: hidden !important; } > div, button.bx-select-value { min-width: 120px; text-align: left; margin: 0 8px; line-height: 24px; vertical-align: middle; background: #fff; color: #000; border-radius: 4px; padding: 2px 8px; flex: 1; } > div { display: inline-block; input { display: inline-block; margin-right: 8px; } label { margin-bottom: 0; font-size: 14px; width: 100%; span { display: block; font-size: 10px; font-weight: bold; text-align: left; line-height: initial; } } } button.bx-select-value { border: none; display: inline-flex; cursor: pointer; min-height: 30px; font-size: 0.9rem; align-items: center; span { flex: 1; text-align: left; display: inline-block; } input { margin: 0 4px; accent-color: var(--bx-primary-button-color); } &:hover, &:focus { input { accent-color: var(--bx-danger-button-color); } &::after { border-color: #4d4d4d !important; } } } button.bx-button { border: none; height: 24px; width: 24px; padding: 0; line-height: 24px; color: #fff; border-radius: 4px; font-weight: bold; font-size: 12px; font-family: var(--bx-monospaced-font); flex-shrink: 0; span { line-height: unset; } } }