@import "main";
@import "header";
@import "topmenu";
$native-scrollbar-width: 18px;

//body, #wrapper, #wrapper2, #wrapper3, #easy_servicebar, #easy_servicebar_component {
//  @extend %fixed;
//  z-index: z($z-priority,body);
//}
body, #wrapper, #wrapper2, #wrapper3, #easy_servicebar, #easy_servicebar_component{
  //@extend %absolute;
  //z-index: z($z-priority,body);
  //overflow: hidden;
}

body{
  margin: 0 0 1px !important;
  padding: ($topmenu-height - $gap) 0 0 0 !important;
  overflow-x: hidden;

  @extend %pseudo-before;
  @include respond-to(min-menu-collapse){
    //right:$servicebar-width;
    padding: $topmenu-height 0 0 0 !important;
  }

  &:before{
    top:  $topmenu-height - 3*$gap;
    left: 0;
    right: 0;
    height: $gap;
    z-index: z($z-priority,topmenu) - 1;
    position: fixed;

    @extend %material__elevation--depth_2;
    @include respond-to(min-menu-collapse){
      //right:$servicebar-width;
      top:  $topmenu-height - $gap;
    }
  }
}
#top-menu {
  position: fixed;
  left: 0;
  z-index: z($z-priority,topmenu);
  height: $topmenu-height - $gap;
  @include respond-to(min-menu-collapse) {
    height: $topmenu-height;
  }
  bottom: auto;
  right: 0;
  top: 0;
  //border-bottom: 1px solid $color-top-border;
}
#header {
  //z-index: z($z-priority,topmenu);
  //bottom: auto;
  //height: $header-height;
  padding: .5*$box-padding $box-margin 0;
  position: relative;
  order: 1;
  @include respond-to(min-menu-collapse) {
    padding: .5*$box-padding 1.5*$box-margin 0;
  }
  #top-menu ~ & {
	top: $topmenu-height;
  }
}

