// on screen keyboard

#keyboard { background-color: $bg_color; }

.keyboard {
 &-layout {
    padding: $base_padding;
    spacing: $base_padding;
  }

  &-row { spacing: $base_padding; }

  &-key {
    @extend %button;

    min-height: 2em;
    min-width: 2em;
    padding: 0;
    font-size: 1.2em;
    font-weight: bold;

    &:grayed { @include button(insensitive); }
  }

  &-subkeys {
    padding: $base_padding;
    -arrow-background-color: $bg_color;
    -arrow-border-width: 1px;
    -arrow-border-radius: $base_border_radius;
    -arrow-border-color: lighten($borders_color, 10%);
    -arrow-base: 20px;
    -arrow-rise: 10px;
    -boxpointer-gap: 0;
  }
}
