/*————————————

Side Header

————————————*/

/* Common styles of Side Header */ body .u-header.u-header–side {

position: fixed;
top: 0;

height: 100%;
@include px-to-rem(width, 300px);

// Navbar
.navbar {
        flex-direction: column;

        // Container
        .container {
                width: 100%;
                padding-left: 0;
                padding-right: 0;
                flex-direction: column;
        }

        // Collapse
        .navbar-collapse {
                flex-direction: column;
        }

        // Nav
        .navbar-nav {
                width: 100%;
                flex-direction: column;
                margin-left: 0 !important;
                margin-right: 0 !important;
        }
}

// Sections Container
.u-header__sections-container {
        height: 100%;
}

.dropdown-menu {
        top: 0;
}

.mCSB_container,
.mCustomScrollBox {
        overflow: visible;
}

}

/* Overlay */ .u-header–side .u-header__overlay {

position: absolute;
top: 0;
height: 100%;
width: 2000%;
opacity: 0;
visibility: hidden;

}

body.u-body–header-side-opened .u-header__overlay {

opacity: 1;
visibility: visible;

}

.u-body–header-side {

&-static-left,
&-overlay-left,
&-push-left {
        .u-header--side {
                .dropdown-menu {
                        left: 100%;
                        @include px-to-rem(margin-left, 15px);
                }

                // Override necessary HSMegaMenu styles
                .hs-menu-vertical .hs-mega-menu,
                .hs-menu-vertical .hs-sub-menu {
                        @include px-to-rem(margin-left, 15px);

                        .hs-mega-menu,
                        .hs-sub-menu {
                                margin-left: 0;
                        }
                }

                .hs-menu-vertical.hs-rtl .hs-mega-menu,
                .hs-menu-vertical.hs-rtl .hs-sub-menu {
                        margin-left: 0;
                        @include px-to-rem(margin-right, 15px);

                        .hs-mega-menu,
                        .hs-sub-menu {
                                margin-left: 0;
                                margin-right: 0;
                        }
                }
        }
}

&-static-left {
        @include px-to-rem(margin-left, 300px);

        .u-header--side {
                right: auto;
                left: 0;
        }
}

&-static-right {
        @include px-to-rem(margin-right, 300px);

        .u-header--side {
                left: auto;
                right: 0;
        }
}

&-overlay-left,
&-push-left {
        .u-header--side {
                right: auto;
                @include px-to-rem(left, -300px);

                .u-header__overlay {
                        left: 100%;
                }
        }
        &.u-body--header-side-opened {
                .u-header--side {
                        left: 0;
                }
        }
}

&-push-left {
        &.u-body--header-side-opened {
                @include px-to-rem(margin-left, 300px);
        }
}

&-overlay-right,
&-push-right {
        .u-header--side {
                left: auto;
                @include px-to-rem(right, -300px);

                .u-header__overlay {
                        right: 100%;
                }
        }
        &.u-body--header-side-opened {
                .u-header--side {
                        right: 0;
                }
        }
}

&-push-right {
        &.u-body--header-side-opened {
                @include px-to-rem(margin-right, 300px);
        }
}

&-static-right,
&-overlay-right,
&-push-right {
        .u-header--side {
                .dropdown-menu {
                        left: auto;
                        right: 100%;
                        @include px-to-rem(margin-right, 15px);
                }

                // Override necessary HSMegaMenu styles
                .hs-menu-vertical .hs-mega-menu,
                .hs-menu-vertical .hs-sub-menu {
                        left: auto;
                        right: 100%;

                        @include px-to-rem(margin-right, 15px);

                        .hs-mega-menu,
                        .hs-sub-menu {
                                margin-right: 0;
                        }
                }

                .hs-menu-vertical.hs-rtl .hs-mega-menu,
                .hs-menu-vertical.hs-rtl .hs-sub-menu {
                        margin-right: 0;
                        @include px-to-rem(margin-left, 15px);

                        .hs-mega-menu,
                        .hs-sub-menu {
                                margin-left: 0;
                                margin-right: 0;
                        }
                }
        }
}

}