.cl-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 66rpx;
	line-height: 1;
	vertical-align: middle;
	box-sizing: border-box;
	font-size: 26rpx;
	white-space: nowrap;
	margin: 0;
	padding: 0rpx 30rpx;
	overflow: visible;
	background-color: #fff;
	border-radius: 10rpx;

	/* #ifdef MP */
	cl-loading {
		display: inline-flex;
		align-items: center;
	}
	/* #endif */

	&__text {
		display: inline;
		color: #666;
	}

	&__icon {
		margin-right: 10rpx;
	}

	&.button-hover:not(&--text) {
		background-color: #f7f7f7;
	}

	[class^="cl-icon-"]:last-child {
		margin-left: 10rpx;
	}

	&[size="small"],
	&--small {
		height: 60rpx;
		padding: 0rpx 24rpx;
	}

	&[size="mini"],
	&--mini {
		font-size: 24rpx;
		padding: 0 14rpx;
		height: 54rpx;
	}

	&.is-round {
		border-radius: 100rpx;

		&::after {
			border-radius: 100rpx;
		}
	}

	&--text {
		background-color: transparent;

		.cl-button__text {
			color: $cl-color-primary;
		}

		&::after {
			border-width: 0;
		}
	}

	&.is-loading {
		opacity: 0.7;

		.cl-button__loading {
			display: inline-flex;
			align-items: center;
		}

		.cl-button__text {
			margin-left: 15rpx;
		}
	}

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

	&.is-plain {
		&::after {
			border-width: 1px;
		}
	}

	&.is-disabled {
		opacity: 0.5;
	}

	&.is-loading-mask {
		position: relative;

		&::after {
			content: "";
			background-color: rgba(0, 0, 0, 0.5);

			/* #ifdef MP-ALIPAY */
			height: 100%;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			/* #endif */
		}

		.cl-button__loading {
			position: absolute;
			left: auto;
			top: auto;
			z-index: 9;
			display: inline-flex;
			align-items: center;

			&-text {
				margin-left: 10rpx;
			}
		}
	}

	@mixin color($type, $color) {
		&.cl-button--#{$type} {
			background-color: $color;
			border-color: $color;

			.cl-button__text {
				color: #fff;
			}

			&::after {
				border-width: 0;
			}

			&.is-plain {
				background-color: #fff;

				.cl-button__text {
					color: rgba($color, 0.8);
				}

				&::after {
					border-width: 1px;
					border-color: rgba($color, 0.8);
				}
			}

			&.is-disabled {
				background-color: $color;
			}

			&.button-hover {
				background-color: rgba($color, 0.8);

				&.is-plain {
					.cl-button__text {
						color: #fff;
					}
				}
			}
		}

		&.is-shadow {
			box-shadow: 2rpx 4rpx 14rpx $color;
		}
	}

	@include color(primary, $cl-color-primary);
	@include color(success, $cl-color-success);
	@include color(error, $cl-color-error);
	@include color(warning, $cl-color-warning);
	@include color(info, $cl-color-info);
}

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