assets/css/_docs.scss

html.docs {
  @import "carbon";

  &.offline {
    #carbonads,
    .btn-repl {
      display: none;
    }

    .toc-container > div:nth-of-type(2) {
      padding-bottom: 0;
    }
  }

  body {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  header {
    padding: 0;
  }

  select {
    background-color: $background;
    border: 1px solid $background;
    border-radius: 5px;
    color: $defaultColor;
    font-size: 1.4rem;
    height: 34px;
    line-height: 1.42857143;
    padding: 6px;

    &:focus {
      border-color: $brandMain;
      outline: 0;
    }
  }

  .btn-repl {
    bottom: 2.4rem;
    color: $foreground;
    font-size: 1.3rem;
    position: absolute;
    right: 0;
  }

  .container {
    max-width: 100%;
  }

  .doc-container {
    flex: 14 14 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2.4rem 4rem;
    transform: translateZ(0);
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;

    &:after {
      background: lightgrey;
      content: "";
      display: none;
      height: 100%;
      left: 0;
      opacity: 0.5;
      position: absolute;
      top: 0;
      width: 100%;
    }

    > div > div {
      margin-bottom: 6.4rem;
      padding: 0.8rem 0;
      position: relative;
    }

    h2, h3, h4 {
      white-space: nowrap;
    }

    h3 {
      background-color: $background;
      font-weight: 700;
      margin: 0 -999rem;
      padding: 3.2rem 999rem;
      overflow-y: hidden;

      a {
        border-bottom: 0;
        padding-right: 0.8rem;
        visibility: hidden;
      }

      &:hover a {
        visibility: inherit;
      }
    }

    h3 + p a {
      color: #9e9e9e;
      font-size: 1.4rem;
      margin-right: 1.6rem;

      &:hover {
        color: darken(#9e9e9e, 15%);
      }
    }

    h4 {
      font-weight: 700;

      & + ol code,
      & + ol em,
      & + p em {
        color: #3492ff;
        font-family: Consolas, "Courier New", monospace;
        font-weight: 700;
      }

      & + ol {
        list-style-type: none;
        padding-left: 1.6rem;
      }

      & + p {
        padding-left: 1.6rem;
      }
    }
  }

  .doc-main {
    background-color: $foreground;
    display: flex;
    flex: 1 1 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .hidden {
    display: none;
  }

  .logo {
    height: 40px;
    width: 40px;
  }

  .mobile-menu {
    a {
      border: none;
      color: $defaultColor;

      i {
        margin-right: 1rem;
      }
    }
  }

  .repl {
    background-color: transparent;
    margin: 0 0 0 -75px;
    padding: 0;
    width: calc(100% + 175px);
  }

  .search {
    position: relative;
    width: 100%;

    input {
      appearance: none;
      border: none;
      border-bottom: 2px solid $defaultLiteColor;
      border-radius: 0;
      font-size: 1.4rem;
      padding: 0 0 10px 0;
      text-indent: 30px;
      width: 100%;

      &:focus {
        border-bottom-color: $defaultNearColor;
        outline: none;
      }
    }

    .fa-search {
      color: #979797;
      font-size: 1.5rem;
      left: 7px;
      position: absolute;
      top: 5px;
    }
  }

  .toc-container {
    @include minimal-scrollbar();

    background-color: $foreground;
    display: none;
    flex: none;
    height: 100%;
    min-width: 310px;
    overflow-y: auto;
    padding: 2.4rem;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateZ(0);
    white-space: nowrap;
    will-change: scroll-position;
    z-index: 1;
    -webkit-overflow-scrolling: touch;

    &.open {
      display: block;
    }

    &.open + .doc-container {
      overflow-y: hidden;

      &:after {
        display: block;
      }
    }

    // Avoid page jank when the search bar initializes.
    > div:first-child:not(.search):not(.react-menu-container) {
      margin-top: calc(2.4rem + 33px);

      h2 {
        margin-left: calc(1.1rem + 11.5px);
      }
    }

    // Make room for the Carbon ad.
    > div:nth-of-type(2) {
      padding-bottom: 13rem; // Add 1rem extra for Edge.
    }

    div > h2 {
      margin-bottom: 0.8rem;
      margin-top: 2.4rem;

      code {
        font-family: $fontFamily;
      }
    }

    ul {
      border-left: 1px dashed #dcdcdc;
      margin-top: 0.8rem;

      li a {
        border: none;
        color: $defaultColor;
        font-size: 1.4rem;

        &:hover {
          color: darken($defaultColor, 50%);
        }
      }
    }

    .empty-state {
      color: #bababa;
      margin-top: 2.4rem;
      font-size: 1.4rem;
    }

    .fa-minus-square-o, .fa-plus-square-o {
      cursor: pointer;
      font-size: 1.4rem;
      margin-right: 1.1rem;
    }

    .subtle-punctuation {
      opacity: 0.4;
    }

    .collapsible-title {
      cursor: pointer;
      user-select: none;
    }
  }
}