/* Styles généraux pour le conteneur du toggle */
.toogle-container{
    display         : flex;
    justify-content : space-between;
    align-items     : center;
}

.toogle-switch {
    width: 40px;
    height: 22px;
    border-radius: 34px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.4s;
    display: flex;
    align-items: center;
    padding: 2px 4px 2px 4px;
    overflow: hidden;
    background-color: var(--grey-50);
}

.toogle-switch.checked{
    background-color: var(--background-color-brand);
    color : var(--text-color-on-brand-bg);
}

/* Styles pour le "knob" (la pastille mobile) */
.toogle-knob {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    transition: transform 0.4s;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.toogle-switch.checked .toogle-knob {
    transform: translateX(100%);
}

.toogle-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   }

.toogle-icon-checkmark {
    fill: var(--background-color-brand);

}

.toogle-icon-cross {
    fill: #666771;
    width: 18;
    height: 18;
    view-box: 0 0 24 24;
}