/**
* Basic Layout
*/

.wrapper {
  display: flex;
  flex: 1 0 auto;
  flex-flow: row wrap;

  > * {
    flex: 1 100%;
  }

  width: 100%;
  min-height: calc(100vh - #{$topbarHeight});
  margin-top: $topbarHeight;
}

.wrapper-center {
  max-width: $overallMaxWidth;
  margin: $topbarHeight auto 0 auto;
}

// Wrapper where all Content goes
.content-wrapper {
  display: flex;
  flex-direction: column;
}

.page-content {
  padding: $overallPaddingTopBottom $overallPadding;

  .page-content {
    padding:0 $overallPadding;
  }
}

.header {
  height: $topbarHeight;
  background: $topbarBg;
  font-size: $topBarFontSize;
  position: fixed;
  z-index: 4;
  top: 0;
  width:100%;
  backface-visibility: hidden;
}

.topbar {
  padding: 0 $overallPadding 0 $overallPadding - 5px;
  color: $topbarColor;
  line-height: $topbarHeight;
}

.navigation-toggler {

  &:before {
    margin-right: 10px;
    line-height:$topbarHeight;
  }

  span {
    font-size: $baseFontSize;
    vertical-align: 1px;
  }
}

.footer {
  min-height: $footerHeight;
  text-align: center;
}

.main {
  // fixes flickering causing by tooltips apparently
  text-align: left;
}

.sidebar {
  will-change: transform;
  padding: 20px;
  background: $sidebarBackground;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: $MainSidebarWidth;
  z-index: $indexSidebar;
  transform: translate3d(100%, 0, 0);
  transition: transform $globalMediumEaseTime $globalMenuEasing;
  top: 0;
  right:0;
  &.open {
    transform: translate3d(0%, 0, 0);
  }
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width:0;
}

// A Darkener that spans the complete screen
.darkener {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: opacity;
  opacity: $darkenerFadeOpacity;
  background: $darkenerColor;
  z-index: $indexDarkener;
  display: none;
  cursor:pointer;
}


// Some flex utility classes:

.flex-align-center {
  align-self: center;
}