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

    &-main {
        background: $Page-main-bg;
    }

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

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

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

        display: table;
        table-layout: fixed;
        width: 100%;
        border-spacing: 0;

        .#{$ns}Page-header,
        .#{$ns}Page-toolbar {
            display: table-cell;
            vertical-align: middle;
        }

        .#{$ns}Page-toolbar {
            text-align: right;
            padding-right: $gap-base;
        }
    }

    &-title {
        margin: 0;
        padding: 0;
        color: $text--loud-color;
        font-size: $fontSizeMd;
        font-weight: $fontWeightNormal;
    }

    &-body {
        padding: $gap-base;
    }

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

.#{$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;
    background-color: $Page-aside-bg;
    border-right: $borderWidth solid $borderColor;
}

.#{$ns}Page--withSidebar {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    border-spacing: 0;

    .#{$ns}Page-aside,
    .#{$ns}Page-content {
        display: table-cell;
        vertical-align: top;
    }

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

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