.layout {
  min-height: 100%;
  flex-grow: 1;
  display: flex;
  position: relative;
}

.layout__main {
  flex-grow: 1;
}

.layout__aside {
  width: $w-layout-aside;
  height: 100%;
  top: 0;
  left: -$w-layout-aside;
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: 20;
  transition: 0.5s;

  .layout--aside-shown & {
    left: 0;
  }

  @include respond-to('medium') {
    min-height: 100%;
    left: 0;
    flex: $w-layout-aside--md 0 0;
    .page--docs & {
      top: $h-header--md;
      width: $w-layout-aside--md;
    }
    .page--docs.page--top-navigation & {
      position: absolute;
      top: 0;
    }
    .page--api & {
      top: $h-header;
      flex: $w-api-layout-aside--md 0 0;
    }
  }

}

.layout__content {
  min-height: 100%;
  max-width: 100%;
  position: relative;
  flex-grow: 1;

  .layout--content-scrolled & {
    max-height: 100%;
    overflow: auto;
  }
  .page--docs & {
    @include respond-to('medium') {
      left: $w-layout-aside--md;
      padding-top: $h-header--md;
      max-width: calc(100% - #{$w-layout-aside--md});
    }
  }

  .page--docs.page--top-navigation & {
    @include respond-to('medium') {
      padding-top: 0;
    }
  }

  .page--api & {
    @include respond-to('medium') {
      max-width: calc(100% - #{$w-layout-aside});
      margin-bottom: -$h-api_header--md;
      top: -$h-api_header--md;
      left: $w-layout-aside;
    }
  }

}