/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@import '../../styles/core/mixins';

:host {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: auto;
  order: 0;

  .scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
  }

  .main-container {
    // TODO: this looks like a dirty fix to stop sidebar jumping while page is scrolled
    transform: translate3d(0, 0, 0);
    display: flex;
    flex-direction: column;
  }

  .main-container-fixed {
    position: fixed;
  }

  &.right {
    @include el-ltr(order, 4);
    @include el-rtl(order, 0);
    margin-right: 0;
    margin-left: auto;
  }

  &.end {
    order: 4;
    @include el-ltr() {
      margin-right: 0;
      margin-left: auto;
    };
    @include el-rtl() {
      margin-left: 0;
      margin-right: auto;
    };
  }

  // TODO: in this case this will won't work when header is not fixed and sidebar is
  &.fixed {
    position: fixed;
    height: 100%;
    z-index: 999;
    top: 0;
    bottom: 0;

    left: 0;

    &.right {
      right: 0;
    }
  }

  &.fixed.start {
    @include el-ltr(left, 0);
    @include el-rtl(right, 0);
  }
  &.fixed.end {
    @include el-ltr(right, 0);
    @include el-rtl(left, 0);
  }

  ::ng-deep el-sidebar-footer {
    margin-top: auto;
    display: block;
  }

  ::ng-deep el-sidebar-header {
    display: block;
  }
}