/**
 * 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: .5em;
    }


/* + + + + +  icon list  + + + + + */
    ul {
        float: right;
        padding: 0;
        margin: @very-small-spacing -(@very-small-spacing) 0 0;

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

            float: right;

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

            &.noopentasks {
                strong {
                    background-color: @color-site-bg;
                }

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

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

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

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

                    position: relative;

                    @media @screen_min-md {
                        padding-left: 22px;
                    }

                    @media @screen_max-md {
                        padding-left: 25px;
                    }

                    &::before {
                        position: absolute;
                        left: -2px;
                        font-size: 1.4rem;
                        color: @color-nav;
                        margin: 0;

                        @media @screen_min-xlg {
                            top: -2px;
                        }

                        @media @screen_max-xlg {
                            top: -1px;
                        }

                        @media @screen_max-md {
                            top: -2px;
                        }
                    }
                }
            } // user

            &.user-task {
                position: relative;

                a {
                    position: relative;
                    overflow: visible;
                    white-space: normal;
                    text-indent: 0;

                    &::before {
                        content: '';
                        position: absolute;
                    }
                }

                .prefix {
                    .btn-prefix();
                    .icon-clipboard();

                    font-size: 1.2rem;
                }
            } // user-task
        } // li


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

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

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

            &::before {
                content: "?";
                display: block;
                width: 100%;
                box-sizing: border-box;
                font-size: @font-size-default + (@font-scale-factor * 4);
                cursor: pointer;
                margin: .15em 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();
            }
        } // a
    } // ul
} // nav-usertools