.insp-wrapper {
  // Import variables, color and font files
  @import "defines";

  // Style for resize bar
  .gutter {
    background-color: $background-lighter;
    &.gutter-vertical:not(.blocked) {
      cursor        : ns-resize;
    }
    &.gutter-horizontal:not(.blocked) {
      cursor        : ew-resize;
    }
  }

  user-select: none; 
  display:flex;
  font-size:0.9em;
  font-family     : $font;
  background-color: $background;

  // The panel containing the two subpanel : tree and details
  .insp-right-panel {
    width: 750px;
    overflow-y: auto;

    &.popupmode {
      width:100% !important;
    }
    
    display:flex; 
    flex-direction: column;
    flex-shrink: 0;

    // The tree panel
    .top-panel {
      width:100%;
      height:100%;
      position:relative;
      background-color: $background;
      color           : $color;
      font-size       : 1em;
      
      // The div that will contain the tab div
      .tab-panel-content {
        width:100%;
        height:calc(100% - #{$tabbar-height});   
      }   

      // The div displaying all invisible tabs (when the tabbar width is small)
      .more-tabs-panel {
          position:absolute;
          z-index:10;
          top:$tabbar-height;
          right:0;
          width:100px;
          display:none;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border: 1px solid $background-lighter3;
          background-color: $background;

          .invisible-tab {
            height     : 25px;
            width      : 100%;
            line-height: 25px;
            text-align : center;
            background-color: $background-lighter;
            cursor:pointer;

            // Hover on it
            &:hover {
              background-color: $background-lighter2;
            }
            // Clic on it
            &:active {
              background-color: $background-lighter3;
            }
          }

      }
    }
  }

  @import 'tooltip';

  // All tools used on object in the tree
  @import 'treeTool';
  @import "tabPanel";
  @import "tabs/shaderTab";
  @import "tabs/consoleTab";
  @import "tabs/statsTab";
  @import "tabs/gltfTab";

  @import "tree";
  @import "detailPanel";
  @import "tabbar";
  @import "toolbar";
  @import "searchbar";
  @import "slider";
}