@use '../../../style/globals';
@use '../../../style/colors';

.help-page {
  max-width: 100%;
  &,
  .grid,
  .grid .row {
    height: 100%;
  }
  .col {
    overflow-y: scroll;
    height: 100%;
  }

  h1:first-child {
    margin-top: 0;
  }
  .markdown-wrapper {
    margin: 0 auto;
    width: 36em;
  }
  table {
    @extend .app-table;
    width: 100%;
  }

  .col.toc {
    padding: 0px 21px;
    .dark & {
      border: 1px solid colors.border-color(dark);
      background: colors.color-alternate(dark);
    }
    .light & {
      border: 1px solid colors.border-color(light);
      background: colors.color-alternate(light);
    }
  }
  .table-of-contents {
    list-style: none;
    margin: 0;
    padding: 0px 25px 0 0;
    li.toc-heading {
      margin-bottom: 1ex;
      a {
        cursor: pointer;
        border-bottom-color: transparent;
        &:hover {
          border-bottom-color: colors.color(link);
        }
      }
      &.level-2 {
        font-weight: bold;
      }
      @for $level from 1 through 6 {
        &.level-#{$level} {
          margin-left: #{2 * ($level - 2)}ex;
        }
      }
    }
  }

  pre code {
    font-size: 14px;
  }
}
