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);
}

}