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

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

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

    select {
        &: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;

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

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

            span {
                display: block;
                font-size: 10px;
                font-weight: bold;
                text-align: left;
                line-height: 20px;
                white-space: pre;
                min-height: 15px;
                align-content: center;
            }
        }
    }

    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;
        width: 24px;
        height: auto;
        padding: 0;
        color: #fff;
        border-radius: 4px;
        font-weight: bold;
        font-size: 12px;
        font-family: var(--bx-monospaced-font);
        flex-shrink: 0;

        span {
            line-height: unset;
        }
    }

    &[data-controller-friendly=true] {
        > div {
            box-sizing: content-box;
        }

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

    &[data-controller-friendly=false] {
        position: relative;

        > div {
            box-sizing: border-box;

            label {
                margin-right: 24px;
            }
        }

        select {
            &:disabled {
                display: none;
            }

            &:not(:disabled) {
                cursor: pointer;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                display: block;

                opacity: 0;
                z-index: calc(var(--bx-settings-z-index) + 1);

                &:hover {
                    + div {
                        background: #f0f0f0;
                    }
                }

                + div {
                    label {
                        &::after {
                            content: '▾';
                            font-size: 14px;
                            position: absolute;
                            right: 8px;
                            pointer-events: none;
                        }
                    }
                }
            }
        }
    }
}

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

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

        &[data-highlighted] {
            background: #9c9c9c;
            min-width: 6px;
        }

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

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