/* Main Navigation Container, Off-Screen Navigation*/
.navbar-main {
  @include interface();
  position: fixed;
  height: 100%;
  overflow-y: auto;
  font-size: $baseFontSize;
  -webkit-overflow-scrolling: touch;
  width: $MainNavigationWidth;
  background: $MainNavigationBg;
  z-index: $indexMainNavigation;
  will-change: transform;
  transform: translate3d(-100%, 0, 0);
  transition: transform $globalMediumEaseTime $globalMenuEasing;
  top: 0;
  &.open {
    transform: translate3d(0%, 0, 0);
  }

  a:not(.button) {
    color: $topbarColor;
    &:active:not(.logo) {
      background: rgba(#000, .3) !important;
    }

    &:hover {
      color: $topbarNavHoverColor;
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .more-space {
    margin-top: 1rem;
  }

  ul {
    display: flex;
    flex-direction: column;

    li {
      &.active {
        a {
          background: rgba(#000, .2);
          font-weight: $topbarNavActiveFontWeight;
          color: $topbarNavActiveColor;
        }
      }
      a:not(.button) {
        padding: 10px 20px;
        display: inline-block;
        width: 100%;
        position: relative;
        .badge {
          position: absolute;
          right: 20px;
          margin-top: 2px;
        }
      }
    }
  }

}

.home {
  display: block;
  text-indent: -99999px;
  background: $topbarBg;
  height: $topbarHeight;
}



.topbar {
  display:flex;
}

.topbar-action {
  
  > * {
    pointer-events: none;
  }
  &.active,
  &:active {
    background: rgba(#000, .2);
  }

  &.right {
    margin-left: 15px;
  }
  cursor: pointer;
  display: inline-block;
  padding: 0 3px;
  font-weight: $topbarActionFontWeight;
  color: $topbarActionColor;

  &:hover {
    color:$topbarActionColorHover;
  }
  min-width:30px;
  text-align: center;
  .badge {
    vertical-align: 1px;
  }

  span:not(.badge) {
    font-size:$baseFontSize;
    vertical-align: top;
  }
}


.navigation-toggler {
  flex:1;
  text-align:left;
  white-space: nowrap;
  padding-right:30px;
  span {
    text-overflow:ellipsis;
    max-width:100%;
    display:inline-block;
    overflow:hidden;
    margin:0;
    color:$navigationTogglerColor;
    &.logo {
      width:100px;
    }
  }
}


@media #{$mediaDesktop} {
  .logo, .home {
    height:$topbarHeightDesktop;
  }
}

.navbar-main, .subnav {
  .badge {
    margin-left:3px;
  }
}

@import 'tabs';