{% extends 'templates/base.nunjucks' %}
{% block head_append %}
    {# Intentionally terrible default styles to ensure component styles are robust #}
    <style>
        html,
        body {
            /* Reset margin and padding */
            margin: 0;
            padding: 0;

            /* Hostile inherited styles*/
            color: darkorange;
            font-family: Georgia;
            font-size: 43px;
            font-style: italic;
            font-weight: bold;
            letter-spacing: 0.5em;
            line-height: 3.2;
            text-align: center;
            text-indent: 103px;
            text-transform: uppercase;
            text-shadow: 0 2px 1px red;
            vertical-align: middle;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        input,
        button,
        select,
        optgroup,
        textarea {
            margin-bottom: 21px;
            margin-top: 11px;
        }

        ul,
        ol {
            list-style: lower-greek;
            margin-bottom: 64px;
            padding: 18px;
        }

        table {
            border-collapse: separate;
            border-spacing: 12px 23px;
        }

        /* Reset BrowserSync Notification styles since the defaults don't protect against the hostile sink */
        #__bs_notify__ {
            font-size: 14.4px !important;
            font-style: normal;
            font-weight: normal;
            letter-spacing: 0;
            line-height: 1;
            text-align: left;
            text-indent: 0;
            text-transform: none;
            text-shadow: none;
        }

        .sink-page-header {
            background: transparent;
            color: #656565;
            font-family: {{ luci_tokens.font.family['sans-serif'] | safe }};
            font-size: 20px;
            font-style: normal;
            font-weight: normal;
            letter-spacing: 0;
            text-align: left;
            text-indent: 0;
            line-height: 1.2;
            margin: 32px 0 16px 0;
            padding: 0;
            text-shadow: none;
            text-transform: none;
        }

        .sink-page-font-reset {
            color: {{ luci_tokens['text-color'].primary['on-light'] }};
            font-family: {{ luci_tokens.font.family['sans-serif'] | safe }};
            font-size: {{ luci_tokens.font.size.md }};
            font-style: normal;
            font-weight: normal;
            letter-spacing: 0;
            line-height: {{ luci_tokens.font['line-height'].body | safe }};
            text-align: left;
            text-indent: 0;
            text-shadow: none;
            text-transform: none;
        }

        .sink-page__notification {
          background: {{ luci_tokens['feedback-color'].warning.background | safe }};
          display: flex;
          align-items: center;
          padding: {{ luci_tokens.space.inset.stretch.sm | safe }}
        }

        .sink-page__notification .luci-icon {
          margin: {{ luci_tokens.space['inline-left'].xs | safe }}
        }

        code {
          color: red;
          font-size: 14px;
        }

        .luci-doc-container {
            padding: 16px;
        }

        .luci-doc-container--narrow {
            width: 300px;
            margin: 0 auto;
        }
    </style>
{% endblock %}
{% block notification %}
  <p class="sink-page-font-reset">{{ luci.link(href="/", text="LUCI Design System") }}</p>
  {{ luci.notification(class="luci-notification--warning", icon_left="info", text="These Kitchen Sink pages are test pages created in order to preview components without any possible documentation site style collisions.") }}
  <hr>
{% endblock %}
{% block body %}

{% endblock %}