/*
* @Author: zhongjiahao
* @Date:   2016-09-07 17:06:14
* @Last Modified by:   zhongjiahao
* @Last Modified time: 2016-11-15 15:42:49
*/

.btn {
  position: relative;
  z-index: 6;
  display: inline-block;
  outline: transparent;
  border: 1px solid transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  @include rem(margin, 10, 0);
  padding: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background: 0 0;
  background-clip: border-box;
  @include f-to();
  .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;
  }
  &.btn_has-icon {
    font-size: 0;
    .btn__text {
      vertical-align: middle;
      @include font-h5();
    }
    .u-icon {
      vertical-align: middle;
    }
    .btn__text + .u-icon {
      @include rem(margin-left, 5);
    }
    .u-icon + .btn__text {
      @include rem(margin-left, 5);
    }
  }
  &.btn_default {
    @include rem(min-width, 70);
    @include rem(padding, 4, 15);
    @include font-h5();
    background-color: $c3;
    color: $m7;
    @include rem(border-radius, 2);
    box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .3);
    @include f-hover {
      box-shadow: 0 .1875rem .3125rem rgba(0, 0, 0, .3);
      transition: box-shadow 0.28s cubic-bezier(.4, 0, .2, 1), background-color 0.3s;
    }
    .btn__text {
      @include font-h5();
    }
    &.btn_is-active {
      background-color: $c2;
      box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .3);
      transition: box-shadow 0.28s cubic-bezier(.4, 0, .2, 1), background-color 0.3s;
    }
    &:disabled,
    &.btn_is-disabled {
      box-shadow: none;
      background-color: $c3;
      opacity: .6;
      cursor: not-allowed;
    }
  }
  &.btn_weaken {
    @include rem(min-width, 70);
    @include rem(padding, 4, 15);
    @include font-h5();
    background-color: $m5;
    color: $m1;
    @include rem(border-radius, 2);
    box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .3);
    @include f-hover {
      box-shadow: 0 .1875rem .3125rem rgba(0, 0, 0, .3);
      transition: box-shadow 0.28s cubic-bezier(.4, 0, .2, 1), background-color 0.3s;
    }
    .btn__text {
      @include font-h5();
    }
    &.btn_is-active {
      background-color: $m5;
      box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .5);
      transition: box-shadow 0.28s cubic-bezier(.4, 0, .2, 1), background-color 0.3s;
    }
    &:disabled,
    &.btn_is-disabled {
      box-shadow: none;
      background-color: $m5;
      color: $m1;
      cursor: not-allowed;
    }
  }
  &.btn_sm {
    @include rem(min-width, 50);
    @include rem(padding, 2, 10);
    @include font-h6();
    .btn__text {
      @include font-h6();
    }
  }
  &.btn_block {
    display: block;
    width: 100%;
    @include font-h3();
  }
  &.btn-icon {
    display: inline-block;
    padding: 0;
    min-width: auto;
    @include rem(width, 34);
    @include rem(height, 34);
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    text-rendering: auto;
  }
}