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

.breadcrumbs {
    position: relative;
    border-bottom: 1px solid @color-border-light;
    padding: 1rem 1.8rem .2rem;
    min-height: @page-header_height;
    box-sizing: border-box;

    @media @screen_max-md {
        background-color: @background_page-header;
    }

    @media @screen_max-xs {
        padding-left: @margin-small;
        padding-right: .75rem;
    }

    > p {
        font-size: @font-size-small;
        margin: 0;

        @media @screen_max-xs{
            width: 1px;
            position: relative;
            overflow: hidden;
            height: 1.6rem;
        }

        * {
            font-size: @font-size-small;
        }

        .bchead {
            .sr-only();
        }

        span.home {
            margin-left: -.2rem; // reverse spacing in home icon --> content text and home icon aligned

            .wide-content & {
                margin-left: .4rem; //toggle link has position absolute, hover on home icon needs more space than left padding of breadcrumb
            }

            a {
                .fontello();
                .hide-text-show-before();
                .icon-home();

                min-height: 1.8em;
                min-width: 1.9em;
                width: auto;
                box-sizing: border-box;
                border: solid 1px transparent;
                border-radius: @border-radius;
                vertical-align: middle;
                text-decoration: none;
                margin-top: -.2em;
                transition: @transition border-color;

                &:before {
                    font-size: @font-size-default + (@font-scale-factor * 2);
                    margin-top: .17rem;
                }

                &:hover,
                &:focus,
                &:active {
                    border-color: @color-link;
                }
            }
        }

        bdi {
            padding: .1em .1em 0;
        }
    }


/* + + + + +  icon list  + + + + + */
    .page-attributes {
        list-style: none;
        float: right;
        display: inline-block;
        max-width: 30%;
        margin: -.45em 0 0;
        padding: 0;

        @media @screen_max-xs{
            max-width: 90%;
        }

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

            float: left;

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

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

                display: block;
                font-size: 1.2rem;
                line-height: 1;
            }

/* check !!! */
            &.do_none {
                position: relative;

                strong {
                    background-color: @color-site-bg;
                }

                .num {
                    background-color: @noopentasks-background; // fix
                    color: @noopentasks-color; // fix
                }
            }
/* end check !!! */

            &.plugin__qc {
                display: inline-block;
                overflow: visible;
                position: static;
            }
        } // li

        a {
            background-color: #FFF;
            transition: @transition color, @transition background-color, @transition border-color;

            &[aria-expanded="false"] + #plugin__qc__wrapper {
                display: none;
            }

            &:hover,
            &:active,
            &:focus {
                background-color: @color-nav-hover-bg;
                border-color: @color-nav-hover;
                color: @color-nav-hover;

                .prefix {
                    color: inherit;
                }
            }
        }

        #plugin__qc__wrapper {
            position: absolute;
            right: 0;
            width: auto;
            border: 0 none;
            background: @background_page-header;
            background: -webkit-linear-gradient(top, @background_page-header, @color-content-bg);
            background: linear-gradient(top, @background_page-header, @color-content-bg);
            box-shadow: @box-shadow-bottom;
            z-index: 2000;

            #plugin__qc__out{
                h1 {
                    font-size: @font-size-head3;
                }

                h2 {
                    margin-top: 1.6em;
                    font-size: @font-size-head5;
                }
                > h1,
                > h2,
                > p,
                > dl,
                > div {
                    padding-left: 1rem;
                    margin-left: 0;
                }

                > div p {
                    padding-left: 0;
                    margin-left: 0;
                }
            }

            &[aria-hidden="false"] {
                margin-top: .5rem;
            }
        }

        #plugin__qc__icon {
            display: none;
        }

        #plugin__qc__link {
            position: relative;

            .prefix {
                .icon-emo-happy();

                width: 100%;
                font-size: @font-size-default;

                &::before {
                    width: 100%;
                    margin: 0;
                }
            }
        }
    }
}


/* + + + + +  ?  + + + + + */
.mode_admin {

}