@import "constants";
@import "mixins";

:root {
  --menu-bar-width: 83px;
}

.menu-bar {
  background-color: $color-white;
  box-shadow: $flyout-shadow;
  height: 100%;
  left: 0;
  padding-bottom: 50px;
  position: fixed;
  width: var(--menu-bar-width);
  z-index: 1001;

  .scroll-wrapper {
    height: 100%;
    padding-top: 16px;
    width: var(--menu-bar-width);
    overflow-x: hidden;
  }

  ul.nav > li {

    & > a,
    & > span {
      @include font-small;
      color: $color-volcano;
      display: grid;
      margin-left: auto;
      margin-right: auto;
      padding: 10px 0;
      text-align: center;
      word-break: normal;

      .fas {
        font-size: 18px;
        padding-bottom: 5px;
      }
    }

    &.active {
      @include box-shadow(-4px 0 0 $brand-primary);
      background-color: $color-gainsboro;
      margin-left: 4px;

      & > a {
        color: $color-emperor;
      }
    }

    &.disabled {
      box-shadow: none;
      cursor: not-allowed;
      opacity: .65;
    }
  }

  ul.nav-bottom {
    bottom: 0;
    padding-bottom: 16px;
    position: fixed;
    width: inherit;
  }

  .dropup {
    .dropdown-menu {
      bottom: 0;
      left: 99%;
      margin-bottom: 0;

      & > li > a {
        padding: 8px 38px;
      }
    }

    &.open > a {
      color: $color-emperor;
    }

    .about-scinote {
      font-size: 12px;

      .core-version {
        color: $color-silver-chalice;
      }
    }
  }

  #knowledge-center-link {
    .fas {
      margin-left: -26px;
      padding: 3px;
      position: absolute
    }
  }
}

@media(max-height:510px) {
  .menu-bar .nav-bottom {
    position: relative;
    width: auto;
  }
}

.all-teams-navigation-link {
  color: $brand-primary !important;
}