#main {
  @extend %flex;
  @extend %flex-direction-column;
  //@extend %absolute;
  //z-index: z($z-priority,main);
  //-webkit-overflow-scrolling: touch;
  //overflow: hidden;
  //overflow-y: scroll;
  //margin-top: $box-padding;

  @include respond-to(min-menu-collapse) {
    //right: $servicebar-width;
    padding-right: $servicebar-width + 1;
  }

  #top-menu ~ & {
    @include respond-to(min-menu-collapse) {
      padding-left: $sidebar-width - $box-margin;
    }
  }
  #top-menu.collapsed ~ & {
    @include respond-to(min-menu-collapse) {
      padding-left: $servicebar-width + .5*$box-margin;
    }
  }
  /*  // Un/Comment to get "pushy" rich menu
  .left-menu-opened &{
    @include respond-to(min-menu-collapse) {
      right: $leftmenu-width + $servicebar-width;
    }
    @include respond-to(max-medium-screen) {
        right: $leftmenu-width;
    }
  }
  */
  /* // Un/Comment to get "pushy" servicebar
  .servicebar-opened &{
    @include respond-to(min-menu-collapse) {
      right: $servicebar-component-width + $servicebar-width;
    }
  }
  */
  /* // Un/Comment to get "pushy" rich menu
  .servicebar-opened.left-menu-opened &{
    @include respond-to(min-menu-collapse) {
      right: $servicebar-component-width + $leftmenu-width + $servicebar-width;
    }
    @include respond-to(max-medium-screen) {
      right: $leftmenu-width;
    }
  }
  */
  @include respond-to(min-sidebar-collapse) {
    display: block;
  }
}
#easy_servicebar {
  @extend %compositor-layer;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: z($z-priority,servicebar);
  left: auto;
  width: $servicebar-width;
  top: $topmenu-height;//0;
  display: none;
  padding-top: 3*$box-padding;
  padding-bottom: .5*$servicebar-width;
  @extend %flex-direction-column;

  @extend %pseudo-after;
  &:after{
    border-top: 1px solid $color-border-minor;
    bottom: .5*$servicebar-width;
    left: 0;
    right: 0;
  }

  @include respond-to(min-small-screen) {
    @include display(flex);
  }
  /* // Un/Comment to get "pushy" rich menu
  .left-menu-opened &{
    right: $leftmenu-width;
  }
  @include respond-to(max-medium-screen) {
    .left-menu-opened &{
      display: none;
    }
  }
  */
  @include respond-to(max-menu-collapse) {
      display: none;
  }
  &_component{
    @extend %fixed;
    display: none;
    @include respond-to(min-small-screen) {
      right: $servicebar-width;
      top: $topmenu-height;
      //top: -1px;
      bottom: -1px;
      left: auto;
      width: $servicebar-component-width ;//- 1;
      //border-right: 1px solid transparent;
      //border: 1px solid transparent;
      z-index: (z($z-priority,servicebar) + 1);
      /* // Un/Comment to get "pushy" rich menu
      .left-menu-opened &{
        right: $leftmenu-width + $servicebar-width;
      }
      */
    }
    /* // Un/Comment to get "pushy" rich menu
    @include respond-to(max-medium-screen) {
      .left-menu-opened &{
        display: none !important;
      }
    }
    */
    @include respond-to(max-menu-collapse) {
      display: none !important;
    }
  }
}
#content{
  @extend %order-2;
  z-index: z($z-priority,content);
  padding: .5*$box-margin;
  order: 2;

  @include respond-to(min-menu-collapse) {
    padding: $box-margin 1.5*$box-margin;
    //margin: .5*$box-padding;
    //padding-top: 1px;
  }
  //& > .easy-content-page {
  //  body.action-index &{
  //    @extend %compositor-layer;
  //  }
  //  body.controller-settings &{
  //    @extend %reset-compositor-layer;
  //  }
  //}

  #sidebar + &{
    margin-right: $sidebar-width + 1.5*$box-margin;

    @include respond-to(max-sidebar-collapse) {
      margin-right: 0 !important;
    }
    //&.fake-responsive{
    //  margin-right: 0.75*$sidebar-width;
    //}
    .nosidebar &{
      margin-right: 2*$box-margin - 2;
    }
  }
  .easy_jquery_tab{
    @include respond-to(max-medium-screen) {
      & > .splitcontent{
        margin-left: 0;
        margin-right: 0;
        & > div{
          float: none;
          width: auto;
          padding-left:0;
          padding-right:0;
        }
      }
    }
    //.servicebar-opened &{ //,.left-menu-opened & // Un/Comment to get "pushy" rich menu
    //  @include respond-to(max-large-screen) {
    //    & > .splitcontent{
    //      margin-left: 0;
    //      margin-right: 0;
    //      & > div{
    //        float: none;
    //        width: auto;
    //        padding-left:0;
    //        padding-right:0;
    //      }
    //    }
    //  }
    //}
    //.servicebar-opened &{ // .left-menu-opened // Un/Comment to get "pushy" rich menu
    //  @include respond-to(max-xlarge-screen) {
    //    & > .splitcontent{
    //      margin-left: 0;
    //      margin-right: 0;
    //      & > div{
    //        float: none;
    //        width: auto;
    //        padding-left:0;
    //        padding-right:0;
    //      }
    //    }
    //  }
    //}
  }
}

