.navbar {
  padding: 0.7rem 1.5rem;
  background: @NvBgClr;
  color: @NvTClr;
  a, span, img {
    display: inline-block;
  }
  .logo {
    margin-right: 0.8rem;
    vertical-align: top;
  }
  .site-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: @NvTClr;
  }
  .links {
    font-size: 0.9rem;
    right: 1.5rem;
    top: 0.7rem;
  }
}

.nav-links {
  display: inline-block;
  a, a:visited {
    line-height: 1.4rem;
    color: inherit;
    &.link-active {
      margin-bottom: -0.2em;
      border-bottom: 0.2em solid @NvAClr;
    }
    &:hover {
      margin-bottom: -0.2em;
      border-bottom: 0.2em solid @NvLHClr;
    }
  }
  .nav-item {
    display: inline-block;
    margin-left: 1.5rem;
    line-height: 2rem;
  }
  .repo-link {
    margin-left: 1.5rem;
  }
  .nav-links summary {
    &:hover, &.link-active {
      margin-bottom: -0.2em;
      border-bottom: 0.2em solid @NvLClr;
      cursor: pointer;
    }
  }
}

.icon.outbound {
  color: @TClr;
  display: inline-block;
}

.page {
  padding-top: 0rem;
  padding-bottom: 2rem;
}

.page-nav {
  .wrapper();
  padding-top: 1rem;
  padding-bottom: 0;
  .inner {
    min-height: 2rem;
    margin-top: 0;
    border-top: 0.1em solid @BClr;
    padding-top: 1rem;
    overflow: auto // clear float;
  }
  .next {
    float: right;
  }
}

.sidebar {
  font-size: 0.95em;
  background-color: @SdBgClr;
  width: @sidebarWidth;
  min-height: 100%;
  z-index: 10;
  box-sizing: border-box;
  border-right: 0.2em solid @SdBClr;

  ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  a, a:visited {
    display: inline-block;
  }
  .nav-links {
    display: none;
    border-bottom: 0.3em solid @SdBClr;
    padding: 0.5rem 0 0.75rem 0;
    a, a:visited {
      font-weight: 600;
    }
    .nav-item, .repo-link {
      display: block;
      line-height: 1.25rem;
      font-size: 1.1em;
      padding: 0.5rem 0 0.5rem 1.5rem;
    }
  }
  .searchbox {
    font-weight: 600;
    font-size: 1.1em;
    line-height: 1.5rem;
    padding: 1rem 0 1.5rem 1.5rem;
    border-bottom: 0.1em solid @BClr;
    input[type='text'] {
      width: calc(@sidebarWidth - 4.5rem) !important;
      margin-right: 1.5em;
    }
  }
  .sidebar-links {
    padding: 1.5rem 0;
  }
  .toctree-l1 a, .toctree-l2 a, .toctree-l3 a, .toctree-l4 a {
    font-weight: 400;
    display: inline-block;
    color: @SdTClr;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
    border-left: 0.5rem solid transparent;
    &.current {
      color: @SdAClr;
      font-weight: 600;
    }
    &:hover {
      color: @SdLHClr;
    }
  }
}

.sidebar-group .caption {
  color: @SdT2Clr;
  transition: color .15s ease;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: bold;
  padding: 0 1.5rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  &.open, &:hover {
    color: inherit;
  }
  .arrow {
    top: -0.12em;
    left: 0.5em;
  }
  &.open .arrow {
    top: -0.18em;
  }
}

.sidebar .toctree-l1 ul {
  font-size: 0.95em;
}

.toctree-l1.current a {
  border-left: .5rem solid @SdA2Clr;
}
.toctree-l1 a {
  padding: 0.35rem 1rem 0.35rem 1.25rem;
  &.current {
    border-left-color: @SdAClr;
  }
}
.toctree-l2 a {
  padding: 0.25rem 1rem 0.25rem 1.75rem;
}
.toctree-l3 a {
  padding: 0.15rem 1rem 0.15rem 1.75rem;
}
.toctree-l4 a {
  padding: 0.05rem 1rem 0.05rem 1.75rem;
}

.home {
  padding: var(--navbarHeight) 2rem 0;
  max-width: 96em;
  margin: 0 auto;
  .hero {
    text-align: center;
    img {
      max-height: 28em;
      display: block;
      margin: 3rem auto 1.5rem;
    }
    h1 {
      font-size: 3rem;
    }
    h1, .description, .action {
      margin: 1.8rem auto;
    }
    .description {
      max-width: 35rem;
      font-size: 1.6rem;
      line-height: 1.3;
      color: @T2Clr;
    }
  }
  .footer {
    padding: 2.5rem;
    border-top: 0.1em solid @BClr;
    text-align: center;
    color: @FoTClr;
  }
}

