// Styling for menu side panel and notification side panel

// Side panel generic styling
@mixin side-panel {
    position: fixed;
    background: #fff;
    top: 62px;
    bottom: 0;
    margin-top: 0;
    display: block !important;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    opacity: 1;
    z-index: 999;
    visibility: visible;
    max-width: $max-menu-width;
    transition: $margin-transition;
    @include backface(hidden);
}

// mobile menu items
$mobile-menu-item-padding-x: 10px;
$mobile-menu-item-padding-y: 10px;

@media only screen and (max-width: 767px) {

    .fade-out {
        visibility: hidden;
        opacity: 0;
        @include transition($transition-speed);
        @include backface(hidden);
    }

    // Creates the navbar toggle
    .navbar-header .nav-toggle {
        background: transparent;
        position: relative;
        height: 40px;
        width: 34px;
        border: 0;
        display: inline-block;
        z-index: 999;
        @include transition($transition-speed);
        @include backface(hidden);
        outline: none;

        .nav-toggle-bar {
            background: var(--theme-navbar-icon-color);
            position: absolute;
            height: 2px;
            width: 30px;
            left: 5px;
            @include transition($transition-speed);
            @include backface(hidden);
            border-radius: 4px;
        }

        .nav-toggle-bar:nth-child(2) {
            top: 10px;
            width: 23px;
        }
        .nav-toggle-bar:nth-child(3) {
            top: 18px;
            width: 26px;
        }
        .nav-toggle-bar:nth-child(4) {
            top: 26px;
            width: 17px;
        }
    }


    .navbar-header .nav-toggle:hover .nav-toggle-bar {
        width: 26px;
    }


    // Changes the navbar toggle into a cross when toggled
    .navbar-header .nav-toggle.in {
        .nav-toggle-bar {
            top: 18px;
            @include transition($transition-speed);
            @include backface(hidden);
            width: 26px;
        }
        .nav-toggle-bar:nth-child(2) {
            @include transform(rotate(-45deg)) ;
        }
        .nav-toggle-bar:nth-child(3) {
            visibility: hidden;
            opacity: 0;
        }
        .nav-toggle-bar:nth-child(4) {
            @include transform(rotate(45deg)) ;
        }
    }


    // creates the side panel for the side menu
    .claro-navbar #claroNav {
        @include side-panel();
        margin-left: -110%;
        left: 0;
        right: auto;
        overflow-y: visible;
        &.no-transition {
            transition-duration: 0s;
        }
    }

    .claro-navbar #claroNav.in {
        margin-left: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        @include transition($margin-transition);
        @include backface(hidden);
    }

    // mobile menu search form styling
    .claro-navbar-search-form {
        padding: $mobile-menu-item-padding-x $mobile-menu-item-padding-y;

        .navbar-search-icon .search-icon, .search-field, .search-field::placeholder {
            color: $gray-800 !important;
        }
    }


    // Resets desktop styling on menu bar for overflow menu
    .menu-bar {
        transform: none;
        position: relative;
        top: 0;
        padding: 0;
        margin: 0;
        z-index: 99;
        .main_menu__inner, .main_menu__list {
            height: auto;
            display: block;
            max-height: 100%;
            padding: 0;
        }

        // hides overflow menu on mobile
        .main_menu__toggle {
            display: none !important;
        }
    }

    // mobile menu list item styling
    .claro-navbar .navbar-nav.claro-navbar-nav,
    .claro-navbar .menu-bar .main_menu__list {

        display: block;

        &::after {
        content: '';
        position: relative;
        display: block;
        height: 0;
        clear: both;
        }

        li:not(.app-grid):not(.navbar-application) {
            clear: both;
            margin: 0;
            > a, > button {
                font-size: 16px;
                font-weight: 500;
                line-height: 24px;
                background: #fff !important;
                color: $gray-800 !important;
                padding: $mobile-menu-item-padding-x 22px $mobile-menu-item-padding-y $mobile-menu-item-padding-x;
                margin: 0;
                border-top: 1px solid $mobile-menu-border-color;
                border-radius: 0;

                &:hover {
                    opacity: 1;
                    background: #fff !important;
                }
            }
            // Adds bottom border to list item
            &:last-of-type > a {
            border-bottom: 1px solid $mobile-menu-border-color;
            }
        }

        // adds bottom border to profile it is seperated from app-grid
        .nav-item-profile .nav-link-profile-img {
            border-bottom: 1px solid $mobile-menu-border-color;
        }
    }

    // Hide desktop arrow on menu bar

    .claro-navbar .menu-bar .main_menu__list li.has-sub > a:after {
        display: none;
    }

    // Mobile display right arrow to display when items have mobile submenus
    .claro-nav-items .has-sub:not(.app-grid) > button,
    .claro-nav-items .has-sub:not(.app-grid) > a {
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            margin-top: -4px;
            right: $mobile-menu-item-padding-y + 2px;;
            width: 8px;
            height: 8px;
            transform: rotate(45deg);
            border-right: 2px solid $gray-500;
            border-top: 2px solid $gray-500;
        }
    }




    // Puts company links, bookmarks and appications into grid layout
    .claro-navbar .claro-nav-items .claro-navbar-nav .app-grid {
        width: calc(100% / 3);
        float: left;
        text-align: center;

        > .nav-link {
            padding: 15px 5px;
            background: transparent;
            border: 0;
            color: $gray-800;

            &:hover, &:focus {
            background: transparent !important;
            }

            ion-icon {
                background: $gray-300;
                font-size: 25px;
                margin-bottom: 9px;
                padding: 5px;
                border-radius: 8px;
                box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
            }

            .app-grid-title {
                font-size: 11px;
                display: block;
            }
        }
    }


    // Styling of submenu wrapper
    .claro-nav-items .claro-navbar-nav ul.dropdown-menu,
    .claro-navbar .menu-bar .main_menu__inner .main_menu__list ul,
    .claro-navbar .menu-bar .main_menu__inner .main_menu__list ul ul,
    .desktop-sideview .claro-nav-items .claro-navbar-nav ul.dropdown-menu,
    .desktop-sideview .claro-navbar .menu-bar .main_menu__inner .main_menu__list ul,
    .desktop-sideview .claro-navbar .menu-bar .main_menu__inner .main_menu__list ul ul {
        @include side-panel();
        left: 0;
        right: auto;
        margin-left: 110%;
        overflow: auto;
    }

    .claro-navbar .claro-nav-container-wrapper .claro-nav-items li.open-sub-menu > ul,
    .desktop-sideview .claro-navbar .claro-nav-container-wrapper .claro-nav-items li.open-sub-menu > ul {
        margin: 0;
        padding: 0;
        opacity: 1;
        visibility: visible;
        @include transition($transition-speed);
        @include backface(hidden);
    }


    // Submenu header with clickable link and back button

    // Submenu header main header styling
    .claro-nav-items ul li.submenu-header,
     .menu-bar .main_menu__inner ul ul li.submenu-header {
        text-align: center;
        border-top: 1px solid $mobile-menu-border-color;
    }

    // Submenu header clickable link styling and positioning
    .claro-nav-items ul li.submenu-header,
    .menu-bar .main_menu__inner ul ul li.submenu-header {
        > .submenu-header-link-wrap {
            display: inline-block !important;
            margin-left: -35px;
            border: none;
            padding: 11px 10px 10px;
            text-decoration: none;

            // Submenu header link styling when there is no url
            .submenu-header-link {
                border: none;
                padding: 0;
                max-width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: block;
                background: #fff;
                font-weight: 500;
                font-size: 16px;
                color: $gray-800;

                &:hover {
                    opacity: 1;
                    text-decoration: none;
                }
            }

            // Submenu header link styling when there is a url
            .submenu-header-link[href^="/"], .submenu-header-link[href^="http"] {
                text-decoration: underline;

                &:hover {
                    opacity: 0.8;
                    text-decoration: underline;
                }
            }
        }
    }

    // Submenu header back button
    .claro-nav-items ul li.submenu-header,
    .menu-bar .main_menu__inner ul ul li.submenu-header {
        .submenu-header-back-button {
            float: left;
            padding: 12px;
            background: $gray-200;
            margin: 6px;
            border-radius: $border-radius;
            cursor: pointer;

            &::after {
                content: "";
                width: 9px;
                height: 9px;
                display: block;
                transform: rotate(45deg);
                border-left: 2px solid $gray-800;
                border-bottom: 2px solid $gray-800;
            }
        }
    }

