@import "../variables";

#sidebar {
  width: 58px;
  min-width: 58px;
  overflow-y: auto;
  
  &.sidebar-custom {
      background-color: $primary;
  }
  
  &.sidebar-default {
      background-color: #20242A;
  }

  #custom_icon{
      max-width: 24px;
      max-height:22px;
      min-width: 24px;
    }

  &.expanded {
    width: 250px;
    min-width: 250px;
    #custom_icon{
      max-width: 24px;
      max-height:24px;
      min-width: 24px;
      margin-right: 7px;
      margin-left: -3px;
    }
  }

  .section {
    font-size: 12px;
    color: $light;
    text-transform: uppercase;
    margin-left: 16px;
    margin-top: 16px;
  }

  .nav-link {
    font-size: 14px;
    color: $light;
    height: 43px;
  }

  .logo {
    margin: 16px 16px 24px 9px;
  }

  .logo img {
    height: 40px;
    width: 150px;
  }

  .nav-item:hover {
    background-color: $hover;
  }
  .nav-icon { min-width: 24px; font-size: 18px}
}

#sidebar .closed {

  .nav-item {
    text-align: center;
  }

  .nav-link {
    font-size: 18px;
    color: $light;
  }

  .logo-closed {
    margin: 16px auto 24px auto;
  }

  .logo-closed img {
    margin: 0px 9px;
    height: 40px;
    width: 40px;
  }

  .nav-item:hover {
    background-color: $hover;
  }

}