.#{$ns}Page {
  width: 100%;

  &-header {
    padding: $Page-header-paddingY $Page-header-paddingX;
  }

  &-main {
    background: $Page-main-bg;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  &-content {
    padding: $Page-content-paddingY $Page-content-paddingX;
    position: relative;
    height: 100%;
    width: 100%;
  }

  &-main > &-header {
    border-bottom: $borderWidth solid $borderColor;
  }

  &-headerRow {
    border-bottom: $borderWidth solid $borderColor;

    display: flex;
    flex-direction: row;
    align-items: center;

    .#{$ns}Page-header,
    .#{$ns}Page-toolbar {
      flex-grow: 1;
      min-height: 100%;
    }

    .#{$ns}Page-toolbar {
      text-align: right;
      padding-right: $gap-base;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
    }
  }

  &-title {
    margin: 0;
    padding: 0;
    color: $Page-title-color;
    line-height: $Page-title-lineHeight;
    font-size: $Page-title-fontSize;
    font-weight: $Page-title-fontWeight;
  }

  &-body {
    padding: $Page-body-padding;
    flex: 1 auto;
  }

  &-asideTplWrapper {
    padding: $gap-xs;
  }
}

.#{$ns}Page-toolbar {
  > * + * {
    margin-left: $gap-xs;
  }
}

.#{$ns}Page-aside {
  background-color: $Page-aside-bg;
}

@include media-breakpoint-up(md) {
  .#{$ns}Page-aside {
    &::before {
      content: '';
      position: absolute;
      width: inherit;
      top: 0;
      bottom: 0;
      z-index: -1;
      background-color: inherit;
      border: inherit;
    }

    width: $Page-aside-width;
    max-width: $Page-aside-maxWidth;
    border-right: $borderWidth solid $borderColor;
  }

  .#{$ns}Page--withSidebar {
    display: flex;
    flex-direction: row;
    align-items: stretch;

    > .#{$ns}Page-content {
      width: 0;
      flex-grow: 1;
    }
  }
}