@import "../../less/helpers/_variables.less";
//@import "../../less/base/_reset.less";

*{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color:transparent;
}

.mycheck input[type=checkbox] {  
    visibility: hidden;  
}  

.mycheck {
    position: relative;
    .rest-checkbox_box {  
        cursor: pointer;  
        position: absolute;  
        width: 44/@s;  
        height: 44/@s;  
        top: 0;  
        left: 0;  
        background: transparent;  
        border: 2/@s solid #b0a7aa;     
        -webkit-border-radius: 3/@s;   
        border-radius:3/@s;    
        box-sizing: border-box;    
        z-index: 999;    
    }  
}

.mycheck {
    .rest-checkbox_box{
        &::before {
            content: ''; 
            opacity: 0; 
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -22/@s;
            margin-top: -22/@s;
            width: 44/@s;
            height: 44/@s;
            background: #e41b47;
            -webkit-border-radius: 3/@s;   
            border-radius:3/@s;  
            border-color: #e41b47;
        }
        &::after {
           content: '';  
           opacity: 0;  
           position: absolute;  
           width: 25/@s;  
           height: 10/@s;  
           background: transparent;  
           top: 10/@s;  
           left: 10/@s;  
           border: 3/@s solid #fff;  
           border-top: none;  
           border-right: none;  
           -webkit-transform: rotate(-45deg);   
           transform: rotate(-45deg);  
        }
    }   
}

.mycheck input[type=checkbox]:checked + .rest-checkbox_box {
    border: none;
}

.mycheck input[type=checkbox]:checked + .rest-checkbox_box::before {
    opacity: 1; 
}

.mycheck input[type=checkbox]:checked + .rest-checkbox_box::after {  
    opacity: 1;  
}