//
// Layout Variations
// --------------------------------------------------

#page-container {
    // Main content
    > #page-header .content-header,
    > #page-header .content,
    > #main-container .content,
    > #page-footer .content {
        max-width: $space-main-max-width;
    }

    @include media-breakpoint-up(xl) {
        &.main-content-narrow {
            > #page-header .content-header,
            > #page-header .content,
            > #main-container .content,
            > #page-footer .content {
                width: $space-narrow;
            }
        }
    }

    &.main-content-boxed {
        > #page-header .content-header,
        > #page-header .content,
        > #main-container .content,
        > #page-footer .content {
            max-width: $space-boxed;
        }
    }

    // Page header
    &.page-header-dark #page-header {
        color: darken($body-color-light, 8%);
        background-color: $header-dark-bg;
    }

    &.page-header-glass {
        #page-header {
            position: absolute;
            background-color: transparent;
        }

        &.page-header-fixed {
            #page-header {
                transition: background-color .2s linear;
                will-change: background-color;
                box-shadow: none;
            }

            &.page-header-scroll #page-header {
                background-color: rgba($header-bg, .9);
                box-shadow: 0 .25rem .625rem rgba(0,0,0,.02);
                backdrop-filter: blur(1rem);
            }

            &.page-header-scroll.page-header-dark #page-header {
                background-color: rgba($header-dark-bg, .9);
                box-shadow: none;
                backdrop-filter: blur(1rem);
            }
        }

        #main-container,
        &.page-header-fixed #main-container {
            padding-top: 0;
        }
    }

    &.page-header-fixed {
        #page-header {
            position: fixed;
            box-shadow: 0 5px 10px rgba(0,0,0,.02);
        }

        &.page-header-dark #page-header {
            box-shadow: none;
        }

        #main-container {
            padding-top: $header-height;
        }
    }

    &.page-header-fixed,
    &.page-header-glass {
        #page-header {
            top: 0;
            right: 0;
            left: 0;
            z-index: $zindex-fixed;
            min-width: 320px;
            max-width: 100%;
            width: auto;
        }

        @include media-breakpoint-up(lg) {
            &.sidebar-o #page-header {
                padding-left: $sidebar-width;

                .overlay-header {
                    left: $sidebar-width;
                }
            }

            &.sidebar-r.sidebar-o #page-header {
                padding-right: $sidebar-width;
                padding-left: 0;

                .overlay-header {
                    right: $sidebar-width;
                    left: 0;
                }
            }

            // Mini Sidebar
            &.sidebar-mini.sidebar-o #page-header {
                padding-left: $sidebar-mini-width;

                .overlay-header {
                    left: $sidebar-mini-width;
                }
            }

            &.sidebar-mini.sidebar-r.sidebar-o #page-header {
                padding-right: $sidebar-mini-width;
                padding-left: 0;

                .overlay-header {
                    right: $sidebar-mini-width;
                    left: 0;
                }
            }
        }
    }

    // Page Footer
    &.page-footer-fixed {
        #page-footer {
            position: fixed;
            height: $footer-height;
        }

        #main-container {
            padding-bottom: $footer-height;
        }

        #page-footer {
            bottom: 0;
            right: 0;
            left: 0;
            z-index: $zindex-fixed;
            min-width: 320px;
            max-width: 100%;
            width: auto;
        }

        @include media-breakpoint-up(lg) {
            &.sidebar-o #page-footer {
                padding-left: $sidebar-width;
            }

            &.sidebar-r.sidebar-o #page-footer {
                padding-right: $sidebar-width;
                padding-left: 0;
            }
        }
    }

    // Sidebar and Side Overlay
    &.sidebar-dark #sidebar {
        color: $body-color-light;
        background-color: $sidebar-dark-bg;
        box-shadow: none;
    }

    // Side Scroll
    &.side-scroll {
        #sidebar .js-sidebar-scroll,
        #side-overlay {
            overflow-y: visible;
        }

        @include media-breakpoint-up(lg) {
            #sidebar {
                .content-header,
                .content-side {
                    width: $sidebar-width !important;
                }
            }

            #side-overlay {
                .content-header,
                .content-side {
                    width: $side-overlay-width !important;
                }
            }
        }
    }

    @include media-breakpoint-up(lg) {
        &.sidebar-o {
            padding-left: $sidebar-width;
        }

        &.sidebar-r.sidebar-o {
            padding-right: $sidebar-width;
            padding-left: 0;
        }

        // Mini Sidebar
        &.sidebar-mini.sidebar-o {
            padding-left: $sidebar-mini-width;
        }

        &.sidebar-mini.sidebar-o.sidebar-r {
            padding-right: $sidebar-mini-width;
            padding-left: 0;
        }
    }
}