@import "src/app/core/scss/fuse";

fuse-main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    &.boxed {
        max-width: 1200px;
        margin: 0 auto;
        @include mat-elevation(8);
    }

    &.disable-perfect-scrollbar {

        .ps {
            -webkit-overflow-scrolling: touch !important;
            overflow: auto !important;
        }

        .ps__scrollbar-x-rail,
        .ps__scrollbar-y-rail {
            display: none !important;
        }
    }

    > .mat-sidenav-container {
        display: flex;
        flex: 1;

        > .mat-sidenav-content,
        > .mat-drawer-content {
            display: flex;
            flex: 1;
            overflow: hidden;
            height: 100vh;

            @include media-breakpoint-down('sm') {
                height: auto !important;
            }

            #fuse-main-content {
                display: flex;
                flex: 1;
                flex-direction: column;
                overflow: hidden;

                #wrapper {
                    display: flex;
                    position: relative;
                    flex: 1;
                    overflow: hidden;

                    .content-wrapper {
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        overflow: hidden;

                        fuse-content {
                            position: relative;
                            display: flex;
                            flex: 1;
                            flex-direction: row;
                            width: 100%;
                            overflow: hidden;

                            > *:not(router-outlet):not(.ps__scrollbar-x-rail):not(.ps__scrollbar-y-rail) {
                                display: flex;
                                flex: 1;
                                width: 100%;
                                min-width: 100%;
                            }

                            > *.ng-animating {

                                .mat-tab-body {
                                    height: 100vh;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
