@charset "UTF-8";
@import "../../style/function";

$weakColor: #333;
$weakBorderColor: #ddd;
$weakBackgroundColor: #fff;
$weakHoverBorderColor: #ccc;
$weakHoverBackgroundColor: #eee;
$weakActiveBackgroundColor: #ddd;
$weakActiveColor: rgba($weakColor, .5);

$outlineColor: #188eee;
$outlineBackgroundColor: #fff;
$outlineHoverBorderColor: #147de2;
$outlineActiveBackgroundColor: #e7f2fc;
$outlineActiveColor: rgba($outlineColor, .5);

// btn colors
// btn-name,bg-color,text-color,bg-color-hover,bg-color-active
$btns: (default #188eee #fff #147de2 #1774c9) (primary #fe9455 #fff #f3803b #ee7946) (weak $weakBackgroundColor $weakColor $weakHoverBackgroundColor $weakActiveBackgroundColor) (outline $outlineBackgroundColor $outlineColor rgba($outlineColor, .1) rgba($outlineColor, .2) ) !default;


// btn
@mixin btn($extend: true) {
  @if $extend {
    @extend %btn;
  } @else {
    border: 0 none;
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    text-align: center;
    user-select: none;
    vertical-align: middle;
    box-sizing: border-box;
  }
}

%btn {
  @include btn(false);
}

// %btn-default, %btn-primary
@each $btn in $btns {
  %btn-#{nth($btn, 1)} {
    @include btn;
    background-color: nth($btn, 2);
    color: nth($btn, 3);

    &:hover {
      background-color: nth($btn, 4);
    }

    &:active {
      background-color: nth($btn, 5);
    }

    &.disabled,
    &.dis-btn {
      @include opacity(.5);
      cursor: default;
    }

    &.disabled:hover {
      background-color: nth($btn, 2);
    }

    &.disabled:active {
      background-color: nth($btn, 2);
    }
  }
}

// btn size
%btn-s {
  min-width: 80px;
  line-height: 30px;
  padding: 0 1em;
}

%btn-m {
  font-size: 16px;
  line-height: 40px;
  min-width: 120px;
  width: auto;
  padding: 0 1em;
}

%btn-l {
  font-size: 18px;
  line-height: 50px;
  min-width: 150px;
  padding: 0 1em;
}

.im-btn {
  // 一般按钮
  &.btn-default {
    @extend %btn-default;
  }

  // 引导用户点击
  &.btn-primary {
    @extend %btn-primary;
  }

  // 弱按钮 灰色边框
  &.btn-weak {
    @extend %btn-weak;
    border: 1px solid $weakBorderColor;

    &:hover {
      border-color: $weakHoverBorderColor;
    }

    &:active {
      color: $weakActiveColor;
    }

    &.disabled,
    &.dis-btn {
      @include opacity(.5);
      cursor: default;
    }

    &.disabled:hover {
      border: 1px solid $weakBorderColor;
    }

    &.disabled:active {
      background-color: $weakBackgroundColor;
      color: $weakColor;
    }
  }

  // 蓝色边框
  &.btn-outline {
    @extend %btn-outline;

    border: 1px solid $outlineColor;

    &:hover {
      border-color: $outlineHoverBorderColor;
    }

    &:active {
      color: $outlineActiveColor;
    }

    &.disabled,
    &.dis-btn {
      @include opacity(.5);
      cursor: default;
    }

    &.disabled:hover {
      border: 1px solid $outlineColor;
    }

    &.disabled:active {
      background-color: $outlineBackgroundColor;
      color: $outlineColor;
    }
  }

  // 按钮大小
  &.btn-s {
    @extend %btn-s;

    &.btn-weak,
    &.btn-outline {
      line-height: 28px;
    }
  }

  &.btn-m {
    @extend %btn-m;

    &.btn-weak,
    &.btn-outline {
      line-height: 38px;
    }
  }

  &.btn-l {
    @extend %btn-l;

    &.btn-weak,
    &.btn-outline {
      line-height: 48px;
    }
  }

  // 多个按钮之间的间距
  &.btn-primary ~ .btn-weak,
  &.btn-primary ~ .btn-primary,
  &.btn-primary ~ .btn-default,
  &.btn-primary ~ .btn-outline,
  &.btn-default ~ .btn-weak,
  &.btn-default ~ .btn-default,
  &.btn-default ~ .btn-outline,
  &.btn-default ~ .btn-primary,
  &.btn-outline ~ .btn-outline,
  &.btn-outline ~ .btn-default,
  &.btn-outline ~ .btn-primary,
  &.btn-outline ~ .btn-weak,
  &.btn-weak ~ .btn-outline,
  &.btn-weak ~ .btn-default,
  &.btn-weak ~ .btn-primary,
  &.btn-weak ~ .btn-weak {
    margin-left: 10px;
  }

  &.btn-disabled,
  .btn-disabled:hover,
  .btn-disabled:active {
    @extend %disabled;
    outline: none;
  }
}