/**
 * 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);
        }
    }
}


/* + + + + +  slideout output  + + + + + */
.qc-output {
    min-width: 100%;
    width: auto;
    font-size: 90%;
    box-shadow: @box-shadow-bottom;
    margin-bottom: 0;

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

    @media @screen_max-md {
        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;
    }

    div,
    p {
        margin-left: 0;
    }

    dl {
        dt,
        dd {
            @media @screen_max-xxs {
                float: none;
                display: inline-block;
                width: 49%;
                max-width: 10em;
                vertical-align: top;
                margin-left: 0;
                padding-bottom: @small-spacing;
            }
        }
    }

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