/**
 * 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;
    }


/* + + + + +  icon list  + + + + + */
    ul {
        float: right;
        padding: 0;
        margin: .2rem -.2rem 0 0;

        li {
            .btn-usertools-wrapper(); // uniform li
            .btn-usertools-num();

            float: right;

            > strong,
            > a {
                display: block;
                width: auto;
                min-height: 2em;
                border: 1px solid @color-border;
                border-radius: @border-radius;
                color: @color-nav;
                text-align: center;
                margin: 0;
            }

            &.noopentasks {
                .num {
                    background-color: @color-border;
                    color: @color-nav;
                }
            }

            &.user {
                border: 1px solid @color-border;
                border-radius: @border-radius;
                padding: .3rem .25rem;

                bdi {
                    color: @color-nav;
                    display: inline-block;
                    padding-top: 1px;
                }

                > bdi:first-of-type {
                    .fontello();
                    .icon-user();

                    &::before {
                        float: left;
                        background: @color-nav;
                        border: 4px solid @color-nav;
                        border-radius: 50%;
                        color: #fff;
                        font-size: .6rem;
                        margin: -2px 6px -2px 0;
                    }
                }
            } // user

            &.user-task {
                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;
                    font-size: 1.3em;
                    margin-top: .2rem;
                }

                &.opentasks,
                &.opentask {
                    .num {
                        background-color: @color-link;
                        color: #fff;
                    }
                }
            } // user-task
        } // li


/* + + +  icons  + + + */
        a {
            .fontello();
            .hide-text-show-before();

            cursor: pointer;
            background-color: #fff;
            text-decoration: none;
            transition: @transition color, @transition border-color;

            &:hover,
            &:active,
            &:focus {
                border-color: @color-nav-hover;
                //-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;
            }

            &::before {
                content: "?";
                display: block;
                width: 100%;
                box-sizing: border-box;
                font-size: 1.4em;
                cursor: pointer;
                margin: .2rem 0 0;
            }

            /* icon register new user */
            &.register {
                .icon-user();
            }

            /* icon log-out */
            &.logout {
                .icon-logout();
            }

            /* icon log-in */
            &.login {
                .icon-login();
            }

            /* icon admin */
            &.admin {
                .icon-cog();

                &::before {
                    margin-top: .18rem;
                }
            }
        } // a
    } // ul
} // nav-usertools