.#{$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: $Page-title-color;
        line-height: $Page-title-lineHeight;
        font-size: $Page-title-fontSize;
        font-weight: $Page-title-fontWeight;
    }

    &-body {
        padding: $Page-body-padding;
    }

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

.#{$ns}Page-toolbar {
    .#{$ns}Button + .#{$ns}Button {
        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;
        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%;
        }
    }
}