//
// Taskbar
// --------------------------------------------------


// Utilities
@import "mixins/text-overflow.less";
@import "mixins/vendor-prefixes.less";

// Skins
@import "mixins/border-radius.less";
@import "mixins/gradients.less";

// Layout
@import "mixins/clearfix.less";


// Breakpoints
@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);

@padding: 10px;

@bg-color: #f8f8f8;
@border-color: darken(@bg-color, 6.5%);
@link-color: #777;
@link-hover-color: #333;

@navigation-panel-width: 300px;


// Layout
.taskbar-container {
    @media screen and (min-width: @screen-sm-min) {
        &.taskbar-absolute {
            &:not(.taskbar-affix) {
                position: absolute;    
            }
        }
        
        &:not(.taskbar-absolute) {
            float: left;
        
            ~ * {
                overflow: hidden;
            }
        }
        
        .navigation-panel {
            width: @navigation-panel-width;  
        }
    }
}


// Affix
.taskbar-affix {
    @media screen and (min-width: @screen-sm-min) {
        &.affix-top, &.affix-bottom {
            position: absolute;
        }
        
        &.affix {
            top: 0;
        }
    }
}


// Portlet
.taskbar {
    padding: @padding 0;
    
    background-color: @bg-color;
    border-style: solid;
    border-width: 1px;
    border-color: @border-color;
    border-radius: 4px;
    
    .box-shadow(@shadow: 0 1px 1px fade(#000, 5%));
    
    ul {
        margin-bottom: 0;
        padding-left: 0;
        
        list-style: none;
    }
    
    li {
        &.active {
            a {
                font-weight: bold;
            }
        }
        
        &:not(.active) {
            a {
                color: @link-color;
                
                &:hover, &:focus {
                    color: @link-hover-color;
                }
            }
        }
    }
    
    a {
        display: block;
        
        &:hover, &:focus {
            text-decoration: none;
        }
    }
    
    
    // Normal view
    &.taskbar-normal {
        @height: 40px;
        @width: 200px;
        @line-height: 20px;
        
        a {
            height: @height;
            padding: floor((@height - @line-height) / 2) @padding;
            
            line-height: @line-height;
    
            .text-overflow;
            
            i {
                margin-right: 3px;
            }
        }
        
        @media screen and (min-width: @screen-sm-min) {
            max-width: @width;
        }
    }
    
    
    // Compact view
    &.taskbar-compact {
        @width: 50px;
        @font-size: 20px;
        
        li {
            padding: floor(@padding / 2);   
            
            &.active {
                a {
                    background-color: #fff;
                    border-radius: 50%;
                }
            } 
        }
        
        a {
            line-height: floor(@width - @padding - 2);
            font-size: @font-size;
        }
        
        @media screen and (max-width: @screen-xs-max) {
            li {
                float: left;
                width: 20%;
            }
            
            a {
                width: floor(@width - @padding - 2);
                margin: 0 auto;
            }
        }
        
        @media screen and (min-width: @screen-sm-min) {
            width: @width;
        }
    }
}