/* ========================================================================
   Component: sidebar.less
 ========================================================================== */
 
@sidebar-bg:                #2c3037;
@sidebar-item-color:        #919293;
@sidebar-footer-height:     60px;
@submenu-header-hg:         40px;   // Submenu header when hover

.sidebar {
  background-color: @sidebar-bg; 
  height: 100%;
  overflow-y: auto;
  
  // First main level
  > .nav {
    position: relative;
    padding-bottom: @sidebar-footer-height;
    min-height: 100%;
  }

  // Items
  .nav {

    > li > a {
      padding: 16px 30px;
      color: @sidebar-item-color;
      font-weight: bold;
      letter-spacing: .025em;
      text-shadow: 0 1px 3px #222;
      .transition(all .2s ease);
      &:focus, &:hover {
        color: #fff;
      }
      // Item icon
      > em {
        width: 2em;
      }
    }
    > li.active > a {
      &, &:focus, &:hover {
        color: #fff;
        background-color: lighten(@sidebar-bg, 10%);
      }
    }

    // Sub Leves
    .nav {
      padding-left: 30px;
      background-color: darken(@sidebar-bg, 5%);
      box-shadow: 0 1px 6px rgba(0,0,0,.15) inset;
      > li > a {
        position: relative;
        padding: 10px 30px;
        font-size: 13px;
        background-color: transparent !important;
        font-weight: normal;
        // build a little circle to use as item indicator
        &:after {
          @sz: 6px; // little circle size
          content: "";
          display: block;
          position: absolute;
          left: 0; top: 50%; 
          margin-top: -(@sz/2);
          width: @sz; height: @sz;
          border-radius: 500px;
          background-color: @sidebar-item-color;
        }
      }
      > li.active > a:after {
        background-color: #fff;
        background-color: @link-color;
      }
    }

    // Sidebar footer
    > .nav-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      min-height: @sidebar-footer-height;
      padding: 16px 10px;
      text-align: right;
      .nav-footer-divider {
        display: block;
        height: 1px;
        width: auto;
        background-color: rgba(255,255,255,0.1);
      }
    }
  }

}

// Toggled state styles
// ---------------------------------

@media @tablet {

  .aside-toggled {

    .sidebar {
      overflow: visible !important;
      // Applies to first level items
      > .nav {
        
        // increase icons size
        > li > a > em {
          font-size: 1.7em;
          width: auto;
        }

        > li > a,
        > li > .item {
          padding: 22px 0;
          text-align: center;
          // Remove first level main text
         .item-text {
            display: none;
            position: absolute;
            left: 100%; top: 0;
            padding-left: 20px;
            font-weight: normal;
            line-height: @submenu-header-hg;
            white-space: nowrap;
            color: #fff;
            background: darken(@sidebar-bg, 5%); // reuse item bg
            z-index: 2002;
          }
          &.no-submenu .item-text {
            display: none !important;
          }
        }
      }

      // Applies to all level items
      .nav {
        
        // relocate the menu to appear 
        // next to the sidebar
        .nav {
          display: none;
          position: absolute;
          top: 0;
          left: 100%;
          padding-left: 20px;
          padding-top: @submenu-header-hg;
          min-width: 180px;
          z-index: 2001;
          height: auto !important; // override collapse
        }
        
        // show submenu on hover/click
        > li:hover,
        > li.open {
          .nav {
            display: block;
          }
          .item-text {
            display: block;
          }
        }
      }

      // labels in menu items
      .nav {
        .label {
          position: absolute;
          top:10px; right: 5px;
        }
      }

    } // .sidebar

  } // .aside-toggled


} // @media @desktop