div.block-btn-style{
	display: block;
}

.base-button-component{
	display: inline-block;
	//通用深色背景文字
	&.base-button-reward{
		.base-bg-ripple.base-btns-bgc-big, .base-bg-ripple.base-btns-bgc-small{
			background-color: transparent;
			box-shadow: none;
			padding: 0;
			&:hover{
				background-color: none;
				box-shadow: none;
			}
		}
		.base-bg-ripple.base-btns-bgc-small{
			overflow: inherit;
			.base-btn-reward-content{
				height: 26px;
				width: 26px;
			}
			.base-btn-reward-img{
				width: 60px;
				height: 60px;
				transform:scale(0.43);
				-webkit-transform:scale(0.43);
				-ms-transform:scale(0.43);
				-o-transform:scale(0.43);
				-moz-transform:scale(0.43);
			}
		}
		.base-btn-reward-content{
			width: 30px;
			height: 30px;
			display: inline-block;
			vertical-align: middle;
			margin-right: 2px;
		}
		.base-btn-reward-img{
			transform-origin: top left;
			-moz-transform-origin: top left;
			-webkit-transform-origin: top left;
			-ms-transform-origin: top left;
			-o-transform-origin: top left;
			width: 60px;
			height: 60px;
			transform:scale(0.5);
			-webkit-transform:scale(0.5);
			-ms-transform:scale(0.5);
			-o-transform:scale(0.5);
			-moz-transform:scale(0.5);
			display: inline-block;
			background: url(./reward.png) no-repeat;
		}
		.base-btn-title{
			vertical-align: middle;
			color: #E23E31;
		}
	}
	.base-btn-common-style{
		text-align:center;
		min-width: 0;
		cursor:pointer;
		font-size: 14px;
		color: #fff;
		margin:5px 0;
		box-shadow:0 1px 2px rgba(0, 0, 0, 0.15);
		transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),background-color 0.3s;
		border-radius:2px;
		float:left;
		-webkit-user-select: none;
		overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
		&:hover{
			box-shadow:0 3px 5px rgba(0, 0, 0, 0.15);
			transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),background-color 0.3s;
		}
	}
	//小按钮
	.base-btns-bgc-small{
		@extend .base-btn-common-style;
		font-size: 12px;
		line-height: 20px;
		padding:3px 10px;
		min-width: 30px;
		background-color:$C3;
		font-family:$font-family-H;
	}
	//大按钮
	.base-btns-bgc-big{
		@extend .base-btn-common-style;
		font-size: 14px;
		line-height: 24px;
		padding:3px 15px;
		min-width: 30px;
		background-color:$C3;
		font-family:$font-family-H;
	}
	//块按钮
	.base-btns-bgc-block{
		@extend .base-btn-common-style;
		width:100%;
		height:46px;
		line-height: 46px;
		background-color:$C3;
		font-family:$font-family-H;
	}
	//灰色按钮
	span.base-btns-bg-gray{
		text-align:center;
		min-width: 0;
		border-radius: 2px;
		background-repeat: no-repeat;
		float:left;
		-webkit-user-select: none;
		cursor:not-allowed;
		box-shadow: none;
		&:hover{
			box-shadow:none;
		}
	}
	//默认灰色
	.base-btns-bg-gray-defalult{
		@extend .base-btns-bg-gray;
		color:#D5E9F8;
		background-color: #9FCFF1;
	}
	//弱化灰色
	span.base-btns-bg-gray-weaken{
		@extend .base-btns-bg-gray;
		color: #C1C7CB;
	}
	//弱化按钮
	.base-btns-weaken{
		@extend .base-btn-common-style;
		color: $M1;
		background-color: $M5;
		border-radius: 2px;
		background-repeat: no-repeat;
	}
	//按钮波纹效果样式
	.base-bg-ripple{
		position:relative;
		overflow:hidden;
		z-index:6;
		.ripple{
			display:block;
			position: absolute;
			border:0 solid rgba(0,0,0,0.2);
			border-radius:50%!important;
			opacity:.3;
			pointer-events:none;
			opacity:1;
		}
		.base-btn-title{
			z-index: 8;
			pointer-events:none;
		}
	}
	.base-bg-ripple-active{
		.ripple{
			z-index: -1;
			border-width:150px;
			margin-top:-150px;
			margin-left:-150px;
			opacity:0;
			transition:border-width 1s,margin-top 1s,margin-left 1s,opacity 1s;
		}
	}
}