@import "../node_modules/tinper-bee-core/scss/minxin-variables";
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";

$checkbox-label-width:16px;
$checkbox-label-height:16px;
.u-checkbox {
	display: inline-block;
	position: relative;
	margin-right: 24px;
	height: $checkbox-label-height;
	line-height: $checkbox-label-height;
	font-size: 12px;
	white-space: nowrap;
    cursor: pointer;
    outline: none;
    position: relative;
    line-height: 1;
    vertical-align: middle;
	input[type='checkbox']{
		position: absolute;
		z-index: 3;
		cursor: pointer;
		opacity: 0;
		box-sizing: border-box;
		padding: 0;
		width: 100%;
    	height: 100%;
	}
	input[disabled]{
		cursor: not-allowed;
	}
	input[type='checkbox']:focus + .u-checkbox-label:before{
    	border-color: $checkbox-color;
	}
	&.is-checked {
		.u-checkbox-label:before{
			-moz-box-shadow: inset 0 0 0 10px #fff;
		    -webkit-box-shadow: inset 0 0 0 10px #fff;
		    box-shadow: inset 0 0 0 10px #fff;
		    border-color:$border-color-base;
		}
		.u-checkbox-label:after {
			color: $checkbox-color;
			content: "\e658";
		    line-height: $checkbox-label-height;
			font-size: 12px;
			font-weight: 600;
		}
		&.u-checkbox-inverse .u-checkbox-label{
			&:before{
				-moz-box-shadow: inset 0 0 0 10px $checkbox-color;
				-webkit-box-shadow: inset 0 0 0 10px $checkbox-color;
				box-shadow: inset 0 0 0 10px $checkbox-color;
				border-color:$checkbox-color;
			}
			&:after {
				color: #fff;
			}
		}
		&.disabled.u-checkbox-inverse .u-checkbox-label:before {
			box-shadow: inset 0 0 0 10px #c1c7d0;
			border-color:#c1c7d0;
		}
	}
	.u-checkbox-label {
		cursor: pointer;
	    display: inline-block;
	    //position: relative;
		padding-left: 25px;
		line-height: $checkbox-label-height;
		color: #212121;
	    &:before {
		    -moz-border-radius: $border-radius-base;
		    -webkit-border-radius: $border-radius-base;
		    border-radius: $border-radius-base;
		    border: 1px solid $border-color-base;
		    background-color: #fff;
		    content: '';
		    font-family: 'uf';
		    display: inline-block;
		    width: $checkbox-label-width;
		    height: $checkbox-label-height;
		    left: 0;
			top: 0;
		    text-align: center;
		    position: absolute;
		}
		&:after {
			content: '';
		    font-family: 'uf';
		    display: inline-block;
		    width: $checkbox-label-width;
		    height: $checkbox-label-height;
		    left: 0;
		    top: 0;
		    text-align: center;
		    position: absolute;
		}
	}
	&.disabled .u-checkbox-label{
		cursor: not-allowed;
		// opacity: 0.5;
		color: #909090;
		&:before{
			border-color: #DFE1E6;
			color: #909090;
		}
		&:after{
			color: #c1c7d0;
		}
	}
}
.u-checkbox.u-checkbox-indeterminate {
	.u-checkbox-label{
		&:before{
			box-shadow: inset 0 0 0 10px #fff;
   		 	border-color: $border-color-base;
		}
		&:after{
			color: $checkbox-color;
			content: "\e6ce";
			line-height: $checkbox-label-height;
			font-size: 12px;
			font-weight: 600;
		}
	}
	&.u-checkbox-inverse .u-checkbox-label{
		&:before{
			-moz-box-shadow: inset 0 0 0 10px $checkbox-color;
			-webkit-box-shadow: inset 	0 0 0 10px $checkbox-color;
			box-shadow: inset 0 0 0 10px $checkbox-color;
			border-color:$checkbox-color;
		}
		&:after {
			color: #fff;
		}
	}
	&.disabled.u-checkbox-inverse .u-checkbox-label:before {
		box-shadow: inset 0 0 0 10px #c1c7d0;
		border-color:#c1c7d0;
	}
}

// Modifier: `checkbox-success`
// -------------------------

.u-checkbox.u-checkbox-success {
	&.is-checked {
		.u-checkbox-label:before{
			-moz-box-shadow: inset 0 0 0 10px #fff;
		    -webkit-box-shadow: inset 0 0 0 10px #fff;
		    box-shadow: inset 0 0 0 10px #fff;
		    border-color:$border-color-base;
		}
		.u-checkbox-label:after{
			color: $checkbox-success-bg;
		}
	}
	input[type='checkbox']:focus + .u-checkbox-label:before{
    	border-color:$checkbox-success-bg;
	}
}
// Modifier: `checkbox-warning`
// -------------------------

.u-checkbox.u-checkbox-warning {
	&.is-checked {
		.u-checkbox-label:before{
			-moz-box-shadow: inset 0 0 0 10px #fff;
		    -webkit-box-shadow: inset 0 0 0 10px #fff;
		    box-shadow: inset 0 0 0 10px #fff;
		    border-color:$border-color-base;
		}
		.u-checkbox-label:after{
			color: $checkbox-warning-bg;
		}
	}
	input[type='checkbox']:focus + .u-checkbox-label:before{
    	border-color:$checkbox-warning-bg;
	}
}
// Modifier: `checkbox-danger`
// -------------------------

.u-checkbox.u-checkbox-danger {
	&.is-checked {
		.u-checkbox-label:before{
			-moz-box-shadow: inset 0 0 0 10px #fff;
		    -webkit-box-shadow: inset 0 0 0 10px #fff;
		    box-shadow: inset 0 0 0 10px #fff;
		    border-color:$border-color-base;
		}
		.u-checkbox-label:after{
			color: $checkbox-danger-bg;
		}
	}
	input[type='checkbox']:focus + .u-checkbox-label:before{
    	border-color:$checkbox-danger-bg;
	}
}
// Modifier: `checkbox-dark`
// -------------------------

.u-checkbox.u-checkbox-dark {
	&.is-checked {
		.u-checkbox-label:before{
			-moz-box-shadow: inset 0 0 0 10px #fff;
		    -webkit-box-shadow: inset 0 0 0 10px #fff;
		    box-shadow: inset 0 0 0 10px #fff;
		    border-color:$border-color-base;
		}
		.u-checkbox-label:after{
			color: $checkbox-dark-bg;
		}
	}
	input[type='checkbox']:focus + .u-checkbox-label:before{
    	border-color:$checkbox-dark-bg;
	}
}
// Modifier: `checkbox-info`
// -------------------------

.u-checkbox.u-checkbox-info {
	&.is-checked {
		.u-checkbox-label:before{
			-moz-box-shadow: inset 0 0 0 10px #fff;
		    -webkit-box-shadow: inset 0 0 0 10px #fff;
		    box-shadow: inset 0 0 0 10px #fff;
		    border-color:$border-color-base;
		}
		.u-checkbox-label:after{
			color: $checkbox-info-bg;
		}
	}
	input[type='checkbox']:focus + .u-checkbox-label:before{
    	border-color:$checkbox-info-bg;
	}
}