// 
// _layouts.scss
// 

[data-layout-width="boxed"] {

    #page-topbar,
    .footer {
        right: 0 !important;
    }

    &:is([data-sidebar-size="sm"], [data-sidebar-size="sm-hover"]) {
        &[data-layout="vertical"] {
            .main-content {
                @media (max-width: 767.98px) {
                    margin-right: 0;
                }
            }
        }

        #page-topbar,
        .footer {
            right: 0 !important;

            @media (min-width: 768px) {
                right: $vertical-menu-width-sm !important;
                left: 0 !important;
            }
        }
    }

    &:is([data-sidebar-size="sm-hover-active"], [data-sidebar-size="lg"]) {

        #page-topbar,
        .footer {
            @media (min-width: 768px) {
                right: $vertical-menu-width !important;
                left: 0 !important;
            }
        }
    }

    &[data-sidebar-size="md"] {

        #page-topbar,
        .footer {
            @media (min-width: 768px) {
                right: $vertical-menu-width-md !important;
                left: 0 !important;
            }
        }
    }

    // deteched
    &[data-layout=vertical][data-layout-style=detached] {
        &:is([data-sidebar-size="sm"], [data-sidebar-size="sm-hover"], [data-sidebar-size="md"], [data-sidebar-size="lg"]) {

            #page-topbar,
            .footer {
                right: 0 !important;
            }
        }
    }
}

// Horizontal Boxed Layout
[data-layout="horizontal"][data-layout-width="boxed"] {

    .navbar-header {
        padding: 0 0 0 calc(#{$grid-gutter-width} / 2);
    }

    &[data-sidebar-size="sm-hover"],
    &[data-sidebar-size="sm"] &[data-sidebar-size="sm-hover-active"],
    &[data-sidebar-size="lg"] {

        #page-topbar,
        .footer {
            right: 0 !important;
        }
    }

}