// Notifications and applications

// Notification bell icon and application icon - mobile
.navbar-mobile-link,
.navbar-mobile-link:hover {
    color: var(--theme-navbar-icon-color);
    display: block;
    line-height: 0;

    .navbar-mobile-icon {
        font-size: 26px;
    }

}

// Mobile notification and application panel styling and postioning
.claro-navbar .nav-item-notifications .notification-list,
.claro-navbar .nav-item-applications .navbar-applications {
    @include side-panel();
    right: 0;
    left: auto;
    margin-right: -110%;
}

// Mobile notification and application panel styling and positioning - open
.claro-navbar .nav-item-notifications.show .notification-list,
.claro-navbar .nav-item-applications .navbar-applications.show  {
    margin-right: 0;
    @include transition($transition-speed);
    @include backface(hidden);
}

// Mobile notification and application panel inner panel scrolling
.claro-navbar .nav-item-notifications .notification-list .notification_wrapper,
.claro-navbar .nav-item-applications .navbar-applications.app-wrapper {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}


// Notifications

// Notification unread count - mobile
.mobile-notification .notification-toggle {
    .notify.notify-important {
        top: -5px;
        right: -5px;
        margin-right: 0;
    }
}


    // Opaque black overlay styling and placement
        .back-close {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 80;
            visibility: hidden;
            opacity: 0;
            @include transition($transition-speed);
            @include backface(hidden);
        }
    // Opaque black overlay when open
        .back-close.in {
            visibility: visible;
            opacity: 1;
            @include transition($transition-speed);
            @include backface(hidden);
        }


}
