<!DOCTYPE html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>FicusJS Styles</title>
    <base href="/">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700&display=swap" rel="stylesheet"> 
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicons/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/android-chrome-384x384.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#54e4e5">
    <!-- component css START -->
    {% set css %}
    {% include "../../tmp/css/ficus-globals.css" %}
    {% include "../../tmp/css/ficus-utilities.css" %}
    {% include "../../tmp/css/ficus-docs.css" %}
    {% include "../../node_modules/@ficusjs/components/dist/components/custom-elements/dropdown/dropdown.css" %}
    {% include "../../node_modules/@ficusjs/components/dist/components/custom-elements/navbar/navbar.css" %}
    {% include "../../node_modules/@ficusjs/components/dist/components/html/navigation/navigation.css" %}
    {% include "../../node_modules/@ficusjs/components/dist/components/html/button/button.css" %}
    {% endset %}
    {% if project.environment == "production" %}
      <style>{{ css | cssmin | safe }}</style>
    {% else %}
      <style>{{ css | safe }}</style>
    {% endif %}
    <!-- component css END -->
    {% cssPath cssFile | safe %}
  </head>
  <body>
    <div class="fd-main-layout">

      <fc-navbar style="width: 100%;">
        <svg class="fu-hidden" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
          <symbol id="menu" viewBox="0 0 48 48">
            <path d="M 5.5 9 A 1.50015 1.50015 0 1 0 5.5 12 L 42.5 12 A 1.50015 1.50015 0 1 0 42.5 9 L 5.5 9 z M 5.5 22.5 A 1.50015 1.50015 0 1 0 5.5 25.5 L 42.5 25.5 A 1.50015 1.50015 0 1 0 42.5 22.5 L 5.5 22.5 z M 5.5 36 A 1.50015 1.50015 0 1 0 5.5 39 L 42.5 39 A 1.50015 1.50015 0 1 0 42.5 36 L 5.5 36 z"/>
          </symbol>
        </svg>
        <nav class="fd-logo">
          <img id="ficus-logo" src="/assets/img/ficus-logo.svg" height="32" alt="FicusJS Components">
          <img id="ficus-logo-white" src="/assets/img/ficus-logo-white.svg" height="32" alt="FicusJS Components" style="display: none;">
          <span>Styles</span>
        </nav>

        <button type="button" class="fc-navbar__toggler">
          <svg>
            <use xlink:href="#menu" href="#menu"></use>
          </svg>
        </button>

        <nav class="fc-navbar__collapse">
          <a href="https://github.com/ficusjs" class="fc-navbar__link">GitHub</a>
        </nav>
      </fc-navbar>

      <div class="[ fd-sidebar ] [ fu-spacing-pt-05 fu-spacing-pb-05 fu-spacing-pl-05 fu-spacing-pr-05 fu-lg-spacing-pt-09 fu-lg-spacing-pb-09 fu-lg-spacing-pl-00 fu-lg-spacing-pr-00 ]">
        <details id="sidebar-nav" class="fd-sidebar-details" open>
          <summary class="fc-button">Menu</summary>
          {% include "navs/getting-started.njk" %}
          {% include "navs/guidelines.njk" %}
        </details>
      </div>

      <main class="[ fd-doc-layout ] [ fu-spacing-pl-05 fu-spacing-pr-05 fu-spacing-pt-05 fu-spacing-pb-05 fu-lg-layout-pl-06 fu-lg-layout-pr-06 fu-lg-layout-pt-06 fu-lg-layout-pb-06 fu-flow ]">
        <article class="[ fd-doc-article ] [ fu-flow ]">
          {{ content | safe }}
          {% bootstrap modulePath | safe %}
          {% scriptPath demoScript | safe %}
        </article>
        {# {% if content | toc %}
        <aside class="sticky-aside">
          <div class="fd-toc">
            <span>Table of contents</span>
            {{ content | toc| safe }}
          </div>
        </aside>
        {% endif %} #}
      </main>

      <footer class="[ fd-footer ]">
        {% include "theme-toggle.njk" %}
      </footer>

    </div>
    <script type="module" src="assets/js/sidebar-details.js"></script>
    <script type="module" src="assets/js/theme.js"></script>
    <script type="module" src="assets/js/main.js"></script>
  </body>
</html>