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

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

.control__checkbox-label {
    /*box*/
    position: relative;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    -webkit-transform-origin: center;
    transform-origin: center;
    cursor: pointer;

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

    /*background*/
    background-color: transparent;

    /*transition*/
    transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
    -webkit-transition: background-color 150ms 200ms, -webkit-transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}

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

    /*transform*/
    transform: scale(1.25);
    -webkit-transform: scale(1.25);
}

/*--------------------------------------------------------------------------*\
        Tick part 1
\*--------------------------------------------------------------------------*/

.control__checkbox-label:before {
    /*box*/
    position: absolute;
    width: 0px;
    height: 2px;
    top: 11px;
    left: 7px;

    /*transform*/
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;

    /*borders*/
    border-radius: 2px;

    /*background*/
    background-color: var(--c-cta-2);

    /*text*/
    content: '';

    /*transition*/
    transition: width 50ms ease 50ms;
    -webkit-transition: width 50ms ease 50ms;
}

.control__checkbox:not(:checked)+.control__checkbox-label:hover:before {
    /*box*/
    width: 5px;

    /*transition*/
    transition: width 100ms ease;
    -webkit-transition: width 100ms ease;
}

.control__checkbox:checked+.control__checkbox-label:before {
    /*box*/
    width: 5px;

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

    /*transition*/
    transition: width 150ms ease 100ms;
    -webkit-transition: width 150ms ease 100ms;
}

/*--------------------------------------------------------------------------*\
        Tick part 2
\*--------------------------------------------------------------------------*/

.control__checkbox-label:after {
    /*box*/
    width: 0;
    height: 2px;
    position: absolute;
    top: 14px;
    left: 8.3px;

    /*transform*/
    transform: rotate(305deg);
    -webkit-transform: rotate(305deg);
    transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;

    /*borders*/
    border-radius: 2px;

    /*background*/
    background-color: var(--c-cta-2);

    /*text*/
    content: '';

    /*transition*/
    transition: width 50ms ease;
    -webkit-transition: width 50ms ease;
}

.control__checkbox:not(:checked)+.control__checkbox-label:hover:after {
    /*box*/
    width: 10px;

    /*transition*/
    transition: width 150ms ease 100ms;
    -webkit-transition: width 150ms ease 100ms;
}

.control__checkbox:checked+.control__checkbox-label:after {
    /*box*/
    width: 10px;

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

    /*transition*/
    transition: width 150ms ease 100ms;
    -webkit-transition: width 150ms ease 100ms;
}