/* #ifndef APP-NVUE */

$-color-white: #fff;
$-color-black: #000;
@mixin base-style($color) {
  color: #fff;
  background-color: $color;
  border-color: mix($-color-black, $color, 8%);
  &:not([hover-class]):active {
    background: mix($-color-black, $color, 10%);
    border-color: mix($-color-black, $color, 20%);
    color: $-color-white;
    outline: none;
  }
}

@mixin is-color($color) {
  @include base-style($color);
  &[loading] {
    @include base-style($color);

    &::before {
      margin-right: 5px;
    }
  }
  &[disabled] {
    &,
    &[loading],
    &:not([hover-class]):active {
      color: $-color-white;
      border-color: mix(darken($color, 10%), $-color-white);
      background-color: mix($color, $-color-white);
    }
  }

}

@mixin base-plain-style($color) {
  color: $color;
  background-color: mix($-color-white, $color, 90%);
  border-color: mix($-color-white, $color, 70%);
  &:not([hover-class]):active {
    background: mix($-color-white, $color, 80%);
    color: $color;
    outline: none;
    border-color: mix($-color-white, $color, 50%);
  }
}

@mixin is-plain($color) {
  &[plain] {
    @include base-plain-style($color);

    &[loading] {
      @include base-plain-style($color);

      &::before {
        margin-right: 5px;
      }
    }

    &[disabled] {
      &,
      &:active {
        color: mix($-color-white, $color, 40%);
        background-color: mix($-color-white, $color, 90%);
        border-color: mix($-color-white, $color, 80%);
      }
    }
  }
}


.uni-btn {
  margin: 5px;
  color: #393939;
  border: 1px solid #ccc;
  font-size: 16px;
  font-weight: 200;
  background-color: #F9F9F9;
  // TODO 暂时处理边框隐藏一边的问题
  overflow: visible;

  &::after {
    border: none;
  }

  &:not([type]), &[type=default] {
    color: #999;

    &[loading] {
      background: none;

      &::before {
        margin-right: 5px;
      }
    }


    &[disabled] {
      color: mix($-color-white, #999, 60%);

      &,
      &[loading],
      &:active {
        color: mix($-color-white, #999, 60%);
        background-color: mix($-color-white, $-color-black, 98%);
        border-color: mix($-color-white, #999, 85%);
      }
    }

    &[plain] {
      color: #999;
      background: none;
      border-color: $uni-border-1;

      &:not([hover-class]):active {
        background: none;
        color: mix($-color-white, $-color-black, 80%);
        border-color: mix($-color-white, $-color-black, 90%);
        outline: none;
      }

      &[disabled] {
        &,
        &[loading],
        &:active {
          background: none;
          color: mix($-color-white, #999, 60%);
          border-color: mix($-color-white, #999, 85%);
        }
      }
    }
  }

  &:not([hover-class]):active {
    color: mix($-color-white, $-color-black, 50%);
  }

  &[size=mini] {
    font-size: 16px;
    font-weight: 200;
    border-radius: 8px;
  }


  &.uni-btn-small {
    font-size: 14px;
  }

  &.uni-btn-mini {
    font-size: 12px;
  }

  &.uni-btn-radius {
    border-radius: 999px;
  }

  &[type=primary] {
    @include is-color($uni-primary);
    @include is-plain($uni-primary)
  }

  &[type=success] {
    @include is-color($uni-success);
    @include is-plain($uni-success)
  }

  &[type=error] {
    @include is-color($uni-error);
    @include is-plain($uni-error)
  }

  &[type=warning] {
    @include is-color($uni-warning);
    @include is-plain($uni-warning)
  }

  &[type=info] {
    @include is-color($uni-info);
    @include is-plain($uni-info)
  }
}

/* #endif */