.p5-checkbox{
	display: inline-block;
	font-size: 14px;
	user-select: none;
	.p5-checkbox-label{
		display: inline-block;
		cursor: pointer;
		box-sizing: border-box;
	}
	&-box {
		position: relative;
		width: 14px;
		height: 14px;
		display: inline-block;
		border-radius: 2px;
		box-sizing: border-box;
		border: 1px solid #eee;
		vertical-align: middle;
		transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
		position: relative;
    	top: -1px;
		&:hover {
			border: 1px solid $color;
		}
		&:after {
			content: "";
			display: inline-block;
			width: 4px;
			height: 8px;
			transform: rotate(45deg) scale(0);
			border: 2px solid #fff;
			position: absolute;
			left: 3px;
			top:0;
			border-top: none;
			border-left: none;
			transform-origin: center;
			transition: transform .25s ease-in .05s;
			
		}
	}
	input[type='checkbox'] {
		opacity: 0;
		display: inline-block;
		width: 0;
		height: 0;
	}
	.p5-checkbox-text{
		padding-left: 6px;
	}
}
// 选中状态
.p5-checkbox-active{
	.p5-checkbox-box{
		color: #fff;
		border: 1px solid $color;
		background: $color;
		&:after {
			transform: rotate(45deg) scale(1);
		}
	}
}
// 禁用状态
.p5-checkbox-disabled{
	.p5-checkbox-label{
		cursor: not-allowed;
	}
	.p5-checkbox-box{
		background-image: none;
		background-color: #f9efed;
		border-color: #f9efed;
	}
}
// 不完全选中的样式
.p5-checkbox-inderterminate {
	.p5-checkbox-box { 
		color: #fff;
		background: $color;
		border: 1px solid $color;
		&:before {
			content: "";
			position: absolute;
			display: block;
			background-color: #fff;
			height: 2px;
			transform: scale(.5);
			left: 0;
			right: 0;
			top: 5px;
			transform-origin: center;
			transition: transform .25s ease-in .05s;
		}
	}
}