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

$topPaneHeight: 70px;

/* -------------------------------------------------------------- LOGO */
.logoContainer{
  padding:5px $space;
  height:$topPaneHeight;
  width: 100%;
  z-index: 10;
  @include absolute(0 0 '' 0);
  @include box-shadow(0px 0px 3px black);

  img{height:60px;}
}





/* ---------------------------------------------------------- CONTENT */
.templateWrapper{
  margin:0 auto;
  @include absolute(0 0 0 0);
}
.contentPane{
  width:100%;
  height:100%;
  @include absolute(0 '' '' 0);
  .left-top, .right-top, .left-bottom, .right-bottom{z-index: 1;}

  /* Positioning */
  .left-top{@include absolute($space*7 '' '' $space);}
  .right-top{@include absolute($space*7 $space '' '');}
  .left-bottom{@include absolute('' '' $space*3 $space);}
  .right-bottom{@include absolute('' $space $space*3 '');}
}





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





/* --------------------------------------------------------- SIDEPANE */
$tabSize:32px;
.sidePaneTabs{
  width: $tabSize;
  height: $tabSize;
  @include absolute(40% '' '' '');
  @include transition(all 0.3s ease-in-out);
}
.sidePane{
  width:10px;
  z-index:20;

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

  &.left{
    @include absolute($topPaneHeight + $space*2 '' $space*2 0);
    .sidePaneTabs{right:-$tabSize;}
  }
  &.right{
    @include absolute($topPaneHeight 0 0 '');
    .sidePaneTabs{left:-$tabSize;}
  }
  .sideContent{@include stretch();}
}
.sidePaneOpened .sidePane{width:350px;}
