@leftpanel_width:250px;
@leftpanel_top_position:60px;
@leftpanel_background_color:@white;
@leftpanel_text_color:rgb(221,221,221);
@leftpanel_zindex:1001;
@leftpanel_box_shadow:@reactBoxShadowDepth1;
@leftpanel_closed_width:45px;

@bezier_transition:all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;

.workspace-entry.workspace-access-inbox{
  span.access-icon:before{
    font-family: @fontAwesome;
    content:'\f01c';
  }
}

.left-panel{
  background-color: @leftpanel_background_color;
  position: absolute;
  top:@leftpanel_top_position;
  left: 0;
  bottom:0;
  width: @leftpanel_width;
  z-index: @leftpanel_zindex;
  font-family: @fontReact;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  color:@leftpanel_text_color;
  overflow-y: auto;
  box-sizing: border-box;
  transition: @bezier_transition;
  box-shadow: @leftpanel_box_shadow;
  *{
    box-sizing: border-box;
  }

  .section-title{
    padding: 16px 16px ;
    font-weight: 500;
    border-top:1px solid fade(@leftpanel_text_color, 30);
    margin-top: 10px;
    transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .navigation-title{
    display: none;
    height: @workspacesToolbarHeight;
    border-bottom: 1px solid ghostwhite;
    padding-left: 16px;
    font-size: 2em;
    line-height: @workspacesToolbarHeight;
  }

  .nav-list-entry{
    padding: 6px 1px 6px 16px;
    display: flex;
    line-height: 24px;
    cursor: pointer;
    &:hover{
      background-color: rgba(255,255,255,0.25);
    }
  }
  .nav-list-entry-icon{
    flex-shrink: 0;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 16px;
    text-align: center;
  }
  .nav-list-entry-label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .workspaces{
    .workspace-entry{
      .nav-list-entry();
      .workspace-badge{
        .nav-list-entry-icon();
        font-size: 0.9em;
        font-weight: 500;
        background-color: @leftpanel_text_color;
        color: @leftpanel_background_color;
        border-radius: 50%;
        position: relative;

        span.badge-overlay{
          display: none;
        }
      }
      .workspace-label{
        .nav-list-entry-label();
        .workspace-new, .workspace-num-badge{
          display: inline-block;
          font-size: 10px;
          font-weight: 500;
          border-radius: 3px;
          margin-left: 5px;
          height: 13px;
          line-height: 13px;
          padding: 0 3px;
          background-color: white;
          color: rgba(0,0,0,0.63);
          text-transform: uppercase;
        }
      }
      .workspace-description{
        display: none;
      }
      .workspace-additional-action {
        padding: 6px 0 0 8px;
      }
      &.workspace-current{
        opacity: 0.4;
      }
      &.workspace-access-inbox{
        margin-bottom: 10px;
        .workspace-label{
          text-transform: uppercase;
          color: white;
        }
      }
    }
  }

  .simple-provider{
    position: relative;
    .infinite-parent-smooth-height > div{
      overflow-y: auto !important;
    }
    .material-list-entry{
      .nav-list-entry();
      .material-list-icon{
        .nav-list-entry-icon();
        font-size: 1.2em;
      }
      .material-list-text{
        .nav-list-entry-label();
      }
      .material-list-actions{
        position:absolute;
        right: 16px;
        opacity: 0.5;
        &:hover{
          opacity: 1;
        }
      }
    }
    .mui-toolbar{
      position: absolute;
      top:16px;
      right: 60px;
      color:darken(@leftpanel_text_color, 30);
    }
    .toggle-button{
      cursor: pointer;
      float: right;
      color:darken(@leftpanel_text_color, 30);
      &:hover{
        color:@leftpanel_text_color;
      }
    }
    .section-title{
      border-top:0;
      margin-top: 0;
    }
    .alerts_number_badge{
      background-color: @colorCodeAlert;
      color:#555;
      border-radius: 2px;
      display: inline-block;
      padding: 0 3px;
    }
    .icon-refresh{
      cursor: pointer;
      transition: @bezier_transition;
      &.rotating{
        opacity: 0.2;
      }
    }
    .emptyMessage{
      display: inline-block;
      padding: 0 16px 8px;
      opacity: 0.7;
    }
    &.closed{
      .section-title{
        padding-bottom: 6px;
      }
      .material-list{
        display: none;
      }
      .emptyMessage{
        display: none;
      }
    }
  }

  &.hidden{
    left: -@leftpanel_width + @leftpanel_closed_width;
  }

}
