@media (min-width: 1025px) {
    .layout-wrapper {
        &.layout-overlay {
            .layout-topbar {
                left: 0;
            }

            .layout-main, .layout-footer {
                margin-left: 0;
            }

            &.layout-overlay-sidebar-active {
                .layout-sidebar {
                    left: 0;
                }

                .layout-topbar  {
                    left: 220px;
                }
            }

            &.layout-mobile-sidebar-active {
                .layout-sidebar {
                    left: 0;
                }

                .layout-topbar  {
                    left: 220px;
                }
            }
        }

        &.layout-static {
            .layout-topbar {
                left: 220px;
            }

            .layout-main, .layout-footer {
                margin-left: 220px;
            }

            &.layout-static-sidebar-inactive {
                .layout-topbar  {
                    left: 0;
                }

                .layout-main, .layout-footer {
                    margin-left: 0;
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    .layout-wrapper {
        .layout-topbar {
            left: 0;
        }

        .layout-main, .layout-footer {
            margin-left: 0;
        }

        .layout-sidebar {
            transition: left $transitionDuration;
            left: -250px;
            margin-top: 50px;
        }

        .layout-mask {
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 50px;
            left: 0;
            z-index: 998;
            background-color: $maskBgColor;
            @include opacity(0.7);
        }

        &.layout-mobile-sidebar-active {
            .layout-sidebar {
                left: -0;
            }

            .layout-mask {
                display: block;
            }
        }
    }

    .body-overflow-hidden {
        overflow: hidden;
    }
}