.capi-bout-segm {
    --default-bout-color: var(--noti-fonc);
    --computed-bout-color: var(--bout-color, var(--default-bout-color));

    width: calc(100% - 6px);
    display: flex;
    flex-direction: row;

    margin: 2px;
    padding: 2px;
    gap: 2px;

    border: 1px solid var(--computed-bout-color);
    background-color: #FFFFFF;
    border-radius: 6px;
}

.capi-bout-segm button { flex-grow: 1; flex-basis: 0; gap: 4px; }
.capi-bout-segm button i { font-size: 11px; }
.capi-bout-segm button span:has(+i) { flex-grow: 0; }
.capi-bout-segm .modu-bout.active {
    background-color: var(--computed-bout-color);
}

.capi-bout-segm .modu-bout:not(.active) {
    background-color: color-mix(in srgb, var(--computed-bout-color) 20%, #FFFFFF 80%);
    color: var(--computed-bout-color);
}

.capi-bout-segm .modu-bout:not(.active):hover {
    background-color: color-mix(in srgb, var(--computed-bout-color) 70%, #FFFFFF 30%);
    color: #FFFFFF;
}