/**
 * Page Attribute Icons in the breadcrumb bar
 */


/* + + + + +  icons in breadcrumb area  + + + + + */

.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();

        position: relative;
        float: left;
        display: block;
        width: auto;
        min-height: @toggle-size;
        text-align: center;
        margin: 0 .25rem;

        strong {
            display: block;
            min-height: 1.64rem;
            border: 1px solid @wikiicons-border;
            border-radius: @ini_default_border_radius;
        }

        a {
            display: block;
            width: auto;
            min-height: 1.64rem;
            background-color: @ini_nav_menu_hover_bg;
            border: 1px solid @wikiicons-border;
            border-radius: @ini_default_border_radius;
            transition: @transition background-color, @transition border-color, @transition color;

            &:hover,
            &:focus,
            &:active {
                background-color: @ini_nav_menu_hover_color;
                border-color: @ini_nav_menu_hover_color;
                color: @ini_nav_menu_hover_bg;

                span {
                    fill: @ini_nav_menu_hover_bg;
                    color: @ini_nav_menu_hover_bg;
                }
            }
        }

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

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

        .num {
            top: -.6em;
            font-size: @font-size-very-small;
        }

        &:empty {
          display: none;
        }
    }
}
