@charset "UTF-8";
@import "./mixins/core";

.checkbox{
	@include inline-block;
	position: relative;
	line-height: 1;
	cursor:pointer;
}

.checkbox-inner{
	@include inline-block;
	position: relative;
}

.checkbox-input{
	position: absolute;
	opacity: 0;
}

.checkbox-icon{
	@include inline-block;
	position: relative;
	width:$checkbox-icon-width;
	height:$checkbox-icon-height;
	border:$checkbox-icon-border;
	border-radius:$checkbox-icon-radius;
	margin-top:-5px;
	background-color: $checkbox-icon-background;
}

.checkbox-input:checked+.checkbox-icon{
	border:$checkbox-icon-border-checked;
	
	&:before{
		content:"";
		display: block;
		position: absolute;
	    top: 6px;
	    left: 1px;
	    width: 6px;
	    height: 3px;
	    transform:rotateZ(45deg);
	    background-color: $checkbox-icon-background-checked;
	}

	&:after{
		content:"";
		display: block;
		position: absolute;
	    top: 2px;
	    left: 6px;
	    width: 3px;
	    height: 8px;
	    transform:rotateZ(45deg);
	    background-color: $checkbox-icon-background-checked;
	}
}

.checkbox-input:disabled+.checkbox-icon{
	cursor: not-allowed;
	border:$checkbox-icon-border-disabled;
	background-color: $checkbox-icon-background-disabled;
	&:before{
		background-color: $checkbox-icon-border-background-disabled;
	}
	&:after{
		background-color: $checkbox-icon-border-background-disabled;
	}
}

.checkbox-text{
	@include inline-block;
	margin-left:4px;
}

.checkbox-group,.checkbox-group.inline{
	.checkbox{
		margin-right:6px;
	}
}

.checkbox-group.horizontal{
	.checkbox{
		display: block;
		margin-bottom:6px;
	}
}