@import "main";
@import "header";
@import "topmenu-pushcurtain";
$native-scrollbar-width: 18px;
body {
  margin: 0 0 1px !important;
  padding: $topmenu-height 0 0 0 !important;
  overflow-x: hidden;
}

//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;
}
#top-menu {
  position: fixed;
  left: 0;
  z-index: z($z-priority,topmenu);
  height: (($topmenu-height - 2*$gap) - 1);
  bottom: auto;
  right: 0;
  top: 0;
}
#header {
  //z-index: z($z-priority,topmenu);
  //bottom: auto;
  //height: $header-height;
  position: relative;
  order: 1;
  @include respond-to(min-menu-collapse) {

  }
  #top-menu ~ & {
	top: $topmenu-height;
  }
}

#main-menu{
  height: $mainmenu-height;
  & + #main {
    top: $mainmenu-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;
  @include respond-to(min-menu-collapse) {
    //right: $servicebar-width;
    padding-right: $servicebar-width + 1;
  }

  #top-menu ~ & {
	top: $topmenu-height;
  }
  /*  // 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;
  @include respond-to(min-small-screen) {
    display: block;
  }
  /* // 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 - 1;
      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: $gap;
  @include respond-to(min-menu-collapse) {
    padding: $box-margin;
  }
  //& > .easy-content-page {
  //  body.action-index &{
  //    @extend %compositor-layer;
  //  }
  //  body.controller-settings &{
  //    @extend %reset-compositor-layer;
  //  }
  //}

  #sidebar + &{
    margin-right: $sidebar-width + $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 - $gap;
    }
  }
  .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;
    padding-top: $box-margin;
    padding-left: 0;
    padding-right: 0;
    position: absolute;
    right: $box-margin;
    //margin-right: $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 + $box-margin - 3;
      @include respond-to(max-menu-collapse) {
        margin-right: -$sidebar-width + $box-margin - 3;
        margin-left: $gap;
      }
    }
  }
  @include respond-to(min-menu-collapse) {
    right: $servicebar-width + $box-margin + 1;
  }
  @include respond-to(max-menu-collapse) {

    //padding-top: $gap;
    @include respond-to(min-sidebar-collapse) {
      width: $sidebar-width;
      right: $gap;
    }
  }
  &_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;
  @include respond-to(min-sidebar-collapse) {
    display: block;
  }
  &_content{
    @extend %order-2;
    padding: $box-margin;
    padding-bottom: 0;
    #easy_grid_sidebar + &{
      margin-right: $sidebar-width + $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 - $gap;
        }
      }

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

#ajax-indicator{
  @extend %compositor-layer;
  @extend %fixed;
  @extend %border-radius-infinite;
  @extend %box-shadow;
  @include scale(0.75);
  @extend %pseudo-before;
  @extend %pseudo-after;
  top: $topmenu-height;
  right: 0;
  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;
  }
}
