/*--------------------------------------------------------------------------*\
    Switcher design (through label)
\*--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------*\
        Container
\*--------------------------------------------------------------------------*/

.control__switcher-label {
    /*box*/
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28.33px;
    cursor: pointer;

    /*border*/
    border-radius: 28.33px;

    /*transition*/
    -webkit-transition: background-color 0.4s;
    transition: background-color 0.4s;
}

/*--------------------------------------------------------------------------*\
            Checked
            NB : control__checkbox--tab-switcher-js is always cta color
\*--------------------------------------------------------------------------*/

.control__checkbox--tab-switcher-js+.control__switcher-label,
.control__checkbox:checked+.control__switcher-label {
    /*background*/
    background-color: var(--c-cta-2);
}

.control__checkbox:not(.control__checkbox--tab-switcher-js):not(:checked)+.control__switcher-label {
    /*background*/
    background-color: var(--c-quaternary-2);
}

/*--------------------------------------------------------------------------*\
        Circle inside label
\*--------------------------------------------------------------------------*/

.control__switcher-label::before {
    /*box*/
    position: absolute;
    height: 21.67px;
    width: 21.67px;
    left: 3.33px;
    top: 3.33px;

    /*background*/
    background-color: var(--c-tertiary-4);

    /*border*/
    border-radius: 50%;

    /*text*/
    content: '';

    /*transition*/
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
}

/*--------------------------------------------------------------------------*\
            Checked
\*--------------------------------------------------------------------------*/

.control__checkbox:checked+.control__switcher-label::before {
    /*transform*/
    -webkit-transform: translateX(21.67px);
    transform: translateX(21.67px);
}