@include b(number-keyboard) {
  background-color: #fafafa;
  &-header {
    position: relative;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: $secondary-text-color;
    font-size: 14px;
    &-close {
      position: absolute;
      right: 0;
      padding: 0 15px;
      color: $primary-color;
      font-size: 14px;
    }
  }
  // 付呗键盘的头部
  &-fubei-header {
    @include child_center();
    @include border($top: 0, $left: 0, $borderColor: $line-color);

    justify-content: space-between;
    height: 29px;
    padding: 0 15px;
    line-height: 29px;
    text-align: left;
    .left-title {
      display: flex;
      align-items: center;
      img {
        width: 11px;
      }
      span {
        height: 11px;
        margin-left: 5px;
        line-height: 11px;
        color: $auxiliary-text-color;
        font-size: 11px;
      }
    }
    .right-close {
      img {
        width: 14Px;
        vertical-align: middle;
      }
    }
  }
  &-body {
    display: flex;
    &-content {
      flex: 1;
    }
    &-sidebar {
      width: 25%;
    }
  }
  &-key {
    position: relative;
    display: inline-block;
    width: 33.33333333%;
    height: 52px;
    line-height: 52px;
    text-align: center;
    color: #333;
    font-size: 27px;
    font-style: normal;
    vertical-align: middle;
    &::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      bottom: -50%;
      left: -50%;
      border-top: 1px solid $line-color;
      border-left: 1px solid $line-color;
      transform: scale(.5);
    }
    &.active {
      background-color: darken($white,5);
    }
  }
  &-gray {
    background-color: #ebebeb;
    &.active {
      background-color: darken(#ebebeb,5);
    }
  }
  &-red,
  &-delete {
    font-size: 16px;
  }
  &-delete.fubei {
    position: relative;
    color: #ebebeb;
    &::before {
      @include self_center($position: absolute);

      content: '';
      width: 30px;
      height: 21px;
      background-image: url(../../number-keyboard/icon-del.png);
      background-size: 30px 21px;
    }
  }
  &-middle {
    width: 66.66666667%;
  }
  &-big {
    width: 100%;
    height: 108px;
    line-height: 108px;
  }
  &-red {
    background-color: $primary-color;
    color: #fff;
    &.active {
      background-color: darken($primary-color,5);
    }
  }
}