@import "variables";
$btn-normal-bg: #FFFFFF;
$btn-normal-border: #d9d9d9;
$btn-normal-hover-border: #1ea084;
$btn-normal-hover-bg: #f0f0f0;
$btn-primary-bg: #1ea084;
$btn-primary-color: #fff;
$btn-primary-hover-bg: #188069;
$btn-primary-active-bg: #188069;
$btn-text-bg: #fdfdfd;
$btn-text-border: #e3e3e3;
$btn-text-hover-bg: #f7f7f7;
$btn-text-active-bg: #ededed;
$btn-text-primary-color: #1ea084;
$btn-disabled-bg: #ddd;
$btn-disabled-color: #fff;
$btn-height-base: 24px;
$btn-height-large: 32px;
$btn-height-small: 20px;
$btn-width-base: 64px;
$btn-width-large: 60px;
// 按钮基本样式
%button {
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
    font-family: $font-family;
    outline: none;
    padding-bottom: 0;
	padding-top: 0;
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    @extend %btn-base;
    @extend %btn-normal;
    &:disabled {
        background: $btn-disabled-bg !important;
        border: 0;
        color: $btn-disabled-color !important;
        cursor: not-allowed;
    }
    &:focus {
        outline: none;
    }
}

/**
  * 按颜色区分
  */

// 普通按钮
// e.g. 取消
%btn-normal {
    background: $btn-normal-bg;
    color: $color-text-light;
    border: 1px solid $btn-normal-border;
    &:hover {
        border-color: $btn-normal-hover-border;
        color: $btn-normal-hover-border;
    }
    &: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;
        color: $btn-primary-color;
    }
    &: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: $btn-height-base;
    min-width: $btn-width-base;
    padding: 0 16px;
} // 基本大按钮 (100px+)
%btn-large {
    font-size: $font-size-base;
    height: $btn-height-large;
    min-width: $btn-width-large;
} // 小按钮
%btn-small {
    font-size: $font-size-base;
    height: $btn-height-small;
    padding-left: 0.75em;
    padding-right: 0.75em;
} // 自由宽度按钮
%btn-auto-width {
    min-width: 0;
} // 无背景
%btn-no-bg {
    background: transparent;
    border: 0;
    color: #666;
    &:hover {
        background: transparent;
    }
    &:active {
        background: transparent;
    }
}

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

// 确定
.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-no-bg-small {
    @extend %button;
    @extend %btn-no-bg;
    @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 {
    width: 65px;
    height: 30px;
    background-color: $btn-primary-bg;
    color: #ffffff;
    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 %button;
    @extend .btn-option;
    background-color: $btn-disabled-bg;
    .bo-text {
        right: 12px;
        text-align: right;
    }
    .bo-btn {
        left: 2px;
    }
}
