.bc-checkbox {
	@include bc-box-sizing;
	display: inline-block;
	width: 100%;
	height: 40px;
	padding: 9px 0 9px 36px;
	line-height: 40px;

	& > .box {
		display: inline-block;
		position: relative;
		width: 22px;
		height: 22px;
		margin: 0 0 0 -36px;
		float: left;
		z-index: 1;

		& > label {
			@include bc-box-sizing;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 2px solid $bc-color-5;
			border-radius: 3px;
			background: $bc-color-7;
			cursor: pointer;
			z-index: 1;

			&:after {
				@include bc-transform(rotate(-45deg));
				position: absolute;
				top: 4px;
				left: 3px;
				width: 12px;
				height: 6px;
				border: 3px solid $bc-color-7;
				border-top: 0;
				border-right: 0;
				background: transparent;
				content: '\00a0';
				opacity: 0;
				-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
				filter: alpha(opacity=0);
			}
		}

		& > input {
			&[type='checkbox'] {
				position: relative;
				width: 100%;
				height: 100%;
				cursor: pointer;
				opacity: 0;
				z-index: 2;
				-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
				filter: alpha(opacity=0);
			}

			&.checked + label {
				border: 1px solid $bc-color-1;
				background: $bc-color-1;

				&:after {
					opacity: 1;
					-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
					filter: alpha(opacity=100);
				}
			}

			&:disabled + label {
				cursor: default;
				opacity: .4;
			}
		}
	}

	& > span {
		@include bc-box-sizing;
		width: 100%;
		height: 100%;
		float: left;
		color: $bc-color-2;
		font: 16px/25px $ft-norm;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
}