@charset "UTF-8";


// 常规长方形按钮
@mixin nec-btn($fg, $bg, $border) {
  display: inline-block;
  font-weight: 400;
  height: 34px;
  color: $fg;
  background-color: $bg;
  border: 1px solid $border;
  border-radius: 4px;
  white-space: nowrap;

  &[disabled] {
    background-color: $nec-disable-color;
    border: 1px solid $nec-disable-color;

    &:hover {
      background-color: darken($nec-disable-color, 10%);
      border-color: darken($nec-disable-color, 12%);
    }
  }

  &:hover {
    background-color: darken($bg, 10%);
    border-color: darken($border, 12%);
  }

  &:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
    background-color: darken($bg, 10%);
    border-color: darken($border, 12%);
  }

  &:focus {
    outline: none;
  }

  &.large {
    width: 208px;
  }

  &.medium {
    width: 140px;
  }

  &.small {
    width: 79px;
  }

  &.with-icon {
    width: 99px;
  }
}

.nec-btn-primary {
  @include nec-btn($white, $nec-primary-color, $nec-primary-color);
}

.nec-btn-primary-white {
  @include nec-btn($nec-primary-color, $white, $nec-primary-color);
}

.nec-btn-warning {
  @include nec-btn($white, $nec-warning-color, $nec-warning-color);
}

.nec-btn-warning-white {
  @include nec-btn($nec-warning-color, $white, $nec-warning-color);
}

.nec-btn-error {
  @include nec-btn($white, $nec-error-color, $nec-error-color);
}

.nec-btn-error-white {
  @include nec-btn($nec-error-color, $white, $nec-error-color);
}

.nec-btn-disable {
  @include nec-btn($white, $nec-disable-color, $nec-disable-color);
}

.nec-btn-disable-white {
  @include nec-btn($nec-disable-color, $white, $nec-disable-color);
}

.nec-btn-default {
  @include nec-btn($nec-text-color, $white, $nec-border-color);
}


// 圆形按钮
@mixin nec-circle-btn($r, $fg, $bg, $border) {
  display: inline-block;
  width: 2 * $r;
  height: 2 * $r;
  border-radius: $r;
  color: $fg;
  background-color: $bg;
  border: 1px solid $border;

  &:active,
  &:hover {
    color: $bg;
    background-color: $fg;
  }

  &:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
  }

  &:focus {
    outline: none;
  }
}

.nec-circle-btn-primary {
  @include nec-circle-btn(28px, $nec-primary-color, $white, $nec-primary-color);
}

.nec-circle-btn-warning {
  @include nec-circle-btn(28px, $nec-warning-color, $white, $nec-warning-color);
}

.nec-circle-btn-info {
  @include nec-circle-btn(28px, $nec-info-color, $white, $nec-info-color);
}

.nec-circle-btn-disable {
  @include nec-circle-btn(28px, $nec-disable-color, $white, $nec-disable-color);
}