/* ========================================================================================= */
/* COMPONENTS - NAVBAR */
/* ========================================================================================= */

.topbar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  left: 241px;
  height: 50px;
  background: #FFF;
  border-bottom: 1px solid #E1E1E1;
  text-align: right;
  transition: left .15s ease-in-out;
  box-shadow: none !important;

  &.is-reduced {
    left: 50px !important;
  }

  @media (max-width: 768px) {
    left: 90px !important;

    &.is-reduced {
      left: 90px !important;
    }
  }
}

.nav-icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  border-right: solid 1px $gray-400;
  background: #FFF url(/bundles/comitium5designer/global/img/sidebar/c-icon-nav-opened.svg) no-repeat center;
  background-size: 20px;
  cursor: pointer;
  transition: all .15s ease-in-out;

  &:hover {
    background: #FFF url(/bundles/comitium5designer/global/img/sidebar/c-icon-nav-opened-hover.svg) no-repeat center;
    background-size: 20px !important;
  }

  &.is-reduced {
    width: 50px;
    height: 50px;
    margin-top: 50px;
    border-bottom: solid 1px $gray-400;
    background: #FFF url(/bundles/comitium5designer/global/img/sidebar/c-icon-nav-closed.svg) no-repeat center;
    background-size: 20px !important;

    &:hover {
      background: #FFF url(/bundles/comitium5designer/global/img/sidebar/c-icon-nav-closed-hover.svg) no-repeat center;
      background-size: 20px !important;
    }
  }

  @media (max-width: 768px) {
    left: 50px !important;
    background: #FFF url(/bundles/comitium5designer/global/img/sidebar/c-icon-nav-opened.svg) no-repeat center !important;
    background-size: 20px !important;

    &.is-reduced {
      width: 40px;
      height: 50px;
      margin-top: 0px !important;
      background: #FFF url(/bundles/comitium5designer/global/img/sidebar/c-icon-nav-white.svg) no-repeat center !important;
      background-size: 20px !important;
      background-color: $blue !important;
    }

  }
}

.navbar-nav {
  background-color:$white;
  background-image: none;

  & .sidebar-heading {
    padding: 4px 20px !important;
    color: $black !important;
    background-color: #efefef !important;
    text-align: left;

    &.is-reduced {
      display: none;
    }
  }

  & .nav-item {
    border-bottom: solid 1px $gray-400;

    >.nav-link  {
      display: inline-flex !important;
      align-items: center;
      color: #2F414C !important;
      padding: 4px 20px !important;

      & .fas {
        margin-right: 0;
      } 

    &.is-reduced {
      display: block;
      padding: 10px !important;
      width: 100%;
      justify-content: center;
      }

      @media (max-width: 768px) {
        display: inline-flex !important;
        justify-content: flex-start !important;
      }
    }

    &.active {
      background-color: $blue;
      
      >.nav-link {
        color: $white !important;
      }
      .fa-table:before, .fa-mobile:before {
        filter: invert(100%);
      }
    }

    & span {
      font-size: 13px !important;
      font-weight: 100 !important;
    }
  }
}