//
//** 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: 1.4rem;
                                @include border-radius(50%);
                            }
                        }
                    }

                    //== 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);
                    }

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

            //== Nav item states
            @each $name, $color in $m--state-colors {
                > .m-nav__item.m-nav__item--#{$name} {                
                    > .m-nav__link .m-nav__link-icon {
                        .m-nav__link-icon-wrapper {
                            @include transition(all 0.3s ease);
                            background: rgba( array-get($color, base), 0.1 );

                            > i {  
                                @include transition(all 0.3s ease);
                                color: array-get($color, base);
                            }
                        }
                    }                    

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

                            > i {  
                                @include transition(all 0.3s ease);
                                color: darken( array-get($color, base), 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($layout, default, self, 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__userpic {
                            img {
                                max-width: array-get($layout, default, nav, item, link, user, userpic, max-width, mobile) !important;
                            }
                        }
                    }
                }
            }

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