.keyboard-shortcuts {
  padding: 8px 0 0;
  overflow: hidden;
  background-color: $classic-base-color;
  border-radius: 6px;

  @media screen and (max-width: 960px) {
    height: 90vh;
  }

  &__header {
    display: block;
    position: relative;
    border-bottom: 1px solid lighten($classic-base-color, 8%);
    border-radius: 6px 6px 0 0;
    padding: 12px 0;

    &__title {
      display: block;
      width: 80%;
      color: $primary-text-color;

      @include text-sizing(18px, 700, 24px, center);
      @include margin-center;
    }
  }

  &__close {
    @include abs-position(10px, 10px);
  }

  &__content {
    display: flex;
    flex-direction: row;
    padding: 15px;

    @media screen and (max-width: 960px) {
      flex-direction: column;
      overflow: hidden;
      overflow-y: scroll;
      height: calc(100% - 80px);
      -webkit-overflow-scrolling: touch;
    }
  }

  table {
    thead {
      display: block;
      padding-left: 10px;
      margin-bottom: 10px;
      color: $primary-text-color;

      @include text-sizing(16px, 600);
    }

    tr {
      font-size: 12px;
    }

    td {
      padding: 0 10px 8px;
    }

    kbd {
      display: inline-block;
      padding: 2px 8px;
      background-color: lighten($ui-base-color, 8%);

      @include border-design(darken($ui-base-color, 4%), 1px, 4px);
    }
  }
}