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

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

.control__radio-label {
    /*box*/
    position: relative;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;

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

    /*background*/
    background-color: transparent;
}

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

.control__radio-label::before {
    /*box*/
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;

    /*background*/
    background-color: transparent;

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

    /*text*/
    content: '';

    /*transition*/
    transition: background-color 0.3s, height 0.3s, width 0.3s, top 0.3s, left 0.3s;
    -webkit-transition: background-color 0.3s, height 0.3s, width 0.3s, top 0.3s, left 0.3s;
}

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

.control__checkbox:checked+.control__radio-label {
    /*background*/
    background-color: var(--c-cta-2);
}

.control__checkbox:checked+.control__radio-label::before {
    /*box*/
    height: 6px;
    width: 6px;
    left: 7.5px;
    top: 7.5px;

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

/*--------------------------------------------------------------------------*\
            Not checked
\*--------------------------------------------------------------------------*/

.control__checkbox:not(:checked)+.control__radio-label:hover::before {
    /*background*/
    background-color: var(--c-cta-4);
}