.page {
  min-height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  &--unscrolled {
    height: 100%;
    overflow: hidden;
  }
}

.page__header {
  .page--docs & {
    position: fixed;
  }
  width: 100%;
  position: fixed;
  height: $h-header;
  z-index: 10;

  @include respond-to('medium') {
    .page--top-navigation & {
      display: none;
    }
    height: $h-header--md;
    position: static;
  }

  .page--api & {
    height: $h-api_header;
    min-height: $h-api_header;

    @include respond-to('medium') {
      height: $h-api_header--md;
    }
  }

  .page--search-enabled & {
    height: $h-header + $h-search + $p-base--vertical;

    @include respond-to('small') {
      height: $h-header--md;
    }
  }
}

.page__body {
  min-height: 100%;
  padding-top: $h-header;
  flex-grow: 1;
  display: flex;
  flex-direction: column;

  .page--search-enabled & {
    padding-top: $h-header + $h-search;

    @include respond-to('small') {
      padding-top: $h-header + 2*$p-base--vertical;
    }
  }

  .page--api & {
    padding-top: $h-api_header;

    @include respond-to('medium') {
      padding-top: 0;
    }
  }

  @include respond-to('medium') {
    padding-top: 0;

    .page--search-enabled & {
      padding-top: 0;
    }
  }
}

.page__custom-header {
  z-index: 999;
  &--mobile-visible {
    display: block;
    @include respond-to('medium') {
      display: none;
    }
  }

  &--mobile-hidden {
    display: none;

    @include respond-to('medium') {
      display: block;
    }
  }
}