body,
html,
.root,
.layout--page {
  height: 100%;
}

.layout--page {
  &.layout--page--sidebar {
    .page__viewport,
    .page__grid {
      height: 100%;
    }
    @include media-breakpoint-down(lg) {
      .page__main {
        @include overflow(unset);
      }
    }
  }
}

.page__main {
  height: 100%;
  color: $text-color;
  .col-aside {
    display: none;
    & > aside {
      position: absolute;
      width: map-get($layout, aside-width);
      @include overflow(hidden);
    }
  }
}

.page__main-inner {
  position: relative;
  @include flexbox();
  @include flex-direction(column);
  min-height: 100%;
  background-color: $background-color;
}

.page__content {
  @include flex(1);
  width: 100%;
  margin: 0 auto;
  @media print {
    padding-bottom: 0;
  }
}
.hide-footer {
  .page__content {
    padding-bottom: 0;
  }
}

.page__comments {
  margin: map-get($spacers, 4) 0;
}

.page__aside {
  .toc-aside {
    padding: map-get($spacers, 5) 0 map-get($spacers, 3) map-get($spacers, 5);
  }
}

.page__actions {
  position: fixed;
  bottom: map-get($spacers, 5);
  left: map-get($spacers, 3);
  z-index: map-get($z-indexes, actions);
  display: none;
}

.page__sidebar {
  z-index: map-get($z-indexes, sidebar);
  display: block;
  width: 80%;
  max-width: map-get($layout, sidebar-width);
  height: 100%;
  background-color: $background-color;
  @include split-line(right);
  @include transition(transform map-get($animation, duration));
  @include overflow(auto);
  .sidebar-toc {
    padding: map-get($spacers, 3) map-get($spacers, 3) map-get($spacers, 4) map-get($spacers, 4);
  }
}
.sidebar-button {
  @include clickable($text-color-d, rgba($main-color-3, .75));
}

.page__mask {
  @include modal(map-get($z-indexes, mask));
  cursor: pointer;
}
.layout--page--sidebar {
  .page__main {
    @include overflow(auto);
    @media print {
      @include overflow(unset);
    }
  }
}

.has-aside {
  .col-aside {
    position: relative;
    display: block;
    width: map-get($layout, aside-width);
    & > aside {
      &.fixed {
        position: fixed;
        -webkit-font-smoothing: subpixel-antialiased;
      }
    }
    @include media-breakpoint-down(lg) {
      display: none;
    }
  }
}

@include media-breakpoint-down(lg) {
  .page__sidebar {
    position: fixed;
    @include transform(translate(- map-get($layout, sidebar-width), 0));
  }

  .page__actions {
    display: block;
  }

  .show-sidebar {
    .page__actions {
      visibility: hidden;
    }
    .page__sidebar {
      @include transform(translate(0));
    }
    .page__mask {
      @include modal--show();
    }
  }
}

.hero--light {
  .article__info {
    color: $text-color-theme-light;
  }
}
.hero--dark {
  .article__info {
    color: $text-color-theme-dark;
  }
}

.page__main--immersive {
  .page__header {
    position: absolute;
    width: 100%;
  }
  .hero__content {
    padding-top: map-get($layout, header-height);
  }
}