//
//** 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();   

                            > i {                  
                                font-size: array-get($layout, default, nav, item, link, icon, font-size);
                                @include border-radius(50%);
                            
                                @if array-get($layout, default, nav, item, link, icon, font-weight) == bold {
                                    &:before {
                                        font-weight: bold;
                                    }
                                }                                
                            }
                        }
                    }

                    //== User
                    .m-topbar__username {
                        @include transition(all 0.3s ease);
                        padding-right: 7px;
                        display: table-cell;
                        vertical-align: middle;
                        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);
                    }

                    .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);  
                        }                    
                    }    
                }

                //== Quick sidebar toggler icon
                &.m-nav__item--qs {
                    > .m-nav__link .m-nav__link-icon {
                        .m-nav__link-icon-wrapper {
                            > i {  
                                font-size: 1.1rem;
                            }
                        }
                    }     
                }
            }

            //== Icon colors
            > .m-nav__item {                
                > .m-nav__link {
                    .m-nav__link-icon {
                        .m-nav__link-icon-wrapper {
                            @include transition(all 0.3s ease);
                            background: transition;

                            > i {  
                                @include transition(all 0.3s ease);
                                color: get-brand-color();
                            }
                        }
                    }
                }    

                &.m-nav__item--qs {
                    > .m-nav__link {
                        .m-nav__link-icon {
                            .m-nav__link-icon-wrapper {
                                @include transition(all 0.3s ease);
                                background: rgba(get-brand-color(), 0.07);

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

                &:hover,
                &.m-nav__link-icon--active,
                &.m-dropdown--open {
                    > .m-nav__link { 
                        .m-nav__link-icon {
                            .m-nav__link-icon-wrapper {
                                @include transition(all 0.3s ease);
                                background: rgba(get-brand-color(), 0.1);

                                > i {  
                                    @include transition(all 0.3s ease);
                                    color: get-brand-color();
                                }
                            }
                        }

                        .m-topbar__username {
                            @include transition(all 0.3s ease);
                            color: array-get($layout, default, nav, item, link, user, username, font-color, hover);
                        }
                    }

                    &.m-nav__item--qs {
                        > .m-nav__link {
                            .m-nav__link-icon {
                                .m-nav__link-icon-wrapper {
                                    @include transition(all 0.3s ease);
                                    background: rgba(get-brand-color(), 0.2);
                                    
                                    > i {  
                                        color: darken(get-brand-color(), 2%);
                                    }
                                }
                            }
                        }    
                    }
                }
            }
        }
    }

    //== 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-topbar {
            position: relative;
            width: 100% !important;
            padding: array-get($m-config-base, body, container, padding, mobile);
            @include transition(array-get($layout, toggle, transition));
            height: array-get($layout, toggle, height, mobile) !important;
            margin-top: -(array-get($layout, toggle, height, mobile));         
            background-color: array-get($layout, toggle, bg-color); 
            @include shadow(array-get($layout, toggle, box-shadow));

            .m-topbar--on & {
                @include transition(array-get($layout, toggle, transition));
                margin-top: 0;          
            } 

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

            .m-header--fixed-mobile.m-topbar--on & {
                margin-top: 0; 
                top: 0;
                @include transition(array-get($layout, toggle, transition));                   
            }

            .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%; 
            }
        }
    }

    //== Mobile mode
    @include mobile {
        .m-topbar {
            .m-topbar__nav.m-nav  {
                > .m-nav__item {
                    &.m-dropdown { 
                        position: static;
                    }
                }
            }
        }
    }
}

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