@import "variables";


$btn-normal-bg:         #fafafa;
$btn-normal-border:     #e3e3e3;
$btn-normal-hover-bg:   #f0f0f0;

$btn-primary-bg:        #00aaf1;
$btn-primary-color:     #fff;
$btn-primary-hover-bg:  #43c0f4;
$btn-primary-active-bg: #00a9f0;

$btn-text-bg:         #fdfdfd;
$btn-text-border:     #e3e3e3;
$btn-text-hover-bg:   #f7f7f7;
$btn-text-active-bg:  #ededed;

$btn-text-primary-color:  #0097d7;

$btn-disabled-bg:     #ddd;
$btn-disabled-color:  #fff;

%button {
	border-radius: 2px;
	box-sizing: border-box;
	cursor: pointer;
	font-family: $font-family;
	outline: none;
	padding-bottom: 0;
	padding-top: 0;
	@extend %btn-base;
	@extend %btn-normal;

	&:disabled {
		background: $btn-disabled-bg !important;
		border: 0;
		color: $btn-disabled-color !important;
		cursor: not-allowed;
	}
}


/**
 * 按颜色区分
 */

// 普通按钮
// e.g. 取消
%btn-normal {
	background: $btn-normal-bg;
	color: $color-text-light;
	border: 1px solid $btn-normal-border;

	&:hover {
		background: $btn-normal-hover-bg;
	}

	&:active {
		background: $btn-normal-border;
	}
}

// 高亮按钮
// e.g. 确定
%btn-primary {
	background: $btn-primary-bg;
	border: 0;
	color: $btn-primary-color;

	&:hover {
		background: $btn-primary-hover-bg;
	}

	&:active {
		background: $btn-primary-active-bg;
	}
}

// 纯包裹文字的按钮
// e.g. 关怀
%btn-text {
	background: $btn-text-bg;
	color: $color-text-light;
	border: 1px solid $btn-text-border;

	&:hover {
		background: $btn-text-hover-bg;
	}

	&:active {
		background: $btn-text-active-bg;
	}
}

// 高亮色的文字按钮
// e.g. 新建
%btn-text-primary {
	@extend %btn-text;
	color: $btn-text-primary-color;
}


/**
 * 按大小区分
 */

// 基本小按钮 (64px+)
%btn-base {
	font-size: $font-size-base;
	height: 24px;
	min-width: 64px;
	padding-left: 0.75em;
	padding-right: 0.75em;
}

// 基本大按钮 (100px+)
%btn-large {
	font-size: $font-size-large;
	height: 30px;
	min-width: 100px;
	padding-left: 1em;
	padding-right: 1em;
}

// 小按钮
%btn-small {
	font-size: $font-size-base;
	height: 20px;
	padding-left: 0.75em;
	padding-right: 0.75em;
}

// 自由宽度按钮
%btn-auto-width {
  	min-width: 0;
}


/**
 * 组装好的按钮
 */

// 确定
.btn-ok {
	@extend %button;
	@extend %btn-primary;
	@extend %btn-large;
}
.btn-ok-normal {
	@extend %button;
	@extend %btn-primary;
  	@extend %btn-base;
}
.btn-ok-small {
	@extend %button;
	@extend %btn-primary;
	@extend %btn-small;
}

// 取消
.btn-cancel {
	@extend %button;
  	@extend %btn-normal;
  	@extend %btn-large;
}
.btn-cancel-normal {
	@extend %button;
	@extend %btn-normal;
  	@extend %btn-base;
}
.btn-cancel-small {
	@extend %button;
	@extend %btn-normal;
	@extend %btn-small;
}


// 功能按钮 (普通)
.btn-function-normal {
	@extend %button;
  	@extend %btn-large;
 	@extend %btn-auto-width;
  	@extend %btn-normal;
}

// 功能按钮 (高亮)
.btn-function-highlight {
	@extend %button;
  	@extend %btn-large;
  	@extend %btn-auto-width;
  	@extend %btn-primary;
}

// 开关
.btn-option{
	@extend %button;
	width: 65px;
	height: 30px;
	background-color: $btn-primary-bg;
	color: #fff;
	border-radius: 15px;
	position: relative;
	.bo-text{
		line-height: 30px;
		position: absolute;
		left: 12px;
	}
	.bo-btn{
		position: absolute;
		width: 26px;
		height: 26px;
		border-radius: 13px;
		background-color: #fff;
		right: 2px;
		top: 2px;
		cursor: pointer;
	}
}

.btn-option-close{
	@extend .btn-option;
	background-color: $btn-disabled-bg;
	.bo-text{
		right: 12px;
		text-align: right;
	}
	.bo-btn{
		left: 2px;
	}
}