@include b(keyboard) {
  @include define(background, #d8d8d8);
  @include define(item-background, #fff);
  @include define(item-active-background, rgba(162, 165, 176, 0.8));
  @include define(item-gap, 6px);
  @include define(item-height, 52px);
  @include define(item-font-size, 30px);
  @include define(item-border-radius, 5px);
  @include define(item-box-shadow, 0 1px 0 #898a8d);
  @include define(ok-background, var(--za-theme-primary));
  @include define(ok-font-size, 20px);
  @include define(ok-text-color, #fff);
  @include define(opacity-disabled, var(--za-opacity-disabled));

  display: grid;
  gap: var(--item-gap);
  background: var(--background);
  user-select: none;
  padding: var(--item-gap);

  @include e(item) {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--item-font-size);
    color: var(--item-text-color);
    background: var(--item-background);
    height: var(--item-height);
    border-radius: var(--item-border-radius);
    box-shadow: var(--item-box-shadow);
    user-select: none;

    &:not(&--disabled):not(&--blank):active {
      background: var(--item-active-background);
      box-shadow: none;
    }

    @include m(ok) {
      background: var(--ok-background);
      font-size: var(--ok-font-size);
      color: var(--ok-text-color);
    }

    @include m(blank) {
      background: transparent;
      box-shadow: none;
    }

    @include m(disabled) {
      &,
      &:hover,
      &:active {
        opacity: var(--opacity-disabled);
      }
    }
  }
}