//
//** Topbar
//

//== Topbar Base Mixin
@mixin m-build-topbar-nav-base($layout) {
    //== General mode
    .m-topbar {
        width: auto;
        height: 100%;
        float:right;
        padding: array-get($layout, default, self, padding, desktop);
        @include transition(all array-get($layout, default, self, transition-time, push) ease);

        &.m-topbar--pushed {
             @include transition(all array-get($layout, default, self, transition-time, push) ease);
        }

        .m-topbar__nav.m-nav  {   
            margin: array-get($layout, default, nav, self, margin, desktop);

            // nav item
            > .m-nav__item {
                padding: array-get($layout, default, nav, item, self, padding, desktop);

                > .m-nav__link {
                    position: relative;
                    margin: 0 auto;

                    .m-nav__link-badge {
                        left: 50%;
                        margin-left: array-get($layout, default, nav, item, link, badge, margin-left, desktop);
                        position: absolute;
                        top:  array-get($layout, default, nav, item, link, badge, top, desktop);    
                    }

                    // nav item link's icon part
                    .m-nav__link-icon {
                        text-align: array-get($layout, default, nav, item, link, icon, align);
                        line-height: 0;
                        vertical-align: middle;
                        padding: 0;

                        .m-nav__link-icon-wrapper {
                            display: inline-block;
                            width: array-get($layout, default, nav, item, self, height);
                            height: array-get($layout, default, nav, item, self, height);
                            @include border-radius(50%);
                            @include vertical-horizontal-center-flexbox();   
                            border: 1px solid array-get($layout, default, nav, item, link, icon, border, default);

                            > i {                  
                                color: array-get($layout, default, nav, item, link, icon, color, default, default);
                                font-size: array-get($layout, default, nav, item, link, icon, font-size, default);
                                @include border-radius(50%);
                            }
                        }

                        &.m-nav__link-icon--active,
                        &:hover {
                            .m-nav__link-icon-wrapper {
                                background: array-get($layout, default, nav, item, link, icon, bg-color, hover);
                                border: 1px solid array-get($layout, default, nav, item, link, icon, bg-color, hover);

                                > i {
                                    color: array-get($layout, default, nav, item, link, icon, color, default, hover);
                                }
                            }
                        }

                        &.m-nav__link-icon-alt {
                            .m-nav__link-icon-wrapper {
                                background: $m-secondary-brand-color;
                                border: 1px solid $m-secondary-brand-color;

                                > i {
                                    color: $m-secondary-brand-inverse-color;
                                    font-size: array-get($layout, default, nav, item, link, icon, font-size, alternate);
                                }
                            }

                            &.m-nav__link-icon--active,
                            &:hover {
                                .m-nav__link-icon-wrapper {
                                    background: $m-secondary-brand-hover-color-alt;
                                    border: 1px solid $m-secondary-brand-hover-color-alt;
                                }
                            }
                        }
                    }

                    //== User
                    .m-topbar__username {
                        display: table-cell;
                        vertical-align: middle;
                        text-transform: array-get($layout, default, nav, item, link, user, username, font-transform);
                        font-size: array-get($layout, default, nav, item, link, user, username, font-size);
                        font-weight: array-get($layout, default, nav, item, link, user, username, font-weight);
                        text-align: array-get($layout, default, nav, item, link, user, username, align);
                        color: array-get($layout, default, nav, item, link, user, username, font-color, default, default);
                    }

                    .m-topbar__userpic {
                        display: table-cell;
                        vertical-align: middle;
                        text-align: center;
                        margin: 0 auto;

                        img {
                            display: block; 
                            vertical-align: middle; 
                            max-width: array-get($m-config-header, topbar, default, nav, item, self, height) !important;   
                            margin: array-get($layout, default, nav, item, link, user, userpic, margin);  
                        }                    
                    }    

                    .m-topbar__usericon {
                        .m-nav__link-icon-wrapper {
                            background: get-brand-color();
                            border: 1px solid get-brand-color();

                            > i {
                                color: get-brand-inverse-color();
                            }
                        }

                        &.m-nav__link-icon--active,
                        &:hover {                            
                            .m-nav__link-icon-wrapper {
                                background: get-brand-color('+++');
                                border: 1px solid get-brand-color('+++');
                            }
                        }
                    }
                }

                // open state
                &.m-dropdown--open {
                    > .m-nav__link {
                        .m-nav__link-icon {
                            .m-nav__link-icon-wrapper {
                                background: array-get($layout, default, nav, item, link, icon, bg-color, hover);
                                border: 1px solid array-get($layout, default, nav, item, link, icon, bg-color, hover);

                                > i {
                                    color: array-get($layout, default, nav, item, link, icon, color, default, hover);
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    //== Minimal desktop
    @include minimal-desktop {
        .m-topbar {
            padding: array-get($layout, default, self, padding, min-desktop);

            .m-topbar__nav.m-nav  {
                margin: array-get($layout, default, nav, self, margin, min-desktop);

                > .m-nav__item {
                    padding: array-get($layout, default, nav, item, self, padding, min-desktop);
                }
            }
        }
    }

    //== Mobile & tablet mode
    @include tablet-and-mobile {
        .m-header-head {
            display: none !important;

            .m-topbar--on & {
                display: block !important;   
                z-index: 3;
            } 
        }

        .m-topbar {
            @include transition(array-get($layout, toggle, transition));
            
            display: none !important;
            width: 100% !important;
            padding: array-get($layout, default, self, padding, mobile);
            height: array-get($layout, toggle, height, mobile) !important;      
            position: relative;
            background-color: array-get($layout, toggle, bg-color); 
            @include shadow(array-get($layout, toggle, box-shadow));

            .m-header--fixed-mobile & {
                top: -(array-get($layout, toggle, height, mobile));   
            }

            .m-header--fixed-mobile.m-topbar--on & {
                display: table !important;                 
            }

            .m-topbar__nav.m-nav  {
                margin: array-get($layout, default, nav, self, margin, table-and-mobile);
                float: right;

                > .m-nav__item {
                    padding: array-get($layout, default, nav, item, self, padding, tablet-and-mobile);

                    > .m-nav__link {
                        .m-nav__link-badge {
                            margin-left: array-get($layout, default, nav, item, link, badge, margin-left, mobile);
                            top:  array-get($layout, default, nav, item, link, badge, top, mobile);    
                        }
                    }
                }
            }

            .m-topbar__nav-wrapper {
                width: 100%; 
            }
        }

        .m-header-search {
            height: array-get($layout, toggle, height, mobile) !important;     
        }
    }

    //== Mobile mode
    @include mobile {
        .m-topbar {
            .m-topbar__nav.m-nav  {
                > .m-nav__item.m-dropdown { 
                    position: static;
                
                    &.m-topbar__user-profile {
                        .m-dropdown__content {
                            max-height: 275px;
                            overflow: auto;
                        }
                    }
                }
            }
        }
    }
}


//== Build Topbar Base
@include m-build-topbar-nav-base( array-get($m-config-header, topbar ) );