//
// OSIVIA Bootstrap extensions - Menubar
// --------------------------------------------------



.breadcrumb, .menubar {
    .dropdown-menu {
        i {
            width: @font-size-base + 1px;
        }
    }
}


.menubar {
    :not(.dropdown-menu) > .active > a {
        color: @state-info-text;
        text-shadow: 0 0 4px fade(@state-info-border, 50%);
        
        &:hover, &:focus {
            color: darken(@state-info-text, 15%);
        }
    }
}


.content-navbar-affix-container {
    @media screen and (min-width: @screen-sm-min) {
        height: @navbar-height + 2;
        
        margin-bottom: @line-height-computed;
    }
}


.content-navbar-affix {
    @media screen and (min-width: @screen-sm-min) {
        z-index: @zindex-navbar-fixed - 1;
        
        .modal-open & {
            z-index: @zindex-modal-background - 1;
        }
    }
}


.content-navbar {
    @media screen and (min-width: @screen-sm-min) {
        .navbar;
        .navbar-default;
        
        .content-navbar-affix-container & {
            margin-bottom: 0;
        }
    }
}


.content-navbar-breadcrumb {
    .breadcrumb {
        padding: 0 @navbar-padding-horizontal;
        
        > li {
            > a, > span {
                padding: floor((@navbar-height - @line-height-computed) / 2) 5px;
            }
            
            > a, > .dropdown > a {
                color: @navbar-default-link-color;                
                
                &:hover, &:focus {
                    color: @navbar-default-link-hover-color;
                    text-decoration: none;
                }
            }
            
            > .dropdown {
                padding: floor((@navbar-height - @line-height-computed) / 2) 0;
                
                &.open {
                    background-color: @navbar-default-link-active-bg;
                }
                
                > a {
                    padding: floor((@navbar-height - @line-height-computed) / 2) 5px;
                }
            }
        }
    }
}


.content-navbar-actions {
    .menubar {
        @media screen and (max-width: @screen-xs-max) {
            .toolbar-menubar();
        }
        
        @media screen and (min-width: @screen-sm-min) {
            .navbar-menubar();
        }
    }
}


.simple-menubar, .portlet-container {
    .menubar {
        .toolbar-menubar();
    }
}



.toolbar-menubar() {
    > li {
        > ul > li {
            > a {
                .btn;
                .btn-default;
                
                .add-counter(@padding-horizontal: @padding-xs-horizontal);
            }
        }
    }
}

.navbar-menubar() {
    > li {
        &.contextual {
            margin-right: floor(@padding-base-horizontal / 2);
            padding-right: floor(@padding-base-horizontal / 2);
            
            border-right-style: solid;
            border-width: 1px;
            border-color: @navbar-default-border;
        }
        
        > ul > li {
            > a {
                padding: @navbar-padding-vertical @navbar-padding-horizontal;
                
                color: @navbar-default-link-color;
                
                .add-counter(@padding-vertical: @padding-small-vertical);
                
                &:hover, &:focus {
                    background-color: @navbar-default-link-hover-bg;
                    color: @navbar-default-link-hover-color;
                    text-decoration: none;
                }
            }
            
            &.dropdown.open {
                background-color: @navbar-default-link-active-bg;
                color: @navbar-default-link-active-color;
            }
        }
    }
}


.add-counter(@padding-vertical: @padding-xs-vertical, @padding-horizontal: 0) {
    position: relative;
    
    &:hover, &:focus {
        .label-default {
            .label-variant(darken(@label-default-bg, 10%));
        }
        
        .label-primary {
            .label-variant(darken(@label-primary-bg, 10%));
        }
        
        .label-success {
            .label-variant(darken(@label-success-bg, 10%));
        }
        
        .label-info {
            .label-variant(darken(@label-info-bg, 10%));
        }
        
        .label-warning {
            .label-variant(darken(@label-warning-bg, 10%));
        }
        
        .label-danger {
            .label-variant(darken(@label-danger-bg, 10%));
        }
    }
    
    .counter {
        padding-right: @padding-horizontal;
        
        > * {
            position: absolute;
            top: @padding-vertical;
            right: @padding-horizontal;
        }
    }
}