.capi-swit {
    --size: 20px;
    --font-size: 10px;
    --coul-gauc: #DB0101;
    --coul-droi: #0B9725;
    --coul-swit: #FFFFFF;
}

.capi-swit {
    width: calc(2px + var(--size) + 2px + var(--size) + 2px);
    height: calc(2px + var(--size) + 2px);
    display: flex; gap: 2px; padding: 1px;
    position: relative;
    border-radius: var(--size); border: 1px solid var(--coul-swit);
    color: #BBBBBB;
    background-color: #FFFFFF;
}
.capi-swit:has(.capi-swit-sele-gauc) { --coul-swit: var(--coul-gauc); }
.capi-swit:has(.capi-swit-sele-droi) { --coul-swit: var(--coul-droi); }
.capi-swit-gauc, .capi-swit-droi {
    width: var(--size); height: var(--size);
    min-width: var(--size); min-height: var(--size);
    display: flex; justify-content: center; align-items: center;
    font-size: var(--font-size);
    z-index: 1;
}
.capi-swit:has(.capi-swit-sele-gauc) .capi-swit-gauc { color: #FFFFFF; }
.capi-swit:has(.capi-swit-sele-droi) .capi-swit-droi { color: #FFFFFF; }
.capi-swit-sele-gauc, .capi-swit-sele-droi {
    width: var(--size); height: var(--size);
    min-width: var(--size); min-height: var(--size);
    position: absolute;
    border-radius: var(--size);
    background-color: var(--coul-swit);
    box-shadow: 0px 0px 4px 2px #00000050;
    transition: transform 0.2s ease-out;
}

.capi-swit-sele-gauc {}
.capi-swit-sele-droi { transform: translateX(var(--size)); }