html {
  height: 100%;
}

[ion-app] {
  @include flex-display();
  @include flex-direction(column);

  overflow: hidden;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;

  ion-nav {
    // container of header.toolbar-container, footer.toolbar-container and .nav-item-container
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;

    @include flex-display();
    @include flex-direction(column);
  }

  .toolbar-container {
    // container of many toolbars for each view in the .nav
    position: relative;
    width: 100%;
    min-height: 50px;
    @include flex-order($flex-order-toolbar-top);
  }

  footer.toolbar-container {
    @include flex-order($flex-order-toolbar-bottom);
  }

  .toolbar {
    // one view's toolbar, sibling to many view toolbars insde of .toolbar-container
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .nav-item-container {
    // container of many .nav-item's, each one containing one view
    position: relative;
    @include flex(1);
    @include flex-order($flex-order-view-content);
  }

  .tab-pane-container {
    // container of each content for each tab component within a tabs component
    @include flex(1);
    position: relative;
    width: 100%;
    @include flex-order($flex-order-view-content);
  }

  .nav-item-cover-parent {
    // .nav-item that should completely cover siblings and parent
    top: -50px;
    height: 100vh;
  }

  .nav-item {
    // by default .nav-item is hidden
    // and the transition animation will display it
    display: none;
  }

  .nav-item,
  .nav-item-child {
    // user created view, contained by .nav-item
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  ion-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .scroll-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

}