@import '~config'
@keyframes load
	from
		transform:rotate(0deg)
	to
		transform:rotate(360deg)
button(ButtonColor)
		display:inline-block;height:35px;line-height:33px;vertical-align:middle;background:ButtonColor;
		transition color,background .3s;border-radius:4px;color:#fff;padding:0 30px;font-size:14px;outline:none;
		border:1px solid ButtonColor;cursor:pointer;user-select:none;box-sizing:border-box;
		text-align:center;
		&:hover
			background:lighten(ButtonColor,10%);border-color:@background
		&:active
			background:darken(ButtonColor,10%);border-color:@background
		&.disable
			background:#f1f1f1;border-color:BorderColor;color:#d2d2d2;cursor: not-allowed;
		&.flat
			color:ButtonColor;background:#fff
			&:hover
				background:ButtonColor;color:#fff
			&:active
				background:darken(ButtonColor,10%);color:#fff
			&.disable
				background:#fff;color:#d2d2d2
		&.simple
			color:#333333;background:#fff;border-color:BorderColor;
			&:hover
				color:ButtonColor;border-color:ButtonColor
			&:active
				color:#fff;background:ButtonColor
			&.disable
				color:#d2d2d2;border-color:BorderColor;background:#fff
		&.text
			border-color:transparent;background:transparent;color:currentColor
			&:hover
				color:ButtonColor
			&:active
				color:lighten(ButtonColor,40%)
			&.disable
				color:#d2d2d2
		.cd-button + &
			margin-left:20px
		&.small
			height:23px;line-height:21px;padding:0 10px;
			.cd-button + &
				margin-left:10px
		&.full
			padding:0;width:100%;
			.cd-button + &
				margin-left:0;margin-top:10px;
			.cd-button + &.small
				margin-left:0;margin-top:5px;
		&.loading
			cursor:default
			&:before
				display: inline-block;content:" ";text-indent: -100em;width: 0.8em;height: 0.8em;margin-right: 0.5em;
				border-radius: 50%;border: .15em solid transparent;border-left: .15em solid;
				transition: all .5s;animation: load 1s linear infinite;
.cd-button
		button(PrimaryColor)
		&.success
			button(SuccessColor)
		&.danger
			button(DangerColor)
		&.warning
			button(WarningColor)