// Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

@include exports('layout.clarity') {
  .main-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: $clr-global-app-background;

    .alert.alert-app-level {
      flex: 0 0 auto;
      overflow-x: hidden;
    }

    header,
    .header {
      flex: 0 0 $clr-header-height;
    }

    .sub-nav,
    .subnav {
      flex: 0 0 $clr-subnav-height;
    }

    //This is a utility class which mimics the main-container class
    //and occupies the remaining space inside of the main-container
    //after the header just in case our users app layout requires
    //that the .subnav and the .content-container be inside of an
    //angular component
    .u-main-container {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      overflow: hidden; //IE 10 doesn't like it if we don't use this
    }

    .content-container {
      display: flex;
      flex: 1 1 auto;

      //needed for Firefox:
      //http://stackoverflow.com/a/30580228/3538394
      //http://stackoverflow.com/a/26916542/3538394
      //min-height: 0px works in Firefox but not in IE. IE wants a positive value
      //IE:
      //http://stackoverflow.com/a/14964944/3538394
      min-height: 1px;

      .content-area {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: $clr-content-area-padding-top $clr-content-area-padding-right $clr-content-area-padding-bottom
          $clr-content-area-padding-left;

        & > :first-child {
          margin-top: 0;
        }
      }

      .sidenav {
        flex: 0 0 auto;
        order: -1;
        overflow: hidden; //overflow-y enabled in .sidenav-content
      }

      .clr-vertical-nav {
        flex: 0 0 auto;
        order: -1;
      }
    }
  }

  @media print {
    .main-container {
      height: auto;
    }
  }

  body.no-scrolling .main-container .content-container .content-area {
    overflow: hidden;
  }

  body.no-scrolling {
    overflow: hidden;
  }
}