/**
 * This file provides the design styles for the direct / menu jump links.
 *
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */

.nav-usertools {
    &.has-bar{
        margin-top: @height-context-bar;
        padding-top: .5rem;
    }
    ul{
        float: right;
        padding: 0; margin: .2rem -.2rem 0 0;
        li{
            display: inline-block;
            float: right;
            margin: 0 .1rem;
            padding: 0;
            font-size: .8rem;
            *{
                font-size: .8rem;
            }
            a{
                color: @color-nav;
                box-sizing: content-box;
                padding: .3em .25em .15em;
                text-align: center;
                text-decoration: none;
                border: 1px solid @color-border;
                border-radius: @border-radius;
                margin: 2px;
                cursor: pointer;

                &:hover, &:active, &:focus{
                    background-color: @color-nav-hover-bg;
                    border-width: 3px;
                    border-style: double;
                    margin: 0;

                    //-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
                    //box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
                    color: @color-nav-hover;
                }

                .fontello();
                .hide-text-show-before();
                &:before{
                    font-size: 1.12em;
                    cursor: pointer;
                    content: "?";
                }

                /* icon register new user */
                &.register{
                    .icon-user();
                }
                /* icon log-out */
                &.logout{
                    .icon-logout();
                }
                /* icon log-in */
                &.login{
                    .icon-login();
                }
                /* icon admin */
                &.admin{
                    .icon-cog();
                }

                /* add more icons if needed */
            }

            &.user-task{
                border: 1px solid @color-border;
                border-radius: @border-radius;
                color: @color-nav;
                display: inline-block;
                height: 1rem;
                width: 1rem;
                min-height: 1.2em;
                min-width: 1.4em;
                box-sizing: content-box;
                padding: .3em .25em .15em;
                margin-top: 2px;
                position: relative;


                a{
                    position: relative;
                    overflow: visible;
                    white-space: normal;
                    text-indent: 0;
                    &:before{
                        content: "";
                        position: absolute;
                    }
                }

                .prefix{
                    .fontello();
                    .hide-text-show-before();
                    .icon-clipboard();
                    color: @color-nav;
                }



                .num{
                    position: absolute;
                    padding: .2em .3em .1em;
                    text-align: center;
                    font-size: .6rem;
                    line-height: 100%;
                    font-weight: 400;
                    right: -0.3em;
                    top: -0.4em;
                    background-color: @color-border;
                    border-radius: 2px;
                    color: @color-nav;
                }
                &.opentasks, &.opentask{
                    .num{
                        background-color: @color-link;
                        color: #fff;
                    }
                }
            }

            &.user{
                border: 1px solid @color-border;
                border-radius: @border-radius;
                color: @color-nav;
                display: inline-block;
                height: 1rem;
                min-height: 1.2em;
                min-width: 1.4em;
                box-sizing: content-box;
                padding: .3em .25em .15em;
                margin-top: 2px;
                bdi{
                    color: @color-nav;
                    display: inline-block;
                    padding-top: 1px;
                }
                >bdi:first-of-type{
                    .fontello();
                    .icon-user();
                    &:before{
                        border: 4px solid @color-nav;
                        margin-top: -1px;
                        border-radius: 50%;
                        background: @color-nav;
                        color: #fff;
                        font-size: .5rem;
                        float: left;
                    }
                }
            }
        }
    }
}