.js-mobile-menu {
  display: none;
  float: left;
  cursor: pointer;
  padding-top: 0;
  margin-left: 0.6rem;
  margin-right: 0.6rem;
  font-size: 1.8rem;
  flex-direction: column;
  justify-content: center;

  @include media-breakpoint-down(md) {
    display: inline-flex;
  }
}

.nav-bar {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 502;
  background: $gray-dark;
  width: $size-navbar-width;
  margin-top: $size-header-height;
  height: 100%;
  overflow-y: auto;
  transition: all .5s ease-out;

  .material-icons {
    color: white;
    font-size: 1.188rem;
    line-height: inherit;
  }
  &.mobile-nav {
    margin-left: -100%;
    margin-top: $size-header-height + ($header-mobile-padding-y * 2);
    width: 70%;

    @include media-breakpoint-only(sm) {
      width: 60%;
    }

    @include media-breakpoint-only(md) {
      width: 40%;
    }

    &.expanded {
      display: block;
      margin-left: 0;
      overflow-y: scroll;
    }
    .onboarding-navbar {
      display: none;
    }
    .panel-collapse {
      padding-left: 0;

      .link-leveltwo .link {
        padding-left: 0.75rem;
      }
    }
    .employee_avatar {
      text-decoration: none;
      text-align: center;
      padding-top: 1rem;

      .material-icons {
        line-height: 3.75rem;
        font-size: 3.75rem;

        @include media-breakpoint-down(md) {
          line-height: 4.6875rem;
          font-size: 4.6875rem;
        }
      }

      span {
        color: white;
        display: block;
        margin-bottom: 0.625rem;

        @include media-breakpoint-down(md) {
          font-size: 1.09375rem;
        }
      }

      img {
        width: 3.75rem;
        height: 3.75rem;
        margin-bottom: .625rem;

        &.img-thumbnail {
          border-radius: 36px;
        }
      }
    }
    .shop-list {
      padding-bottom: 1rem;
      text-align: center;
      font-weight: bold;

      a {
        @include media-breakpoint-down(md) {
          font-size: 1.09375rem;
        }
      }
    }
    .main-menu {
      margin-top: 0.625rem;

      & > li:first-child {
        padding-bottom: 1rem;
      }
    }
    .shop-list-title {
      color: $brand-primary;
      text-transform: uppercase;
      font-size: 1rem;
      text-align: center;
      margin-bottom: 0.9375rem;
      &::after {
        font-family: 'Material Icons';
        content: "\E313";
        font-size: 1.25rem;
        line-height: 1.375rem;
        margin-left: 0.625rem;
        vertical-align: bottom;
      }
    }
    .items-list {
      padding-left: 0;
      a:focus {
          background-color: transparent;
      }
      li {
        background-color: white;
        border-bottom: $gray-light 1px solid;
        &.group a{
          padding: 0.9375rem 2.5rem;
          font-weight: bold;
        }
        &.shop {
          padding: 0.9375rem 0.9375rem 0.9375rem 2.5rem;
          a {
              display: inline-block;
              width: auto;
              &.link-shop {
                  float: right;
                  .material-icons {
                      font-size: 1.25rem;
                      color: $gray-medium;
                  }
              }
          }
        }
      }
      li:first-child a {
        color: $brand-primary;
        text-transform: uppercase;
        font-size: 0.9375rem;
        padding: 0.9375rem 1.25rem;
      }
    }
  }
}

