/*--------------------------------------------------------------------------*\
    Check button design (through label)
\*--------------------------------------------------------------------------*/

.control__label-check-button {
    /*box*/
    cursor:pointer;

    /*background*/
    /* if the button contains a svg */
    fill: var(--c-cta-2);

    /*border*/
    border: 2px solid var(--c-cta-2);
    border-radius: 40px;

    /*transition*/
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;

    /*text*/
    font-family: var(--ff-txt);
    font-weight: var(--fw-regular);
    text-align: center;
    white-space: nowrap;
    color: var(--c-cta-2);
    user-select: none;
}

/*--------------------------------------------------------------------------*\
        Hover
\*--------------------------------------------------------------------------*/

.control__checkbox:not(:checked)~.control__label-check-button:hover{
    /*background*/
    background-color: var(--c-cta-5);
}

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

.control__checkbox:checked~.control__label-check-button
{
    /*background*/
    background-color: var(--c-cta-2);
    fill: var(--c-tertiary-4);

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

/*--------------------------------------------------------------------------*\
        Button sizes
\*--------------------------------------------------------------------------*/

.control--xtn .control__label-check-button{
    /*box*/
    padding: calc(5px - 2px) calc(10px - 2px);

    /*text*/
    font-size: var(--fs-xtn);
}

.control--tn .control__label-check-button{
    /*box*/
    padding: calc(6px - 2px) calc(18px - 2px);

    /*text*/
    font-size: var(--fs-tn);
}

.control--sm .control__label-check-button{
    /*box*/
    padding: calc(8px - 3px) calc(20px - 3px);

    /*text*/
    font-size: var(--fs-sm);
}

.control--md .control__label-check-button{
    /*box*/
    padding: calc(10px - 2px) calc(40px - 2px);

    /*text*/
    font-size: var(--fs-md);
}

.control--lg .control__label-check-button{
    /*box*/
    padding: calc(15px - 2px) calc(55px - 2px);

    /*text*/
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}