<section class="section docs-section" id="utilities">
	<h2 class="section-title">Utilities</h2>
	<p class="docs-section-description">
		Utilities дают предсказуемую систему отступов, размеров, раскладки и текстовых правок без создания новых компонентов.
		Spacing scale используется и в SCSS-переменных, и в utility-классах.
	</p>

	<div class="block">
		<h3 class="block-title">Spacing scale</h3>

		<div class="table-wrapper">
			<table class="table table-compact">
				<caption class="table-caption">Spacing tokens</caption>
				<thead class="table-head">
					<tr class="table-row">
						<th>Token</th>
						<th>Value</th>
						<th>Alias</th>
						<th>Utility examples</th>
					</tr>
				</thead>
				<tbody class="table-body">
					<tr class="table-row">
						<td><code class="code">$space-0</code></td>
						<td>0</td>
						<td>-</td>
						<td><code class="code">m-0</code> <code class="code">p-0</code> <code class="code">g-0</code></td>
					</tr>
					<tr class="table-row">
						<td><code class="code">$space-1</code></td>
						<td>5px</td>
						<td><code class="code">$space-xs</code></td>
						<td><code class="code">mt-1</code> <code class="code">px-1</code></td>
					</tr>
					<tr class="table-row">
						<td><code class="code">$space-2</code></td>
						<td>8px</td>
						<td><code class="code">$space-sm</code></td>
						<td><code class="code">mb-2</code> <code class="code">g-2</code></td>
					</tr>
					<tr class="table-row">
						<td><code class="code">$space-3</code></td>
						<td>12px</td>
						<td>-</td>
						<td><code class="code">p-3</code> <code class="code">gy-3</code></td>
					</tr>
					<tr class="table-row">
						<td><code class="code">$space-4</code></td>
						<td>15px</td>
						<td><code class="code">$space-md</code></td>
						<td><code class="code">mx-4</code> <code class="code">gx-4</code></td>
					</tr>
					<tr class="table-row">
						<td><code class="code">$space-5</code></td>
						<td>18px</td>
						<td>-</td>
						<td><code class="code">pt-5</code> <code class="code">pb-5</code></td>
					</tr>
					<tr class="table-row">
						<td><code class="code">$space-6</code></td>
						<td>22px</td>
						<td><code class="code">$space-lg</code></td>
						<td><code class="code">my-6</code> <code class="code">g-6</code></td>
					</tr>
					<tr class="table-row">
						<td><code class="code">$space-8</code></td>
						<td>34px</td>
						<td><code class="code">$space-xl</code></td>
						<td><code class="code">mt-8</code> <code class="code">p-8</code></td>
					</tr>
					<tr class="table-row">
						<td><code class="code">$space-10</code></td>
						<td>48px</td>
						<td><code class="code">$space-xxl</code></td>
						<td><code class="code">mb-10</code> <code class="code">py-10</code></td>
					</tr>
					<tr class="table-row">
						<td><code class="code">$space-12</code></td>
						<td>80px</td>
						<td>-</td>
						<td><code class="code">mt-12</code> <code class="code">pb-12</code></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<div class="block">
		<h3 class="block-title">Utility groups</h3>

		<dl class="description-list">
			<div class="description-list-row">
				<dt class="description-list-term">Margin</dt>
				<dd class="description-list-value">
					<code class="code">m-*</code>
					<code class="code">mt-*</code>
					<code class="code">mr-*</code>
					<code class="code">mb-*</code>
					<code class="code">ml-*</code>
					<code class="code">mx-*</code>
					<code class="code">my-*</code>
				</dd>
			</div>
			<div class="description-list-row">
				<dt class="description-list-term">Padding</dt>
				<dd class="description-list-value">
					<code class="code">p-*</code>
					<code class="code">pt-*</code>
					<code class="code">pr-*</code>
					<code class="code">pb-*</code>
					<code class="code">pl-*</code>
					<code class="code">px-*</code>
					<code class="code">py-*</code>
				</dd>
			</div>
			<div class="description-list-row">
				<dt class="description-list-term">Gap</dt>
				<dd class="description-list-value">
					<code class="code">g-*</code>
					<code class="code">gx-*</code>
					<code class="code">gy-*</code>
				</dd>
			</div>
			<div class="description-list-row">
				<dt class="description-list-term">Layout</dt>
				<dd class="description-list-value">
					<code class="code">row</code>
					<code class="code">column</code>
					<code class="code">f-grid</code>
					<code class="code">grid</code>
					<code class="code">grid-2</code>
					<code class="code">grid-3</code>
				</dd>
			</div>
			<div class="description-list-row">
				<dt class="description-list-term">Alignment</dt>
				<dd class="description-list-value">
					<code class="code">items-center</code>
					<code class="code">justify-between</code>
					<code class="code">justify-end</code>
				</dd>
			</div>
			<div class="description-list-row">
				<dt class="description-list-term">Text</dt>
				<dd class="description-list-value">
					<code class="code">fs-sm</code>
					<code class="code">text-center</code>
					<code class="code">text-uppercase</code>
					<code class="code">text-nowrap</code>
				</dd>
			</div>
		</dl>
	</div>

	<div class="block">
		<h3 class="block-title">Spacing preview</h3>

		<div class="grid-3 g-4">
			<div class="alert alert-secondary m-0">g-4</div>
			<div class="alert alert-primary m-0 p-5">p-5</div>
			<div class="alert alert-warning m-0 px-6 py-3">px-6 py-3</div>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Utilities HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="grid-2 g-4 items-center"&gt;
  &lt;div class="p-5"&gt;Panel&lt;/div&gt;
  &lt;div class="px-6 py-3 text-right"&gt;Actions&lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
</section>