.c-keyboard {
  position: fixed;
  left: 0;
  bottom: 0;
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  .c-keyboard__done {
    padding: 6px 0;
    overflow: hidden;
    background: #fff;
    position: relative;
    .c-keyboard__description {
      padding: 0 10px;
      float: left;
      color: $text-light;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      max-width: 200px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .c-keyboard__done-button {
      padding: 0 10px;
      float: right;
      font-weight: bold;
      color: $primary;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
    }
    &::before {
      @include borderLine('top');
      border-color: $border-dark;
    }
  }
  .c-keyboard__key-group {
    display: table;
    width: 100%;
    position: relative;
    .c-keyboard__key {
      display: table-cell;
      width: 33.333333%;
      height: 54px;
      line-height: 54px;
      text-align: center;
      color: #424857;
      font-size: 30px;
      position: relative;
      background: #fff;
      i.c-keyboard__border {
        &::before {
          @include borderLine('top');
          border-color: $border-dark;
        }
        &::after {
          @include borderLine('left');
          border-color: $border-dark;
        }
      }
      &.c-keyboard__key-delete {
        &::after {
          content: "";
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAgBAMAAAB0qux3AAAAMFBMVEUAAAAGBgYDAwMEBAQFBQUFBQUEBAQEBAT///8DAwMDAwMDAwMEBAQKCgoNDQ0DAwOAzy9VAAAAD3RSTlMAK+qANGbIvAHz8uJ4GBOwQlL9AAAApElEQVQoz2OAAtb9/+HgV2oDAwzY/0cGtTBh5v8o4HsDXDkqCIApRwMJ2JX/n4Bd+f8PUOWY4gjlIvog8pMjRByh3EEIRCqyQMQRpisy6gOVCwiBxeHKwUJgSbA4QjlYDCQHFgcrR2gASkHFeYAkQgNQOVT8PZBEaGDUJyCOaQ4BezHdid9fmOGAP9wwwxlvvOCKR1zxjj+dYKYr/OkQM93iSucAyjAIM5+jk6QAAAAASUVORK5CYII=);
          background-size: 23px 16px;
          background-repeat: no-repeat;
          background-position: center;
          background-color: transparent !important;
          width: 23px;
          height: 16px;
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      &.c-keyboard__key-gray {
        background-color: #f0f0f0 !important;
      }
      &:active,
      &.c-keyboard__key-active {
        background: #e2e2e2 !important;
      }
      &.c-keyboard__key-empty {
        &:active {
          background-color: #f0f0f0 !important;
        }
      }
      &:nth-child(3n-2) {
        &::after {
          border: none !important;
        }
      }
    }
  }
  &::before {
    content: " ";
    width: 100%;
    background: #d2d5da;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 100%;
    height: 0;
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
  }
}

.c-keyboard-transition-enter-active,
.c-keyboard-transition-leave-active {
  transform: translateY(0);
  transition: all .3s;
}
.c-keyboard-transition-enter,
.c-keyboard-transition-leave-to {
  transform: translateY(100%);
  transition: all .3s;
}