@import "../../../../../backend/assets/less/core/boot.less";

[data-control="snippet"] {
    display: inline-block;
    width: 100%;
    margin: 0 0 15px 0;
    padding: 10px 10px 10px 36px;
    border: 1px dashed #bdc3c7;
    background: @input-bg;
    position: relative;
    color: @heading-color;
    font-size: 15px;
    font-weight: 600;
    line-height: 150%;
    font-weight: normal;
    cursor: pointer;

    &.has-error {
        border-color: @brand-danger;
        border-style: solid;
        outline: none;
        cursor: default;
    }

    &:focus,
    &.inspector-open {
        border-color: @brand-primary;
        border-style: solid;
        outline: none;
    }

    &:before {
        content: attr(data-name);
    }

    &:after {
        .icon-OctoFont();
        content: @icon-code-snippet;
        font-size: 19.5px;

        position: absolute;
        width: 17px;
        height: 19px;
        left: 11px;
        top: 12px;
    }

    &.loading:after {
        background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="41px" height="41px" viewBox="134 73 41 41" enable-background="new 134 73 41 41" xml:space="preserve"><defs></defs><rect x="0.5" y="0.5" display="none" fill="%23B8CC44" stroke="%23FFFFFF" width="315" height="291"/><path id="bg_1_" opacity="0" fill="%23FFFFFF" d="M135.015,93.554c0.002-10.854,8.8-19.653,19.654-19.655c10.856,0.002,19.653,8.802,19.655,19.657c-0.001,6.679-3.331,12.577-8.422,16.129c-3.184,2.223-7.056,3.525-11.232,3.526C143.815,113.209,135.016,104.41,135.015,93.554z"/><path opacity="0" fill="none" stroke="%232A98DB" stroke-width="6" d="M137.644,93.554c0.001-9.402,7.623-17.024,17.025-17.026c9.404,0.002,17.025,7.625,17.026,17.028c0,5.785-2.886,10.896-7.295,13.972c-2.758,1.925-6.112,3.054-9.73,3.055C145.267,110.58,137.645,102.959,137.644,93.554z"/><path fill="none" stroke="%235FB6F5" stroke-width="5.28" stroke-linecap="round" stroke-linejoin="round" d="M142.114,105.059c-4.002-4.376-5.601-10.721-3.64-16.765c1.318-4.052,4.011-7.271,7.39-9.312"/></svg>');
        background-size: 15px 15px;
        background-position: 50% 50%;
        position: absolute;
        width: 15px;
        height: 15px;
        top: 13px;
        content: ' ';
        .animation(spin 1s linear infinite);
    }
}