@import '../../button/style/mixins.scss';

@include b(keyboard) {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--background-body);
  color: var(--color-text);
  user-select: none;

  @include e(item) {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--keyboard-item-font-size);
    position: relative;
    @include button-base();
    @include button-theme( var(--color-text), 'inherit', var(--button-default-border));

    &:active {
      color: var(--color-text);
    }

    @include m(ok) {
      font-size: r(16);
      @include button-theme(var(--color-text-inverse), var(--theme-primary), var(--button-default-border));
    }

    @include m(disabled) {
      background-color: var(--keyboard-disabled-background);

      &:active {
        background-color: var(--keyboard-disabled-background);
      }
    }
  }

  @include e(keys) {
    display: flex;
    flex-wrap: wrap;
    width: 75%;

    @include e(item) {
      width: 33.333333%;
      height: var(--keyboard-item-height);
      @include onepx(top left);

      &:nth-of-type(3n + 1) {
        @include onepx(top);
      }
    }
  }

  @include e(handle) {
    display: flex;
    flex-direction: column;
    width: 25%;

    @include e(item) {
      flex: 1;

      &:first-of-type {
        @include onepx(top left);
      }
    }
  }

  @include e(icon) {
    font-size: var(--keyboard-icon-font-size);
  }
}