/*
 * Component: Sidebar Mini
 */

//Add sidebar-mini class to the body tag to activate this feature
.sidebar-mini {
  //Sidebar mini should work only on devices larger than @screen-sm
  @media (min-width: @screen-sm) {
    //When the sidebar is collapsed...
    &.sidebar-collapse {

      //Apply the new margining to the main content and footer
      .main-footer,
      .content-wrapper,
      .right-side {
        margin-left: 50px !important;
        z-index: 840;
      }

      .main-footer,
      .content-wrapper {
        margin-left: 50px + 15px !important;
      }

      //Modify the sidebar to shrink instead of disappearing
      .main-sidebar {
        //Don't go away! Just shrink
        .translate(0, 0);
        width: 65px !important;
        z-index: 850;

        .sidebar-toggle {
          right: 22px;
          .ion:before {
            content: "\f30f";
          }
        }

        .slimScrollDiv,
        .sidebar {
          overflow: visible !important;
        }
      }

      .sidebar-menu {
        > li {
          position: relative;
          > a {
            padding: 10px;
            margin-right: 0;
            text-align: center;
          }
          > a > span {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
          }

          &:not(.treeview) {
            > a > span {
              border-bottom-left-radius: 4px;
              border-bottom-right-radius: 4px;
            }
          }

          > .treeview-menu {
            //Add some padding to the treeview menu
            padding-top: 5px;
            padding-bottom: 5px;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
          }

          //Show menu items on hover
          &:hover {
            > a {
              //overflow: visible;
            }
            > a > span:not(.pull-right-container),
            > .treeview-menu {
              display: block !important;
              position: absolute;
              width: @sidebar-width - 50;
              left: 60px;
              background-color: #fff;
            }

            //position the header & treeview menus
            > a > span {
              top: 0;
              padding: 12px 5px 12px 20px;
              background-color: inherit;
              text-align: left;
              &:not(.pull-right-container) {
                border: 1px solid @gray;
                //border-bottom: none;
              }
            }
            > a > .pull-right-container {
              //display: block!important;
              float: right;
              width: auto!important;
              left: 200px!important;
              top: 10px!important;
              > .label:not(:first-of-type) {
                display: none;
              }
            }

            > .treeview-menu {
              top: 43px;
              margin-left: 0;
              border: 1px solid @gray;
              border-top: none;
              box-shadow: 0 5px 10px rgba(0,0,0,.2);
            }
          }

          &.active {
            > a {
              > .dui-svg-icon {
                margin-right: 0;
              }
              &:before {
                left: 10px;
              }
            }
          }
        }
      }

      li.header {
        padding: 10px 20px 10px 20px;
      }

      //Make the sidebar links, menus, labels, badges
      //and angle icons disappear
      .sidebar-login-form,
      .main-sidebar .user-panel > .info,
      .sidebar-form,
      .sidebar-menu > li > a > span,
      .sidebar-menu > li > .treeview-menu,
      .sidebar-menu > li > a > .pull-right,
      .sidebar-menu li.header span {
        display: none !important;
        -webkit-transform: translateZ(0);
      }

      .main-header {
        //Let's make the logo also shrink and the small logo to appear
        .logo {
          padding-left: 15px;
          //width: 50px;
          > .logo-sm {
            display: block;
            margin-left: -15px;
            margin-right: -15px;
            font-size: 18px;
          }
          > .logo-lg {
            display: none;
          }
        }

        .company-logo {
          width: 100px;
          position: relative;
        }

        //Since the logo got smaller, we need to fix the navbar's position
        .header-navbar {
          margin-left: 100px;
          border-left: none;
        }
      }
    }
  }
}

//A fix for text overflow while transitioning from sidebar mini to full sidebar
.sidebar-menu,
//.main-sidebar .user-panel,
.sidebar-menu > li.header {
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-menu:hover {
  overflow: visible;
}

.sidebar-form,
.sidebar-menu > li.header {
  overflow: hidden;
  text-overflow: clip;
}

.sidebar-menu li > a {
  position: relative;
  > .pull-right-container {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -7px;
  }
}