/**
 * Styles for the QC plugin
 */


/* + + + + +  icon in breadcrumb  + + + + + */

.page-attributes .plugin_qc {
    .qc_icon {
        margin: 0;

        svg {
            margin-top: .1em;
            width: 1.6em;
            height: 1.6em;
            font-size: (@font-size-small - .06);
        }
    }

    a {
        &:hover,
        &:focus,
        &:active {
            svg path {
                fill: @ini_nav_menu_hover_bg;
            }
        }
    }
}


/* + + + + +  slideout output  + + + + + */
.qc-output {
    position: relative;
    min-width: 100%;
    width: auto;
    background-color: @ini_background !important;
    font-size: 90%;
    box-shadow: @box-shadow-bottom;
    border-bottom: solid 1px @ini_border_light;
    margin-bottom: 0;
    padding-top: 0 !important; // for JS overwrite

    @media @screen_min-xxs {
        margin-right: -(@margin-default);
        margin-left: -(@margin-default);
        padding-left: @margin-default;
        padding-right: @margin-default;
    }

    @media @screen_min-md {
        top: -(@margin-small);
    }

    @media @screen_max-md {
        top: 0;
        margin-top: -(@page_padding-top + 2);
        margin-right: -(@margin-default * 1.6);
        margin-left: -(@margin-default);
        padding-top: @margin-default;
    }

    @media @screen_max-xxs {
        margin-left: -(@margin-small);
        padding-left: @margin-small;
        padding-right: @margin-default;
    }

    h1 {
        @media @screen_min-md {
            padding-top: 0;
        }
    }
    h2 {
        font-size: 1.3rem;
    }
    h3 {
         font-size: 1.1rem;
    }
    h4, h5, h6 {
        font-size: 1rem;
    }

    div,
    p {
        margin-left: 0;
    }

    dl {
        dt,
        dd {
            padding-bottom: @small-spacing;

            @media @screen_max-xxs {
                float: none;
                display: inline-block;
                width: 49%;
                max-width: 10em;
                vertical-align: top;
                margin-left: 0;
            }
        }
    }

    .qc_icon {
        background-color: #fff;
        border-radius: @fix_border-radius;
        vertical-align: top;
        padding: .1rem;
    }
}