.custom-select-button {
    display: flex;
    align-items: center;
    position: relative;
    border-radius: .25rem;
    width: fit-content;
    background: #e9ecef;
    /*this is the color e.g. used in input-group-prepend*/
    border: 1px solid #ced4da;
    /*same border used e.g. in input-group*/
}

.custom-select-button .custom-select-button-background {
    position: absolute;
    top: .25rem;
    bottom: .25rem;
    right: .25rem;
    left: .25rem;
    border-radius: .25rem;
    background: var(--primary);
    z-index: 1;
    transition: left .3s, right .3s;
    /*box-shadow:0 0 3px rgba(0,0,0,.24);*/
}

.custom-select-button .custom-select-button-item {
    display: flex;
    align-items: center;
    /*flex: 1 1 0;*/
    padding: 6px 1rem;
    /*y=6px result is total height of 38px which is the same as an input group*/
    color: var(--dark);
    transition: color .3s;
    z-index: 2;
    cursor: pointer;
}

.custom-select-button .custom-select-button-item.disabled,
.custom-select-button .custom-select-button-item[disabled] {
    pointer-events: none;
    cursor: not-allowed;
    /*same opacity used by adminlte for disabled buttons etc. */
    opacity: .65;
}

.custom-select-button .custom-select-button-item.active {
    color: var(--light);
}

.custom-select-button .custom-select-button-item input[type="radio"] {
    display: none;
}

.custom-select-button .custom-select-button-item label {
    cursor: pointer;
    font-weight: normal;
    margin: 0;
    text-align: center;
}

.custom-select-button .custom-select-button-item input[disabled]+label {
    color: rgba(0, 0, 0, .4);
    cursor: default;
    /*doesn't work because of parent cursor; parent cursor required for better visibility of clickable area*/
    pointer-events: none;
}