<div class="cssd-DocBlock">

    <h2 class="cssd-DocBlock-title">{{title}}</h2>

    <a class="cssd-DocBlock-cssLink" href="file://{{absoluteFilePath}}" target="_blank">View original file</a>

    {{#if depends_html}}
        <div class="cssd-DocBlock-depends">
            <strong>Depends:</strong>
            {{{ depends_html }}}
        </div>
    {{/if}}

    {{#if extends_html}}
        <div class="cssd-DocBlock-extends">
            <strong>Extends:</strong>
            {{{ extends_html }}}
        </div>
    {{/if}}

    {{#if description}}
        <div class="cssd-DocBlock-description">
            {{{ description }}}
        </div>
    {{/if}}

    {{#unless nopreview}}
        {{#if snippet}}
            <h3 class="cssd-DocBlock-subtitle">Preview</h3>
            <div class="cssd-DocBlock-render cssd-DocBlock-theme--{{theme}}">
                {{{ snippet }}}
            </div>
        {{/if}}
    {{/unless}}

    {{#if snippet_highlighted}}
        <h3 class="cssd-DocBlock-subtitle">Markup</h3>
        <div class="cssd-DocBlock-snippet">
            <pre class="hljs"><code>{{{ snippet_highlighted }}}</code></pre>
        </div>
    {{/if}}

    {{#if state}}
        <h4 class="cssd-DocBlock-subtitle">States</h4>
        <ul class="cssd-DocBlock-states">
        {{#each state}}
            <li>
                <header class="cssd-DocBlock-render-header">
                    <code>{{ name }}</code>
                    {{#if description}}<p>{{ description }}</p>{{/if}}
                </header>

                {{#if ../snippet}}
                    <div class="cssd-DocBlock-render cssd-DocBlock-theme--{{../../theme}}">
                    {{> snippet }}
                    </div>
                {{/if}}
            </li>
        {{/each}}
        </ul>
    {{/if}}

    {{#if modifier}}
        <h4 class="cssd-DocBlock-subtitle">Modifiers</h4>
        <ul class="cssd-DocBlock-modifier">
        {{#each modifier}}
            <li>
                <header class="cssd-DocBlock-render-header">
                    <code>{{ name }}</code>
                    {{#if description}}<p>{{ description }}</p>{{/if}}
                </header>
                {{#if ../snippet}}
                    <div class="cssd-DocBlock-render cssd-DocBlock-theme--{{../../theme}}">
                    {{> snippet }}
                    </div>
                {{/if}}
            </li>
        {{/each}}
        </ul>
    {{/if}}


    {{#if _extras}}
        {{#if _extras.html}}
            {{#each _extras.html}}
                {{{this}}}
            {{/each}}
        {{/if}}

        {{#if _extras.css}}
            {{#each _extras.css}}
            <style>
                {{{this}}}
            </style>
            {{/each}}
        {{/if}}

        {{#if _extras.js}}
            {{#each _extras.js}}
            <script>
                {{{this}}}
            </script>
            {{/each}}
        {{/if}}
    {{/if}}
</div>