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

.breadcrumbs {
    padding: @margin-small 1.8rem;
    border-bottom: 1px solid @color-border;

    > p {
        font-size: .83rem;
        margin: 0;

        * {
            font-size: .83rem;
        }

        .bchead {
            .sr-only();
        }

        a {
            &:hover,
            &:focus,
            &:active {
                color: @color-nav;
            }
        }

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

                height: 1em;
                width: auto;
                text-decoration: none;
                transition: @transition color;

                &:before {
                    font-size: 1rem;
                    margin-top: .17rem;
                }

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

    .page-attributes {
        float: right;
        display: inline-block;
        list-style: none;
        margin: 0;
        padding: 0;
        max-width: 30%;

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

            float: left;

            &.do_none {
                &:not([class*="plugin__qc"]) {
                    background-color: @color-site-bg;
                }

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

            &.plugin__qc {
                display: inline-block;
                overflow: visible;
            }

            .prefix {
                .fontello();
                .hide-text-show-before();

                height: auto;
                width: 100%;
                color: @color-nav;
                text-align: center;
                transition: @transition color;

                &::before {
                    width: 100%;
                    margin: .35em 0 0;
                }
            }
        } // li

        a {
            display: block;
            width: auto;
            min-height: 2em;
            margin: 0;
            border: 1px solid @color-border;
            border-radius: @border-radius;
            color: @color-nav;
            transition: @transition color, @transition border-color;

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

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

                .prefix {
                    color: @button_color;
                }
            }
        }

        #plugin__qc__wrapper {
            position: absolute;
            right: 0;
            width: auto;
            border: 0 none;
            background: @color-site-bg;

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

        #plugin__qc__icon {
            display: none;
        }

        #plugin__qc__link {
            font-size: .8rem;
            position: relative;

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

                font-size: inherit;
            }
        }
    }
}