@import './demos/css/docvars';

.index {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 20rem 1fr;
  color: #333;

  ul.TOC {
    border-right: $DocumentBlockBorderStyle;
    padding: 0; margin: 0;
    background-color: $DocumentBlockBackgroundColor;
    list-style: none;
    padding: 1rem;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;

    ul {
      list-style: none;
      margin: 0;
      padding-left: 1rem;
    }

    li {
      span {
        padding: .6rem 1rem;
        color: #999;
        display: block;
      }
      a {
        padding: .6rem 1rem;
        display: block;
        color: #333;
        &:hover {
          color: #008cff;
        }

        &.linkActive {
          color: white;
          background-color: #555;
          text-decoration: none;
        }
      }
    }
  }

  .main {
    position: relative;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    
    .content {
      max-width: 50rem;
      margin: 0 auto;
      box-sizing: border-box;
      padding: 0 1rem;

      p {
        line-height: 1.5;
      }
    }
  }
}