.main-menu {
  padding: 0 0 5.313rem 0;
  margin: 0;

  .category-title > .title {
    text-transform: uppercase;
  }

  .link-levelone {
    $padding-size: 1.25rem;
    display: block;

    &[data-submenu] {
      @include media-breakpoint-down(md) {
        a.link {
          font-size: 1.25rem;
          padding-top: 1.25rem;
          padding-bottom: 1.25rem;
          line-height: inherit;

          .material-icons {
            font-size: 2rem;
            line-height: 2rem;

            &.sub-tabs-arrow {
              padding-right: 1.2rem;
            }
          }
        }
      }

      &.has_submenu {
        @include media-breakpoint-down(md) {
          .sub-tabs-arrow {
            visibility: visible;
          }
        }
      }
    }

    &.-active {
      @include media-breakpoint-down(md) {
        border-right: none;
      }

      > .link {
        border-left: .25rem solid #25b9d7;
        padding-left: .638rem;

        .material-icons {
          &:first-child {
            color: #25b9d7;
          }
        }
      }
    }

    &:not(#subtab-AdminParentModulesSf) {
      i.material-icons.mi-extension {
        color: #6c868e;
      }
    }

    > .link {
      font-size: .75rem;
      display: flex;
      height: initial;
      line-height: 1rem;
      align-items: end;
      color: $gray-dark-text;
      text-decoration: none;
      padding: 0.5rem .3125rem 0.5rem .938rem;
      word-break: break-word;
      white-space: initial;
      text-overflow: initial;
      overflow: hidden;
      @include media-breakpoint-down(md) {
        font-size: 1rem;
      }

      span {
        padding-left: .625rem;
      }

      .sub-tabs-arrow {
        margin-left: auto;
        visibility: hidden;
        color: #6c868e;
        vertical-align: middle;
        line-height: inherit;
      }
    }

    &.ul-open,
    &.-active,
    &.-hover {
      & > .link {
        background: #202226;
        color: white;
        transition: background 300ms ease;

        @include media-breakpoint-down(md) {
          background: $gray-dark;
        }
      }

      &.has_submenu {
        .link {
          .sub-tabs-arrow {
            visibility: visible;
          }
        }
      }
    }

    > .submenu {
      list-style: none;
      background: #202226;
      display: none;
      white-space: nowrap;
      padding-left: 2.75rem;

      & > li {
        @include media-breakpoint-down(md) {
          a.link {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
          }
        }

        &:first-of-type {
          padding-top: .625rem;

          @include media-breakpoint-down(md) {
            padding-top: 0;
          }
        }

        &:last-of-type {
          padding-bottom: .750rem;

          @include media-breakpoint-down(md) {
            padding-bottom: 0;

            a.link {
              padding-bottom: 1.5rem;
            }
          }
        }
      }
    }

    &.ul-open,
    &.-active {
      .link {
        background: #202226;
      }
    }

    &.open {
      > .submenu {
        display: block;
      }
    }
  }

  .link-leveltwo {
    @extend .link-levelone;

    &.-active {
      > .link {
        padding-left: 0;
        border-left: none;
        color: white;
      }
    }

    > .link {
      height: initial;
      line-height: 0.9rem;
      padding: 0.3125rem 0.3rem 0.3125rem 0;

      @include media-breakpoint-down(md) {
        padding-top: 1.4rem;
        padding-bottom: 1.4rem;
        line-height: 1.6rem;
      }
    }

    > .link:hover {
      color: $gray-dark-text-hover;
    }
  }
}

.category-title {
  display: block;
  font-weight: bold;
  font-size: 0.75rem;
  border-top: 1px solid #bbcdd2;
  margin: 1.813rem 0 0 .938rem;
  padding: .875rem 0 .750rem 0;

  @include media-breakpoint-down(md) {
    display: none;
  }

  & > .title {
    color: white;
    background: $gray-dark;
  }
}

.menu-collapse {
  height: .813rem;
  font-size: 2rem;
  display: block;
  cursor: pointer;
  text-align: right;
  padding: .688rem .938rem 2.188rem 0;
  line-height: .813rem;
  color: $gray-dark-text;

  @include media-breakpoint-down(md) {
    display: none;
    padding-bottom: 1rem;
  }

  .material-icons {
    color: #BEBEBE;

    &:last-child {
      margin-left: -1.313rem;
    }
  }
}

.page-sidebar-closed:not(.mobile) {

  .menu-collapse {
    transform: rotate(180deg);
    padding-right: .8rem;
  }

  .nav-bar {
    overflow: visible;
    width: $size-navbar-width-mini;

    .main-menu {
      .category-title > .title,
      .link-levelone span {
        display: none;
      }

      .sub-tabs-arrow {
        display: none !important;
      }

      .category-title {
        margin-top: 0.8rem;
        padding-bottom: 0;
      }

      .link-levelone {
        position: relative;

        .link {
          line-height: initial;
        }

        &:first-of-type {
          margin-bottom: 0;
        }

        &.-hover {
          > .link {
            transition: all 0s ease 0s;
            width: 250px;

            > span {
              display: inline-block;
              padding-left: 1.563rem;
            }
          }

          ul.submenu {
            position: absolute !important;
            display: block !important;
            top: 34px !important;
            width: 200px !important;
            left: 50px;
            padding-left: 5px;
          }
        }

        .link-leveltwo {
          &:first-of-type {
            padding-top: 0 !important;
            margin-top: .2rem;
          }

          &:last-of-type {
            padding-bottom: 0 !important;
            margin-bottom: 1rem;
          }

          .link {
            padding-left: 1.5rem;
          }
        }
      }
    }

    @media (max-height: 870px) {
      // this two tabs need to be flipped, otherwise
      // css issue with bottom of the page
      #subtab-ShopParameters:hover,
      #subtab-AdminAdvancedParameters:hover {
        ul.submenu {
          display: flex !important;
          flex-direction: column-reverse;
          top: 0 !important;
          transform: rotate(180deg);
          transform-origin: top;

          li {
            transform: rotate(180deg);

            &:last-of-type {
              margin-bottom: 0;
            }
          }
        }
      }
    }

  }
}

.mobile-layer {
  display: none;
  transition: all 0.2s ease-in-out;
  position: fixed;
  background: rgba(0,0,0,.7);
  width: 100%;
  height: 100%;
  z-index: 501;
  top: 0;
  left: 0;

  &.expanded {
    display: block;
  }
}