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