.application-layout {
  display: flex;
  align-content: stretch;
  &.relative {
    position: relative;
    min-height: 90vh;
    overflow: hidden;
    .application-side-bar {
      position: absolute;
      min-height: 100%;
      bottom: 0;
    }
  }
  &--collapsed {
    .application-layout__content {
      margin: 0 0 0 $collapsed-side-bar-width;
      max-width: calc(100% - #{$collapsed-side-bar-width});
    }
  }

  &__content {
    transition: all $global-transition-duration;
    margin: 0 0 0 $side-bar-width;
    max-width: calc(100% - #{$side-bar-width});
    flex: 1;
    position: relative;
    padding: em-calc(30px) em-calc(45px);

    @media (max-width: $medium)  {
      margin: 0 0 0 $collapsed-side-bar-width;
      max-width: calc(100% - #{$collapsed-side-bar-width});
    }
  }
}

.application-layout--hasTopNav {
  .application-layout__content {
    top: $top-nav-height;
    margin: 0;
    max-width: 100%;
    padding: em-calc(30px) em-calc(16px);
    @media (min-width: $breakpoint-large)  {
      padding: em-calc(30px) em-calc(45px);
    }
  }
}