@import "libs/variables";
@import "libs/mixins";
@import "libs/icons";
@import "theme/mapbender3";


$templateHeight: 800px;
$templateWidth:920px;
$headHeight: 120px;
$sidePaneWidth:280px;

/* -------------------------------------------------------------- LOGO */
.logoContainer{
  position: relative;
  z-index: 10;
  display: inline-block;
  padding:$space;
  height:$headHeight;
  background:none;
}





/* ---------------------------------------------------------- CONTENT */
.templateWrapper{
  margin:0 auto;
  width:$templateWidth;
  height:$templateHeight;
  position:relative;
}
.contentPane{
  height:700px;
  border-right:1px solid darken(white, 30%);
  @include absolute($headHeight 0 '' 0);
  /*@include transition(all 0.3s linear);*/
  .left-top, .right-top, .left-bottom, .right-bottom{z-index: 1;}

  /* Positioning */
  .left-top{@include absolute($space*4 '' '' $space);}
  .right-top{@include absolute($space*4 $space '' '');}
  .left-bottom{@include absolute('' '' $space*3 $space);}
  .right-bottom{@include absolute('' $space $space*3 '');}
}
.sidePaneOpened .contentPane{left:$sidePaneWidth;}




/* --------------------------------------------------------- TOOLBARS */
.toolBar{
  z-index:4;
  label, span{font-family: $fontFamily;}
  &.top{@include absolute($headHeight 0 '' 0);}
  &.bottom{@include absolute('' 0 (-$space) 0);}
}
.sidePaneOpened .toolBar{left:$sidePaneWidth;}





/* --------------------------------------------------------- SIDEPANE */
$tabSize:32px;
.sidePaneTabs{
  width: $tabSize;
  height: $tabSize;
  @include absolute(40% '' '' '');
  /*@include transition(all 0.3s linear);*/
}
.sidePane{
  width:10px;
  height:($templateHeight - $headHeight) + $space;
  border-left:1px solid darken(white, 30%);
  z-index:20;

  &.notCollapsable{
    .sidePaneTabs{display:none;}
  }

  &.left{
    @include absolute(120px '' $space*3 0);
    .sidePaneTabs{right:-$tabSize;}
  }
  .sideContent{@include stretch();}
}
.sidePaneOpened .sidePane{width:$sidePaneWidth;}
