{# ========================================================================== #}
{# :: Typography #}
{# ========================================================================== #}
{#
	Visual representation of the different typographic styles defined within the
	fundamentals section of the brandplatform's library system.
#}

{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "components/font-family.njk" as fontFamily %}
{% import "components/font-style.njk" as fontStyle %}
{% import "components/fallback.njk" as fallback %}

{# ========================================================================== #}
{# :: Settings & variables #}
{# ========================================================================== #}
{% import ROUTEDATA.DETAIL.source as config %}
{% set families = config.families %}
{% set styles = config.styles %}

{# ========================================================================== #}
{# :: Partial #}
{# ========================================================================== #}
<section class="bp-l-section">
	<header class="bp-l-section__header">
		<h1 class="bp-l-section__title u-h1">Typography</h1>
	</header>

	{% if families %}
		<div class="bp-l-section__content">
			<ul class="bp-l-grid bp-l-grid--with-spacing">
				{% for item in families %}

					<li class="bp-l-grid__col bp-l-grid__col--6@viewport-7 u-margin-top-3x@below-small">
						{{fontFamily.default("", item)}}
					</li>

				{% endfor %}
			</ul>
		</div>
	{% endif %}

	{% if styles %}
		<div class="bp-l-section__content">
			{% for key, value in styles %}

				<div class="{{'u-margin-top-8x' if not loop.first}}">
					{{fontStyle.default("", {
						name: key,
						props: value
					})}}
				</div>

			{% endfor %}
		</div>
	{% endif %}

	{% if not families and not styles %}
		{{fallback.default("", {
			text:
				"I am not detecting any typographic definitions. Have you tried
				shutting me off and on again?"
		})}}
	{% endif %}
</section>