.cl-radio {
	display: inline-block;
	height: 40rpx;
	line-height: 40rpx;
	font-size: 26rpx;

	&__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: 40rpx;
		transition: color 0.3s;
		position: relative;
		top: -2rpx;

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

	&__label {
		display: inline;
	}

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

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

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

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

		.cl-radio__input {
			display: none;
		}

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

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

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