@import (reference) "color.less";

.checkbox,
.radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;

    >label {
        position: relative;
        min-height: 20px;
        padding-left: 20px;
        margin-bottom: 0;
        font-weight: normal;
        cursor: pointer;

        >input[type="checkbox"],
        >input[type="radio"] {
            display: none;
        }

        >input[type="checkbox"]+*,
        >input[type="radio"]+* {
            margin-left: 5px;
        }

        >input[disabled][type="checkbox"]:checked+*:before,
        >input[disabled][type="checkbox"]+*:before,
        >input[disabled][type="checkbox"]:checked+*:after,
        >input[disabled][type="checkbox"]+*:after{
            color: @Grey;
            background: @LightGrey;
            border-color:@Grey; 
            cursor: not-allowed;
        }
        >input[disabled][type="checkbox"]:checked+*:after{
            background: @Grey;
        }
        &.sub-checked{
            >input[disabled][type="checkbox"]+*:after{
                border-color:transparent;
            }
        }
      
        >input[disabled][type="radio"]:checked+*:before,
        >input[disabled][type="radio"]+*:before {
            background: @LightGrey;
            cursor: not-allowed;
        }

        >input[disabled][type="checkbox"]:checked+*,
        >input[disabled][type="checkbox"]+*,
        >input[disabled][type="radio"]:checked+*,
        >input[disabled][type="radio"]+* {
            cursor: not-allowed;
        }

        >span {
            line-height: 18px;
            display: inline-block;
            vertical-align: top;
        }
    }
}

.checkbox {
    margin: 0;

    >label {
        >input[type="checkbox"] {
            +*:before {
                font-family: 'icomoon-kit' !important;
                content: "\e943";
                border: 1px solid @Grey;
                width: 18px;
                height: 18px;
                position: absolute;
                left: 0;
                border-radius: 3px;
                background: white;
                color: white;
                padding-left: 2px;
                transition: all .1s ease-in-out;
                transform: scale(.5);
                top: 0;
                // padding-left: 2px;
                // line-height: 16px;
            }

            +*:after {
                content: "";
                width: 18px;
                height: 18px;
                background: white;
                border: 1px solid @Grey;
                position: absolute;
                left: 0;
                border-radius: 3px;
                transition: background .1s ease-in-out;
                top: 0;
                // padding-left: 2px;
                // line-height: 16px;
			}
			
			&:hover:not([disabled])+*:after {
                border: 1px solid @Blue;
            }
        }

        >input[type="checkbox"]:checked {
            +*:before {
                background: @Blue;
                border-color: @Blue;
                transform: scale(1);
                z-index: 2;
            }

            +*:after {
                background: @Blue;
                border-color: @Blue;
            }
        }
    }

    >.sub-checked {
        >input[type="checkbox"] {
            +*:before {
                /* content: "";
                width: 18px;
                height: 18px;
                transform: scale(1); */
                content: "";
                border: 1px solid @Grey;
                width: 18px;
                height: 18px;
                position: absolute;
                left: 0;
                border-radius: 3px;
                background: white;
                color: white;
                transition: all .1s ease-in-out;
                transform: scale(1);
                top: 0;
            }
            +*:after {
                /* width: 10px;
                height: 10px;
                padding: 0;
				left: 4px;
				border-color: transparent;
                border-radius: 0;
                top: 4px; */
                font-family: 'icomoon-kit' !important;
                content: "";
                width: 10px;
                height: 10px;
                padding: 0;
                background: @Blue;
                border: 1px solid @Blue;
                position: absolute;
                left: 4px;
                border-radius: 0;
                transition: background .1s ease-in-out;
                top: 4px;
                z-index: 2;
            }

			&:hover:not([disabled])+*:after {
                border-color: transparent;
			}
			&:hover:not([disabled])+*:before {
                border: 1px solid @Blue;
            }
            
		}
		>input[type="checkbox"] {
			+ *:before {
				background: white;
				border-color: @Grey;
			}
            +*:after {
                z-index: 2;
            }
		}
    }
}


.radio {
    margin: 0;

    >label {
        >input[type="radio"]+*:before {
            content: "";
            border: 1px solid @LightDark;
            width: 14px;
            height: 14px;
            position: absolute;
            left: 0;
            border-radius: 50%;
            background: white;
            margin: 3px;
            top: 1px;
        }

        >input[type="radio"]:checked {
            +*:before {
                border: 1px solid @Blue;
                color: white;
                padding-left: 3px;
            }

            +*:after {
                content: "";
                background-color: @Blue;
                border-radius: 50%;
                width: 8px;
                height: 8px;
                position: absolute;
                top: 7px;
                left: 6px;
            }
        }

        >input[disabled][type="radio"]:checked {
            +*:before {
                border: 1px solid @LightDark;
                color: white;
                padding-left: 3px;
            }

            +*:after {
                content: "";
                background-color: @LightDark;
                border-radius: 50%;
                width: 8px;
                height: 8px;
                position: absolute;
                top: 7px;
                left: 6px;
            }
        }
    }
}