:root {
    --switchToggle-width: 70px;
    --switchToggle-height: 30px;
    --switchToggle-thumb-size: 26px;
    --switchToggle-bg-color: red;
    --switchToggle-checked-bg-color: green;
    --switchToggle-thumb-bg-color: #fff;
    --switchToggle-text-color: #fff;
    --switchToggle-active-bg-color: #ff6418;
}

.switchToggle input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute;
}

.switchToggle label {
    cursor: pointer;
    text-indent: -9999px;
    width: var(--switchToggle-width);
    max-width: var(--switchToggle-width);
    height: var(--switchToggle-height);
    margin: 0;
    background: var(--switchToggle-bg-color);
    display: inline-block;
    border-radius: calc(var(--switchToggle-height) / 2);
    position: relative;
}

.switchToggle label:after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
    width: var(--switchToggle-thumb-size);
    height: var(--switchToggle-thumb-size);
    background: var(--switchToggle-thumb-bg-color);
    border-radius: 90px;
    transition: 0.3s;
}

.switchToggle input:checked + label,
.switchToggle input:checked + input + label {
    background: var(--switchToggle-checked-bg-color);
}

.switchToggle input + label:before,
.switchToggle input + input + label:before {
    content: attr(data-off);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    border-radius: 50%;
    transition: 0.3s;
    text-indent: 0;
    color: var(--switchToggle-text-color);
}

.switchToggle input:checked + label:before,
.switchToggle input:checked + input + label:before {
    content: attr(data-on);
    left: 6px;
}

.switchToggle input:checked + label:after,
.switchToggle input:checked + input + label:after {
    left: calc(100% - var(--switchToggle-thumb-size) - 2px);
}

.switchToggle label:active:after {
    width: calc(var(--switchToggle-width) - var(--switchToggle-thumb-size) - 2px);
}

.switchToggle input:disabled + label {
    background: #ccc; /* Couleur de fond pour l'état désactivé */
    cursor: not-allowed; /* Change le curseur pour indiquer que le switch est désactivé */
}

.switchToggle input:disabled + label:before {
    color: #999; /* Couleur du texte pour l'état désactivé */
}

.toggle-switchArea {
    margin: 10px 0;
}

/* Conteneur pour garder la même taille que le toggle */
.toggle-wrapper {
    position: relative;
    width: var(--switchToggle-width);
    height: var(--switchToggle-height);
    display: flex;
    align-items: center;
    justify-content: center;
}