.controls-select-buffer {
    label {
        display: block;
        margin-bottom: 0.5rem;
    }

    select {
        border-radius: var(--border-radius-lg);
        background: #e0e0e0;
        box-shadow: inset 3px 3px 6px #bebebe,
            inset -3px -3px 6px #ffffff;

        height: 2rem;
        min-width: 8rem;
        width: 100%;
        max-width: 15rem;
        padding: 0.25rem 2rem 0.25rem 1rem;
        color: black;
        outline: none;
        border: none;
        cursor: pointer;
        font-size: 1rem;

        // load custom select arrow
        -webkit-appearance: none;
        -moz-appearance: none;
        background-repeat: no-repeat;
        background-position-x: calc(100% - 0.33rem);
        background-position-y: 5px;
        background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-chevron-down\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>");

        &:focus {
            outline: none;
        }
        
        &:disabled {
            background-image: none;
            cursor: auto;
        }
    }

    &.disabled {

        select,
        label {
            color: var(--disabled-text);
        }
    }
}

.controls-select-buffer select:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}