#sidebar,#easy_grid_sidebar {
  //@extend %compositor-layer;
  @extend %order-3;
  position: relative;
  padding-left: $gap;
  padding-right: $gap;
  @include respond-to(min-sidebar-collapse) {
    width: $sidebar-width;
    margin-top: $box-margin;
    position: absolute;
    right: $servicebar-width;
    padding-left: 0;
    padding-right: 0;
    float: right;
    margin-right: 1.5*$box-margin;
    //@extend %fixed;
    //right: $servicebar-width + $box-padding + $native-scrollbar-width;
    //top: $mainmenu-height;
    //left: auto;
    //bottom: 0;
    //z-index: z($z-priority,sidebar);
    .nosidebar &{
      margin-right: -$sidebar-width + 2*$box-margin - 2;
      @include respond-to(max-menu-collapse) {
        margin-right: -$sidebar-width + 1.5*$box-margin - 2;
        margin-left: $gap;
        @include respond-to(min-sidebar-collapse) {
          margin-right: -$sidebar-width + $box-margin - 4;
        }
      }
    }
  }
  @include respond-to(max-menu-collapse) {
    //padding-top: $gap;
    @include respond-to(min-sidebar-collapse) {
      width: $sidebar-width + 2*$gap;
      margin-right: $gap;
      right: 0 !important;
    }
  }
  &_inner{
    //&>div{
    //  padding-right: $box-margin;
    //  //margin-left: $box-margin;
    //}
    .easy-scroller{
      margin-right: -$box-margin;
      padding-right: $box-margin;
    }
  }

  //border-left: 1px solid $color-border;
  //&.fake-responsive{
  //  width: 0.75*$sidebar-width - 2*$box-margin;
  //}
  //&Clone{
  //  display: none;
  //  padding: 0 $box-padding;
  //  @include respond-to(max-sidebar-collapse) {
  //    display: block;
  //  }
  //  .fake-responsive &{
  //    display: block;
  //  }
  //}

}

#easy_grid{
  @extend %flex;
  @extend %flex-direction-column;
  margin: -$box-margin -1.5*$box-margin;
  @include respond-to(min-sidebar-collapse) {
    display: block;
  }
  &_content{
    @extend %order-2;
    padding: $box-margin 1.5*$box-margin 0;
    order: 2;
    #easy_grid_sidebar + &{
      margin-right: $sidebar-width + 1.5*$box-margin;
      @include respond-to(max-sidebar-collapse) {
        margin-right: 0;
      }
      .fake-responsive &{
        margin-right: 0;
      }
      @include respond-to(max-medium-screen) {
        & > .splitcontent{
          margin-left: 0;
          margin-right: 0;
          & > div{
            float: none;
            width: auto;
            padding-left:0;
            padding-right:0;
          }
        }
      }
      .nosidebar &{
        @include respond-to(min-sidebar-collapse) {
          margin-right: 2*$box-margin;
        }
      }

    }
  }
  &_sidebar{
    padding-left: $box-padding;
    padding-right: $box-padding;
    @include respond-to(min-sidebar-collapse) {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

#ajax-indicator{
  //@extend %border-radius-infinite;
  //@extend %material__elevation--depth_3;
  //@include scale(0.75);
  //@extend %pseudo-before;
  //@extend %pseudo-after;
  @extend %pseudo-indicator;
  top: $topmenu-height - $gap;
  right: auto;
  left: 50%;
  bottom: auto;
  //height: 0;
  z-index: z($z-priority,ajax);
  //margin-top: -25px;
  //margin-left: -25px;
  //width: 50px;
  //height: 50px;
  //background: rgba($color-foreground,1);
  //&:before,&:after{
  //  @extend %border-radius-infinite;
  //  position: absolute;
  //  //opacity: 0.5;
  //}
  //&:before{
  //  @include animation(spin 1s infinite linear);
  //  width: 30px;
  //  height: 30px;
  //  margin-top: 4px;
  //  margin-left: 4px;
  //  border: solid 6px $color-main;
  //  border-left-color: transparent;
  //  border-right-color: transparent;
  //}
  //&:after{
  //  @include animation(spin-inverse 1s infinite linear);
  //  width: 12px;
  //  height: 12px;
  //  margin-top: 13px;
  //  margin-left: 13px;
  //  border: solid 6px $color-important;
  //  border-left-color: transparent;
  //  border-right-color: transparent;
  //}
  &>span{
    display: none;
  }
}