.sidebar-button {
  display: none;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0.2rem;
  border: none !important;
  background-color: transparent;
  svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    fill: @NvTClr;
  }
}

.sidebar-group {
  &:not(.first) {
    margin-top: 1em;
  }
  .sidebar-group {
    padding-left: 0.5em;
  }
  &:not(.collapsable) {
    .sidebar-heading {
      cursor: auto;
      color: inherit;
    }
  }
}

.sidebar-heading {
  color: @SdTClr;
  transition: color .15s ease;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: bold;
  padding: 0 1.5rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  &.open, &:hover {
    color: inherit;
  }
  .arrow {
    top: -0.12em;
    left: 0.5em;
  }
  &.open .arrow {
    top: -0.18em;
  }
}

.sidebar-group-items {
  transition: height .1s ease-out;
  overflow: hidden;
}

.sidebar .sidebar-sub-headers {
  padding-left: 1rem;
  font-size: 0.95em;
}

a.sidebar-link, a:visited.sidebar-link {
  font-weight: 400;
  display: inline-block;
  color: @SdLClr;
  border-left: 0.25rem solid transparent;
  padding: 0.35rem 1rem 0.35rem 1.25rem;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
  &:hover {
    color: @SdLHClr;
  }
  &.active {
    font-weight: 600;
    color: @SdAClr;
    border-left-color: @SdAClr;
  }
  .sidebar-group & {
    padding-left: 2rem;
  }
  .sidebar-sub-headers & {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-left: none;
    &.active {
      font-weight: 500;
    }
  }
}

@media (max-width: @MQMobile) {
  .navbar {
    .can-hide {
      display: none;
    }
  }

  .nav-links {
    .nav-item, .repo-link {
      margin-left: 0;
    }
  }

  .sidebar {
    z-index: 9;
    .nav-links {
      display: block;
    }
    .sidebar-links {
      padding: 1rem 0;
    }
    &[opened] {
      transform: translateX(0%);
      transition: transform .2s ease;
    }
  }

  .nav-links details {
    summary {
      font-size: 1.2em;
      font-weight: bold;
      margin-bottom: 0.2em;
    }
    font-size: 0.9em;
    font-weight: normal;
    ul li.nav-link {
      margin-left: 2.4em;
      a, a:visited, a:focus {
        font-weight: normal;
      }
    }
  }

  .sidebar-button {
    display: inline;
  }
}

@media (min-width: @MQMobile) {
  .nav-links a, .nav-links a:visited {
    &:hover, &.link-active {
      color: @NvLClr;
    }
  }
  .nav-item > a:not(.external),
  .nav-item > a:visited:not(.external) {
    &:hover, &.link-active {
      margin-bottom: -0.2em;
      border-bottom: 0.2em solid @NvBClr;
      color: @NvLHClr;
    }
  }
}

@media (min-width: @MQMobile) {
  .nav-links summary {
    cursor: pointer;
    color: @NvLClr;
    &.link-active, .link-active {
      color: @NvAClr;
      margin-bottom: -0.2em;
      border-bottom: 0.2em solid @NvAClr;
    }
    &:hover {
      color: @NvLHClr;
      margin-bottom: -0.2em;
      border-bottom: 0.2em solid @NvLHClr;
    }
  }
  .nav-item > a:not(.external),
  .nav-item > a:visited:not(.external) {
    &.link-active {
      margin-bottom: -0.2em;
      border-bottom: 0.2em solid @NvAClr;
    }
    &:hover {
      margin-bottom: -0.2em;
      border-bottom: 0.2em solid @NvLHClr;
    }
  }
}

@media (max-width: @MQMobileNarrow) {
  .home {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    .hero {
      img {
        max-height: 21em;
        margin: 2rem auto 1.2rem;
      }
      h1 {
        font-size: 2rem;
      }
      h1, .description, .action {
        margin: 1.2rem auto;
      }
      .description {
        font-size: 1.2rem;
      }
    }
  }
}

@media (min-width: @MQMobile + 0.2ex) {
  .theme-container.no-sidebar {
    .sidebar {
        display: none;
    }
    .page {
      padding-left: 0;
    }
    img.align-right, figure.align-right {
      float: none;
      margin-left: auto;
      margin-right: auto;
    }
  }
}