better-xcloud/src/assets/css/web-components.styl

select.bx-select {
    min-height: 30px;
}

div.bx-select {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    gap: 8px;

    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;

        &:disabled {
            & ~ button {
                display: none;
            }

            & ~ div {
                background: #131416;
                color: white;
                pointer-events: none;

                .bx-select-indicators {
                    visibility: hidden;
                }
            }
        }
    }

    > div, button.bx-select-value {
        min-width: 120px;
        text-align: left;
        line-height: 24px;
        vertical-align: middle;
        background: #fff;
        color: #000;
        border-radius: 4px;
        padding: 2px 8px;
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    > div {
        min-height: 24px;
        box-sizing: content-box;

        input {
            display: inline-block;
            margin-right: 8px;
        }

        label {
            margin-bottom: 0;
            font-size: 14px;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            span {
                display: block;
                font-size: 10px;
                font-weight: bold;
                text-align: left;
                line-height: initial;
                white-space: pre;
            }
        }
    }

    button.bx-select-value {
        border: none;
        cursor: pointer;
        min-height: 30px;
        font-size: 0.9rem;
        align-items: center;

        > div {
            display: flex;
            width: 100%;
        }

        span {
            flex: 1;
            text-align: left;
            display: inline-block;
        }

        input {
            margin: 0 4px;
            accent-color: var(--bx-primary-button-color);
            pointer-events: none;
        }

        &: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;
        }
    }
}

.bx-select-indicators {
    display: flex;
    height: 4px;
    gap: 2px;
    margin-bottom: 2px;

    span {
        content: ' ';
        display: inline-block;
        flex: 1;
        background: #cfcfcf;
        border-radius: 4px;

        &[data-highlighted] {
            background: #9c9c9c;
        }

        &[data-selected] {
            background: #aacfe7;
        }

        &[data-highlighted][data-selected] {
            background: #5fa3d0;
        }
    }
}