<!DOCTYPE html>
<html class="no-js" lang="{{#if options.htmllang}}{{{modifierHtmlLang options.htmllang}}}{{else}}en{{/if}}">
<head>
  <meta charset="utf-8">
  <title>{{options.title}}</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

  <link rel="icon" href="kss-assets/kss-favicon.svg">
  <link rel="stylesheet" href="kss-assets/kss-theme.css">
  <link rel="stylesheet" href="kss-assets/kss.min.css">
  <link rel="stylesheet" href="kss-assets/prism.css">
  {{{styles}}}
</head>
<body class="kss-scheibo__body" id="kss-node" {{#if template.isItem}}class="kss-fullscreen-mode"{{/if}}>

<header class="kss-header">
  <h1 class="kss-doc-title">{{options.title}}</h1>
</header>
<div class="kss-container">
  <div class="kss-sidebar kss-style">
    <div class="kss-search">
      <input type="text" class="kss-search__input" id="kss-search__input" placeholder="Search">
      <ul class="kss-search__list kss-nav__menu" id="kss-search__list">
        {{#each menu}}
        <li class="kss-search__item kss-nav__menu-item">
          <a class="kss-search__link kss-nav__menu-link {{#if isActive}}is-active{{/if}} {{#if children}}has-children{{/if}}" href="section-{{referenceURI}}.html">
              <span class="kss-nav__ref">{{referenceNumber}}</span><span class="kss-nav__name">{{header}}</span>
              {{#if description}}
                  <div class="kss-search__desc">
                      {{{description}}}
                  </div>
              {{/if}}
          </a>
          {{#if children}}
              <ul>
              {{#each children}}
                  <li class="kss-search__item kss-nav__menu-item {{#if isGrandChild}}is-grandchild{{/if}}">
                    <a class="kss-search__link kss-nav__menu-link" href="section-{{../referenceURI}}.html#kssref-{{referenceURI}}" data-singlesectiontrigger="kssref-{{referenceURI}}">
                        <span class="kss-nav__ref">{{referenceNumber}}</span><span class="kss-nav__name">{{header}}</span>
                        {{#if description}}
                            <div class="kss-search__desc">
                                {{{description}}}
                            </div>
                        {{/if}}
                    </a>
                  </li>
              {{/each}}
              </ul>
          {{/if}}
        </li>
        {{/each}}
      </ul>
    </div>
    <nav class="kss-nav" aria-label="Style Guide">
      <ul class="kss-nav__menu">
        <li class="kss-nav__menu-item">
          <a class="kss-nav__menu-link" href="./">
            <span class="kss-nav__ref">0</span><span class="kss-nav__name">Overview</span>
          </a>
        </li>
      {{#each menu}}
        <li class="kss-nav__menu-item">
          <a class="kss-nav__menu-link {{#if isActive}}kss-nav__menu-link--active{{/if}}" href="section-{{referenceURI}}.html">
            <span class="kss-nav__ref">{{referenceNumber}}</span><span class="kss-nav__name">{{header}}</span>
          </a>
          {{#if isActive}}
            {{#if children}}
              <ul class="kss-nav__menu-child">
              {{#each children}}
                <li class="kss-nav__menu-item">
                  <span class="kss-nav__menu-link" data-singlesectiontrigger="kssref-{{referenceURI}}">
                    <span class="kss-nav__ref {{#if isGrandChild}}kss-nav__ref-child{{/if}}">{{referenceNumber}}</span
                    ><span class="kss-nav__name">{{header}}</span>
                  </span>
                </li>
              {{/each}}
              </ul>
            {{/if}}
          {{/if}}
        </li>
      {{/each}}
      </ul>
    </nav>
  </div>
  <main class="kss-main" aria-label="Content">
    <article>
    {{#if template.isHomepage}}
      {{#if homepage}}
        <div id="kssref-0" class="kss-section kss-section--depth-0 kss-overview kss-style">
          {{{homepage}}}
        </div>
      {{/if}}
    {{else}}

    {{!
      Display each section, in order.

      The "root" element comes first in this loop, and can be detected using
      the "#if @first" block as seen below.
    }}
    {{#each sections}}
      <{{#if @first}}div{{else}}section{{/if}} id="kssref-{{referenceURI}}" class="kss-section kss-section--depth-{{depth}} {{#if @root.template.isItem}}is-fullscreen{{/if}}">
        <div class="kss-style kss-style--header {{#if example}}{{else}}kss-style--maincolor{{/if}} {{#if colors}}kss-style--colorlist{{/if}}">
          <a class="kss-title__permalink" href="#kssref-{{referenceURI}}">
            <h{{depth}} class="kss-title kss-title--level-{{depth}} kss-style {{#if example}}{{else}}kss-title--onmaincolor{{/if}}">
                {{header}}
            </h{{depth}}>
          </a>
          {{#if example}}
            <p class="kss-toolbar">
              {{#unless @root.template.isItem}}
                <a class="kss-toolbar__link kss-toolbar__link--fullscreen" title="Toggle full screen" href="#kssref-{{referenceURI}}" data-kss-fullscreen="kssref-{{referenceURI}}">
                  <span class="kss-toolbar__tooltip">Toggle full screen</span>
                  <svg aria-hidden="true" class="kss-toolbar__svg kss-toolbar__off" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"/></svg>
                  <svg aria-hidden="true" class="kss-toolbar__svg kss-toolbar__on" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"/></svg>
                </a>
                <a class="kss-toolbar__link kss-toolbar__link--newwindow" title="Open in new window" href="item-{{referenceURI}}.html" target="_blank">
                  <span class="kss-toolbar__tooltip">Open in new window</span>
                  <svg aria-hidden="true" class="kss-toolbar__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="#fff" d="M0 20H40V64H0z"/><path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/><path class="kss-toolbar__icon-fill" d="M0 20H40V30H0z"/><path fill="#fff" d="M24 0H64V44H24z"/><path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/><path class="kss-toolbar__icon-fill" d="M24 0H64V10H24z"/></svg>
                </a>
              {{/unless}}
              <a class="kss-toolbar__link kss-toolbar__link--guides" title="Toggle example guides" href="#kssref-{{referenceURI}}" data-kss-guides="true">
                <span class="kss-toolbar__tooltip">Toggle example guides</span>
                <svg aria-hidden="true" class="kss-toolbar__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path class="kss-toolbar__icon-fill" d="M5 35H10V44H5zM54 21H59V30H54zM54 35H59V44H54zM5 21H10V30H5zM5 0H10V15H5zM35 5H44V10H35zM20 5H29V10H20z"/><path class="kss-toolbar__icon-fill" d="M0 5H15V10H0zM54 0H59V15H54z"/><path class="kss-toolbar__icon-fill" d="M49 5H64V10H49zM54 49H59V64H54z"/><path class="kss-toolbar__icon-fill" d="M49 54H64V59H49zM5 49H10V64H5z"/><path class="kss-toolbar__icon-fill" d="M0 54H15V59H0zM35 54H44V59H35zM20 54H29V59H20z"/></svg>
              </a>
              <a class="kss-toolbar__link kss-toolbar__link--markup" title="Toggle HTML markup" href="#kssref-{{referenceURI}}" data-kss-markup="true">
                <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
                <svg aria-hidden="true" class="kss-toolbar__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path class="kss-toolbar__icon-fill" d="M37.555 46.239l6.103 6.103 20.342-20.342-20.342-20.342-6.103 6.103 14.24 14.239-14.24 14.239zM26.445 17.761l-6.103-6.103-20.342 20.342 20.342 20.342 6.103-6.103-14.24-14.239 14.24-14.239z"/></svg>
              </a>
            </p>
          {{/if}}

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

          {{#if colors}}
            <ul class="kss-colors">
              {{#kssColors colors}}
                <li class="kss-colors__item">
                    <div class="kss-colors__colorbox" style="background-color: {{color.value}};"></div>
                  <div class="kss-colors__info">
                    <h4 class="kss-colors__value">{{color.value}}</h4>
                    <div class="kss-colors__variable">{{color.variable}}</div>
                    {{color.description}}
                  </div>
                </li>
              {{/kssColors}}
            </ul>
          {{/if}}

          {{#if parameters}}
            <div class="kss-parameters__title">Parameters:</div>
            <ul class="kss-parameters">
            {{#each parameters}}
              <li class="kss-parameters__item">
                <div class="kss-parameters__name"><code>{{name}}</code></div>
                <div class="kss-parameters__description">
                  {{{description}}}
                  {{#if defaultValue}}
                    <div class="kss-parameters__default-value">
                      Defaults to: <code>{{defaultValue}}</code>
                    </div>
                  {{/if}}
                </div>
              </li>
            {{/each}}
            </ul>
          {{/if}}
        </div>

        {{#if example}}
          <div class="kss-modifier__wrapper">
            <div class="kss-modifier__defaultheader kss-style">
              <div class="kss-modifier__defaultinsertmarkuptext">
                {{modifierInsertCode referenceURI ""}}
              </div>
              {{{modifierFullscreenButton header (modifierInsertSection markup ../sections ../styleGuide ../options.source) referenceURI 'default' '' requirejs ../options.requirejs htmlclass bodyclass ../options.bodyclass ../options.htmllang}}}
            </div>

            <div class="kss-modifier__example {{modifierHTMLClass htmlclass ../options.htmlclass}} {{modifierBodyClass bodyclass ../options.bodyclass}}">
              {{#kssWrapper wrapper ''}}
                {{{modifierInsertSection example ../sections ../styleGuide ../options.source}}}
              {{/kssWrapper}}
              <div class="kss-modifier__example-footer"></div>
            </div>
            {{#each modifiers}}
              <div class="kss-modifier__header">
                <div>
                  <div class="kss-modifier__name kss-style">
                    {{name}}
                  </div>
                  <div class="kss-modifier__description kss-style">
                    {{{description}}}
                  </div>
                  <div class="kss-modifier__insertmarkuptext kss-style">
                    {{modifierInsertCode ../referenceURI @key}}
                  </div>
                </div>
                {{{modifierFullscreenButton name (modifierInsertSection markup ../sections ../../styleGuide ../../options.source) ../referenceURI @key ../wrapper ../requirejs ../../options.requirejs ../htmlclass ../bodyclass ../../options.bodyclass ../../options.htmllang}}}
              </div>
              <div class="kss-modifier__example {{modifierBodyClass ../bodyclass ../../options.bodyclass}}">
                {{#kssWrapper ../wrapper name}}
                  {{{modifierInsertSection markup ../sections ../../styleGuide ../../options.source}}}
                {{/kssWrapper}}
                <div class="kss-modifier__example-footer"></div>
              </div>
            {{/each}}
          </div>

          {{#if markup}}
            <details class="kss-markup kss-style">
              <summary>
                {{#if markupFile }}
                  Markup: <code>{{ markupFile }}</code>
                {{else}}
                  Markup
                {{/if}}
              </summary>
              <pre><code class="lang-markup">{{modifierInsertSection markup ../sections ../styleGuide ../options.source}}</code></pre>
            </details>
          {{/if}}

          {{#if source.filename}}
            <div class="kss-source kss-style">
              Source: <code>{{source.filename}}</code>, line {{source.line}}
            </div>
          {{/if}}
        {{/if}}

      </{{#if @first}}div{{else}}section{{/if}}>
    {{/each}}
  {{/if}}
  </article>
  </main>
</div>


<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-singlesection.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/search.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script src="kss-assets/prismjs.js" data-manual></script>
<script>
  var kssSingleSection = new KssSingleSection();
  var kssFullScreen = new KssFullScreen({
    idPrefix: 'kss-fullscreen-',
    bodyClass: 'kss-fullscreen-mode',
    elementClass: 'is-fullscreen'
  });
  var kssGuides = new KssGuides({
    bodyClass: 'kss-guides-mode'
  });
  var kssMarkup = new KssMarkup({
    bodyClass: 'kss-markup-mode',
    detailsClass: 'kss-markup'
  });
</script>
{{{scripts}}}

{{#if options.requirejs}}
{{{modifierRequireJs options.requirejs}}}
{{/if}}
</body>
</html>
