/**
 * @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 {

  @include el-ltr(text-align, left);
  @include el-rtl(text-align, right);

  -webkit-font-smoothing: antialiased;

  .layout {
    display: flex;
    flex-direction: column;
  }

  ::ng-deep el-layout-header {
    display: block;

    nav {
      align-items: center;
      justify-content: flex-start;
      display: flex;
    }

    &.fixed {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1040;
    }
  }

  .layout-container {
    display: flex;
    flex: 1;
    -ms-flex: 1 1 auto;
    flex-direction: row;

    ::ng-deep el-sidebar {
      &.left {
        @include el-ltr(order, 0);
        @include el-rtl(order, 2);
      }
      &.right {
        @include el-ltr(order, 2);
        @include el-rtl(order, 0);
      }
      &.end {
        order: 2;
      }

      .fixed {
        position: fixed;
        width: 100%;
        overflow-y: auto;
        height: 100%;
      }
    }

    .content {
      display: flex;
      flex: 1;
      -ms-flex: 1 1 auto;
      flex-direction: column;
      min-width: 0;

      &.center {
        max-width: 100%;
        position: relative;
        margin-left: auto;
        margin-right: auto;
      }

      .columns {
        display: flex;
        flex: 1;
        -ms-flex: 1 1 auto;
        flex-direction: row;
        width: 100%;

        ::ng-deep el-layout-column {
          order: 1;
          flex: 1 0;
          min-width: 0; // fix for flexbug https://github.com/philipwalton/flexbugs#flexbug-1
          &.left {
            @include el-ltr(order, 0);
            @include el-rtl(order, 2);
          }
          &.start {
            order: 0;
          }
        }
      }

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

        nav {
          justify-content: center;
          display: flex;
        }
      }
    }
  }
}