{% extends "@miyagi/layouts/iframe_default.twig.miyagi" %}
{% block additionalCss %}
	{% for file in additionalCssFiles %}
	<link rel="stylesheet" href="/{{ file }}">
	{% endfor %}
{% endblock %}
{% block body %}
	{% if typography %}
		<div class="Wrapper">
			<div class="Styleguide" data-media-queries='{{ mediaQueries }}'>
				<div class="Documentation">
					<h1>Typography</h1>
				</div>
				<ul class="CustomPropsGroup Fonts">
					{% for typo in typography %}
						{% if typo[1].customProp %}
							<li class="CustomProp Fonts-item"
								style='{% for value in typo[1].values %}--{{ value.label }}: var({{ value.value }});{% endfor %}'>
								<button class="Fonts-button CustomProp-button"
									aria-controls="styleguide-fonts-{{ typo[0] }}" aria-expanded="false">
									<span class="Fonts-prop CustomProp-prop">{{ typo[0] }}</span>
								</button>
								<dl class="CustomProp-details" id="styleguide-fonts-{{ typo[0] }}" hidden>
									<dt class="CustomProp-detailsProperty">Name</dt>
									<dd class="CustomProp-detailsValue">{{ typo[1].customProp }}</dd>
									{% for value in typo[1].values %}
										<dt class="CustomProp-detailsProperty">{{ value.label }}</dt>
										<dd class="CustomProp-detailsValue" data-value="{{ value.value }}"></dd>
									{% endfor %}
								</dl>
							</li>
						{% endif %}
					{% endfor %}
				</ul>
			</div>
		</div>
	{% endif %}
{% endblock %}