.checkbox{
    display: inline-block;
    position: relative;
}

.checkbox__input{
    position: absolute;
    outline: none;
    clip: rect(0,0,0,0);
}

.checkbox__state{
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox__control{
    box-sizing: border-box;
    background: var(--white);
    border-radius: 10px;
    width: 30px;
    height: 30px;
    position: relative;
	margin-right: 10px;
}

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

.checkbox__label{
    font-size: 18px;
    line-height: 23.4px;
}

.checkbox__input:checked ~ .checkbox__state
.checkbox__control{
    background: var(--green);
    border-color: var(--green);
}

.checkbox__input:disabled ~ .checkbox__state
.checkbox__label{
    color: var(--grey-2);
}

.checkbox__input:disabled ~ .checkbox__state
.checkbox__control{
    background: var(--grey-2);
}

.checkbox__input:disabled ~ .checkbox__state
.checkbox__icon{
    display: none;
}

@media screen and (max-width: 575px) {

    .checkbox__state {
        flex-direction: column;
        align-items: flex-start;
    }
}

