.cl-checkbox {
	display: inline-block;
	line-height: 40rpx;
	font-size: 26rpx;
	transition: all 0.3s;

	&__input {
		display: inline-block;
		vertical-align: middle;
		height: 40rpx;
		width: 40rpx;
		text-align: center;
		color: #999;
		margin-right: 14rpx;
		box-sizing: border-box;
		border: 1px solid #ddd;
		border-radius: 6rpx;
		position: relative;
		top: -2rpx;
		transition: all 0.3s;

		text {
			font-size: 24rpx;
			position: relative;
			top: -2rpx;
		}
	}

	&__label {
		display: inline;
	}

	&.is-checked {
		.cl-checkbox__input {
			background-color: $cl-color-primary;
			border-color: $cl-color-primary;
			color: #fff;
		}
	}

	&.is-disabled {
		.cl-checkbox__input {
			background-color: #f5f7fa;
			border-color: #e4e7ed;
			color: #c0c4cc;
		}

		.cl-checkbox__label {
			color: #c0c4cc;
		}
	}

	&.is-fill {
		width: 100%;
	}

	&--border {
		border-radius: 10rpx;
		padding: 14rpx 20rpx;
		border: 1rpx solid #ddd;
		box-sizing: border-box;

		.cl-checkbox__input {
			display: none;
		}

		&.is-checked {
			border: 1rpx solid $cl-color-primary;
			background-color: $cl-color-primary;
			color: #fff;
		}
	}

	&--round {
		.cl-checkbox__input {
			border-radius: 100%;
		}
	}
}

.cl-checkbox + .cl-checkbox,
cl-checkbox + cl-checkbox {
	margin-left: 20rpx;
}

/* #ifdef MP-TOUTIAO */
.cl-checkbox {
	margin-right: 20rpx;
}
/* #endif */