@import 'imports/colors';

main#page-content {
  margin-top: 16px;
}

nav.docs-component-nav {
  display: none;
}

nav li.drawer-heading {
  padding-left: 16px;
  padding-right: 16px;

  &:not(:first-child) {
    margin-top: 32px;
  }

  .drawer-heading-text {
    color: $glue-grey-600;
    display: table-cell;
    font-family: 'Google Sans', 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    height: 48px;
    letter-spacing: 0.25px;
    vertical-align: middle;
  }
}

// This is a hack.
// For some reason, the entire <main> element is positioned incorrectly
// (underneath the top bar) if the breadcrumb is not present.
// We have breadcrumbs on everything except the front page, and so the left
// nav was tucking under the header bar on the front page.
//
// I can not figure out what makes the inclusion of the breadcrumb the
// silver bullet here (in fact, there has to be a list element inside the
// breadcrumb, also), so instead I am giving up and hiding it.
nav.no-breadcrumb {
  height: 0px;
  visibility: hidden;

  & + h1 {
    margin-top: -88px; // Normally -80.
  }
}

@media (min-width: 1200px) {
  .docs-component-main {
    padding-left: 320px;
  }

  nav.docs-component-nav {
    background-color: $glue-grey-100;
    display: block;
    float: left;
    margin-right: 40px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px 12px;
    position: fixed;
    width: 280px;

    &::-webkit-scrollbar {
      height: 4px;
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.25);
    }

    ul.nav-list {
      margin-left: 0px;
      margin-bottom: 0px;

      li.nav-item {
        font-size: 13px;
        font-weight: 400;
        line-height: 16px;
        list-style: none;
        margin-top: 8px;
        overflow-x: hidden;
        overflow-y: hidden;
        text-overflow: ellipsis;

        &:first-child {
          margin-top: 0px;
        }

        a {
          color: $glue-grey-900;
          text-decoration: none;

          &:hover {
            color: $glue-blue-600;
          }
        }

        svg {
          color: $glue-grey-500;
          height: 1.25em;
          vertical-align: middle;
          width: 1.25em;
        }

        &.nav-item-active a {
          color: $glue-blue-600;
        }

        &.nav-item-header {
          color: $glue-grey-600;
          font-size: 14px;
          font-weight: 500;

          &:not(:first-child) {
            border-top: 1px solid #cfd8dc;
            margin: 15px -16px 0px -16px;
            padding: 15px 16px 0px 16px;
          }
        }
      }
    }
  }
}
