Nav Button: Selective Yellow

<div style="padding: var(--size-4);">
  <h1 id="nav-button" class="mexican-pink">
    Nav Button
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <hr>
  <h3 class="celestial-blue">Caret Circle</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-left"></i>
    </a>
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-right"></i>
    </a>
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-up"></i>
    </a>
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-down"></i>
    </a>
  </div>
  <h3 class="celestial-blue">Chevrons Circle</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-left"></i>
    </a>
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-right"></i>
    </a>
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-down"></i>
    </a>
  </div>
  <h3 class="celestial-blue">Caret Square</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-left"></i>
    </a>
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-right"></i>
    </a>
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-up"></i>
    </a>
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-down"></i>
    </a>
  </div>
  <h3 class="celestial-blue">Chevrons Square</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-left"></i>
    </a>
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-right"></i>
    </a>
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-down"></i>
    </a>
  </div>
  <h3 class="celestial-blue">Sizes</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));">
    <a href="#nav-button" class="nav-button size-00 {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button size-0 {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button size-1 {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button size-2 {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button size-3 {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button size-4 {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
  </div>
</div>