// Site Nav // ——– .site-nav {

// Position
position: fixed;
top: 0;
z-index: $mobile-navigation-z-index;
// Sidebar content could be too long for the page
// The scrolling should be limited to the chapter selection area
overflow: visible;
display: flex;
box-sizing: border-box;
// hide this background div
height: 0;
flex-direction: column;
// Mobile has the sidebar hidden by default
// Tablets and above have it showing by default
// On larger screens the content stays in place and we move the sidebar in
transition-duration: $site-nav-collapse-duration;
transition-timing-function: $site-nav-collapse-timing;
transition-property: left, width;
width: 100vw;
@include desktop-screen {
  height: 100%;
  z-index: $desktop-navigation-z-index;
  width: $site-nav-width;
  max-width: $max-site-nav-width;
  top: $site-header-height;
  left: 0;
  body.menu-toggled & {
    left: -#{$site-nav-width};
    box-shadow: none;
  }
}
@include large-screen {
  body.menu-toggled & {
    left: -#{$max-site-nav-width};
    box-shadow: none;
  }
}
.back-to-documents {
  min-height: calc(100vh - #{$doc-header-height});
  width: $back-to-docs-width;
  border-right: $divider-color 1px solid;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  p {
    height: $back-to-docs-width;
    width: calc(100vh - 128px);
    line-height: $back-to-docs-width;
    text-transform: uppercase;
    color: $header-text-color;
    font-size: 14px;
    letter-spacing: 1px;
    // calc in translate not supported in IE
    transform: rotate(-90deg) translateY(128px) translateY(-100vh);
    transform-origin: right 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    overflow: hidden;
    img {
      height: 30px;
      padding-left: 40px;
      padding-right: $large-spacing;
    }
  }
  @include mobile-screen {
    width: $mobile-back-to-docs-width;
    p {
      height: $mobile-back-to-docs-width;
      line-height: $mobile-back-to-docs-width;
    }
  }
}
@mixin hover-state-bg {
  background-color: $nav-background-hover-color;
}
@mixin hover-state-text {
  color: $header-text-color;
}
.navigation {
  display: flex;
  flex-direction: row;
  &.hidden {
    display: none;
  }
  ul.table-of-directories {
    list-style: none;
    padding-left: 0;
    padding-top: 0;
    margin-left: 0;
    margin-top: 0;
    min-width: 100%;
    max-width: 100%;
    transition: margin-left $site-nav-collapse-duration;
    max-height: calc(100vh - #{$site-doc-header-height});
    overflow: auto;
    @include mobile-screen {
      max-height: calc(100vh - #{$mobile-site-doc-header-height});
    }
    &.hidden {
      margin-left: -100%;
    }
    li {
      display: flex;
      width: 100%;
      padding: 0;
      margin: 0;
      .tod-container {
        flex: 1;
        padding-left: $site-padding;
        &:hover {
          @include hover-state-bg;
          text-decoration: none;
          .directory-item {
            @include hover-state-text;
          }
        }
      }
      // TOD directory item
      .directory-item {
        color: $nav-text-color;
        border-bottom: 1px inset $border-color;
        padding: $med-spacing 0;
        font-size: $nav-font-size;
        padding-right: $small-spacing;
        line-height: 1.5;
      }
      &:last-child {
        margin-bottom: $large-spacing;
        .directory-item {
          border-bottom: none;
        }
      }
    }
  }
}
.contents {
  box-sizing: border-box;
  width: 100%;
  ul.table-of-contents {
    margin: 0;
    padding: 0;
    max-height: calc(100vh - #{$site-doc-header-height});
    overflow: auto;
    @include mobile-screen {
      max-height: calc(100vh - #{$mobile-site-header-height});
    }
  }
  ul,
  li {
    padding: 0;
    list-style: none;
    margin: 0;
    display: block;
  }
}
// If there is only one document
.contents.lonely {
  .nav-branch {
    .nav-link {
      padding-left: $site-padding;
    }
    & .nav-branch {
      margin-left: $site-padding;
      // Align expanded sublinks to logo
      padding-left: calc(#{$back-to-docs-width} - #{$site-padding} - 1px);
    }
  }
}
.nav-branch {
  position: relative;
  display: flex;
  // Hide margin bottom for last child
  &:last-child {
    border-bottom: none;
    margin-bottom: $large-spacing;
  }
  // Show sublinks if only page
  &:only-child {
    .nav-branch {
      display: block;
    }
  }
  .nav-link {
    font-size: $nav-font-size;
    padding-left: $large-spacing;
    color: $nav-text-color;
    display: block;
    &:hover {
      @include hover-state-text;
      @include hover-state-bg;
    }
    // TOC directory item
    .directory-item {
      border-bottom: 1px solid $well-background-color;
      padding: $spacing $large-spacing $spacing 0;
      display: inline-block;
      width: calc(100% - #{$large-spacing});
      line-height: 1.5;
    }
  }
  // Sub links
  & .nav-branch {
    display: none;
    margin-left: $large-spacing;
    padding-left: $large-spacing;
    .nav-link {
      border-left: 2px solid $well-background-color;
      border-bottom: 1px solid $well-background-color;
      &:hover,
      &.selected {
        font-weight: normal;
        color: $primary-brand-color;
      }
      &.selected {
        border-left: 2px solid $primary-brand-color;
      }
      .directory-item {
        border-bottom: none;
      }
    }
    &:last-child {
      border-bottom: 1px solid $well-background-color;
      margin-bottom: 0;
      .nav-link {
        border-bottom: none;
      }
    }
  }
  // Expanded main links
  &.expanded {
    & > .nav-link {
      font-weight: bold;
      color: $header-text-color;
    }
    & .nav-branch {
      display: block;
    }
  }
}
.nav-header {
  height: $mobile-site-header-height;
  background-color: $search-box-background-color;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - #{$mobile-site-header-height});
  // Splitting up header and main
  position: fixed;
  left: 100vw;
  transition-duration: $site-nav-collapse-duration;
  transition-timing-function: $site-nav-collapse-timing;
  transition-property: left;
  z-index: 1;
  body.search-toggled &,
  body.menu-toggled & {
    left: 0;
  }
  @include desktop-screen {
    border-bottom: 1px solid $divider-color;
    width: 100%;
    position: static;
    height: $doc-header-height;
  }
  .search-filter {
    border-radius: $base-border-radius;
    background: $header-text-color;
    color: white;
    font-size: 9px;
    flex: 0 0 auto;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: $small-spacing;
    padding: 5px;
    cursor: pointer;
    &.hidden {
      display: none;
    }
    &:empty {
      display: none;
    }
  }
  // Children
  .search-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: $nav-font-size;
    box-shadow: $site-nav-shadow-inset;
    .search-icon-container {
      background-color: $primary-brand-color;
      height: 100%;
      width: $back-to-docs-width;
      min-width: $back-to-docs-width;
      display: flex;
      align-items: center;
      justify-content: center;
      .search-icon,
      .close-icon {
        height: 24px;
        width: auto;
        display: none;
        @include mobile-only();
      }
      .search-icon:not(.mobile) {
        height: 30px;
        @include desktop-only();
      }
      @include mobile-screen {
        cursor: pointer;
        width: $mobile-site-header-height;
        min-width: $mobile-site-header-height;
        background-color: transparent;
        body.menu-toggled & {
          cursor: default;
          .close-icon {
            display: none;
          }
        }
        body.search-toggled:not(.menu-toggled) & {
          .close-icon {
            display: block;
          }
          .search-icon {
            display: none;
          }
        }
      }
    }
    .clear-button {
      height: 27px;
      width: 27px;
      min-width: 27px;
      display: none;
      align-items: center;
      justify-content: center;
      margin-right: $med-spacing;
      background-color: $well-background-color;
      border-radius: 50%;
      .clear-icon {
        display: block;
        height: 13px;
        width: 13px;
        opacity: 0.5;
        path {
          fill: $header-text-color;
        }
      }
      &:hover {
        background-color: $divider-color;
        .clear-icon {
          opacity: 1;
        }
      }
    }
    &.focused {
      background: white;
    }
    &.filled {
      background: rgba(255, 255, 255, 0.75);
      .clear-button {
        display: flex;
        cursor: pointer;
      }
      .search-input-container input {
        opacity: 1;
      }
    }
    .search-input-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0;
      padding-left: $large-spacing;
      padding-right: $small-spacing;
      flex: 1 1 0;
      min-width: 0;
      overflow: visible;
      @include mobile-screen {
        padding-left: 0;
      }
      .search-header {
        font-size: 9px;
        letter-spacing: 1.1px;
        color: $header-text-color;
        opacity: 0.7;
        margin: 0;
        margin-bottom: 2px;
        text-transform: uppercase;
        @include desktop-only();
      }
      input {
        display: block;
        min-width: 0;
        border: none;
        outline: none;
        color: $primary-text-color;
        opacity: 0.5;
        padding: 0;
        margin: 0;
        // -webkit-font-smoothing: antialiased;
      }
      // Do not show the in-built X in IE
      input::-ms-clear {
        display: none;
      }
      input::placeholder {
        color: $header-text-color;
        opacity: 0.5;
      }
      input:disabled ~ .search-icon {
        display: none;
      }
    }
  }
}
.nav-main {
  height: calc(100% - #{$mobile-site-header-height});
  overflow: hidden; // prevent double scroll bar
  background-color: $base-background-color;
  overscroll-behavior: contain;
  // Splitting up header and main
  position: fixed;
  bottom: 0;
  left: 100vw;
  transition-duration: $site-nav-collapse-duration;
  transition-timing-function: $site-nav-collapse-timing;
  transition-property: left;
  @include mobile-screen {
    width: 100%;
    body.menu-toggled & {
      left: 0;
    }
  }
  @include desktop-screen {
    position: static;
    height: calc(100% - #{$doc-header-height});
    border-right: 1px solid $divider-color;
    box-shadow: $site-nav-shadow-inset;
  }
}
// Search Results
.search-results {
  background: white;
  position: absolute;
  left: $back-to-docs-width;
  top: $doc-header-height;
  width: calc(100% - #{$back-to-docs-width} - 2px); // account for border width
  height: auto;
  max-height: calc(100vh - #{$site-doc-header-height});
  overflow: auto;
  z-index: $search-results-z-index;
  box-shadow: -5px 6px 10px 3px rgba(0, 0, 0, 0.15);
  display: none;
  border: 1px solid $divider-color;
  border-top: none;
  @include mobile-screen {
    max-height: calc(100vh - #{$mobile-site-header-height});
    top: $mobile-site-header-height;
    left: 0;
    width: 100vw;
  }
  &.visible {
    display: block;
  }
  //not-found search results{
  .not-found {
    margin: $spacing;
  }
  .search-link {
    border-bottom: 1px solid $divider-color;
    display: flex;
    padding: $med-spacing;
    cursor: pointer;
    user-select: none;
    font-size: $base-font-size;
    &.selected {
      background-color: $well-background-color;
    }
    &:hover {
      text-decoration: none;
      background-color: $well-background-color;
    }
    &:last-child {
      border-bottom: none;
      margin-bottom: $large-spacing * 2;
    }
    p {
      margin: 0;
    }
    .search-title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: $spacing;
      color: $header-text-color;
    }
    .search-subtitle {
      font-size: 13px;
      margin-bottom: 5px;
      color: $header-text-color;
    }
    .search-content {
      font-size: 13px;
      color: $secondary-text-color;
    }
  }
}

}