/*==================================================
    Checkbox
==================================================*/

.mf-checkbox{

    display:inline-flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

    user-select:none;

    font-size:18px;

    font-weight:500;

    color:#495057;

}


/*----------------------------------------------
    Native checkbox
----------------------------------------------*/

.mf-checkbox input{

    display:none;

}


/*----------------------------------------------
    Box
----------------------------------------------*/

.mf-checkbox-box{

    width:24px;

    height:24px;

    border:2px solid #1f7a6b;

    border-radius:6px;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:
            background .15s,
            border-color .15s,
            transform .15s;

}


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

.mf-checkbox:hover .mf-checkbox-box{

    transform:scale(1.05);

}


/*----------------------------------------------
    Check icon
----------------------------------------------*/

.mf-checkbox-check{

    width:16px;

    height:16px;

    color:white;

    opacity:0;

    transform:scale(.5);

    transition:
            opacity .15s,
            transform .15s;

}


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

.mf-checkbox input:checked
+
.mf-checkbox-box{

    background:#1f7a6b;

}


.mf-checkbox input:checked
+
.mf-checkbox-box
.mf-checkbox-check{

    opacity:1;

    transform:scale(1);

}


/*----------------------------------------------
    Mobile
----------------------------------------------*/

@media (max-width:700px){

    .mf-checkbox{

        font-size:17px;

    }

}