$navbar-selected-bg-level-1: $navbar-default-bg;
$navbar-selected-bg-level-2: darken($navbar-default-bg, 8%);
$navbar-selected-bg-level-3: darken($navbar-default-bg, 12%);
$navbar-selected-bg-level-4: darken($navbar-default-bg, 16%);
$navbar-selected-bg-level-5: darken($navbar-default-bg, 20%);

$navbar-default-border-level-1: darken($navbar-default-bg, 8%);
$navbar-default-border-level-2: darken($navbar-default-bg, 12%);
$navbar-default-border-level-3: darken($navbar-default-bg, 16%);
$navbar-default-border-level-4: darken($navbar-default-bg, 20%);
$navbar-default-border-level-5: darken($navbar-default-bg, 24%);

#presidium-navigation {
  position: relative;

  .placeholder {
    width: 260px;
    background-image: linear-gradient(
                    -45deg,
                    rgb(249, 249, 249) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgb(249, 249, 249) 50%,
                    rgb(249, 249, 249) 75%,
                    transparent 75%,
                    transparent
    );
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    -ms-background-size: 50px 50px;
    background-size: 50px 50px;
    -webkit-animation: loading-placeholder 2s linear infinite;
    -moz-animation: loading-placeholder 2s linear infinite;
    -ms-animation: loading-placeholder 2s linear infinite;
    animation: loading-placeholder 2s linear infinite;

    height: 100%;
    position: fixed;
  }

  @-webkit-keyframes loading-placeholder {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -75px 0px;
    }
  }

  @-moz-keyframes loading-placeholder {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -75px 0px;
    }
  }

  @-ms-keyframes loading-placeholder {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -75px 0px;
    }
  }

  @keyframes loading-placeholder {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -50px 0px;
    }
  }

  @media (max-width: $grid-float-breakpoint) {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1030;
    margin-left: -15px;
    margin-right: -15px;
  }

  .scrollable-container {
    @media (min-width: $grid-float-breakpoint) {
      position: fixed;
      overflow-y: auto;
      height: 100%;
    }
  }
  nav {

    @media (min-width: $grid-float-breakpoint) {
      width: 260px;
      border: 0;
      margin-bottom: 150px;
    }

    .navbar-header {
      float: none;

      width: 100%;
      text-align: center;

      .brand {
        float: none;
        margin: 0 auto;
        height: auto;
        padding: 0px;

        img {
          display: block;
          float: none;
          margin: 0 auto;
          width: 100%;

          @media (max-width: $grid-float-breakpoint) {
            display: none;
          }
        }
      }

      select#versions-select {
        background: none;
        border: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: auto;
        font-weight: 600;
        font-size: small;
        margin-top: -10px;
        &:hover {
          color: $navbar-default-link-hover-color;
          cursor: pointer;
        }
      }
      .versions-filter {
        display: inline-block;
        border: none;
        margin-bottom: 0px;
      }
      .brand-name {
        color: $navbar-default-brand-color;
        display: block;
        padding: 20px 5px 10px 5px;
        margin: 0;
        text-transform: uppercase;
        text-align: center;

        @media (max-width: $grid-float-breakpoint) {
          display: none; //hidden by default
          float: left;
          max-width: 80%;
          padding: 0 25px;
          font-size: 14px;
          @include navbar-vertical-align(14px);
        }
      }

      .toggle {
        @media (min-width: $grid-float-breakpoint) {
          display: none;
        }

        position: relative;
        float: right;
        margin-right: 15px;
        padding: 9px 10px;
        @include navbar-vertical-align(34px);
        background-color: transparent;
        background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
        border: 1px solid transparent;
        border-radius: $border-radius-base;

        &:focus {
          outline: 0;
        }

        &:hover {
          background-color: darken($navbar-default-bg, 3%);
        }

        .icon-bar {
          background-color: $navbar-default-brand-color;
          display: block;
          width: 22px;
          height: 2px;
          border-radius: 1px;
        }
        .icon-bar + .icon-bar {
          margin-top: 4px;
        }
      }
    }

    .navbar-items {
      width: 100%;
      border-top: 1px solid $navbar-default-border-level-1;
      padding: 0px 15px;
      margin-left: 0;
      margin-right: 0;
      word-break: break-all;
      overflow-wrap: anywhere;
      hyphens: auto;

      .filter {
        margin: 30px 5px 25px 5px;
        .control-label {
          font-size: 12px;
          font-weight: normal;
        }
      }

      > ul:first-of-type {
        border-top: 1px solid $navbar-default-border-level-1;
      }

      @media (max-width: $grid-float-breakpoint) {
        &.expanded {
          display: block;
          max-height: calc(100vh - 55px);
          overflow-y: auto;
        }
        display: none;
      }
    }

    .dropdown {
      margin: 0px 0 0;
      display: none;

      &.expanded {
        display: inherit;
      }
    }

    ul {
      list-style: none;
      padding-left: 0;
      float: none;
      margin: 0px -15px;

      li {
        cursor: pointer;
        float: none;
        position: relative;
        display: block;

        &.hidden {
          display: none;
        }

        li > .level-one {
          background-color: $navbar-selected-bg-level-1;
        }

        li > .level-two {
          background-color: $navbar-selected-bg-level-2;
        }

        li > .level-three {
          background-color: $navbar-selected-bg-level-3;
        }

        li > .level-four {
          background-color: $navbar-selected-bg-level-4;
        }

        li > .level-five {
          background-color: $navbar-selected-bg-level-5;
        }

        //Apply drop shadow to first unhidden element
        //Defaults to all
        li:not(.hidden) {
          > .level-two, > .level-three, > .level-four > .level-five {
            box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.4);
          }
        }

        li:not(.hidden) ~ li:not(.hidden) {
          > .level-two, > .level-three, > .level-four, > .level-five {
            box-shadow: none;
          }
        }

        li.on-article {
          > .menu-row {
            background-color: $navbar-default-link-hover-color;
            border-bottom: 1px $navbar-default-link-hover-color solid;
            .menu-title > a, .menu-expander {
              color: $navbar-default-link-hover-bg;
            }
          }
        }

        &.on-page {
          cursor: default;
          > .menu-row {
            .menu-title > a {
              cursor: default;
            }
            .menu-expander {
              cursor: pointer;
            }
          }
        }

        &.in-section {
          .level-one {
            background-color: $navbar-default-link-hover-color;
            .menu-title > a, .menu-expander {
              color: $navbar-default-link-hover-bg;
              font-weight: bold;
            }
          }
          &.expanded > .level-one {
            background-color: $navbar-selected-bg-level-1;
            .menu-title > a, .menu-expander {
              color: $navbar-default-link-hover-color;
              font-weight: bold;
            }
          }
        }

        .in-section {
          .level-two {
            background-color: $navbar-default-link-hover-color;
            .menu-title > a, .menu-expander {
              color: $navbar-default-link-hover-bg;
            }
          }
          &.expanded > .level-two {
            background-color: $navbar-selected-bg-level-2;
            .menu-title > a, .menu-expander {
              color: $navbar-default-link-hover-color;
            }
          }

          .in-section {
            .level-three {
              background-color: $navbar-default-link-hover-color;
              .menu-title > a, .menu-expander {
                color: $navbar-default-link-hover-bg;
              }
            }
            &.expanded > .level-three {
              background-color: $navbar-selected-bg-level-3;
              .menu-title > a, .menu-expander {
                color: $navbar-default-link-hover-color;
              }
            }
          }
        }
      }
    }

    .menu-row {
      display: flex;
      padding: 12px 10px;

      &:hover, &:focus {
        background-color: $navbar-default-link-hover-bg;
        .menu-expander {
          color: $navbar-default-link-hover-color;
        }
        .menu-title {
          a {
            color: $navbar-default-link-hover-color;
            text-decoration: none;
          }
        }
      }

      &.level-one {
        border-bottom: 1px $navbar-default-border-level-1 solid;
      }

      &.level-two {
        padding-left: 20px;
        border-bottom: 1px $navbar-default-border-level-2 solid;
      }

      &.level-three {
        padding-left: 35px;
        border-bottom: 1px $navbar-default-border-level-3 solid;
      }

      &.level-four {
        padding-left: 50px;
        border-bottom: 1px $navbar-default-border-level-4 solid;
      }

      &.level-five {
        padding-left: 65px;
        border-bottom: 1px $navbar-default-border-level-5 solid;
      }

    }

    .menu-expander {
      width: 15px;

      .glyphicon {
        margin-right: 5px;
        font-size: 0.8em;
      }
    }

    .menu-title {
      flex: 1;
      @media (max-width: $grid-float-breakpoint) {
        font-size: 16px;
      }
      a {
        color: $navbar-default-link-color;
      }
    }

    .expanded {
      .menu-row {
        color: $navbar-default-link-color;
      }
    }
  }
}

.presidium-enterprise {
  .placeholder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

  .spacer {
    width: 100%;
    height: 40px;
  }

  .black-bar {
    background: #323232;
    height: 40px;
    width: 100%;
  }

  .grey-bar {
    background: #cccccc;
    height: 40px;
    width: 100%;
    position: relative;
  }

  .progress {
    position: absolute;
    transition: width .3s linear;
    height: 2px;
    display: block;
    width: 100%;
    background-color: #ffffff;
    border-radius: 2px;
    background-clip: padding-box;
    margin: 0.5rem 0 1rem 0;
    overflow: hidden;
    top: -7px;
  }

  .progress .indeterminate {
    background-color: #a6a5a1;
  }

  .progress .indeterminate:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  }

  .progress .indeterminate:after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
  }

  @-webkit-keyframes indeterminate {
    0% {
      left: -35%;
      right: 100%;
    }
    60% {
      left: 100%;
      right: -90%;
    }
    100% {
      left: 100%;
      right: -90%;
    }
  }

  @keyframes indeterminate {
    0% {
      left: -35%;
      right: 100%;
    }
    60% {
      left: 100%;
      right: -90%;
    }
    100% {
      left: 100%;
      right: -90%;
    }
  }

}