newsupernova/lib/web/css/docs/source/_variables.less

// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//  # List of Global Variables
//  ## Typography
//  #### The <code>.lib-typography-all()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th class="vars_section" colspan="3">Predefined font family</th>
//        </tr>
//        <tr>
//            <th>@font-family__sans-serif</th>
//            <td class="vars_value">'Helvetica Neue', Helvetica, Arial, sans-serif</td>
//            <td>Sans-serif font family</td>
//        </tr>
//        <tr>
//            <th>@font-family__serif</th>
//            <td class="vars_value">Georgia, 'Times New Roman', Times, serif</td>
//            <td>Serif font family</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@font-family__monospace</th>
//            <td class="vars_value">Menlo, Monaco, Consolas, 'Courier New', monospace</td>
//            <td>Monospace font family</td>
//        </tr>
//        <tr>
//            <th>@font-path</th>
//            <td class="vars_value">&quot;../../fonts/&quot;</td>
//            <td>Path to custom font</td>
//        </tr>
//        <tr>
//            <th class="vars_section" colspan="3">Predefined colors</th>
//        </tr>
//        <tr>
//            <th>@color-white</th>
//            <td class="vars_value">#fff</td>
//            <td>White</td>
//        </tr>
//        <tr>
//            <th>@color-gray20</th>
//            <td class="vars_value">#333</td>
//            <td>Gray 20</td>
//        </tr>
//        <tr>
//            <th>@color-gray56</th>
//            <td class="vars_value">#8f8f8f</td>
//            <td>Gray 56</td>
//        </tr>
//        <tr>
//            <th>@primary__color</th>
//            <td class="vars_value">#555</td>
//            <td>Primary color</td>
//        </tr>
//        <tr>
//            <th>@primary__color__dark</th>
//            <td class="vars_value">darken(@primary__color, 35%) // #000</td>
//            <td>Dark primary color</td>
//        </tr>
//        <tr>
//            <th>@primary__color__darker</th>
//            <td class="vars_value">darken(@primary__color, 13.5%) // #111</td>
//            <td>Darker primary color</td>
//        </tr>
//        <tr>
//            <th>@primary__color__lighter</th>
//            <td class="vars_value">lighten(@primary__color, 23%) // #7d7d7d</td>
//            <td>Lighter primary color</td>
//        </tr>
//        <tr>
//            <th>@primary__color__light</th>
//            <td class="vars_value">lighten(@primary__color, 45%) // #a6a6a6</td>
//            <td>Light primary color</td>
//        </tr>
//        <tr>
//            <th>@border-color__base</th>
//            <td class="vars_value">darken(@page__background-color, 18%)</td>
//            <td>Base border color</td>
//        </tr>
//        <tr>
//            <th>@border-width__base</th>
//            <td class="vars_value">1px</td>
//            <td>Base border width</td>
//        </tr>
//        <tr>
//            <th class="vars_section" colspan="3">Fonts settings</th>
//        </tr>
//        <tr>
//            <th>@font-family__base</th>
//            <td class="vars_value">@font-family__sans-serif</td>
//            <td>Basic font family</td>
//        </tr>
//        <tr>
//            <th>@root__font-size</th>
//            <td class="vars_value">62.5%</td>
//            <td>Setting font-size for HTML tag, use % units</td>
//        </tr>
//        <tr>
//            <th>@font-size-ratio__base</th>
//            <td class="vars_value">1.4</td>
//            <td>Defines ratio between root font size and base font size</td>
//        </tr>
//        <tr>
//            <th>@font-size__base</th>
//            <td class="vars_value">unit((@root__font-size / 100) * 16 * @font-size-ratio__base, px)</td>
//            <td>Base font size value in px</td>
//        </tr>
//        <tr>
//            <th>@font-size__xl</th>
//            <td class="vars_value">ceil(1.5 * @font-size__base) // 21</td>
//            <td>Extra large font size</td>
//        </tr>
//        <tr>
//            <th>@font-size__l</th>
//            <td class="vars_value">ceil(1.25 * @font-size__base) // 18</td>
//            <td>Large font size</td>
//        </tr>
//        <tr>
//            <th>@font-size__s</th>
//            <td class="vars_value">ceil(.85 * @font-size__base) // 12</td>
//            <td>Small font size</td>
//        </tr>
//        <tr>
//            <th>@font-size__xs</th>
//            <td class="vars_value">floor(.75 * @font-size__base) // 11</td>
//            <td>Extra small font size</td>
//        </tr>
//        <tr>
//            <th>@font-weight__regular</th>
//            <td class="vars_value">400</td>
//            <td>Basic font weight</td>
//        </tr>
//        <tr>
//            <th>@font-weight__light</th>
//            <td class="vars_value">200</td>
//            <td>Light font weight</td>
//        </tr>
//        <tr>
//            <th>@font-weight__semibold</th>
//            <td class="vars_value">600</td>
//            <td>Semibold font weight</td>
//        </tr>
//        <tr>
//            <th>@font-weight__bold</th>
//            <td class="vars_value">700</td>
//            <td>Bold font weight</td>
//        </tr>
//        <tr>
//            <th>@font-style__base</th>
//            <td class="vars_value">normal</td>
//            <td>Font style</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@font-style__emphasis</th>
//            <td class="vars_value">italic</td>
//            <td>Emphasis font style</td>
//        </tr>
//        <tr>
//            <th>@line-height__base</th>
//            <td class="vars_value">1.428571429</td>
//            <td>Base line height</td>
//        </tr>
//        <tr>
//            <th>@line-height__computed</th>
//            <td class="vars_value">floor(@font-size__base * @line-height__base)</td>
//            <td>Computed line height depending on base font size</td>
//        </tr>
//        <tr>
//            <th>@line-height__l</th>
//            <td class="vars_value">1.5</td>
//            <td>Large line height</td>
//        </tr>
//        <tr>
//            <th>@line-height__s</th>
//            <td class="vars_value">1.33</td>
//            <td>Small line height</td>
//        </tr>
//        <tr>
//            <th>@text__color</th>
//            <td class="vars_value">@primary__color</td>
//            <td>Primary text color</td>
//        </tr>
//        <tr>
//            <th>@text__color__intense</th>
//            <td class="vars_value">@primary__color__darker</td>
//            <td>Darker text color</td>
//        </tr>
//        <tr>
//            <th>@text__color__muted</th>
//            <td class="vars_value">@primary__color__lighter</td>
//            <td>Lighter text color</td>
//        </tr>
//        <tr>
//            <th>@indent__base</th>
//            <td class="vars_value">@line-height__computed // 20px</td>
//            <td>Base text ident (20px)</td>
//        </tr>
//        <tr>
//            <th>@indent__xl</th>
//            <td class="vars_value">@line-height__computed * 2 // 40px</td>
//            <td>Extra large text ident (40px)</td>
//        </tr>
//        <tr>
//            <th>@indent__l</th>
//            <td class="vars_value">@line-height__computed * 1.5 // 30px</td>
//            <td>Large text ident (30px)</td>
//        </tr>
//        <tr>
//            <th>@indent__m</th>
//            <td class="vars_value">@indent__base * 1.25 // 25px</td>
//            <td>Extra large text ident (25px)</td>
//        </tr>
//        <tr>
//            <th>@indent__s</th>
//            <td class="vars_value">@line-height__computed / 2 //10px </td>
//            <td>Small text ident (10px)</td>
//        </tr>
//        <tr>
//            <th>@indent__xs</th>
//            <td class="vars_value">@line-height__computed / 4 // 5px</td>
//            <td>Extra small text ident (5px)</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Links</th>
//        </tr>
//        <tr>
//            <th>@link__color</th>
//            <td class="vars_value">#1979c3</td>
//            <td>Links color</td>
//        </tr>
//        <tr>
//            <th>@link__text-decoration</th>
//            <td class="vars_value">none</td>
//            <td>Links text decoration</td>
//        </tr>
//        <tr>
//            <th>@link__visited__color</th>
//            <td class="vars_value">#800080</td>
//            <td>Visited links color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@link__visited__text-decoration</th>
//            <td class="vars_value">none</td>
//            <td>Visited links text decoration</td>
//        </tr>
//        <tr>
//            <th>@link__hover__color</th>
//            <td class="vars_value">#006bb4</td>
//            <td>Hovered links color</td>
//        </tr>
//        <tr>
//            <th>@link__hover__text-decoration</th>
//            <td class="vars_value">underline</td>
//            <td>Hovered links text decoration</td>
//        </tr>
//        <tr>
//            <th>@link__active__color</th>
//            <td class="vars_value">#ff5501</td>
//            <td>Active links color</td>
//        </tr>
//        <tr>
//            <th>@link__active__text-decoration</th>
//            <td class="vars_value">underline</td>
//            <td>Active links text decoration</td>
//        </tr>
//        <tr>
//            <th class="vars_section" colspan="3">Lists</th>
//        </tr>
//        <tr>
//            <th>@list__color__base</th>
//            <td class="vars_value">false</td>
//            <td>List text color</td>
//        </tr>
//        <tr>
//            <th>@list__font-size__base</th>
//            <td class="vars_value">@font-size__base</td>
//            <td>List font size</td>
//        </tr>
//        <tr>
//            <th>@list__margin-top</th>
//            <td class="vars_value">0</td>
//            <td>List margin top</td>
//        </tr>
//        <tr>
//            <th>@list__margin-bottom</th>
//            <td class="vars_value">@indent__m</td>
//            <td>List margin bottom</td>
//        </tr>
//        <tr>
//            <th>@list-item__margin-top</th>
//            <td class="vars_value">0</td>
//            <td>List item margin top</td>
//        </tr>
//        <tr>
//            <th>@list-item__margin-bottom</th>
//            <td class="vars_value">@indent__s</td>
//            <td>List item margin bottom</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Definition list</th>
//        </tr>
//        <tr>
//            <th>@dl__margin-top</th>
//            <td class="vars_value">0</td>
//            <td>Definition list margin top</td>
//        </tr>
//        <tr>
//            <th>@dl__margin-bottom</th>
//            <td class="vars_value">@indent__base</td>
//            <td>Definition list margin bottom</td>
//        </tr>
//        <tr>
//            <th>@dt__margin-top</th>
//            <td class="vars_value">0</td>
//            <td>Description term margin top</td>
//        </tr>
//        <tr>
//            <th>@dt__margin-bottom</th>
//            <td class="vars_value">@indent__xs</td>
//            <td>Description term margin bottom</td>
//        </tr>
//        <tr>
//            <th>@dt__font-weight</th>
//            <td class="vars_value">@font-weight__bold</td>
//            <td>Description term </td>
//        </tr>
//        <tr>
//            <th>@dd__margin-top</th>
//            <td class="vars_value">0</td>
//            <td>Description margin top</td>
//        </tr>
//        <tr>
//            <th>@dd__margin-bottom</th>
//            <td class="vars_value">@indent__s</td>
//            <td>Description margin bottom</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Paragraphs</th>
//        </tr>
//        <tr>
//            <th>@p__margin-top</th>
//            <td class="vars_value">0</td>
//            <td>Paragraph margin top</td>
//        </tr>
//        <tr>
//            <th>@p__margin-bottom</th>
//            <td class="vars_value">@indent__s</td>
//            <td>Paragraph margin bottom</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Headings</th>
//        </tr>
//        <tr>
//            <th>@heading__font-family__base</th>
//            <td class="vars_value">false</td>
//            <td>Heading base font family</td>
//        </tr>
//        <tr>
//            <th>@heading__font-style__base</th>
//            <td class="vars_value">false</td>
//            <td>Heading base font style</td>
//        </tr>
//        <tr>
//            <th>@heading__font-weight__base</th>
//            <td class="vars_value">@font-weight__light</td>
//            <td>Heading base font weight</td>
//        </tr>
//        <tr>
//            <th>@heading__line-height__base</th>
//            <td class="vars_value">1.1</td>
//            <td>Heading base line height</td>
//        </tr>
//        <tr>
//            <th>@heading__color__base</th>
//            <td class="vars_value">false</td>
//            <td>Heading base color</td>
//        </tr>
//        <tr>
//            <th>@heading__margin-top__base</th>
//            <td class="vars_value">@indent__base</td>
//            <td>Heading base margin top</td>
//        </tr>
//        <tr>
//            <th>@heading__margin-bottom__base</th>
//            <td class="vars_value">@indent__base</td>
//            <td>Heading base margin bottom</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">H1</th>
//        </tr>
//        <tr>
//            <th>@h1__font-size</th>
//            <td class="vars_value">ceil((@font-size__base * 2.85)) // 40px</td>
//            <td>H1 font size</td>
//        </tr>
//        <tr>
//            <th>@h1__font-color</th>
//            <td class="vars_value">@heading__color__base</td>
//            <td>H1 color</td>
//        </tr>
//        <tr>
//            <th>@h1__font-family</th>
//            <td class="vars_value">@heading__font-family__base</td>
//            <td>H1 font family</td>
//        </tr>
//        <tr>
//            <th>@h1__font-weight</th>
//            <td class="vars_value">@heading__font-weight__base</td>
//            <td>H1 font weight</td>
//        </tr>
//        <tr>
//            <th>@h1__font-style</th>
//            <td class="vars_value">@heading__font-style__base</td>
//            <td>H1 font style</td>
//        </tr>
//        <tr>
//            <th>@h1__line-height</th>
//            <td class="vars_value">@heading__line-height__base</td>
//            <td>H1 line height</td>
//        </tr>
//        <tr>
//            <th>@h1__margin-top</th>
//            <td class="vars_value">0</td>
//            <td>H1 margin top</td>
//        </tr>
//        <tr>
//            <th>@h1__margin-bottom</th>
//            <td class="vars_value">@heading__margin-bottom__base</td>
//            <td>H1 margin bottom</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">H2</th>
//        </tr>
//        <tr>
//            <th>@h2__font-size</th>
//            <td class="vars_value">ceil((@font-size__base * 1.85)) // 26px</td>
//            <td>H2 font size</td>
//        </tr>
//        <tr>
//            <th>@h2__font-color</th>
//            <td class="vars_value">@heading__color__base</td>
//            <td>H2 color</td>
//        </tr>
//        <tr>
//            <th>@h2__font-family</th>
//            <td class="vars_value">@heading__font-family__base</td>
//            <td>H2 font family</td>
//        </tr>
//        <tr>
//            <th>@h2__font-weight</th>
//            <td class="vars_value">@heading__font-weight__base</td>
//            <td>H2 font weight</td>
//        </tr>
//        <tr>
//            <th>@h2__font-style</th>
//            <td class="vars_value">@heading__font-style__base</td>
//            <td>H2 font style</td>
//        </tr>
//        <tr>
//            <th>@h2__line-height</th>
//            <td class="vars_value">@heading__line-height__base</td>
//            <td>H2 line height</td>
//        </tr>
//        <tr>
//            <th>@h2__margin-top</th>
//            <td class="vars_value">@indent__m</td>
//            <td>H2 margin top</td>
//        </tr>
//        <tr>
//            <th>@h2__margin-bottom</th>
//            <td class="vars_value">@heading__margin-bottom__base</td>
//            <td>H2 margin bottom</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">H3</th>
//        </tr>
//        <tr>
//            <th>@h3__font-size</th>
//            <td class="vars_value">ceil((@font-size__base * 1.28)) // 18px</td>
//            <td>H3 font size</td>
//        </tr>
//        <tr>
//            <th>@h3__font-color</th>
//            <td class="vars_value">@heading__color__base</td>
//            <td>H3 color</td>
//        </tr>
//        <tr>
//            <th>@h3__font-family</th>
//            <td class="vars_value">@heading__font-family__base</td>
//            <td>H3 font family</td>
//        </tr>
//        <tr>
//            <th>@h3__font-weight</th>
//            <td class="vars_value">@heading__font-weight__base</td>
//            <td>H3 font weight</td>
//        </tr>
//        <tr>
//            <th>@h3__font-style</th>
//            <td class="vars_value">@heading__font-style__base</td>
//            <td>H3 font style</td>
//        </tr>
//        <tr>
//            <th>@h3__line-height</th>
//            <td class="vars_value">@heading__line-height__base</td>
//            <td>H3 line height</td>
//        </tr>
//        <tr>
//            <th>@h3__margin-top</th>
//            <td class="vars_value">@indent__base * .75</td>
//            <td>H3 margin top</td>
//        </tr>
//        <tr>
//            <th>@h3__margin-bottom</th>
//            <td class="vars_value">@indent__s</td>
//            <td>H3 margin bottom</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">H4</th>
//        </tr>
//        <tr>
//            <th>@h4__font-size</th>
//            <td class="vars_value">@font-size__base // 14px</td>
//            <td>H4 font size</td>
//        </tr>
//        <tr>
//            <th>@h4__font-color</th>
//            <td class="vars_value">@heading__color__base</td>
//            <td>H4 color</td>
//        </tr>
//        <tr>
//            <th>@h4__font-family</th>
//            <td class="vars_value">@heading__font-family__base</td>
//            <td>H4 font family</td>
//        </tr>
//        <tr>
//            <th>@h4__font-weight</th>
//            <td class="vars_value">@font-weight__bold</td>
//            <td>H4 font weight</td>
//        </tr>
//        <tr>
//            <th>@h4__font-style</th>
//            <td class="vars_value">@heading__font-style__base</td>
//            <td>H4 font style</td>
//        </tr>
//        <tr>
//            <th>@h4__line-height</th>
//            <td class="vars_value">@heading__line-height__base</td>
//            <td>H4 line height</td>
//        </tr>
//        <tr>
//            <th>@h4__margin-top</th>
//            <td class="vars_value">@heading__margin-top__base</td>
//            <td>H4 margin top</td>
//        </tr>
//        <tr>
//            <th>@h4__margin-bottom</th>
//            <td class="vars_value">@heading__margin-bottom__base</td>
//            <td>H4 margin bottom</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">H5</th>
//        </tr>
//        <tr>
//            <th>@h5__font-size</th>
//            <td class="vars_value">ceil((@font-size__base * .85)) // 12px</td>
//            <td>H5 font size</td>
//        </tr>
//        <tr>
//            <th>@h5__font-color</th>
//            <td class="vars_value">@heading__color__base</td>
//            <td>H5 color</td>
//        </tr>
//        <tr>
//            <th>@h5__font-family</th>
//            <td class="vars_value">@heading__font-family__base</td>
//            <td>H5 font family</td>
//        </tr>
//        <tr>
//            <th>@h5__font-weight</th>
//            <td class="vars_value">@font-weight__bold</td>
//            <td>H5 font weight</td>
//        </tr>
//        <tr>
//            <th>@h5__font-style</th>
//            <td class="vars_value">@heading__font-style__base</td>
//            <td>H5 font style</td>
//        </tr>
//        <tr>
//            <th>@h5__line-height</th>
//            <td class="vars_value">@heading__line-height__base</td>
//            <td>H5 line height</td>
//        </tr>
//        <tr>
//            <th>@h5__margin-top</th>
//            <td class="vars_value">@heading__margin-top__base</td>
//            <td>H5 margin top</td>
//        </tr>
//        <tr>
//            <th>@h5__margin-bottom</th>
//            <td class="vars_value">@heading__margin-bottom__base</td>
//            <td>H5 margin bottom</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">H6</th>
//        </tr>
//        <tr>
//            <th>@h6__font-size</th>
//            <td class="vars_value">ceil((@font-size__base * .7)) // 10px</td>
//            <td>H6 font size</td>
//        </tr>
//        <tr>
//            <th>@h6__font-color</th>
//            <td class="vars_value">@heading__color__base</td>
//            <td>H6 color</td>
//        </tr>
//        <tr>
//            <th>@h6__font-family</th>
//            <td class="vars_value">@heading__font-family__base</td>
//            <td>H6 font family</td>
//        </tr>
//        <tr>
//            <th>@h6__font-weight</th>
//            <td class="vars_value">@heading__font-weight__base</td>
//            <td>H6 font weight</td>
//        </tr>
//        <tr>
//            <th>@h6__font-style</th>
//            <td class="vars_value">@heading__font-style__base</td>
//            <td>H6 font style</td>
//        </tr>
//        <tr>
//            <th>@h6__line-height</th>
//            <td class="vars_value">@heading__line-height__base</td>
//            <td>H6 line height</td>
//        </tr>
//        <tr>
//            <th>@h6__margin-top</th>
//            <td class="vars_value">@heading__margin-top__base</td>
//            <td>H6 margin top</td>
//        </tr>
//        <tr>
//            <th>@h6__margin-bottom</th>
//            <td class="vars_value">@heading__margin-bottom__base</td>
//            <td>H6 margin bottom</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">&lt;small&gt; tags and tags with class .small placed in H1-H6 headings</th>
//        </tr>
//        <tr>
//            <th>@heading__small-color</th>
//            <td class="vars_value">@primary__color</td>
//            <td>&lt;small&gt; and .small heading element color</td>
//        </tr>
//        <tr>
//            <th>@heading__small-line-height</th>
//            <td class="vars_value">1</td>
//            <td>&lt;small&gt; and .small heading element line height</td>
//        </tr>
//        <tr>
//            <th>@heading__small-size</th>
//            <td class="vars_value">(@font-size__xs/@font-size__base) * 100%</td>
//            <td>&lt;small&gt; and .small heading element font size</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Focus</th>
//        </tr>
//        <tr>
//            <th>@focus__box-shadow</th>
//            <td class="vars_value">0 0 3px 1px @focus__color</td>
//            <td>Focused element highlight</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Code blocks</th>
//        </tr>
//        <tr>
//            <th>@code__background-color</th>
//            <td class="vars_value">@panel__background-color</td>
//            <td>Code block background</td>
//        </tr>
//        <tr>
//            <th>@code__color</th>
//            <td class="vars_value">@primary__color__darker</td>
//            <td>Code text color</td>
//        </tr>
//        <tr>
//            <th>@code__font-size</th>
//            <td class="vars_value">@font-size__s</td>
//            <td>Code font size</td>
//        </tr>
//        <tr>
//            <th>@code__padding</th>
//            <td class="vars_value">2px 4px</td>
//            <td>Code padding</td>
//        </tr>
//        <tr>
//            <th>@pre__background-color</th>
//            <td class="vars_value">@primary__color__light</td>
//            <td>Preformatted text background color</td>
//        </tr>
//        <tr>
//            <th>@pre__border-color</th>
//            <td class="vars_value">@border-color__base</td>
//            <td>Preformatted text border color</td>
//        </tr>
//        <tr>
//            <th>@pre__border-width</th>
//            <td class="vars_value">@border-width__base</td>
//            <td>Preformatted text border width</td>
//        </tr>
//        <tr>
//            <th>@pre__color</th>
//            <td class="vars_value">@primary__color__darker</td>
//            <td>Preformatted text color</td>
//        </tr>
//        <tr>
//            <th>@kbd__background-color</th>
//            <td class="vars_value">@panel__background-color</td>
//            <td>Keyboard input background</td>
//        </tr>
//        <tr>
//            <th>@kbd__color</th>
//            <td class="vars_value">@primary__color__darker</td>
//            <td>Keyboard input text color</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Blockquote</th>
//        </tr>
//        <tr>
//            <th>@blockquote__border-color</th>
//            <td class="vars_value">@border-color__base</td>
//            <td>Blockquote border color</td>
//        </tr>
//        <tr>
//            <th>@blockquote__border-width</th>
//            <td class="vars_value">0</td>
//            <td>Blockquote border width</td>
//        </tr>
//        <tr>
//            <th>@blockquote__content-before</th>
//            <td class="vars_value">'\2014 \00A0'</td>
//            <td>&quot;-&quot; and space symbols</td>
//        </tr>
//        <tr>
//            <th>@blockquote__font-size</th>
//            <td class="vars_value">@font-size__base</td>
//            <td>Blockquote font size</td>
//        </tr>
//        <tr>
//            <th>@blockquote__font-style</th>
//            <td class="vars_value">@font-style__emphasis</td>
//            <td>Blockquote font style</td>
//        </tr>
//        <tr>
//            <th>@blockquote__margin</th>
//            <td class="vars_value"> 0 0 @indent__base @indent__xl</td>
//            <td>Blockquote margin</td>
//        </tr>
//        <tr>
//            <th>@blockquote__padding</th>
//            <td class="vars_value">0</td>
//            <td>Blockquote padding</td>
//        </tr>
//        <tr>
//            <th>@blockquote-small__color</th>
//            <td class="vars_value">@primary__color</td>
//            <td>Blockquote &lt;small&gt; and .small text color</td>
//        </tr>
//        <tr>
//            <th>@blockquote-small__font-size</th>
//            <td class="vars_value">@font-size__xs</td>
//            <td>Blockquote &lt;small&gt; and .small font size</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Cite</th>
//        </tr>
//        <tr>
//            <th>@cite__font-style</th>
//            <td class="vars_value">@font-style__base</td>
//            <td>Cite font style</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Other elements</th>
//        </tr>
//        <tr>
//            <th>@hr__border-color</th>
//            <td class="vars_value">@border-color__base</td>
//            <td>HR border color</td>
//        </tr>
//        <tr>
//            <th>@hr__border-style</th>
//            <td class="vars_value">solid</td>
//            <td>HR border style</td>
//        </tr>
//        <tr>
//            <th>@hr__border-width</th>
//            <td class="vars_value">@border-width__base</td>
//            <td>HR border width</td>
//        </tr>
//        <tr>
//            <th>@mark__color</th>
//            <td class="vars_value">@primary__color__dark</td>
//            <td>&lt;mark&gt; color</td>
//        </tr>
//        <tr>
//            <th>@mark__background-color</th>
//            <td class="vars_value">@panel__background-color</td>
//            <td>&lt;mark&gt; background</td>
//        </tr>
//        <tr>
//            <th>@abbr__border-color</th>
//            <td class="vars_value">@border-color__base</td>
//            <td>&lt;abbr&gt; border color</td>
//        </tr>
//        <tr>
//            <th>@disable-filters</th>
//            <td class="vars_value">false</td>
//            <td>Disable filters output in css</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Base Typography
//  #### The <code>.lib-typography__base()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_abbr-border-color</th>
//            <td class="vars_value">@abbr__border-color</td>
//            <td class="vars_value">@border-color__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>&lt;abbr&gt; border color</td>
//        </tr>
//        <tr>
//            <th>@_dfn-font-style</th>
//            <td class="vars_value">@font-style__emphasis</td>
//            <td class="vars_value">italic</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>&lt;dfn&gt; font style</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_emphasis-font-style</th>
//            <td class="vars_value">@font-style__emphasis</td>
//            <td class="vars_value">italic</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>&lt;em&gt; font style</td>
//        </tr>
//        <tr>
//            <th>@_hr-border-color</th>
//            <td class="vars_value">@hr__border-color</td>
//            <td class="vars_value">@border-color__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>HR border color</td>
//        </tr>
//        <tr>
//            <th>@_hr-border-style</th>
//            <td class="vars_value">@hr__border-style</td>
//            <td class="vars_value">solid</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>HR border style</td>
//        </tr>
//        <tr>
//            <th>@_hr-border-width</th>
//            <td class="vars_value">@hr__border-width</td>
//            <td class="vars_value">@border-width__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>HR border width</td>
//        </tr>
//        <tr>
//            <th>@_hr-margin-bottom</th>
//            <td class="vars_value">@line-height__computed</td>
//            <td class="vars_value">floor(@font-size__base * @line-height__base)</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>HR margin bottom</td>
//        </tr>
//        <tr>
//            <th>@_hr-margin-top</th>
//            <td class="vars_value">@line-height__computed</td>
//            <td class="vars_value">floor(@font-size__base * @line-height__base)</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>HR margin top</td>
//        </tr>
//        <tr>
//            <th>@_mark-background-color</th>
//            <td class="vars_value">@mark__background-color</td>
//            <td class="vars_value">@panel__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>&lt;mark&gt; background color</td>
//        </tr>
//        <tr>
//            <th>@_mark-color</th>
//            <td class="vars_value">@mark__color</td>
//            <td class="vars_value">@primary__color__dark</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>&lt;mark&gt; color</td>
//        </tr>
//        <tr>
//            <th>@_p-margin-bottom</th>
//            <td class="vars_value">@p__margin-bottom</td>
//            <td class="vars_value">@indent__s</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Paragraph margin bottom</td>
//        </tr>
//        <tr>
//            <th>@_p-margin-top</th>
//            <td class="vars_value">@p__margin-top</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Paragraph margin top</td>
//        </tr>
//        <tr>
//            <th>@_root-font-size</th>
//            <td class="vars_value">@root__font-size</td>
//            <td class="vars_value">62.5%</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Setting font-size for HTML tag</td>
//        </tr>
//        <tr>
//            <th>@_small-font-size</th>
//            <td class="vars_value">@font-size__s</td>
//            <td class="vars_value">ceil(.85 * @font-size__base) // 12</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>&lt;small&gt; tag font size</td>
//        </tr>
//        <tr>
//            <th>@_strong-font-weight</th>
//            <td class="vars_value">@font-weight__bold</td>
//            <td class="vars_value">700</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>&lt;strong&gt; tag font weight</td>
//        </tr>
//        <tr>
//            <th>@_sub-sup-font-size</th>
//            <td class="vars_value">-</td>
//            <td class="vars_value">(@font-size__xs / @font-size__base) * 100%</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>&lt;sup&gt; an &lt;sup&gt; tags font size</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Headings
//  #### The <code>.lib-typography-headings()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_heading-small-size</th>
//            <td class="vars_value">@heading__small-size</td>
//            <td class="vars_value">(@font-size__xs/@font-size__base) * 100%</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>&lt;small&gt; and .small heading element font-size</td>
//        </tr>
//        <tr>
//            <th>@_heading-small-color</th>
//            <td class="vars_value">@heading__small-color</td>
//            <td class="vars_value">@primary__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>&lt;small&gt; and .small heading element color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_heading-small-line-height</th>
//            <td class="vars_value">@heading__small-line-height</td>
//            <td class="vars_value">1</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>&lt;small&gt; and .small heading element line height</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Unordered and Ordered lists
//  #### The <code>.lib-typography-lists()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_list-margin-top</th>
//            <td class="vars_value">@list__margin-top</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>List margin top</td>
//        </tr>
//        <tr>
//            <th>@_list-margin-bottom</th>
//            <td class="vars_value">@list__margin-bottom</td>
//            <td class="vars_value">@indent__m</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>List margin bottom</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_list-item-margin-top</th>
//            <td class="vars_value">@list-item__margin-top</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>List item margin top</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_list-item-margin-bottom</th>
//            <td class="vars_value">@list-item__margin-bottom</td>
//            <td class="vars_value">@indent__s</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>List item margin bottom</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_dl-margin-bottom</th>
//            <td class="vars_value">@dl__margin-bottom</td>
//            <td class="vars_value">@indent__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Definition list margin bottom</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_dl-margin-top</th>
//            <td class="vars_value">@dl__margin-top</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Definition list margin top</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_dt-font-weight</th>
//            <td class="vars_value">@dt__font-weight</td>
//            <td class="vars_value">@font-weight__bold</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Description term font weight</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_dt-margin-bottom</th>
//            <td class="vars_value">@dt__margin-bottom</td>
//            <td class="vars_value">@indent__xs</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Description term margin bottom</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_dt-margin-top</th>
//            <td class="vars_value">@dt__margin-top</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Description term margin top</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_dd-margin-bottom</th>
//            <td class="vars_value">@dd__margin-bottom</td>
//            <td class="vars_value">@indent__s</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Description margin bottom</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_dd-margin-top</th>
//            <td class="vars_value">@dd__margin-top</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Description margin top</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Code (inline and block)
//  #### The <code>.lib-typography-code()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_font-family-monospace</th>
//            <td class="vars_value">@font-family__monospace</td>
//            <td class="vars_value">Menlo, Monaco, Consolas, 'Courier New', monospace</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Monospace font family</td>
//        </tr>
//        <tr>
//            <th>@_code-background-color</th>
//            <td class="vars_value">@code__background-color</td>
//            <td class="vars_value">@panel__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Code block background</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_code-color</th>
//            <td class="vars_value">@code__color</td>
//            <td class="vars_value">@primary__color__darker</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Code text color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_code-padding</th>
//            <td class="vars_value">@code__padding</td>
//            <td class="vars_value">2px 4px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Code block padding</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_code-font-size</th>
//            <td class="vars_value">@code__font-size</td>
//            <td class="vars_value">@font-size__s</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Code block font size</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_kbd-background-color</th>
//            <td class="vars_value">@kbd__background-color</td>
//            <td class="vars_value">@panel__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Keyboard input background</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_kbd-color</th>
//            <td class="vars_value">@kbd__color</td>
//            <td class="vars_value">@primary__color__darker</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Keyboard input text color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_kbd-padding</th>
//            <td class="vars_value">@code__padding</td>
//            <td class="vars_value">2px 4px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Keyboard input padding</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_kbd-font-size</th>
//            <td class="vars_value">@code__font-size</td>
//            <td class="vars_value">@font-size__s</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Keyboard input font size</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pre-background-color</th>
//            <td class="vars_value">@pre__background-color</td>
//            <td class="vars_value">@primary__color__light</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Preformatted text background color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pre-border-width</th>
//            <td class="vars_value">@pre__border-width</td>
//            <td class="vars_value">@border-width__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Preformatted text border width</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pre-border-color</th>
//            <td class="vars_value">@pre__border-color</td>
//            <td class="vars_value">@border-color__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Preformatted text border color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pre-color</th>
//            <td class="vars_value">@pre__color</td>
//            <td class="vars_value">@primary__color__darker</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Text color of preformatted text</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pre-line-height</th>
//            <td class="vars_value">@line-height__base</td>
//            <td class="vars_value">1.428571429</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Preformatted text line height</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pre-margin</th>
//            <td class="vars_value">-</td>
//            <td class="vars_value">0 0 @indent__s</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Preformatted text margin</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pre-padding</th>
//            <td class="vars_value">-</td>
//            <td class="vars_value">@indent__s</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Preformatted text padding</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pre-font-size</th>
//            <td class="vars_value">@code__font-size</td>
//            <td class="vars_value">@font-size__s</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Preformatted text font size</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Blockquotes
//  #### The <code>.lib-typography-blockquote()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_blockquote-border-width</th>
//            <td class="vars_value">@blockquote__border-width</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Blockquote border width</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_blockquote-border-color</th>
//            <td class="vars_value">@blockquote__border-color</td>
//            <td class="vars_value">@border-color__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Blockquote border color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_blockquote-margin</th>
//            <td class="vars_value">@blockquote__margin</td>
//            <td class="vars_value">0 0 @indent__base @indent__xl</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Blockquote margin</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_blockquote-padding</th>
//            <td class="vars_value">@blockquote__padding</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Blockquote padding</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_blockquote-font-size</th>
//            <td class="vars_value">@blockquote__font-size</td>
//            <td class="vars_value">@font-size__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Blockquote font size</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_blockquote-font-style</th>
//            <td class="vars_value">@blockquote__font-style</td>
//            <td class="vars_value">@font-style__emphasis</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Blockquote font style</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_blockquote-small-color</th>
//            <td class="vars_value">@blockquote-small__color</td>
//            <td class="vars_value">@primary__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Blockquote &lt;small&gt; and .small text color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_blockquote-small-line-height</th>
//            <td class="vars_value">@line-height__base</td>
//            <td class="vars_value">1.428571429</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Blockquote &lt;small&gt; and .small line height</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_blockquote-small-font-size</th>
//            <td class="vars_value">@blockquote-small__font-size</td>
//            <td class="vars_value">@font-size__xs</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Blockquote &lt;small&gt; and .small text font size</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_blockquote-small-before-content</th>
//            <td class="vars_value">@blockquote__content-before</td>
//            <td class="vars_value">'\2014 \00A0'</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Blockquote &lt;small&gt; and .small before pseudo element content</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_blockquote-cite</th>
//            <td class="vars_value">@cite__font-style</td>
//            <td class="vars_value">@font-style__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Blockquote cite font style</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_cite</th>
//            <td class="vars_value">@cite__font-style</td>
//            <td class="vars_value">@font-style__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Cite font style</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Structure
//  #### Predefined variables for handle global Z-axis positioning
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th></th>
//        </tr>
//      <tr>
//        <th>@z-index-1</th>
//        <td class="vars_value">100</td>
//        <td class="vars_value">constant</td>
//      </tr>
//      <tr>
//        <th>@z-index-2</th>
//        <td class="vars_value">200</td>
//        <td class="vars_value">constant</td>
//      </tr>
//      <tr>
//        <th>@z-index-3</th>
//        <td class="vars_value">300</td>
//        <td class="vars_value">constant</td>
//      </tr>
//      <tr>
//        <th>@z-index-4</th>
//        <td class="vars_value">400</td>
//        <td class="vars_value">constant</td>
//      </tr>
//      <tr>
//        <th>@z-index-5</th>
//        <td class="vars_value">500</td>
//        <td class="vars_value">constant</td>
//      </tr>
//      <tr>
//        <th>@z-index-6</th>
//        <td class="vars_value">600</td>
//        <td class="vars_value">constant</td>
//      </tr>
//      <tr>
//        <th>@z-index-7</th>
//        <td class="vars_value">700</td>
//        <td class="vars_value">constant</td>
//      </tr>
//      <tr>
//        <th>@z-index-8</th>
//        <td class="vars_value">800</td>
//        <td class="vars_value">constant</td>
//      </tr>
//      <tr>
//        <th>@z-index-9</th>
//        <td class="vars_value">900</td>
//        <td class="vars_value">constant</td>
//      </tr>
//      <tr>
//        <th>@z-index-10</th>
//        <td class="vars_value">1000</td>
//        <td class="vars_value">constant</td>
//      </tr>
//      <tr>
//      <th colspan="3" class="vars_section">Nesting example</th>
//      <tr>
//        <th>@modal__z-index</th>
//        <td class="vars_value">@z-index-9</td>
//        <td class="vars_value">@z-index-N</td>
//      </tr>
//    </table>
//  </pre>
//
//  ## Actions Toolbar
//  #### The <code>.lib-actions-toolbar()</code> mixin variables
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_actions-toolbar-actions-position</th>
//        <td>@actions-toolbar-actions__position</td>
//        <td class="vars_value">justify</td>
//        <td class="vars_value">justify | left | right | center</td>
//        <td>Position for actions in Actions toolbar</td>
//      </tr>
//      <tr>
//        <th>@_actions-toolbar-actions-reverse</th>
//        <td>@actions-toolbar-actions__reverse</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">true | false</td>
//        <td>Reverse primary and secondary blocks position in Actions toolbar</td>
//      </tr>
//      <tr>
//        <th>@_actions-toolbar-margin</th>
//        <td>@actions-toolbar__margin</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Margins of the Actions toolbar</td>
//      </tr>
//      <tr>
//        <th>@_actions-toolbar-padding</th>
//        <td>@actions-toolbar__padding</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Paddings of the Actions toolbar</td>
//      </tr>
//      <tr>
//        <th>@_actions-toolbar-actions-margin</th>
//        <td>@actions-toolbar-actions__margin</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Margins of all .actions in the Actions toolbar</td>
//      </tr>
//      <tr>
//        <th>@_actions-toolbar-primary-actions-margin</th>
//        <td>@actions-toolbar-actions-primary__margin</td>
//        <td class="vars_value">0 @indent__xs 0 0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Margins of primary .actions in the Actions toolbar</td>
//      </tr>
//      <tr>
//        <th>@_actions-toolbar-secondary-actions-margin</th>
//        <td>@actions-toolbar-actions-secondary__margin</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Margins of secondary .actions in the Actions toolbar</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_actions-toolbar-actions-links-margin-top</th>
//        <td>@actions-toolbar-actions-links__margin-top</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Margin-top for links with class .action in the Actions toolbar</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_actions-toolbar-primary-actions-links-margin-top</th>
//        <td>@actions-toolbar-actions-links-primary__margin-top</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Margin-top for primary links with class .action in the Actions toolbar</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_actions-toolbar-secondary-actions-links-margin-top</th>
//        <td>@actions-toolbar-actions-secondary__margin</td>
//        <td class="vars_value">6px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Margin-top for secondary links with class .action in the Actions toolbar</td>
//      </tr>
//    </table>
//  </pre>
//
//  ## Breadcrumbs variables
//  #### The <code>.lib-breadcrumbs()</code> mixin variables
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-font-size</th>
//        <td>@breadcrumbs__font-size</td>
//        <td class="vars_value">@font-size__s</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs font size</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-display</th>
//        <td>@breadcrumbs__display</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | inline | block | inline-block</td>
//        <td>Breadcrumbs links display property</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs__container-margin</th>
//        <td>@breadcrumbs__container-margin</td>
//        <td class="vars_value"> 0 0 @indent__base</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs items padding</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-padding</th>
//        <td>@breadcrumbs__padding</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs items padding</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Breadcrumbs - separator symbol</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-separator-symbol</th>
//        <td>@breadcrumbs-separator__symbol</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | any symbol</td>
//        <td>Breadcrumbs separating symbol</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-separator-color</th>
//        <td>@breadcrumbs-separator__color</td>
//        <td class="vars_value" nowrap="nowrap">@breadcrumbs-current__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs separating symbol color</td>
//      </tr>
//     <tr>
//        <th>@_breadcrumbs-icon-use</th>
//        <td>@breadcrumbs-icon__use</td>
//        <td class="vars_value">true</td>
//        <td class="vars_value">true | false</td>
//        <td>Breadcrumbs separating symbol is an icon</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-icon-font-content</th>
//        <td>@breadcrumbs-icon__font-content</td>
//        <td class="vars_value">@icon-next</td>
//        <td class="vars_value">'' | false | icon</td>
//        <td>Breadcrumbs separating icon symbol</td>
//      </tr>
//      <tr>
//        <th>@_icon-font</th>
//        <td>@breadcrumbs-icon__font</td>
//        <td class="vars_value">@icon-font</td>
//        <td class="vars_value">'' | false | font</td>
//        <td>Breadcrumbs separating icon font</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-size</th>
//        <td>@breadcrumbs-icon__font-size</td>
//        <td class="vars_value">24px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs separating icon font size</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-line-height</th>
//        <td>@breadcrumbs-icon__font-line-height</td>
//        <td class="vars_value">18px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs separating icon line height</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-color</th>
//        <td>@breadcrumbs-icon__font-color</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs separating icon color</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-margin</th>
//        <td>@breadcrumbs-icon__font-margin</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs separating icon margin</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-vertical-align</th>
//        <td>@breadcrumbs-icon__font-vertical-align</td>
//        <td class="vars_value">top</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs separating icon vertical align</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Breadcrumbs - current page</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-color</th>
//        <td>@breadcrumbs-current__color</td>
//        <td class="vars_value">#a3a3a3</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs current page color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-font-weight</th>
//        <td>@breadcrumbs-current__font-weight</td>
//        <td class="vars_value">@font-weight__regular</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs current page font weight</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-background</th>
//        <td>@breadcrumbs-current__background</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs current page background</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-border</th>
//        <td>@breadcrumbs-current__border</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs current page border</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-gradient</th>
//        <td>@breadcrumbs-current__gradient</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">true | false</td>
//        <td>Breadcrumbs current page have gradient background</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-gradient-direction</th>
//        <td>@breadcrumbs-current__gradient-direction</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | vertical | horizontal</td>
//        <td>Direction of breadcrumbs current page background gradient (if there is any)</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-gradient-color-start</th>
//        <td>@breadcrumbs-current__gradient-color-start</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs current page gradient start color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-current-gradient-color-end</th>
//        <td>@breadcrumbs-current__gradient-color-end</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs current page gradient end color</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Breadcrumbs link</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient</th>
//        <td>@breadcrumbs-link__gradient</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">true | false</td>
//        <td>Breadcrumbs items have gradient background</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-direction</th>
//        <td>@breadcrumbs-link__gradient-direction</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | vertical | horizontal</td>
//        <td>Direction of breadcrumbs item background gradient (if there is any)</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Breadcrumbs link - default</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-color</th>
//        <td>@breadcrumbs-link__color</td>
//        <td class="vars_value">@primary__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-background</th>
//        <td>@breadcrumbs-link__background</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item background</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-border</th>
//        <td>@breadcrumbs-link__border</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item border</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-text-decoration</th>
//        <td>@breadcrumbs-link__text-decoration</td>
//        <td class="vars_value">none</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item text decoration</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-color-start</th>
//        <td>@breadcrumbs-link__gradient-color-start</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item gradient start color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-color-end</th>
//        <td>@breadcrumbs-link__gradient-color-end</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item gradient end color</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Breadcrumbs link - visited</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-color-visited</th>
//        <td>@breadcrumbs-link__visited__color</td>
//        <td class="vars_value">@primary__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item visited color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-background-visited</th>
//        <td>@breadcrumbs-link__visited__background</td>
//        <td class="vars_value">@breadcrumbs-link__background</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item visited background</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-border-visited</th>
//        <td>@breadcrumbs-link__visited__border</td>
//        <td class="vars_value">@breadcrumbs-link__border</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item visited border</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-text-decoration-visited</th>
//        <td>@breadcrumbs-link__visited__text-decoration</td>
//        <td class="vars_value">none</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item text decoration</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-color-start-visited</th>
//        <td>@breadcrumbs-link__visited__gradient-color-start</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item visited gradient start color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-color-end-visited</th>
//        <td>@breadcrumbs-link__visited__gradient-color-end</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item visited gradient end color</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Breadcrumbs link - hover</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-color-hover</th>
//        <td>@breadcrumbs-link__hover__color</td>
//        <td class="vars_value">@primary__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item hover color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-background-hover</th>
//        <td>@breadcrumbs-link__hover__background</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item hover background</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-border-hover</th>
//        <td>@breadcrumbs-link__hover__border</td>
//        <td class="vars_value">@breadcrumbs-link__border</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item hover border</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-text-decoration-hover</th>
//        <td>@breadcrumbs-link__hover__text-decoration</td>
//        <td class="vars_value">underline</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item hover text decoration</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-color-start-hover</th>
//        <td>@breadcrumbs-link__hover__gradient-color-start</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item hover gradient start color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-color-end-hover</th>
//        <td>@breadcrumbs-link__hover__gradient-color-end</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item hover gradient end color</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Breadcrumbs link - active</th>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-color-active</th>
//        <td>@breadcrumbs-link__active__color</td>
//        <td class="vars_value">@primary__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item active color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-background-active</th>
//        <td>@breadcrumbs-link__active__background</td>
//        <td class="vars_value">@breadcrumbs-link__background</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item active background</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-border-active</th>
//        <td>@breadcrumbs-link__active__border</td>
//        <td class="vars_value">@breadcrumbs-link__border</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item active border</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-text-decoration-active</th>
//        <td>@breadcrumbs-link__active__text-decoration</td>
//        <td class="vars_value">none</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item active text decoration</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_breadcrumbs-link-gradient-color-start-active</th>
//        <td>@breadcrumbs-link__active__gradient-color-start</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item active gradient start color</td>
//      </tr>
//      <tr>
//        <th>@_breadcrumbs-link-gradient-color-end-active</th>
//        <td>@breadcrumbs-link__active__gradient-color-end</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Breadcrumbs item active gradient end color</td>
//      </tr>
//    </table>
//  </pre>
//
//  ## Button variables
//  #### The <code>.lib-button()</code> mixin variables
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_button-font-family</th>
//        <td>@button__font-family</td>
//        <td class="vars_value">@font-family__base</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button font family</td>
//      </tr>
//      <tr>
//        <th>@_button-font-size</th>
//        <td>@button__font-size</td>
//        <td class="vars_value">@font-size__base</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button font size</td>
//      </tr>
//      <tr>
//        <th>@_button-font-weight</th>
//        <td>@button__font-weight</td>
//        <td class="vars_value">@font-weight__bold</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button font weight</td>
//      </tr>
//      <tr>
//        <th>@_button-cursor</th>
//        <td>@button__cursor</td>
//        <td class="vars_value">pointer</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button cursor</td>
//      </tr>
//      <tr>
//        <th>@_button-display</th>
//        <td>@button__display</td>
//        <td class="vars_value">inline-block</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button display</td>
//      </tr>
//      <tr>
//        <th>@_button-disabled-opacity</th>
//        <td>@button__disabled__opacity</td>
//        <td class="vars_value">.5</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button disabled opacity</td>
//      </tr>
//      <tr>
//        <th>@_button-line-height</th>
//        <td>@button__line-height</td>
//        <td class="vars_value">@font-size__base + 2</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button height</td>
//      </tr>
//      <tr>
//        <th>@_button-width</th>
//        <td>@button__width</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button width</td>
//      </tr>
//      <tr>
//        <th>@_button-margin</th>
//        <td>@button__margin</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button margin</td>
//      </tr>
//      <tr>
//        <th>@_button-padding</th>
//        <td>@button__padding</td>
//        <td class="vars_value">7px 15px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button padding</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient</th>
//        <td>@button__gradient</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | true</td>
//        <td>Button has gradient background</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient-direction</th>
//        <td>@button__gradient-direction</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | vertical | horizontal</td>
//        <td>Direction of button background gradient (if there is any)</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Button default state</th>
//      </tr>
//      <tr>
//        <th>@_button-color</th>
//        <td>@button__color</td>
//        <td class="vars_value">@primary__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button text color</td>
//      </tr>
//      <tr>
//        <th>@_button-background</th>
//        <td>@button__background</td>
//        <td class="vars_value">#f2f2f2</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button background</td>
//      </tr>
//      <tr>
//        <th>@_button-border</th>
//        <td>@button__border</td>
//        <td class="vars_value">1px solid #cdcdcd</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button border</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient-color-start</th>
//        <td>@button__gradient-color-start</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Gradient background start color</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient-color-end</th>
//        <td>@button__gradient-color-end</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Gradient background end color</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Button hover state</th>
//      </tr>
//      <tr>
//        <th>@_button-color-hover</th>
//        <td>@button__hover__color</td>
//        <td class="vars_value">#555</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Hovered button text color</td>
//      </tr>
//      <tr>
//        <th>@_button-background-hover</th>
//        <td>@button__hover__background</td>
//        <td class="vars_value">#e2e2e2</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Hovered button background</td>
//      </tr>
//      <tr>
//        <th>@_button-border-hover</th>
//        <td>@button__hover__border</td>
//        <td class="vars_value">@button__border</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Hovered button border</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_button-gradient-color-start-hover</th>
//        <td>@button__hover__gradient-color-start</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Hovered button gradient background start color</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient-color-end-hover</th>
//        <td>@button__hover__gradient-color-end</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Hovered button gradient background end color</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Button active state</th>
//      </tr>
//      <tr>
//        <th>@_button-color-active</th>
//        <td>@button__active__color</td>
//        <td class="vars_value">@button__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Active button text color</td>
//      </tr>
//      <tr>
//        <th>@_button-background-active</th>
//        <td>@button__active__background</td>
//        <td class="vars_value">@button__hover__background</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Active button background</td>
//      </tr>
//      <tr>
//        <th>@_button-border-active</th>
//        <td>@button__active__border</td>
//        <td class="vars_value">@button__border</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Active button border</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient-color-start-active<br /></th>
//        <td>@button__active__gradient-color-start</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Active button gradient background start color</td>
//      </tr>
//      <tr>
//        <th>@_button-gradient-color-end-active</th>
//        <td>@button__active__gradient-color-end</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Active button gradient background end color</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Button with icon</th>
//      </tr>
//      <tr>
//        <th>@_button-icon-use</th>
//        <td>@button-icon__use</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | true</td>
//        <td>Button has an icon</td>
//      </tr>
//      <tr>
//        <th>@_button-font-content</th>
//        <td>@button-icon__content</td>
//        <td class="vars_value">@icon-settings</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon symbol</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font</th>
//        <td>@button-icon__font</td>
//        <td class="vars_value">@icon-font</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon font</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-size</th>
//        <td>@button-icon__font-size</td>
//        <td class="vars_value">22px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon font size</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-line-height</th>
//        <td>@button-icon__line-height</td>
//        <td class="vars_value" nowrap="nowrap">@button-icon__font-size</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon line height</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-color</th>
//        <td>@button-icon__color</td>
//        <td class="vars_value">inherit</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon color</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-color-hover</th>
//        <td>@button-icon__hover__font-color</td>
//        <td class="vars_value">inherit</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Hovered button icon color</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-color-active</th>
//        <td>@button-icon__active__font-color</td>
//        <td class="vars_value">inherit</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Active button icon color</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-margin</th>
//        <td>@button-icon__margin</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon margin</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-vertical-align</th>
//        <td>@button-icon__vertical-align</td>
//        <td class="vars_value">top</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button icon vertical align</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-position</th>
//        <td>@button-icon__position</td>
//        <td class="vars_value">@icon__position</td>
//        <td class="vars_value">'' | false | before | after</td>
//        <td>Button icon font position</td>
//      </tr>
//      <tr>
//        <th>@_button-icon-font-text-hide</th>
//        <td>@button-icon__text-hide</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | true</td>
//        <td>Button icon text hide</td>
//      </tr>
//    </table>
//  </pre>
//
//  #### The <code>.lib-button-primary()</code> mixin variables
//  In the variables list primary buttons are configured with <code>@button-primary__</code> prefix. So for example to configure primary button background you should use <code>@_button-background</code> variable of the mixin or <code>@button-primary__background</code> of the global variables list.
//
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_button-line-height</th>
//            <td>@button-primary__line-height</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button line-height</td>
//        </tr>
//        <tr>
//            <th>@_button-width</th>
//            <td>@button-primary__width</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button width</td>
//        </tr>
//        <tr>
//            <th>@_button-margin</th>
//            <td>@button-primary__margin</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button margin</td>
//        </tr>
//        <tr>
//            <th>@_button-padding</th>
//            <td>@button-primary__padding</td>
//            <td class="vars_value">@button__padding</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button padding</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient</th>
//            <td>@button-primary__gradient</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | true</td>
//            <td>Button has gradient background</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient-direction</th>
//            <td>@button-primary__gradient-direction</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | vertical | horizontal</td>
//            <td>Direction of button background gradient (if there is any)</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Button default state</th>
//        </tr>
//        <tr>
//            <th>@_button-background</th>
//            <td>@button-primary__background</td>
//            <td class="vars_value">#1979c3</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button background</td>
//        </tr>
//        <tr>
//            <th>@_button-border</th>
//            <td>@button-primary__border</td>
//            <td class="vars_value">1px solid #1979c3</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button border</td>
//        </tr>
//        <tr>
//            <th>@_button-color</th>
//            <td>@button-primary__color</td>
//            <td class="vars_value">#fff</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button text color</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient-color-start</th>
//            <td>@button-primary__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Gradient background start color</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient-color-end</th>
//            <td>@button-primary__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Gradient background end color</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Button hover state</th>
//        </tr>
//        <tr>
//            <th>@_button-background-hover</th>
//            <td>@button-primary__hover__background</td>
//            <td class="vars_value">#006bb4</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered button background</td>
//        </tr>
//        <tr>
//            <th>@_button-border-hover</th>
//            <td>@button-primary__hover__border</td>
//            <td class="vars_value">1px solid #006bb4</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered button border</td>
//        </tr>
//        <tr>
//            <th>@_button-color-hover</th>
//            <td>@button-primary__hover__color</td>
//            <td class="vars_value">@button-primary__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered button text color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_button-gradient-color-start-hover</th>
//            <td>@button-primary__hover__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered button gradient background start color</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient-color-end-hover</th>
//            <td>@button-primary__hover__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered button gradient background end color</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Button active state</th>
//        </tr>
//        <tr>
//            <th>@_button-background-active</th>
//            <td>@button-primary__active__background</td>
//            <td class="vars_value">@button-primary__hover__background</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active button background</td>
//        </tr>
//        <tr>
//            <th>@_button-border-active</th>
//            <td>@button-primary__active__border</td>
//            <td class="vars_value">@button-primary__hover__border</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active button border</td>
//        </tr>
//        <tr>
//            <th>@_button-color-active</th>
//            <td>@button-primary__active__color</td>
//            <td class="vars_value">@button-primary__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active button text color</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient-color-start-active</th>
//            <td>@button-primary__active__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active button gradient background start color</td>
//        </tr>
//        <tr>
//            <th>@_button-gradient-color-end-active</th>
//            <td>@button-primary__active__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active button gradient background end color</td>
//        </tr>
//    </table>
//  </pre>
//
//  #### The <code>.lib-button-revert-secondary-color()</code> mixin variables
//  The <code>.lib-button-revert-secondary-color()</code> mixin is used to revert button styles to secondary color styles.
//
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_button-color</th>
//        <td>@button__color</td>
//        <td class="vars_value">@button__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button color</td>
//      </tr>
//      <tr>
//        <th>@_button-background</th>
//        <td>@button__background</td>
//        <td class="vars_value">@button__background</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button background</td>
//      </tr>
//      <tr>
//        <th>@_button-border</th>
//        <td>@button__border</td>
//        <td class="vars_value">@button__border</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button border</td>
//      </tr>
//      <tr>
//        <th>@_button-color-hover</th>
//        <td>@button__hover__color</td>
//        <td class="vars_value">@button__hover__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button hover color</td>
//      </tr>
//      <tr>
//        <th>@_button-background-hover</th>
//        <td>@button__hover__background</td>
//        <td class="vars_value">@button__hover__background</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button hover background</td>
//      </tr>
//      <tr>
//        <th>@_button-border-hover</th>
//        <td>@button__hover__border</td>
//        <td class="vars_value">@button__hover__border</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button hover border</td>
//      </tr>
//      <tr>
//        <th>@_button-color-active</th>
//        <td>@button__active__color</td>
//        <td class="vars_value">@button__active__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button active color</td>
//      </tr>
//      <tr>
//        <th>@_button-background-active</th>
//        <td>@button__active__background</td>
//        <td class="vars_value">@button__active__background</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button active background</td>
//      </tr>
//      <tr>
//        <th>@_button-border-active</th>
//        <td>@button__active__border</td>
//        <td class="vars_value">@button__active__border</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Button active border</td>
//      </tr>
//    </table>
//  </pre>
//
//  #### The <code>.lib-button-revert-secondary-size()</code> mixin variables
//  The <code>.lib-button-revert-secondary-size()</code> mixin is used to revert button sizes to secondary button sizes.
//
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_button-font-size</th>
//        <td>@button__font-size</td>
//        <td class="vars_value">@button__font-size</td>
//        <td class="vars_value">'' | value</td>
//        <td>Button font size</td>
//      </tr>
//      <tr>
//        <th>@_button-line-height</th>
//        <td>@button__line-height</td>
//        <td class="vars_value">@button__line-height</td>
//        <td class="vars_value">'' | value</td>
//        <td>Button line-height</td>
//      </tr>
//      <tr>
//        <th>@_button-padding</th>
//        <td>@button__padding</td>
//        <td class="vars_value">@button__padding</td>
//        <td class="vars_value">'' | value</td>
//        <td>Button padding</td>
//      </tr>
//    </table>
//  </pre>
//
//  #### The <code>.lib-button-as-link()</code> mixin variables
//  The <code>.lib-button-as-link()</code> mixin is used to make button look like a link. It resets default button styles.
//
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_link-color</th>
//            <td>@link__color</td>
//            <td class="vars_value">@link-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button as a link color</td>
//        </tr>
//        <tr>
//            <th>@_link-color-hover</th>
//            <td>@link__hover__color</td>
//            <td class="vars_value">@link-color-hover</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button as a link hovered color</td>
//        </tr>
//        <tr>
//            <th>@_line-height</th>
//            <td>@line-height__base</td>
//            <td class="vars_value">@line-height-base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button as a link line height</td>
//        </tr>
//        <tr>
//            <th>@_margin</th>
//            <td>-</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button as a link margin</td>
//        </tr>
//        <tr>
//            <th>@_padding</th>
//            <td>-</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Button as a link padding</td>
//        </tr>
//        <tr>
//            <th>@_disabled_opacity</th>
//            <td>@button__disabled__opacity</td>
//            <td class="vars_value">.5</td>
//            <td class="vars_value">range between .1 and .9</td>
//            <td>Button as a link opacity</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Drop-down variables
//  #### The <code>.lib-dropdown()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_toggle-selector</th>
//            <td>-</td>
//            <td class="vars_value">~".action.toggle"</td>
//            <td class="vars_value">Selector</td>
//            <td>Toggle selector</td>
//        </tr>
//        <tr>
//            <th>@_options-selector</th>
//            <td>-</td>
//            <td class="vars_value">~"ul.dropdown"</td>
//            <td class="vars_value">Selector</td>
//            <td>Options selector</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-actions-padding</th>
//            <td>@dropdown-actions__padding</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down toggle element padding</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-min-width</th>
//            <td>@dropdown-list__min-width</td>
//            <td class="vars_value">100%</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down min width value</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-width</th>
//            <td>@dropdown-list__width</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list width value</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-height</th>
//            <td>@dropdown-list__height</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list height value</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-margin-top</th>
//            <td>@dropdown-list__margin-top</td>
//            <td class="vars_value">4px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list margin-top value</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Drop-down list</th>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-position-top</th>
//            <td>@dropdown-list__position-top</td>
//            <td class="vars_value">100%</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list position: top</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-position-right</th>
//            <td>@dropdown-list__position-right</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list position: right</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-position-bottom</th>
//            <td>@dropdown-list__position-bottom</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list position: bottom</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-position-left</th>
//            <td>@dropdown-list__position-left</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list position: left</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-background</th>
//            <td>@dropdown-list__background</td>
//            <td class="vars_value">@color-white</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list background</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-border</th>
//            <td>@dropdown-list__border</td>
//            <td class="vars_value">1px solid #bbb</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list border</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-pointer</th>
//            <td>@dropdown-list__pointer</td>
//            <td class="vars_value">true</td>
//            <td class="vars_value">true | false</td>
//            <td>Drop-down list pointer is visible</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-pointer-border</th>
//            <td>@dropdown-list-pointer__border</td>
//            <td class="vars_value">#bbb</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list pointer border</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-pointer-position</th>
//            <td>@dropdown-list-pointer__position</td>
//            <td class="vars_value">left</td>
//            <td class="vars_value">left | right</td>
//            <td>Drop-down pointer position</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-pointer-position-top</th>
//            <td>@dropdown-list-pointer__position-top</td>
//            <td class="vars_value">-12px</td>
//            <td class="vars_value">value</td>
//            <td>Drop-down pointer top position</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-pointer-position-left-right</th>
//            <td>@dropdown-list-pointer__position-left-right</td>
//            <td class="vars_value">10px</td>
//            <td class="vars_value">value</td>
//            <td>Drop-down pointer left or right position</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-item-border</th>
//            <td>@dropdown-list-item__border</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list item border</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-item-padding</th>
//            <td>@dropdown-list-item__padding</td>
//            <td class="vars_value">3px @indent__xs</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list item padding</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-item-margin</th>
//            <td>@dropdown-list-item__margin</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list item margin</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-item-hover</th>
//            <td>@dropdown-list-item__hover</td>
//            <td class="vars_value">#e8e8e8</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list item hovered background</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-shadow</th>
//            <td>@dropdown-list__shadow</td>
//            <td class="vars_value">0 3px 3px rgba(0,0,0,.15)</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list shadow</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-list-z-index</th>
//            <td>@dropdown-list__z-index</td>
//            <td class="vars_value">100</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down list z-index</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Drop-down icon</th>
//        </tr>
//        <tr>
//            <th>@_dropdown-toggle-icon-content</th>
//            <td>@dropdown-toggle-icon__content</td>
//            <td class="vars_value">@icon-pointer-down</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down toggle icon symbol code for default state</td>
//        </tr>
//        <tr>
//            <th nowrap>@_dropdown-toggle-active-icon-content</th>
//            <td>@dropdown-toggle-icon__active__content</td>
//            <td class="vars_value">@icon-pointer-up</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down toggle icon symbol code for active state</td>
//        </tr>
//        <tr>
//            <th>@_icon-font</th>
//            <td>@dropdown-toggle-icon__font</td>
//            <td class="vars_value">@button-icon__font</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down toggle icon font</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-size</th>
//            <td>@dropdown-toggle-icon__font-size</td>
//            <td class="vars_value">@button-icon__font-size</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down toggle icon font size</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-line-height</th>
//            <td>@dropdown-toggle-icon__font-line-height</td>
//            <td class="vars_value">@button-icon__line-height</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down toggle icon line height</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-color</th>
//            <td>@dropdown-toggle-icon__font-color</td>
//            <td class="vars_value">@button-icon__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down toggle icon color</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-color-hover</th>
//            <td>@dropdown-toggle-icon__font-color-hover</td>
//            <td class="vars_value">@button-icon__hover__font-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down toggle icon hovered color</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-color-active</th>
//            <td>@dropdown-toggle-icon__font-color-active</td>
//            <td class="vars_value">@button-icon__active__font-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down toggle icon active color</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-margin</th>
//            <td>@dropdown-toggle-icon__font-margin</td>
//            <td class="vars_value">@button-icon__margin</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down toggle icon margin</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-position</th>
//            <td>@dropdown-toggle-icon__position</td>
//            <td class="vars_value">after</td>
//            <td class="vars_value">before | after</td>
//            <td>Drop-down toggle icon position</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-vertical-align</th>
//            <td>@dropdown-toggle-icon__font-vertical-align</td>
//            <td class="vars_value" nowrap="nowrap">@button-icon__vertical-align</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Drop-down toggle icon vertical align</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-text-hide</th>
//            <td>@dropdown-toggle-icon__text-hide</td>
//            <td class="vars_value">@button-icon__text-hide</td>
//            <td class="vars_value">true | false</td>
//            <td>Text in the tag, that contains icon, is hidden</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Split button variables
//  #### The <code>.lib-dropdown-split()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_toggle-selector</th>
//            <td>-</td>
//            <td class="vars_value">~".action.toggle"</td>
//            <td class="vars_value">selector</td>
//            <td>Split button action toggle selector</td>
//        </tr>
//        <tr>
//            <th>@_options-selector</th>
//            <td>-</td>
//            <td class="vars_value">~"ul.dropdown"</td>
//            <td class="vars_value">selector</td>
//            <td>Split button options selector</td>
//        </tr>
//        <tr>
//            <th>@_button-selector</th>
//            <td>-</td>
//            <td class="vars_value">~".action.split"</td>
//            <td class="vars_value">selector</td>
//            <td>Split button selector</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-actions-padding</th>
//            <td>@dropdown-split-actions__padding</td>
//            <td class="vars_value">0 @indent__xs</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button toggle element padding</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-button-actions-padding</th>
//            <td>@dropdown-split-button__actions__padding</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button actions padding</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-toggle-actions-padding</th>
//            <td>@dropdown-split-toggle__actions__padding</td>
//            <td class="vars_value">4px @indent__xs</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button toggle padding</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-toggle-position</th>
//            <td>@dropdown-split-toggle__position</td>
//            <td class="vars_value">right</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button toggle element position</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Drop-down list</th>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-min-width</th>
//            <td>@dropdown-split-list__min-width</td>
//            <td class="vars_value">100%</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button min width</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-width</th>
//            <td>@dropdown-split-list__width</td>
//            <td class="vars_value">100%</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button width</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-height</th>
//            <td>@dropdown-split-list__height</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button height</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-margin-top</th>
//            <td>@dropdown-split-list__margin-top</td>
//            <td class="vars_value">4px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button margin-top</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-position-top</th>
//            <td>@dropdown-split-list__position-top</td>
//            <td class="vars_value">@dropdown-list__position-top</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list position: top</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-position-right</th>
//            <td>@dropdown-split-list__position-right</td>
//            <td class="vars_value">@dropdown-list__position-right</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list position: right</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-position-bottom</th>
//            <td>@dropdown-split-list__position-bottom</td>
//            <td class="vars_value">@dropdown-list__position-bottom</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list position: bottom</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-position-left</th>
//            <td>@dropdown-split-list__position-left</td>
//            <td class="vars_value">@dropdown-list__position-left</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list position: left</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-background</th>
//            <td>@dropdown-split-list__background</td>
//            <td class="vars_value">@dropdown-list__background</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down background</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-border</th>
//            <td>@dropdown-split-list__border</td>
//            <td class="vars_value">@dropdown-list__border</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down border</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-pointer</th>
//            <td>@dropdown-split-list__pointer</td>
//            <td class="vars_value">@dropdown-list__pointer</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list pointer</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-pointer-border</th>
//            <td>@dropdown-split-list__pointer-border</td>
//            <td class="vars_value">@dropdown-list-pointer__border</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list pointer border</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-button-border-radius-fix</th>
//            <td>@dropdown-split-button__border-radius-fix</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">true | false</td>
//            <td>Split button drop-down list item border</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-item-border</th>
//            <td>@dropdown-split-list__item-border</td>
//            <td class="vars_value">@dropdown-list-item__border</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list item border</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-item-padding</th>
//            <td>@dropdown-split-list__item-padding</td>
//            <td class="vars_value">@dropdown-list-item__padding</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list item padding</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-item-margin</th>
//            <td>@dropdown-split-list__item-margin</td>
//            <td class="vars_value">@dropdown-list-item__margin</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list item margin</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-item-hover</th>
//            <td>@dropdown-split-list__item-hover</td>
//            <td class="vars_value">@dropdown-list-item__hover</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list item hovered background</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-pointer-position</th>
//            <td>@dropdown-split-list__pointer-position</td>
//            <td class="vars_value">right</td>
//            <td class="vars_value">left | right</td>
//            <td>Split button drop-down list pointer position</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-pointer-position-top</th>
//            <td>@dropdown-split-list__pointer-position-top</td>
//            <td class="vars_value">-12px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list pointer position top</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-pointer-position-left-right</th>
//            <td>@dropdown-split-list__pointer-position-left-right</td>
//            <td class="vars_value">10px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list pointer left or right position</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-shadow</th>
//            <td>@dropdown-split-list__shadow</td>
//            <td class="vars_value">@dropdown-list__shadow</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list shadow</td>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-list-z-index</th>
//            <td>@dropdown-split-list__z-index</td>
//            <td class="vars_value">@dropdown-list__z-index</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down list z-index</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Dropdown icon</th>
//        </tr>
//        <tr>
//            <th>@_dropdown-split-toggle-icon-content</th>
//            <td>@dropdown-split-toggle-icon__content</td>
//            <td class="vars_value">@dropdown-toggle-icon__content</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down toggle icon - default state</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_dropdown-split-toggle-active-icon-content</th>
//            <td>@dropdown-split-toggle-icon__active__content</td>
//            <td class="vars_value" nowrap="nowrap">@dropdown-toggle-icon__active__content</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down toggle icon - active state</td>
//        </tr>
//        <tr>
//            <th>@_icon-font</th>
//            <td>@dropdown-split-toggle-icon__font</td>
//            <td class="vars_value">@button-icon__font</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down toggle icon font</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-size</th>
//            <td>@dropdown-split-toggle-icon__font-size</td>
//            <td class="vars_value">@button-icon__font-size</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down toggle icon font size</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-line-height</th>
//            <td>@dropdown-split-toggle-icon__font-line-height</td>
//            <td class="vars_value">@button-icon__line-height</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down toggle icon line height</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-color</th>
//            <td>@dropdown-split-toggle-icon__font-color</td>
//            <td class="vars_value">@button-icon__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down toggle icon color</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-color-hover</th>
//            <td>@dropdown-split-toggle-icon__font-color-hover</td>
//            <td class="vars_value">@button-icon__hover__font-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down toggle icon hovered color</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-color-active</th>
//            <td>@dropdown-split-toggle-icon__font-color-active</td>
//            <td class="vars_value">@button-icon__active__font-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down toggle icon active color</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-margin</th>
//            <td>@dropdown-split-toggle-icon__font-margin</td>
//            <td class="vars_value">@button-icon__margin</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down toggle icon margin</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-position</th>
//            <td>@dropdown-split-toggle-icon__position</td>
//            <td class="vars_value">after</td>
//            <td class="vars_value">before | after</td>
//            <td>Split button drop-down toggle icon position</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-vertical-align</th>
//            <td>@dropdown-split-toggle-icon__font-vertical-align</td>
//            <td class="vars_value" nowrap="nowrap">@button-icon__vertical-align</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Split button drop-down toggle icon vertical align</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-text-hide</th>
//            <td>@dropdown-split-toggle-icon__text-hide</td>
//            <td class="vars_value">@button-icon__text-hide</td>
//            <td class="vars_value">true | false</td>
//            <td>The text in the toggle tag is hidden</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Forms variables
//  #### The <code>.lib-form-fieldset()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_border</th>
//            <td class="vars_value">@form-fieldset__border</td>
//            <td class="vars_value">0</td>
//            <td>Fieldset border</td>
//        </tr>
//        <tr>
//            <th>@_margin</th>
//            <td class="vars_value">@form-fieldset__margin</td>
//            <td class="vars_value"> 0 0 @indent__xl</td>
//            <td>Fieldset margin</td>
//        </tr>
//        <tr>
//            <th>@_padding</th>
//            <td class="vars_value">@form-fieldset__padding</td>
//            <td class="vars_value">0</td>
//            <td>Fieldset padding</td>
//        </tr>
//        <tr>
//            <th>@_legend-color</th>
//            <td class="vars_value">@form-fieldset-legend__color</td>
//            <td class="vars_value">false</td>
//            <td>Legend color</td>
//        </tr>
//        <tr>
//            <th>@_legend-font-size</th>
//            <td class="vars_value">@form-fieldset-legend__font-size</td>
//            <td class="vars_value">20px</td>
//            <td>Legend font size</td>
//        </tr>
//        <tr>
//            <th>@_legend-font-family</th>
//            <td class="vars_value">@form-fieldset-legend__font-family</td>
//            <td class="vars_value">false</td>
//            <td>Legend font family</td>
//        </tr>
//        <tr>
//            <th>@_legend-font-weight</th>
//            <td class="vars_value">@form-fieldset-legend__font-weight</td>
//            <td class="vars_value">false</td>
//            <td>Legend font weight</td>
//        </tr>
//        <tr>
//            <th>@_legend-font-style</th>
//            <td class="vars_value">@form-fieldset-legend__font-style</td>
//            <td class="vars_value">false</td>
//            <td>Legend font style</td>
//        </tr>
//        <tr>
//            <th>@_legend-line-height</th>
//            <td class="vars_value">@form-fieldset-legend__line-height</td>
//            <td class="vars_value">1.2</td>
//            <td>Legend line height</td>
//        </tr>
//        <tr>
//            <th>@_legend-margin</th>
//            <td class="vars_value">@form-fieldset-legend__margin</td>
//            <td class="vars_value">0 0 @indent__m</td>
//            <td>Legend margin</td>
//        </tr>
//        <tr>
//            <th>@_legend-padding</th>
//            <td class="vars_value">@form-fieldset-legend__padding</td>
//            <td class="vars_value">0</td>
//            <td>Legend padding</td>
//        </tr>
//        <tr>
//            <th>@_legend-width</th>
//            <td class="vars_value">@form-fieldset-legend__width</td>
//            <td class="vars_value">false</td>
//            <td>Legend width</td>
//        </tr>
//    </table>
//  </pre>
//
//  #### The <code>.lib-form-field()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default values [Allowed values]</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_type</th>
//            <td class="vars_value">@form-field-type</td>
//            <td class="vars_value">inline [inline | block]</td>
//            <td>How to display from field element and its label. When set to 'inline' they are displayed side-by-side. When set to 'block' the label is displayed above the control</td>
//        </tr>
//        <tr>
//            <th>@_border</th>
//            <td class="vars_value">@form-field__border</td>
//            <td class="vars_value">false</td>
//            <td>Border of the &lt;div class=&quot;field&quot;&gt; element</td>
//        </tr>
//        <tr>
//            <th>@_column</th>
//            <td class="vars_value">@form-field-column</td>
//            <td class="vars_value">false [true | false]</td>
//            <td>Form fields are displayed in columns</td>
//        </tr>
//        <tr>
//            <th>@_column-padding</th>
//            <td class="vars_value">@form-field-column__padding</td>
//            <td class="vars_value">0 12px 0 0</td>
//            <td>Form fields column padding</td>
//        </tr>
//        <tr>
//            <th>@_column-number</th>
//            <td class="vars_value">@form-field-column__number</td>
//            <td class="vars_value">2</td>
//            <td>Form fields number of columns</td>
//        </tr>
//        <tr>
//            <th>@_type-block-margin</th>
//            <td class="vars_value">@form-field-type-block__margin</td>
//            <td class="vars_value">0 0 @form-field__vertical-indent</td>
//            <td>Form fields margin if @form-field-type set to is 'block'</td>
//        </tr>
//        <tr>
//            <th>@_type-inline-margin</th>
//            <td class="vars_value">@form-field-type-inline__margin</td>
//            <td class="vars_value">0 0 @form-field__vertical-indent</td>
//            <td>Form fields margin if @form-field-type is set to 'inline'</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Form field label</th>
//        </tr>
//        <tr>
//            <th>@_label-color</th>
//            <td class="vars_value">@form-field-label__align</td>
//            <td class="vars_value">false</td>
//            <td>Field label text color</td>
//        </tr>
//        <tr>
//            <th>@_label-color</th>
//            <td class="vars_value">@form-field-label__color</td>
//            <td class="vars_value">false</td>
//            <td>Field label text color</td>
//        </tr>
//        <tr>
//            <th>@_label-font-size</th>
//            <td class="vars_value">@form-field-label__font-size</td>
//            <td class="vars_value">false</td>
//            <td>Field label font size</td>
//        </tr>
//        <tr>
//            <th>@_label-font-family</th>
//            <td class="vars_value">@form-field-label__font-family</td>
//            <td class="vars_value">false</td>
//            <td>Field label font family</td>
//        </tr>
//        <tr>
//            <th>@_label-font-weight</th>
//            <td class="vars_value">@form-field-label__font-weight</td>
//            <td class="vars_value">@font-weight__bold</td>
//            <td>Field label font weight</td>
//        </tr>
//        <tr>
//            <th>@_label-font-style</th>
//            <td class="vars_value">@form-field-label__font-style</td>
//            <td class="vars_value">false</td>
//            <td>Field label font style</td>
//        </tr>
//        <tr>
//            <th>@_label-line-height</th>
//            <td class="vars_value">@form-field-label__line-height</td>
//            <td class="vars_value">false</td>
//            <td>Field label line height</td>
//        </tr>
//        <tr>
//            <th>@_type-block-label-margin</th>
//            <td class="vars_value">@form-field-type-label-block__margin</td>
//            <td class="vars_value">0 0 @indent__xs</td>
//            <td>Field label margin if @form-field-type is set to 'block'</td>
//        </tr>
//        <tr>
//            <th>@_type-inline-label-padding</th>
//            <td class="vars_value">@form-field-type-label-inline__padding</td>
//            <td class="vars_value" nowrap>@form-field-type-label-inline__padding-top 15px 0 0</td>
//            <td>Field label padding if @form-field-type is set to 'inline'</td>
//        </tr>
//        <tr>
//            <th>@_type-inline-label-width</th>
//            <td class="vars_value">@form-field-type-label-inline__width</td>
//            <td class="vars_value">25.8%</td>
//            <td>Field label width if @form-field-type is set to 'inline'</td>
//        </tr>
//        <tr>
//            <th>@_type-inline-control-width</th>
//            <td class="vars_value">@form-field-type-control-inline__width</td>
//            <td class="vars_value">74.2%</td>
//            <td>Field control width if @form-field-type is set to 'inline'</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Label &quot;required&quot; asterisk</th>
//        </tr>
//        <tr>
//            <th>@_label-asterisk-color</th>
//            <td class="vars_value">@form-field-label-asterisk__color</td>
//            <td class="vars_value">#da370a</td>
//            <td>Label asterisk color</td>
//        </tr>
//        <tr>
//            <th>@_label-asterisk-font-size</th>
//            <td class="vars_value">@form-field-label-asterisk__font-size</td>
//            <td class="vars_value">@font-size__s</td>
//            <td>Label asterisk font size</td>
//        </tr>
//        <tr>
//            <th>@_label-asterisk-font-family</th>
//            <td class="vars_value">@form-field-label-asterisk__font-family</td>
//            <td class="vars_value">false</td>
//            <td>Label asterisk font family</td>
//        </tr>
//        <tr>
//            <th>@_label-asterisk-font-weight</th>
//            <td class="vars_value">@form-field-label-asterisk__font-weight</td>
//            <td class="vars_value">false</td>
//            <td>Label asterisk font weight</td>
//        </tr>
//        <tr>
//            <th>@_label-asterisk-font-style</th>
//            <td class="vars_value">@form-field-label-asterisk__font-style</td>
//            <td class="vars_value">false</td>
//            <td>Label asterisk font style</td>
//        </tr>
//        <tr>
//            <th>@_label-asterisk-line-height</th>
//            <td class="vars_value">@form-field-label-asterisk__line-height</td>
//            <td class="vars_value">false</td>
//            <td>Label asterisk line height</td>
//        </tr>
//        <tr>
//            <th>@_label-asterisk-margin</th>
//            <td class="vars_value">@form-field-label-asterisk__margin</td>
//            <td class="vars_value">0 0 0 @indent__xs</td>
//            <td>Label asterisk margin</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Field note</th>
//        </tr>
//        <tr>
//            <th>@_note-color</th>
//            <td class="vars_value">@form-field-note__color</td>
//            <td class="vars_value">false</td>
//            <td>Field note text color</td>
//        </tr>
//        <tr>
//            <th>@_note-font-size</th>
//            <td class="vars_value">@form-field-note__font-size</td>
//            <td class="vars_value">@font-size__s</td>
//            <td>Field note font size</td>
//        </tr>
//        <tr>
//            <th>@_note-font-family</th>
//            <td class="vars_value">@form-field-note__font-family</td>
//            <td class="vars_value">false</td>
//            <td>Field note font family</td>
//        </tr>
//        <tr>
//            <th>@_note-font-weight</th>
//            <td class="vars_value">@form-field-note__font-weight</td>
//            <td class="vars_value">false</td>
//            <td>Field note font weight</td>
//        </tr>
//        <tr>
//            <th>@_note-font-style</th>
//            <td class="vars_value">@form-field-note__font-style</td>
//            <td class="vars_value">false</td>
//            <td>Field note font style</td>
//        </tr>
//        <tr>
//            <th>@_note-line-height</th>
//            <td class="vars_value">@form-field-note__line-height</td>
//            <td class="vars_value">false</td>
//            <td>Field note line height</td>
//        </tr>
//        <tr>
//            <th>@_note-margin</th>
//            <td class="vars_value">@form-field-note__margin</td>
//            <td class="vars_value">3px 0 0</td>
//            <td>Field note margin</td>
//        </tr>
//        <tr>
//            <th>@_note-padding</th>
//            <td class="vars_value">@form-field-note__padding</td>
//            <td class="vars_value">0</td>
//            <td>Field note padding</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-content</th>
//            <td class="vars_value">@form-field-note-icon-font__content</td>
//            <td class="vars_value">@icon-pointer-up</td>
//            <td>Field note icon code</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font</th>
//            <td class="vars_value">@form-field-note-icon-font</td>
//            <td class="vars_value">@icon-font</td>
//            <td>Field note icon font</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-size</th>
//            <td class="vars_value">@form-field-note-icon-font__size</td>
//            <td class="vars_value">@form-field-note__font-size*2</td>
//            <td>Field note icon font size</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-line-height</th>
//            <td class="vars_value">@form-field-note-icon-font__line-height</td>
//            <td class="vars_value">@form-field-note__font-size</td>
//            <td>Field note icon line height</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-color</th>
//            <td class="vars_value">@form-field-note-icon-font__color</td>
//            <td class="vars_value">@form-field-note__color</td>
//            <td>Field note icon color</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-color-hover</th>
//            <td class="vars_value">@form-field-note-icon-font__color-hover</td>
//            <td class="vars_value">false</td>
//            <td>Field note icon hovered color</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-color-active</th>
//            <td class="vars_value">@form-field-note-icon-font__color-active</td>
//            <td class="vars_value">false</td>
//            <td>Field note icon active color</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-margin</th>
//            <td class="vars_value">@form-field-note-icon-font__margin</td>
//            <td class="vars_value">false</td>
//            <td>Field note icon margin</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_note-icon-font-vertical-align</th>
//            <td class="vars_value" nowrap="nowrap">@form-field-note-icon-font__vertical-align</td>
//            <td class="vars_value">@icon-font__vertical-align</td>
//            <td>Field note icon vertical align</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-position</th>
//            <td class="vars_value">@form-field-note-icon-font__position</td>
//            <td class="vars_value">@icon-font__position [before | after]</td>
//            <td>Field note icon position</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-text-hide</th>
//            <td class="vars_value">@form-field-note-icon-font__text-hide</td>
//            <td class="vars_value">@icon-font__text-hide [true | false]</td>
//            <td>Field note icon text hide</td>
//        </tr>
//    </table>
//  </pre>
//
//  #### The <code>.lib-form-hasrequired()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default values [Allowed values]</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_position</th>
//            <td class="vars_value">@form-hasrequired__position</td>
//            <td class="vars_value">top [top | bottom]</td>
//            <td>Position of &quot;required fields&quot; notice</td>
//        </tr>
//        <tr>
//            <th>@_color</th>
//            <td class="vars_value">@form-hasrequired__color</td>
//            <td class="vars_value">@form-field-label-asterisk__color</td>
//            <td>Text color of &quot;required fields&quot; notice</td>
//        </tr>
//        <tr>
//            <th>@_font-size</th>
//            <td class="vars_value">@form-hasrequired__font-size</td>
//            <td class="vars_value">@font-size__s</td>
//            <td>Font size of &quot;required fields&quot; notice</td>
//        </tr>
//        <tr>
//            <th>@_font-family</th>
//            <td class="vars_value">@form-hasrequired__font-family</td>
//            <td class="vars_value">false</td>
//            <td>Font family of &quot;required fields&quot; notice</td>
//        </tr>
//        <tr>
//            <th>@_font-weight</th>
//            <td class="vars_value">@form-hasrequired__font-weight</td>
//            <td class="vars_value">false</td>
//            <td>Font weight of &quot;required fields&quot; notice</td>
//        </tr>
//        <tr>
//            <th>@_font-style</th>
//            <td class="vars_value">@form-hasrequired__font-style</td>
//            <td class="vars_value">false</td>
//            <td>Font style of &quot;required fields&quot; notice</td>
//        </tr>
//        <tr>
//            <th>@_line-height</th>
//            <td class="vars_value">@form-hasrequired__line-height</td>
//            <td class="vars_value">false</td>
//            <td>Line height of &quot;required fields&quot; notice</td>
//        </tr>
//        <tr>
//            <th>@_border</th>
//            <td class="vars_value">@form-hasrequired__border</td>
//            <td class="vars_value">false</td>
//            <td>Border of &quot;required fields&quot; notice</td>
//        </tr>
//        <tr>
//            <th>@_margin</th>
//            <td class="vars_value">@form-hasrequired__margin</td>
//            <td class="vars_value">@indent__s 0 0</td>
//            <td>Margin of &quot;required fields&quot; notice</td>
//        </tr>
//        <tr>
//            <th>@_padding</th>
//            <td class="vars_value">@form-hasrequired__padding</td>
//            <td class="vars_value">false</td>
//            <td>Padding of &quot;required fields&quot; notice</td>
//        </tr>
//    </table>
//  </pre>
//
//  #### The <code>.lib-form-element-input()</coed> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value [Allowed value]</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_type</th>
//            <td class="vars_value">@form-element-input-type</td>
//            <td class="vars_value">'' [input-text | select | textarea | input-radio | input-checkbox]</td>
//            <td>Form control type.<br/><b>@form-element-input__[]</b> global variables are used to set up all form elements style. Control-specific global variables use these <b>@form-element-input__[]</b> variables by default. Control-specific global variables can be set up separately.<br/><b>@input-text__[]</b> is used to set up input-text controls style<br/><b>@select__[]</b> is used to set up selects style<br/><b>@textarea__[]</b> is used to set up textarea style</td>
//        </tr>
//        <tr>
//            <th>@_background</th>
//            <td class="vars_value">@form-element-input__background<br/>@input-text__background<br/>@selectbackground<br/>@textarea__background</td>
//            <td class="vars_value">@color-white<br/>@form-element-input__background<br/>@form-element-input__background<br/>@form-element-input__background</td>
//            <td>Form control background</td>
//        </tr>
//        <tr>
//            <th>@_border</th>
//            <td class="vars_value">@form-element-input__border<br/>@input-text__border<br/>@select__border<br/>@textarea__border</td>
//            <td class="vars_value" nowrap="nowrap">1px solid @form-element-input__border-color<br/>@form-element-input__border<br/>@form-element-input__border<br/>@form-element-input__border</td>
//            <td>Form control border</td>
//        </tr>
//        <tr>
//            <th>@_border-radius</th>
//            <td class="vars_value" nowrap="nowrap">@form-element-input__border-radius<br/>@input-textborder-radius<br/>@select__border-radius<br/>@textarea__border-radius</td>
//            <td class="vars_value">1px<br/>@form-element-input__border-radius<br/>@form-element-input__border-radius<br/>@form-element-input__border-radius</td>
//            <td>Form control border radius</td>
//        </tr>
//        <tr>
//            <th>@_height</th>
//            <td class="vars_value">@form-element-input__height<br/>@input-text__height<br/>@select__height<br/>@textarea__height</td>
//            <td class="vars_value">32px<br/>@form-element-input__height<br/>@form-element-input__height<br/>auto</td>
//            <td>Form control height</td>
//        </tr>
//        <tr>
//            <th>@_width</th>
//            <td class="vars_value">@form-element-input__width<br/>@input-text__width<br/>@select__width<br/>@textarea__width</td>
//            <td class="vars_value">100%<br/>@form-element-input__width<br/>@form-element-input__width<br/>@form-element-input__width</td>
//            <td>Form control width</td>
//        </tr>
//        <tr>
//            <th>@_margin</th>
//            <td class="vars_value">@form-element-input__margin<br/>@input-text__margin<br/>@select__margin<br/>@textarea__margin</td>
//            <td class="vars_value">false [true | false]<br/>@form-element-input__margin<br/>@form-element-input__margin<br/>0</td>
//            <td>Form control margin</td>
//        </tr>
//        <tr>
//            <th>@_padding</th>
//            <td class="vars_value">@form-element-input__padding<br/>@input-text__padding <br/>@select__padding<br/>@textarea__padding</td>
//            <td class="vars_value">0 9px<br/>@form-element-input__padding<br/>5px 10px 4px<br/>@indent__s</td>
//            <td>Form control padding</td>
//        </tr>
//        <tr>
//            <th>@_vertical-align</th>
//            <td class="vars_value">@form-element-input__vertical-align<br/>@input-text__vertical-align<br/>@select__vertical-align<br/>@textarea__vertical-align</td>
//            <td class="vars_value">baseline<br/>@form-element-input__vertical-align<br/>@form-element-input__vertical-align<br/>@form-element-input__vertical-align</td>
//            <td>Form control vertical align</td>
//        </tr>
//        <tr>
//            <th>@_background-clip</th>
//            <td class="vars_value">@form-element-input__background-clip<br/><br/>@input-text__background-clip<br/>@select__background-clip<br/>@textarea__background-clip</td>
//            <td class="vars_value">padding-box<br/>[padding-box | border-box | content-box]<br/>@form-element-input__background-clip<br/>@form-element-input__background-clip<br/>@form-element-input__background-clip</td>
//            <td>Form control background clip</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Text settings</th>
//        </tr>
//        <tr>
//            <th>@_color</th>
//            <td class="vars_value">@form-element-input__color<br/>@input-text__color<br/>@select__color<br/>@textarea__color</td>
//            <td class="vars_value">false<br/>@form-element-input__color<br/>@form-element-input__color<br/>@form-element-input__color</td>
//            <td>Form control text color</td>
//        </tr>
//        <tr>
//            <th>@_font-size</th>
//            <td class="vars_value">@form-element-input__font-size<br/>@input-text__font-size<br/>@select__font-size<br/>@textarea__font-size</td>
//            <td class="vars_value">@font-size__base<br/>@form-element-input__font-size<br/>@form-element-input__font-size<br/>@form-element-input__font-size</td>
//            <td>Form control font size</td>
//        </tr>
//        <tr>
//            <th>@_font-family</th>
//            <td class="vars_value">@form-element-input__font-family<br/>@input-text__font-family<br/>@select__font-family<br/>@textarea__font-family</td>
//            <td class="vars_value">@font-family__base<br/>@form-element-input__font-family<br/>@form-element-input__font-family<br/>@form-element-input__font-family</td>
//            <td>Form control font family</td>
//        </tr>
//        <tr>
//            <th>@_font-weight</th>
//            <td class="vars_value">@form-element-input__font-weight<br/>@input-text__font-weight<br/>@select__font-weight<br/>@textarea__font-weight</td>
//            <td class="vars_value">false<br/>@form-element-input__font-weight<br/>@form-element-input__font-weight<br/>@form-element-input__font-weight</td>
//            <td>Form control font weight</td>
//        </tr>
//        <tr>
//            <th>@_font-style</th>
//            <td class="vars_value">@form-element-input__font-style<br/>@input-text__font-style<br/>@selectfont-style<br/>@textarea__font-style</td>
//            <td class="vars_value">false<br/>@form-element-input__font-style<br/>@form-element-input__font-style<br/>@form-element-input__font-style</td>
//            <td>Form control font style</td>
//        </tr>
//        <tr>
//            <th>@_line-height</th>
//            <td class="vars_value">@form-element-input__line-height<br/>@input-text__line-height<br/>@select__line-height<br/>@textarea__line-height</td>
//            <td class="vars_value">@line-height__base<br/>@form-element-input__line-height<br/>@form-element-input__line-height<br/>@form-element-input__line-height</td>
//            <td>Form control line height</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Placeholder</th>
//        </tr>
//        <tr>
//            <th>@_placeholder-color</th>
//            <td class="vars_value">@form-element-input-placeholder__color<br/>@input-text-placeholder__color<br/>@select-placeholder__color<br/>@textarea-placeholder__color</td>
//            <td class="vars_value">#c2c2c2<br/>@form-element-input-placeholder__color<br/>@form-element-input-placeholder__color<br/>@form-element-input-placeholder__color</td>
//            <td>Form control placeholder color</td>
//        </tr>
//        <tr>
//            <th nowrap>@_placeholder-font-style</th>
//            <td class="vars_value" nowrap="nowrap">@form-element-input-placeholder__font-style<br/>@inputtext-placeholder-font-style<br/>@select-placeholder__font-style<br/>@textarea-placeholder__font-style</td>
//            <td class="vars_value">@form-element-input__font-style<br/>@form-element-input-placeholder__font-style<br/>@form-element-input-placeholder__font-style<br/>@form-element-input-placeholder__font-style</td>
//            <td>Form control placeholder font style</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Disabled element</th>
//        </tr>
//        <tr>
//            <th>@_disabled-background</th>
//            <td class="vars_value" nowrap="nowrap">@form-element-input__disabled__background<br/>@inputtextdisabled-background<br/>@select__disabled__background<br/>@textarea__disabled__background</td>
//            <td class="vars_value">@form-element-input__background<br/>@form-element-input__disabled__background<br/>@form-element-input__disabled__background<br/>@form-element-input__disabled__background</td>
//            <td>Disabled form element background</td>
//        </tr>
//        <tr>
//            <th>@_disabled-border</th>
//            <td class="vars_value">@form-element-input__disabled__border<br/>@input-text__disabled__border<br/>@select__disabled__border<br/>@textarea__disabled__border</td>
//            <td class="vars_value">@form-element-input__border<br/>@form-element-input__disabled__border<br/>@form-element-input__disabled__border<br/>@form-element-input__disabled__border</td>
//            <td>Disabled form element border</td>
//        </tr>
//        <tr>
//            <th>@_disabled-opacity</th>
//            <td class="vars_value">@form-element-input__disabled__opacity<br/>@input-text__disabled__opacity<br/>@select__disabled__opacity<br/>@textarea__disabled__opacity</td>
//            <td class="vars_value">.5<br/>@form-element-input__disabled__opacity<br/>@form-element-input__disabled__opacity<br/>@form-element-input__disabled__opacity</td>
//            <td>Disabled form element opacity</td>
//        </tr>
//        <tr>
//            <th>@_disabled-color</th>
//            <td class="vars_value">@form-element-input__disabled__color<br/>@input-text__disabled__color<br/>@select__disabled__color<br/>@textarea__disabled__color</td>
//            <td class="vars_value">@form-element-input__color<br/>@form-element-input__disabled__color<br/>@form-element-input__disabled__color<br/>@form-element-input__disabled__color</td>
//            <td>Disabled form element text color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_disabled-font-style</th>
//            <td class="vars_value">@form-element-input__disabled__font-style<br/>@input-text__disabled__font-style<br/>@select__disabled__font-style<br/>@textarea__disabled__font-style</td>
//            <td class="vars_value">@form-element-input__font-style<br/>@form-element-input__disabled__font-style<br/>@form-element-input__disabled__font-style<br/>@form-element-input__disabled__font-style</td>
//            <td>Disabled form element font style</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Focused elements</th>
//        </tr>
//        <tr>
//            <th>@_focus-background</th>
//            <td class="vars_value">@form-element-input__focus__background<br/>@input-text__focus__background<br/>@select__focus__background<br/>@textarea__focus__background</td>
//            <td class="vars_value">@form-element-input__background<br/>@form-element-input__focus__background<br/>@form-element-input__focus__background<br/>@form-element-input__focus__background</td>
//            <td>Focused form element background</td>
//        </tr>
//        <tr>
//            <th>@_focus-border</th>
//            <td class="vars_value">@form-element-input__focus__border<br/>@input-text__focus__border<br/>@select__focus__border<br/>@textarea__focus__border</td>
//            <td class="vars_value">@form-element-input__border<br/>@form-element-input__focus__border<br/>@form-element-input__focus__border<br/>@form-element-input__focus__border</td>
//            <td>Focused form element border</td>
//        </tr>
//        <tr>
//            <th>@_focus-color</th>
//            <td class="vars_value">@form-element-input__focus__color<br/>@input-text__focus__color<br/>@select__focus__color<br/>@textarea__focus__color</td>
//            <td class="vars_value">@form-element-input__color<br/>@form-element-input__focus__color<br/>@form-element-input__focus__color<br/>@form-element-input__focus__color</td>
//            <td>Focused form element color</td>
//        </tr>
//        <tr>
//            <th>@_focus-font-style</th>
//            <td class="vars_value">@form-element-input__focus__font-style<br/>@input-text__focus__font-style<br/>@select__focus__font-style<br/>@textarea__focus__font-style</td>
//            <td class="vars_value">@form-element-input__font-style<br/>@form-element-input__focus__font-style<br/>@form-element-input__focus__font-style<br/>@form-element-input__focus__font-style</td>
//            <td>Focused form element font style</td>
//        </tr>
//    </table>
//  </pre>
//
//  #### The <code>.lib-form-element-choise()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default values [Allowed values]</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_type</th>
//            <td class="vars_value">@form-element-choice__type</td>
//            <td class="vars_value">'' ['' | radio | checkbox]</td>
//            <td>Choice element type</td>
//        </tr>
//        <tr>
//            <th>@_vertical-align</th>
//            <td class="vars_value">@form-element-choice__vertical-align<br>@input-radio__vertical-align<br>@input-checkbox__vertical-align</td>
//            <td class="vars_value">false<br/>@form-element-choice__vertical-align<br/>@form-element-choice__vertical-align</td>
//            <td>Choice element vertical align</td>
//        </tr>
//        <tr>
//            <th>@_margin</th>
//            <td class="vars_value">@form-element-choice__margin<br>@input-radio__margin<br>@input-checkbox__margin</td>
//            <td class="vars_value">2px @indent__xs 0 0<br/>@form-element-choice__margin<br/>@form-element-choice__margin</td>
//            <td>Choice element margin</td>
//        </tr>
//        <tr>
//            <th>@_disabled-opacity</th>
//            <td class="vars_value">@form-element-choice__disabled__opacity<br>@input-radio__disabled__opacity<br>@input-checkbox__disabled__opacity</td>
//            <td class="vars_value">@form-element-input__disabled__opacity<br/>@form-element-choice__disabled__opacity<br/>@form-element-choice__disabled__opacity</td>
//            <td>Disabled choice element opacity</td>
//        </tr>
//    </table>
//  </pre>
//
//  #### The <code>.lib-form-validation-note()</code> mixin
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default values [Allowed values]</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_note-color</th>
//            <td class="vars_value">@form-validation-note__color-error</td>
//            <td class="vars_value">@error__color</td>
//            <td>Validation note text color</td>
//        </tr>
//        <tr>
//            <th>@_note-font-size</th>
//            <td class="vars_value">@form-validation-note__font-size</td>
//            <td class="vars_value">@font-size__s</td>
//            <td>Validation note font size</td>
//        </tr>
//        <tr>
//            <th>@_note-font-family</th>
//            <td class="vars_value">@form-validation-note__font-family</td>
//            <td class="vars_value">false</td>
//            <td>Validation note font family</td>
//        </tr>
//        <tr>
//            <th>@_note-font-style</th>
//            <td class="vars_value">@form-validation-note__font-style</td>
//            <td class="vars_value">false</td>
//            <td>Validation note font style</td>
//        </tr>
//        <tr>
//            <th>@_note-font-weight</th>
//            <td class="vars_value">@form-validation-note__font-weight</td>
//            <td class="vars_value">false</td>
//            <td>Validation note font weight</td>
//        </tr>
//        <tr>
//            <th>@_note-line-height</th>
//            <td class="vars_value">@form-validation-note__line-height</td>
//            <td class="vars_value">false</td>
//            <td>Validation note line height</td>
//        </tr>
//        <tr>
//            <th>@_note-margin</th>
//            <td class="vars_value">@form-validation-note__margin</td>
//            <td class="vars_value">3px 0 0</td>
//            <td>Validation note margin</td>
//        </tr>
//        <tr>
//            <th>@_note-padding</th>
//            <td class="vars_value">@form-validation-note__padding</td>
//            <td class="vars_value">false</td>
//            <td>Validation note padding</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-use</th>
//            <td class="vars_value">@form-validation-note-icon__use</td>
//            <td class="vars_value">false [true | false]</td>
//            <td>Show validation note icon</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-content</th>
//            <td class="vars_value">@form-validation-note-icon__font-content</td>
//            <td class="vars_value">@icon-pointer-up</td>
//            <td>Validation note icon code</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font</th>
//            <td class="vars_value">@form-validation-note-icon__font</td>
//            <td class="vars_value">@icon-font</td>
//            <td>Validation note icon font</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-size</th>
//            <td class="vars_value">@form-validation-note-icon__font-size</td>
//            <td class="vars_value">@form-validation-note__font-size * 2</td>
//            <td>Validation note icon font size</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-line-height</th>
//            <td class="vars_value">@form-validation-note-icon__font-line-height</td>
//            <td class="vars_value">@form-validation-note__font-size</td>
//            <td>Validation note icon line height</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-color</th>
//            <td class="vars_value">@form-validation-note-icon__font-color</td>
//            <td class="vars_value">@form-validation-note__color-error</td>
//            <td>Validation note icon color</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-color-hover</th>
//            <td class="vars_value">@form-validation-note-icon__font-color-hover</td>
//            <td class="vars_value">false</td>
//            <td>Hovered validation note icon color</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-color-active</th>
//            <td class="vars_value">@form-validation-note-icon__font-color-active</td>
//            <td class="vars_value">false</td>
//            <td>Active validation note icon color</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-margin</th>
//            <td class="vars_value">@form-validation-note-icon__font-margin</td>
//            <td class="vars_value">false</td>
//            <td>Validation note icon margin</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-vertical-align</th>
//            <td class="vars_value">@form-validation-note-icon__font-vertical-align</td>
//            <td class="vars_value">@icon-font__vertical-align</td>
//            <td>Validation note icon vertical align</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-position</th>
//            <td class="vars_value">@form-validation-note-icon__font-position</td>
//            <td class="vars_value">@icon-font__position</td>
//            <td>Validation note icon position</td>
//        </tr>
//        <tr>
//            <th>@_note-icon-font-text-hide</th>
//            <td class="vars_value">@form-validation-note-icon__font-text-hide</td>
//            <td class="vars_value">@icon-font__text-hide</td>
//            <td>Validation note icon text hide</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Font icon variables
//  #### The <code>.lib-icon-font()</code> mixin variables
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_icon-font-content</th>
//        <td>-</td>
//        <td class="vars_value">&nbsp;</td>
//        <td class="vars_value">'' | icon code | icon variables</td>
//        <td>Font icon code</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-font</th>
//        <td>@icon-font</td>
//        <td class="vars_value">@icons__font-name</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>The icon font</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-size</th>
//        <td>@icon-font__size</td>
//        <td class="vars_value">inherit</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Font icon size</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-line-height</th>
//        <td>@icon-font__line-height</td>
//        <td class="vars_value">@icon-font__size</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Font icon line height</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-font-color</th>
//        <td>@icon-font__color</td>
//        <td class="vars_value">inherit</td>
//        <td class="vars_value">'' | inherit | color code</td>
//        <td>Font icon color</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-color-hover</th>
//        <td>@icon-font__color-hover</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | inherit | color code</td>
//        <td>Font icon color - hover state</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-color-active</th>
//        <td>@icon-font__color-active</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | inherit | color code</td>
//        <td>Font icon color - active state</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-font-margin</th>
//        <td>@icon-font__margin</td>
//        <td class="vars_value">@icon__margin</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Font icon margin</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-font-vertical-align</th>
//        <td>@icon-font__vertical-align</td>
//        <td class="vars_value" nowrap="nowrap">@icon__vertical-align</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Font icon vertical align</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-font-position</th>
//        <td>@icon-font__position</td>
//        <td class="vars_value">@icon__position</td>
//        <td class="vars_value">before | after</td>
//        <td>Font icon position</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-text-hide</th>
//        <td>@icon-font__text-hide</td>
//        <td class="vars_value">@icon__text-hide</td>
//        <td class="vars_value">true | false</td>
//        <td>The text of the element is replaced with the icon(true), or the icon is on the side of the text (false)</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-display</th>
//        <td>@icon-font__display</td>
//        <td class="vars_value">inline-block</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>The 'display' property of the icon container</td>
//      </tr>
//    </table>
//  </pre>
//
//  ## Icon with image or sprite variables
//  #### The <code>.lib-icon-image()</code> mixin variables
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_icon-image</th>
//        <td></td>
//        <td class="vars_value">-</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>A link to an image or sprite, mandatory parameter</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-height</th>
//        <td>@icon__height</td>
//        <td class="vars_value">26px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Icon image height</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-width</th>
//        <td>@icon__width</td>
//        <td class="vars_value">26px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Icon image width</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-margin</th>
//        <td>@icon__margin</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Icon image margin</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-image-vertical-align</th>
//        <td>@icon__vertical-align</td>
//        <td class="vars_value">middle</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Icon image vertical align</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-position-x</th>
//        <td>@icon-image__position-x</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Horizontal image position</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-position-y</th>
//        <td>@icon-image__position-y</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Vertical image position</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-position</th>
//        <td>@icon__position</td>
//        <td class="vars_value">before</td>
//        <td class="vars_value">before | after</td>
//        <td>Icon image position</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-text-hide</th>
//        <td>@icon__text-hide</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">true | false</td>
//        <td>The text in the &lt;span&gt; tag should be hidden</td>
//      </tr>
//    </table>
//  </pre>
//
//  ## Icon position for an icon with image or sprite variables
//  #### The <code>.lib-icon-image-position()</code> mixin variables
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_icon-image-position-x</th>
//        <td>@icon-image__position-x</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Horizontal starting position of icon image</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-image-position-y</th>
//        <td>@icon-image__position-y</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Vertical starting position of icon image</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-position</th>
//        <td>-</td>
//        <td class="vars_value">-</td>
//        <td class="vars_value">before | after</td>
//        <td>Position of the icon which is set for the element</td>
//      </tr>
//    </table>
//  </pre>
//
//  ## Icon sprite position variables
//  #### The <code>.lib-icon-sprite-position()</code> mixin variables
//  <pre>
//    <table>
//    <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_icon-sprite-position-x</th>
//        <td>@icon-sprite__position-x</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>The x coordinate of the desired image on the grid</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-sprite-position-y</th>
//        <td>@icon-sprite__position-y</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>The y coordinate of the desired image on the grid</td>
//      </tr>
//      <tr>
//        <th>@_icon-sprite-grid</th>
//        <td>@icon-sprite__grid</td>
//        <td class="vars_value">26px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>The size of the grid (in pixels) that the individal images are placed on</td>
//      </tr>
//      <tr>
//        <th>@_icon-sprite-position</th>
//        <td>@icon__position</td>
//        <td class="vars_value">before</td>
//        <td class="vars_value">before | after</td>
//        <td>Icon image position</td>
//      </tr>
//    </table>
//  </pre>
//
//  ## Image/sprite icon size variables
//  #### The <code>.lib-icon-image-size()</code> mixin variables
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_icon-image-width</th>
//        <td>@icon__width</td>
//        <td class="vars_value">26px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Icon image width</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-image-height</th>
//        <td>@icon__height</td>
//        <td class="vars_value">26px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Icon image height</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-position</th>
//        <td>@icon__position</td>
//        <td class="vars_value">before</td>
//        <td class="vars_value">before | after</td>
//        <td>Icon image position</td>
//      </tr>
//    </table>
//  </pre>
//
//  ## Layout variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Variables list names</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@layout__width</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Page minimum width</td>
//        </tr>
//        <tr>
//            <th>@layout__max-width</th>
//            <td class="vars_value">1280px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Page maximum width</td>
//        </tr>
//        <tr>
//            <th>@layout-indent__width</th>
//            <td class="vars_value">20px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Page indents on the left and right</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Class names defining different layouts</th>
//        </tr>
//        <tr>
//            <th>@layout-class-1column</th>
//            <td class="vars_value">page-layout-1column</td>
//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
//            <td>Class name for one column layout</td>
//        </tr>
//        <tr>
//            <th>@layout-class-2columns__left</th>
//            <td class="vars_value">page-layout-2columns-left</td>
//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
//            <td>Class name for two columns layout with left sidebar</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@layout-class-2columns__right</th>
//            <td class="vars_value">page-layout-2columns-right</td>
//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
//            <td>Class name for two columns layout with right sidebar</td>
//        </tr>
//        <tr>
//            <th>@layout-class-3columns</th>
//            <td class="vars_value">page-layout-3columns</td>
//            <td class="vars_value">'' | false | <nobr>page-layout-1column</nobr> | <nobr>page-layout-2columns-left</nobr> | <nobr>page-layout-2columns-right</nobr> | <nobr>page-layout-3columns</nobr></td>
//            <td>Class name for three columns layout with left sidebar</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Variables used for layout grid</th>
//        </tr>
//        <tr>
//            <th>@total-columns</th>
//            <td class="vars_value">12</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Number of total columns in layout (i.e. <em>1, 2, 3</em>)</td>
//        </tr>
//        <tr>
//            <th>@gutter-width</th>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Distanse between columns</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Variables for layout columns</th>
//        </tr>
//        <tr>
//            <th>@layout-column__width</th>
//            <td class="vars_value">@total-columns</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets base columns number</td>
//        </tr>
//        <tr>
//            <th>@layout-column__sidebar-width</th>
//            <td class="vars_value">2</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets sidebar width</td>
//        </tr>
//        <tr>
//            <th>@layout-column__left-width</th>
//            <td class="vars_value">@layout-column__sidebar-width</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets left column width</td>
//        </tr>
//        <tr>
//            <th>@layout-column__right-width</th>
//            <td class="vars_value">@layout-column__sidebar-width</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets right column width</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Variables for layout columns depending on layout used</th>
//        </tr>
//        <tr>
//            <th>@layout-column-main__width-1</th>
//            <td class="vars_value">100%</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets one column width</td>
//        </tr>
//        <tr>
//            <th>@layout-column-main__width-2-left</th>
//            <td class="vars_value">@layout-column__width - @layout-column__left-width</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets left column width</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@layout-column-main__width-2-right</th>
//            <td class="vars_value">@layout-column__width - @layout-column__right-width</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets right column width</td>
//        </tr>
//        <tr>
//            <th>@layout-column-main__width-3</th>
//            <td class="vars_value">@layout-column__width - @layout-column__left-width - @layout-column__right-width</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Sets three columns layout main column width</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Settings variables</th>
//        </tr>
//        <tr>
//            <th>@use-flex</th>
//            <td class="vars_value">true</td>
//            <td class="vars_value">'' | true | false</td>
//            <td>Sets compatibility for browsers not supporting flex</td>
//        </tr>
//        <tr>
//            <th>@responsive</th>
//            <td class="vars_value">true</td>
//            <td class="vars_value">'' | true | false</td>
//            <td>Is set to true if theme has responsive layout</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Loader variables
//  #### The <code>.lib-loader()</code> mixin variables
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_loader-overlay-background-color</th>
//        <td>@loader-overlay__background-color</td>
//        <td class="vars_value">rgba(255, 255, 255, .5)</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader overlay background color</td>
//      </tr>
//      <tr>
//        <th>@_loader-overlay-z-index</th>
//        <td>@loader-overlay__z-index</td>
//        <td class="vars_value">9999</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader overlay background z-index</td>
//      </tr>
//      <tr>
//        <th>@_loader-icon-width</th>
//        <td>@loader-icon__width</td>
//        <td class="vars_value">160px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader icon width</td>
//      </tr>
//      <tr>
//        <th>@_loader-icon-height</th>
//        <td>@loader-icon__height</td>
//        <td class="vars_value">160px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader icon height</td>
//      </tr>
//      <tr>
//        <th>@_loader-icon-background-color</th>
//        <td>@loader-icon__background-color</td>
//        <td class="vars_value">transparent</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader icon background color</td>
//      </tr>
//      <tr>
//        <th>@_loader-icon-background-image</th>
//        <td>@loader-icon__background-image</td>
//        <td class="vars_value">url('@{baseDir}images/loader-2.gif')</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader icon ackground image</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_loader-icon-background-position</th>
//        <td>@loader-icon__background-position</td>
//        <td class="vars_value">50% 50%</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader icon background position</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_loader-icon-border-radius</th>
//        <td>@loader-icon__border-radius</td>
//        <td class="vars_value">5px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader icon border radius</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_loader-icon-padding</th>
//        <td>@loader-icon__padding</td>
//        <td class="vars_value">''</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader icon icon padding</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_loader-text</th>
//        <td>@loader-text</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader text presence</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_loader-text-color</th>
//        <td>@loader-text__color</td>
//        <td class="vars_value">@primary__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader text color</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_loader-text-font-size</th>
//        <td>@loader-text__font-size</td>
//        <td class="vars_value">@font-size__base</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader text font size</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_loader-text-font-family</th>
//        <td>@loader-text__font-family</td>
//        <td class="vars_value">@font-family__base</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader text font family</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_loader-text-font-weight</th>
//        <td>@loader-text__font-weight</td>
//        <td class="vars_value">@font-weight__regular</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader text font weight</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_loader-text-font-style</th>
//        <td>@loader-text__font-style</td>
//        <td class="vars_value">@font-style__base</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader text font style</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_loader-text-padding</th>
//        <td>@loader-text__padding</td>
//        <td class="vars_value">130px 0 0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loader text padding</td>
//      </tr>
//    </table>
//  </pre>
//
//  ## Loading variables
//  #### The <code>.lib-loading()</code> mixin variables
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_loading-background-color</th>
//        <td>@loading__background-color</td>
//        <td class="vars_value">@loader-overlay__background-color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loading overlay background color</td>
//      </tr>
//      <tr>
//        <th>@_loading-background-image</th>
//        <td>@loading__background-image</td>
//        <td class="vars_value">@loader-icon__background-image</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Loading overlay background z-index</td>
//      </tr>
//    </table>
//  </pre>
//
//  ## Messages variables
//  #### The <code>.lib-message()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@message__padding</th>
//            <td class="vars_value">@indent__s @indent__base</td>
//            <td class="vars_value">'' | value</td>
//            <td>Message padding</td>
//        </tr>
//        <tr>
//            <th>@message__margin</th>
//            <td class="vars_value">@indent__xs 0</td>
//            <td class="vars_value">'' | value</td>
//            <td>Message margin</td>
//        </tr>
//        <tr>
//            <th>@message__color</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">true | false</td>
//            <td>Each message type has its own message color</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Messages font style</th>
//        </tr>
//        <tr>
//            <th>@message__font-size</th>
//            <td class="vars_value">13px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message font size</td>
//        </tr>
//        <tr>
//            <th>@message__font-family</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message font family</td>
//        </tr>
//        <tr>
//            <th>@message__font-style</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message font style</td>
//        </tr>
//        <tr>
//            <th>@message__font-weight</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message font weight</td>
//        </tr>
//        <tr>
//            <th>@message__line-height</th>
//            <td class="vars_value">1.2em</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message line height</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Message icon setup</th>
//        </tr>
//        <tr>
//            <th>@message-icon__font-size</th>
//            <td class="vars_value">ceil(@message__font-size * 2 + 2)</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon font size</td>
//        </tr>
//        <tr>
//            <th>@message-icon__font-line-height</th>
//            <td class="vars_value">@message-icon__font-size</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon line height</td>
//        </tr>
//        <tr>
//            <th>@message-icon__inner-padding-left</th>
//            <td class="vars_value">40px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon padding left</td>
//        </tr>
//        <tr>
//            <th>@message-icon__lateral-width</th>
//            <td class="vars_value">30px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon lateral width</td>
//        </tr>
//        <tr>
//            <th>@message-icon__lateral-arrow-size</th>
//            <td class="vars_value">5px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon arrow size</td>
//        </tr>
//        <tr>
//            <th>@message-icon__top</th>
//            <td class="vars_value">18px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon top position</td>
//        </tr>
//        <tr>
//            <th>@message-icon__right</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon right position</td>
//        </tr>
//        <tr>
//            <th>@message-icon__bottom</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon bottom position</td>
//        </tr>
//        <tr>
//            <th>@message-icon__left</th>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon left position</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Message border</th>
//        </tr>
//        <tr>
//            <th>@message__border-width</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message border width</td>
//        </tr>
//        <tr>
//            <th>@message__border-color</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message border color</td>
//        </tr>
//        <tr>
//            <th>@message__border-style</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message border style</td>
//        </tr>
//        <tr>
//            <th>@message__border-radius</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message border radius</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Information message</th>
//        </tr>
//        <tr>
//            <th>@message-info__color</th>
//            <td class="vars_value">#6f4400</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Information message text color</td>
//        </tr>
//        <tr>
//            <th>@message-info__background</th>
//            <td class="vars_value">#fdf0d5</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Information message background</td>
//        </tr>
//        <tr>
//            <th>@message-info-link__color</th>
//            <td class="vars_value">@link__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Information message link color</td>
//        </tr>
//        <tr>
//            <th>@message-info-link__color-hover</th>
//            <td class="vars_value">@link__hover__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Information message hovered link color</td>
//        </tr>
//        <tr>
//            <th>@message-info-link__color-active</th>
//            <td class="vars_value">@link__hover__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Information message active link color </td>
//        </tr>
//        <tr>
//            <th>@message-info__border-color</th>
//            <td class="vars_value">@message__border-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Information message border color</td>
//        </tr>
//        <tr>
//            <th>@message-info-icon</th>
//            <td class="vars_value">@icon-warning</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Information message icon symbol code</td>
//        </tr>
//        <tr>
//            <th>@message-info-icon__color-inner</th>
//            <td class="vars_value">#c07600</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Information message icon symbol color </td>
//        </tr>
//        <tr>
//            <th>@message-info-icon__color-lateral</th>
//            <td class="vars_value">@color-white</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Information message lateral icon symbol color</td>
//        </tr>
//        <tr>
//            <th>@message-info-icon__background</th>
//            <td class="vars_value">#6f4400</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Information message icon background</td>
//        </tr>
//        <tr>
//            <th>@message-info-icon__top</th>
//            <td class="vars_value">@message-icon__top</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon top position</td>
//        </tr>
//        <tr>
//            <th>@message-info-icon__right</th>
//            <td class="vars_value">@message-icon__right</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon right position</td>
//        </tr>
//        <tr>
//            <th>@message-info-icon__bottom</th>
//            <td class="vars_value">@message-icon__bottom</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon bottom position</td>
//        </tr>
//        <tr>
//            <th>@message-info-icon__left</th>
//            <td class="vars_value">@message-icon__left</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon left position</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Warning message</th>
//        </tr>
//        <tr>
//            <th>@message-warning__color</th>
//            <td class="vars_value">@message-info__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Warning message text color</td>
//        </tr>
//        <tr>
//            <th>@message-warning__background</th>
//            <td class="vars_value">@message-info__background</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Warning message background</td>
//        </tr>
//        <tr>
//            <th>@message-warning-link__color</th>
//            <td class="vars_value">@message-info-link__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Warning message link color</td>
//        </tr>
//        <tr>
//            <th>@message-warning-link__color-hover</th>
//            <td class="vars_value">@message-info-link__color-hover</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Warning message hovered link color</td>
//        </tr>
//        <tr>
//            <th>@message-warning-link__color-active</th>
//            <td class="vars_value">@message-info-link__color-active</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Warning message active link color </td>
//        </tr>
//        <tr>
//            <th>@message-info__border-color</th>
//            <td class="vars_value">@message-info__border-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Warning message border color</td>
//        </tr>
//        <tr>
//            <th>@message-warning-icon</th>
//            <td class="vars_value">@message-info-icon</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Warning message icon symbol code</td>
//        </tr>
//        <tr>
//            <th>@message-warning-icon__color-inner</th>
//            <td class="vars_value">@message-info-icon__color-inner</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Warning message icon symbol color </td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@message-warning-icon__color-lateral</th>
//            <td class="vars_value" nowrap="nowrap">@message-info-icon__color-lateral</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Warning message lateral icon symbol color</td>
//        </tr>
//        <tr>
//            <th>@message-warning-icon__background</th>
//            <td class="vars_value">@message-info-icon__background</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Warning message icon background</td>
//        </tr>
//        <tr>
//            <th>@message-warning-icon__top</th>
//            <td class="vars_value">@message-icon__top</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon top position</td>
//        </tr>
//        <tr>
//            <th>@message-warning-icon__right</th>
//            <td class="vars_value">@message-icon__right</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon right position</td>
//        </tr>
//        <tr>
//            <th>@message-warning-icon__bottom</th>
//            <td class="vars_value">@message-icon__bottom</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon bottom position</td>
//        </tr>
//        <tr>
//            <th>@message-warning-icon__left</th>
//            <td class="vars_value">@message-icon__left</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon left position</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Error message</th>
//        </tr>
//        <tr>
//            <th>@message-error__color</th>
//            <td class="vars_value">@error__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Error message text color</td>
//        </tr>
//        <tr>
//            <th>@message-error__background</th>
//            <td class="vars_value">#fae5e5</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Error message background</td>
//        </tr>
//        <tr>
//            <th>@message-error-link__color</th>
//            <td class="vars_value">@link__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Error message link color</td>
//        </tr>
//        <tr>
//            <th>@message-error-link__color-hover</th>
//            <td class="vars_value">@link__hover__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Error message hovered link color</td>
//        </tr>
//        <tr>
//            <th>@message-error-link__color-active</th>
//            <td class="vars_value">@link__hover__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Error message active link color </td>
//        </tr>
//        <tr>
//            <th>@message-error__border-color</th>
//            <td class="vars_value">@message__border-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Error message border color</td>
//        </tr>
//        <tr>
//            <th>@message-error-icon</th>
//            <td class="vars_value">@icon-warning</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Error message icon symbol code</td>
//        </tr>
//        <tr>
//            <th>@message-error-icon__color-inner</th>
//            <td class="vars_value">#b30000</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Error message icon symbol color </td>
//        </tr>
//        <tr>
//            <th>@message-error-icon__color-lateral</th>
//            <td class="vars_value">@color-white</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Error message lateral icon symbol color</td>
//        </tr>
//        <tr>
//            <th>@message-error-icon__background</th>
//            <td class="vars_value">#b30000</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Error message icon background</td>
//        </tr>
//        <tr>
//            <th>@message-error-icon__top</th>
//            <td class="vars_value">@message-icon__top</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon top position</td>
//        </tr>
//        <tr>
//            <th>@message-error-icon__right</th>
//            <td class="vars_value">@message-icon__right</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon right position</td>
//        </tr>
//        <tr>
//            <th>@message-error-icon__bottom</th>
//            <td class="vars_value">@message-icon__bottom</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon bottom position</td>
//        </tr>
//        <tr>
//            <th>@message-error-icon__left</th>
//            <td class="vars_value">@message-icon__left</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon left position</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Success message</th>
//        </tr>
//        <tr>
//            <th>@message-success__color</th>
//            <td class="vars_value">#006400</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Success message text color</td>
//        </tr>
//        <tr>
//            <th>@message-success__background</th>
//            <td class="vars_value">#e5efe5</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Success message background</td>
//        </tr>
//        <tr>
//            <th>@message-success-link__color</th>
//            <td class="vars_value">@link__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Success message link color</td>
//        </tr>
//        <tr>
//            <th>@message-success-link__color-hover</th>
//            <td class="vars_value">@link__hover__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Success message hovered link color</td>
//        </tr>
//        <tr>
//            <th>@message-success-link__color-active</th>
//            <td class="vars_value">@link__hover__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Success message active link color </td>
//        </tr>
//        <tr>
//            <th>@message-success__border-color</th>
//            <td class="vars_value">@message__border-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Success message border color</td>
//        </tr>
//        <tr>
//            <th>@message-success-icon</th>
//            <td class="vars_value">@icon-checkmark</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Success message icon symbol code</td>
//        </tr>
//        <tr>
//            <th>@message-success-icon__color-inner</th>
//            <td class="vars_value">#006400</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Success message icon symbol color </td>
//        </tr>
//        <tr>
//            <th>@message-success-icon__color-lateral</th>
//            <td class="vars_value">@color-white</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Success message lateral icon symbol color</td>
//        </tr>
//        <tr>
//            <th>@message-success-icon__background</th>
//            <td class="vars_value">#006400</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Success message icon background</td>
//        </tr>
//        <tr>
//            <th>@message-success-icon__top</th>
//            <td class="vars_value">@message-icon__top</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon top position</td>
//        </tr>
//        <tr>
//            <th>@message-success-icon__right</th>
//            <td class="vars_value">@message-icon__right</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon right position</td>
//        </tr>
//        <tr>
//            <th>@message-success-icon__bottom</th>
//            <td class="vars_value">@message-icon__bottom</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon bottom position</td>
//        </tr>
//        <tr>
//            <th>@message-success-icon__left</th>
//            <td class="vars_value">@message-icon__left</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon left position</td>
//        </tr>
//        <tr>
//            <th colspan="4" class="vars_section">Notice message</th>
//        </tr>
//        <tr>
//            <th>@message-notice__color</th>
//            <td class="vars_value">@message-info__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Notice message text color</td>
//        </tr>
//        <tr>
//            <th>@message-notice__background</th>
//            <td class="vars_value">@message-info__background</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Notice message background</td>
//        </tr>
//        <tr>
//            <th>@message-notice-link__color</th>
//            <td class="vars_value">@message-info-link__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Notice message link color</td>
//        </tr>
//        <tr>
//            <th>@message-notice-link__color-hover</th>
//            <td class="vars_value">@message-info-link__color-hover</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Notice message hovered link color</td>
//        </tr>
//        <tr>
//            <th>@message-notice-link__color-active</th>
//            <td class="vars_value">@message-info-link__color-active</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Notice message active link color </td>
//        </tr>
//        <tr>
//            <th>@message-notice__border-color</th>
//            <td class="vars_value">@message-info__border-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Notice message border color</td>
//        </tr>
//        <tr>
//            <th>@message-notice-icon</th>
//            <td class="vars_value">@message-info-icon</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Notice message icon symbol code</td>
//        </tr>
//        <tr>
//            <th>@message-notice-icon__color-inner</th>
//            <td class="vars_value">@message-info-icon__color-inner</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Notice message icon symbol color </td>
//        </tr>
//        <tr>
//            <th>@message-notice-icon__color-lateral</th>
//            <td class="vars_value">@message-info-icon__color-lateral</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Notice message lateral icon symbol color</td>
//        </tr>
//        <tr>
//            <th>@message-notice-icon__background</th>
//            <td class="vars_value">@message-info-icon__background</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Notice message icon background</td>
//        </tr>
//        <tr>
//            <th>@message-notice-icon__top</th>
//            <td class="vars_value">@message-icon__top</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon top position</td>
//        </tr>
//        <tr>
//            <th>@message-notice-icon__right</th>
//            <td class="vars_value">@message-icon__right</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon right position</td>
//        </tr>
//        <tr>
//            <th>@message-notice-icon__bottom</th>
//            <td class="vars_value">@message-icon__bottom</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon bottom position</td>
//        </tr>
//        <tr>
//            <th>@message-notice-icon__left</th>
//            <td class="vars_value">@message-icon__left</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Message icon left position</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Pagination variables
//  #### The <code>.lib-pager()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-label-display</th>
//            <td>@pager-label__display</td>
//            <td class="vars_value">none</td>
//            <td class="vars_value">none | block | inline-block</td>
//            <td>The 'page' label is displayed</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-item-display</th>
//            <td>@pager-item__display</td>
//            <td class="vars_value">inline-block</td>
//            <td class="vars_value">none | block | inline-block</td>
//            <td>The pager item label is displayed</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-reset-spaces</th>
//            <td>@pager-reset-spaces</td>
//            <td class="vars_value">true</td>
//            <td class="vars_value">true | false</td>
//            <td>Reset spaces between inline-block elements if elements 'display' is set to 'inline-block'</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-font-size</th>
//            <td>@pager__font-size</td>
//            <td class="vars_value">@font-size__s</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager font size</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-font-weight</th>
//            <td>@pager__font-weight</td>
//            <td class="vars_value">@font-weight__bold</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager font weight</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-line-height</th>
//            <td>@pager__line-height</td>
//            <td class="vars_value">32px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager line height</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-item-margin</th>
//            <td>@pager-item__margin</td>
//            <td class="vars_value">0 2px 0 0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item margin</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-item-padding</th>
//            <td>@pager-item__padding</td>
//            <td class="vars_value">0 4px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item padding</td>
//        </tr>
//        <tr>
//            <th>@_pager-actions-padding</th>
//            <td>@pager-actions__padding</td>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager actions padding</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Pager current page</th>
//        </tr>
//        <tr>
//            <th>@_pager-current-font-weight</th>
//            <td>@pager-current__font-weight</td>
//            <td class="vars_value">@font-weight__bold;</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Current page number font weight</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-color</th>
//            <td>@pager-current__color</td>
//            <td class="vars_value">@primary__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Current page number color</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-border</th>
//            <td>@pager-current__border</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Current page number border</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-background</th>
//            <td>@pager-current__background</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Current page number background</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-gradient</th>
//            <td>@pager-current__gradient</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">true | false</td>
//            <td>Current page number has gradient background</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-gradient-direction</th>
//            <td>@pager-current__gradient-direction</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | vertical | horizontal</td>
//            <td>Direction of current page number background gradient (if there is any)</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-gradient-color-start</th>
//            <td>@pager-current__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Current page number gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-current-gradient-color-end</th>
//            <td>@pager-current__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Current page number gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Link to page number</th>
//        </tr>
//        <tr>
//            <th>@_pager-gradient</th>
//            <td>@pager__gradient</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">true | false</td>
//            <td>Pager items have gradient background</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-direction</th>
//            <td>@pager__gradient-direction</td>
//            <td class="vars_value">'false</td>
//            <td class="vars_value">'' | false | vertical | horizontal</td>
//            <td>Direction of background gradient (if there is any) of pager item</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Link to page number - default</th>
//        </tr>
//        <tr>
//            <th>@_pager-color</th>
//            <td>@pager__color</td>
//            <td class="vars_value">@link__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item color</td>
//        </tr>
//        <tr>
//            <th>@_pager-border</th>
//            <td>@pager__border</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item border</td>
//        </tr>
//        <tr>
//            <th>@_pager-text-decoration</th>
//            <td>@pager__text-decoration</td>
//            <td class="vars_value">none</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item text decoration</td>
//        </tr>
//        <tr>
//            <th>@_pager-background</th>
//            <td>@pager__background</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item background</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-color-start</th>
//            <td>@pager__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-color-end</th>
//            <td>@pager__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Link to page number - visited</th>
//        </tr>
//        <tr>
//            <th>@_pager-color-visited</th>
//            <td>@pager__visited__color</td>
//            <td class="vars_value">@link__visited__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item visited color</td>
//        </tr>
//        <tr>
//            <th>@_pager-border-visited</th>
//            <td>@pager__visited__border</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item visited border</td>
//        </tr>
//        <tr>
//            <th>@_pager-background-visited</th>
//            <td>@pager__visited__background</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item visited background</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-color-start-visited</th>
//            <td>@pager__visited__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item visited gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-color-end-visited</th>
//            <td>@pager__visited__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item visited gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Link to page number - hover</th>
//        </tr>
//        <tr>
//            <th>@_pager-color-hover</th>
//            <td>@pager__hover__color</td>
//            <td class="vars_value">@link__hover__color</td>
//            <td class="vars_value">&nbsp;</td>
//            <td>Pager item hover color</td>
//        </tr>
//        <tr>
//            <th>@_pager-border-hover</th>
//            <td>@pager__hover__border</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item hover border</td>
//        </tr>
//        <tr>
//            <th>@_pager-text-decoration-hover</th>
//            <td>@pager__text-decoration</td>
//            <td class="vars_value">none</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item hover text decoration</td>
//        </tr>
//        <tr>
//            <th>@_pager-background-hover</th>
//            <td>@pager__hover__background</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item hover background</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-color-start-hover</th>
//            <td>@pager__hover__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item hover gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-color-end-hover</th>
//            <td>@pager__hover__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item hover gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Link to page number - active</th>
//        </tr>
//        <tr>
//            <th>@_pager-color-active</th>
//            <td>@pager__active__color</td>
//            <td class="vars_value">@link__hover__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item active color</td>
//        </tr>
//        <tr>
//            <th>@_pager-border-active</th>
//            <td>@pager__active__border</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item active border</td>
//        </tr>
//        <tr>
//            <th>@_pager-background-active</th>
//            <td>@pager__active__background</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item active background</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-color-start-active</th>
//            <td>@pager__active__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item active  gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-gradient-color-end-active</th>
//            <td>@pager__active__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager item active  gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Previous/next action links - icons</th>
//        </tr>
//        <tr>
//            <th>@_pager-icon-use</th>
//            <td>@pager-icon__use</td>
//            <td class="vars_value">true</td>
//            <td class="vars_value">true | false</td>
//            <td>previous/next links have icons</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-previous-content</th>
//            <td>@pager-icon__previous-content</td>
//            <td class="vars_value">@icon-prev</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>&quot;previous&quot; link icon</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-next-content</th>
//            <td>@pager-icon__next-content</td>
//            <td class="vars_value">@icon-next</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>&quot;next&quot; link icon</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-text-hide</th>
//            <td></td>
//            <td class="vars_value">true</td>
//            <td class="vars_value">true | false</td>
//            <td>The &quot;previous&quot; and &quot;next&quot; words are hidden</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-position</th>
//            <td></td>
//            <td class="vars_value">before</td>
//            <td class="vars_value">before | after</td>
//            <td>Icon position</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-font</th>
//            <td>@pager-icon__font</td>
//            <td class="vars_value">@icon-font</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Icon font</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-font-margin</th>
//            <td>@pager-icon__font-margin</td>
//            <td class="vars_value">0 0 0 -6px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Icon font margin</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-font-vertical-align</th>
//            <td>@pager-icon__font-vertical-align</td>
//            <td class="vars_value">top</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Icon font vertical align</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-font-size</th>
//            <td>@pager-icon__font-size</td>
//            <td class="vars_value">46px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Icon font size</td>
//        </tr>
//        <tr>
//            <th>@_pager-icon-font-line-height</th>
//            <td>@pager-icon__font-line-height</td>
//            <td class="vars_value">@icon-font__line-height</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Icon font line height</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Previous/next action links</th>
//        </tr>
//        <tr>
//            <th>@_pager-action-gradient</th>
//            <td>@pager__gradient</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">true | false</td>
//            <td>Previous/next links have gradient background</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-gradient-direction</th>
//            <td>@pager__gradient-direction</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | vertical | horizontal</td>
//            <td>Direction of background gradient (if there is any) of previous/next links</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Previous/next action links - default</th>
//        </tr>
//        <tr>
//            <th>@_pager-action-color</th>
//            <td>@pager-action__color</td>
//            <td class="vars_value">@text__color__muted</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action color</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-border</th>
//            <td>@pager-action__border</td>
//            <td class="vars_value">@border-width__base solid @border-color__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action border</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-text-decoration</th>
//            <td>@pager-action__text-decoration</td>
//            <td class="vars_value">@pager__text-decoration</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action text decoration</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-background</th>
//            <td>@pager-action__background</td>
//            <td class="vars_value">@pager__background</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action background</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-gradient-color-start</th>
//            <td>@pager__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-gradient-color-end</th>
//            <td>@pager__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Previous/next action links - visited</th>
//        </tr>
//        <tr>
//            <th>@_pager-action-color-visited</th>
//            <td>@pager-action__visited__color</td>
//            <td class="vars_value">@pager-action__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action visited color</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-border-visited</th>
//            <td>@pager-action__visited__border</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action visited border</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-background-visited</th>
//            <td>@pager-action__visited__background</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action visited background</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-action-gradient-color-start-visited</th>
//            <td>@pager__visited__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action visited gradient start color</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-gradient-color-end-visited</th>
//            <td>@pager__visited__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action visited gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Previous/next action links - hover</th>
//        </tr>
//        <tr>
//            <th>@_pager-action-color-hover</th>
//            <td>@pager-action__hover__color</td>
//            <td class="vars_value">@pager-action__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action hover color</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-border-hover</th>
//            <td>@pager-action__hover__border</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action hover border</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-text-decoration-hover</th>
//            <td>@pager-action__hover__text-decoration</td>
//            <td class="vars_value" nowrap="nowrap">@pager__hover__text-decoration</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action hover text decoration</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-background-hover</th>
//            <td>@pager-action__hover__background</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action hover background</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-action-gradient-color-start-hover</th>
//            <td>@pager__hover__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action hover gradient start color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-action-gradient-color-end-hover</th>
//            <td>@pager__hover__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action hover gradient end color</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Previous/next action links - active</th>
//        </tr>
//        <tr>
//            <th>@_pager-action-color-active</th>
//            <td>@pager-action__active__color</td>
//            <td class="vars_value">@pager-action__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action active color</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-border-active</th>
//            <td>@pager-action__active__border</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action active border</td>
//        </tr>
//        <tr>
//            <th>@_pager-action-background-active</th>
//            <td>@pager-action__active__background</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action active background</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-action-gradient-color-start-active</th>
//            <td>@pager__active__gradient-color-start</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action active gradient start color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_pager-action-gradient-color-end-active</th>
//            <td>@pager__active__gradient-color-end</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Pager action active gradient end color</td>
//        </tr>
//      </table>
//  </pre>
//
//  ## Popup variables
//  #### The <code>.lib-popup()</code> mixin variables
// <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_popup-width</th>
//        <td>@popup__width</td>
//        <td class="vars_value">auto</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup width</td>
//      </tr>
//      <tr>
//        <th>@_popup-height</th>
//        <td>@popup__height</td>
//        <td class="vars_value">auto</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup height</td>
//      </tr>
//      <tr>
//        <th>@_popup-padding</th>
//        <td>@popup__padding</td>
//        <td class="vars_value">22px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Inner popup padding</td>
//      </tr>
//      <tr>
//        <th>@_popup-background</th>
//        <td>@popup__background</td>
//        <td class="vars_value">@color-white</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup background</td>
//      </tr>
//      <tr>
//        <th>@_popup-border</th>
//        <td>@popup__border</td>
//        <td class="vars_value">1px solid #aeaeae</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup border</td>
//      </tr>
//      <tr>
//        <th>@_popup-shadow</th>
//        <td>@popup__shadow</td>
//        <td class="vars_value">0 3px 3px rgba(0,0,0,.15)</td>
//        <td class="vars_value">'' | false | none | value</td>
//        <td>Popup shadow</td>
//      </tr>
//      <tr>
//        <th>@_popup-fade</th>
//        <td>@popup__fade</td>
//        <td class="vars_value">opacity .3s linear</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup overlay opacity</td>
//      </tr>
//      <tr>
//        <th>@_popup-z-index</th>
//        <td>@popup__z-index</td>
//        <td class="vars_value">1001</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup z-index</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Popup position</th>
//      </tr>
//      <tr>
//        <th>@_popup-position</th>
//        <td>@popup__position</td>
//        <td class="vars_value">fixed</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup position</td>
//      </tr>
//      <tr>
//        <th>@_popup-position-top</th>
//        <td>@popup__position-top</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup top</td>
//      </tr>
//      <tr>
//        <th>@_popup-position-right</th>
//        <td>@popup__position-right</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup right</td>
//      </tr>
//      <tr>
//        <th>@_popup-position-bottom</th>
//        <td>@popup__position-bottom</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup bottom</td>
//      </tr>
//      <tr>
//        <th>@_popup-position-left</th>
//        <td>@popup__position-left</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup left</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Popup margin</th>
//      </tr>
//
//      <tr>
//        <th>@_popup-margin-top</th>
//        <td>@popup__margin-top</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup top margin</td>
//      </tr>
//      <tr>
//        <th>@_popup-margin-right</th>
//        <td>@popup__margin-right</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup right margin</td>
//      </tr>
//      <tr>
//        <th>@_popup-margin-bottom</th>
//        <td>@popup__margin-bottom</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup bottom margin</td>
//      </tr>
//      <tr>
//        <th>@_popup-margin-left</th>
//        <td>@popup__margin-left</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup left margin</td>
//      </tr>
//      <tr>
//        <th>@_popup-content-height</th>
//        <td>@popup-content__height</td>
//        <td class="vars_value">auto</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup content height</td>
//      </tr>
//      <tr>
//        <th>@_popup-header-margin</th>
//        <td>@popup-header__margin</td>
//        <td class="vars_value">0 0 25px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup header margin</td>
//      </tr>
//      <tr>
//        <th>@_popup-content-margin</th>
//        <td>@popup-content__margin</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup content margin</td>
//      </tr>
//      <tr>
//        <th>@_popup-footer-margin</th>
//        <td>@popup-footer__margin</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup footer margin</td>
//      </tr>
//      <tr>
//        <th>@_popup-title-headings</th>
//        <td>@popup-title-headings</td>
//        <td class="vars_value">true</td>
//        <td class="vars_value">true | false</td>
//        <td>Popup title has the same style as one of page headings</td>
//      </tr>
//      <tr>
//        <th>@_popup-title-headings-level</th>
//        <td>@popup-title-headings__level</td>
//        <td class="vars_value">h3</td>
//        <td class="vars_value">h1 | h2 | h3 | h4 | h5 | h6</td>
//        <td>What heading style is applied to the popup title</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Popup close button</th>
//      </tr>
//      <tr>
//        <th>@_popup-button-close-icon</th>
//        <td>@popup-button-close__icon</td>
//        <td class="vars_value">true</td>
//        <td class="vars_value">true | false</td>
//        <td>Popup close button has an icon</td>
//      </tr>
//      <tr>
//        <th>@_popup-button-close-reset</th>
//        <td>@popup-button-close__reset</td>
//        <td class="vars_value">true</td>
//        <td class="vars_value">true | false</td>
//        <td>Reset popup close button default styles</td>
//      </tr>
//      <tr>
//        <th>@_popup-button-close-position</th>
//        <td>@popup-button-close__position</td>
//        <td class="vars_value">absolute</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup button close position</td>
//      </tr>
//      <tr>
//        <th>@_popup-button-close-position-top</th>
//        <td>@popup-button-close__position-top</td>
//        <td class="vars_value">10px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup button close top position</td>
//      </tr>
//      <tr>
//        <th>@_popup-button-close-position-right</th>
//        <td>@popup-button-close__position-right</td>
//        <td class="vars_value">10px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup button close right position</td>
//      </tr>
//      <tr>
//        <th>@_popup-button-close-position-bottom</th>
//        <td>@popup-button-close__position-bottom</td>
//        <td class="vars_value">''</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup button close bottom position</td>
//      </tr>
//      <tr>
//        <th>@_popup-button-close-position-left</th>
//        <td>@popup-button-close__position-left</td>
//        <td class="vars_value">''</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup button close left position</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Popup icons parameters</th>
//      </tr>
//      <tr>
//        <th>@_popup-icon-font-content</th>
//        <td>@popup-icon-font__content</td>
//        <td class="vars_value">@icon-remove</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup icon code</td>
//      </tr>
//      <tr>
//        <th>@_popup-icon-font</th>
//        <td>@popup-icon-font</td>
//        <td class="vars_value">@button-icon__font</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup icon font</td>
//      </tr>
//      <tr>
//        <th>@_popup-icon-font-size</th>
//        <td>@popup-icon-font__size</td>
//        <td class="vars_value">@button-icon__font-size</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup icon font size</td>
//      </tr>
//      <tr>
//        <th>@_popup-icon-font-line-height</th>
//        <td>@popup-icon-font__line-height</td>
//        <td class="vars_value">@button-icon__line-height</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup icon line height</td>
//      </tr>
//      <tr>
//        <th>@_popup-icon-font-color</th>
//        <td>@popup-icon-font__color</td>
//        <td class="vars_value">@button-icon__color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup icon color</td>
//      </tr>
//      <tr>
//        <th>@_popup-icon-font-color-hover</th>
//        <td>@popup-icon-font__color-hover</td>
//        <td class="vars_value">@button-icon__hover__font-color</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Hovered popup icon color</td>
//      </tr>
//      <tr>
//        <th>@_popup-icon-font-color-active</th>
//        <td>@popup-icon-font__color-active</td>
//        <td class="vars_value">@popup-icon-font__color-active</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Active popup icon color</td>
//      </tr>
//      <tr>
//        <th>@_popup-icon-font-margin</th>
//        <td>@popup-icon-font__margin</td>
//        <td class="vars_value">@button-icon__margin</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup icon  margin</td>
//      </tr>
//      <tr>
//        <th>@_popup-icon-font-vertical-align</th>
//        <td>@popup-icon-font__vertical-align</td>
//        <td class="vars_value">@button-icon__vertical-align</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup icon vertical align</td>
//      </tr>
//      <tr>
//        <th>@_popup-icon-font-position</th>
//        <td>@popup-icon-font__position</td>
//        <td class="vars_value">@button-icon__position</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Popup icon position</td>
//      </tr>
//      <tr>
//        <th>@_popup-icon-font-text-hide</th>
//        <td>@popup-icon-font__text-hide</td>
//        <td class="vars_value">true</td>
//        <td class="vars_value">true | false</td>
//        <td>Popup icon hide text</td>
//      </tr>
//      <tr>
//        <th colspan="5" class="vars_section">Actions toolbar parameters</th>
//      </tr>
//      <tr>
//        <th>@_popup-actions-toolbar</th>
//        <td>@popup-actions-toolbar</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">true | false</td>
//        <td>Actions toolbar is displayed</td>
//      </tr>
//      <tr>
//        <th>@_popup-actions-toolbar-actions-position</th>
//        <td>@popup-actions-toolbar-actions__position</td>
//        <td class="vars_value">@actions-toolbar-actions__position</td>
//        <td class="vars_value">justify | left | right | center</td>
//        <td>Actions toolbar position</td>
//      </tr>
//      <tr>
//        <th>@_popup-actions-toolbar-actions-reverse</th>
//        <td>@popup-actions-toolbar-actions__reverse</td>
//        <td class="vars_value">@actions-toolbar-actions__reverse</td>
//        <td class="vars_value">true | false</td>
//        <td>Actions toolbar reverse</td>
//      </tr>
//      <tr>
//        <th>@_popup-actions-toolbar-margin</th>
//        <td>@popup-actions-toolbar__margin</td>
//        <td class="vars_value">@actions-toolbar__margin</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Actions toolbar margin</td>
//      </tr>
//      <tr>
//        <th>@_popup-actions-toolbar-padding</th>
//        <td>@popup-actions-toolbar__padding</td>
//        <td class="vars_value">@actions-toolbar__padding</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Actions toolbar padding</td>
//      </tr>
//      <tr>
//        <th>@_popup-actions-toolbar-actions-margin</th>
//        <td>@popup-actions-toolbar-actions__margin</td>
//        <td class="vars_value">@actions-toolbar-actions__margin</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Actions toolbar actions margin</td>
//      </tr>
//      <tr>
//        <th>@_popup-actions-toolbar-primary-actions-margin</th>
//        <td>@popup-actions-toolbar-actions-primary__margin</td>
//        <td class="vars_value">@actions-toolbar-actions-primary__margin</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Actions toolbar primary actions margin</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_popup-actions-toolbar-secondary-actions-margin</th>
//        <td>@popup-actions-toolbar-actions-secondary__margin</td>
//        <td class="vars_value"nowrap="nowrap">@actions-toolbar-actions-secondary__margin</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Actions toolbar secondary actions margin</td>
//      </tr>
//      <tr>
//        <th>@_popup-actions-toolbar-actions-links-margin-top</th>
//        <td>@popup-actions-toolbar-actions-links__margin-top</td>
//        <td class="vars_value">@actions-toolbar-actions-links__margin-top</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Actions toolbar links top margin</td>
//      </tr>
//      <tr>
//        <th>@_popup-actions-toolbar-primary-actions-links-margin-top</th>
//        <td>@popup-actions-toolbar-actions-links-primary__margin-top</td>
//        <td class="vars_value">@actions-toolbar-actions-links-primary__margin-top</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Actions toolbar primary actions links top margin</td>
//      </tr>
//      <tr>
//        <th>@_popup-actions-toolbar-secondary-links-margin-top</th>
//        <td>@popup-actions-toolbar-actions-links-secondary__margin-top</td>
//        <td class="vars_value">@actions-toolbar-actions-links-secondary__margin-top</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Actions toolbar secondary links top margin</td>
//      </tr>
//    </table>
// </pre>
//
//  ## Window overlay variables
//  <pre>
//    <table>
//      <tr>
//        <th class="vars_head">Mixin variable</th>
//        <th class="vars_head">Global variable</th>
//        <th class="vars_head">Default value</th>
//        <th class="vars_head">Allowed values</th>
//        <th class="vars_head">Comment</th>
//      </tr>
//      <tr>
//        <th>@_overlay-background</th>
//        <td>@overlay__background</td>
//        <td class="vars_value">#000</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Overlay background color</td>
//      </tr>
//      <tr>
//        <th>@_overlay-opacity</th>
//        <td>@overlay__opacity</td>
//        <td class="vars_value">.5</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Overlay opacity</td>
//      </tr>
//      <tr>
//        <th>@_overlay-opacity-old</th>
//        <td>@overlay__opacity-old</td>
//        <td class="vars_value">50</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Overlay opacity for old browsers</td>
//      </tr>
//      <tr>
//        <th>@_overlay-fade</th>
//        <td>@overlay__fade</td>
//        <td class="vars_value">opacity .15s linear</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Overlay fade</td>
//      </tr>
//      <tr>
//        <th>@_overlay-z-index</th>
//        <td>@overlay__z-index</td>
//        <td class="vars_value">1000</td>
//        <td class="vars_value">'' | value</td>
//        <td>Overlay z-index</td>
//      </tr>
//    </table>
//  </pre>
//
//  ## Rating variables
//  #### The <code>.lib-rating-vote()</code> and <code>.lib-rating-summary()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_icon-content</th>
//            <td>@rating-icon__content</td>
//            <td class="vars_value">@icon-star</td>
//            <td class="vars_value">'' | false | icon code</td>
//            <td>Rating icon symbol code</td>
//        </tr>
//        <tr>
//            <th>@_icon-count</th>
//            <td>@rating-icon__count</td>
//            <td class="vars_value">5</td>
//            <td class="vars_value">'' | value</td>
//            <td>Number of rating icon symbols</td>
//        </tr>
//        <tr>
//            <th>@_icon-font</th>
//            <td>@rating-icon__font</td>
//            <td class="vars_value">@icon-font</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Icon font</td>
//        </tr>
//        <tr>
//            <th>@_icon-font-size</th>
//            <td>@rating-icon__font-size</td>
//            <td class="vars_value">28px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Icon font size</td>
//        </tr>
//        <tr>
//            <th>@_icon-letter-spacing</th>
//            <td>@rating-icon__letter-spacing</td>
//            <td class="vars_value">-10px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Icon letter spacing</td>
//        </tr>
//        <tr>
//            <th>@_icon-color</th>
//            <td>@rating-icon__color</td>
//            <td class="vars_value">#c7c7c7</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Unselected icons color</td>
//        </tr>
//        <tr>
//            <th>@_icon-color-active</th>
//            <td>@rating-icon__active__color</td>
//            <td class="vars_value">#ff5601</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Selected and hovered icons color</td>
//        </tr>
//        <tr>
//            <th>@_label-hide</th>
//            <td>@rating-label__hide</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">true | false</td>
//            <td>Rating label is displayed</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Tabs variables
//  #### The <code>.lib-data-tabs()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_tab-control-font-family</th>
//            <td>@tab-control__font-family</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value" nowrap>'' | false | value</td>
//            <td>Tabs font family</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-font-size</th>
//            <td>@tab-control__font-size</td>
//            <td class="vars_value">@font-size__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tabs font size</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-font-weight</th>
//            <td>@tab-control__font-weight</td>
//            <td class="vars_value">@font-weight__semibold</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tabs font weight</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-font-style</th>
//            <td>@tab-control__font-style</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tabs font style</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-line-height</th>
//            <td>@tab-control__line-height</td>
//            <td class="vars_value">@tab-control__height</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tabs line height</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Tabs controls settings</th>
//        </tr>
//        <tr>
//            <th>@_tab-control-background-color</th>
//            <td>@tab-control__background-color</td>
//            <td class="vars_value">@panel__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Current tab background</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-color</th>
//            <td>@tab-control__color</td>
//            <td class="vars_value">@link__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Current tab text color</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-text-decoration</th>
//            <td>@tab-control__text-decoration</td>
//            <td class="vars_value">none</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Current tab text-decoration</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-background-color-hover</th>
//            <td>@tab-control__hover__background-color</td>
//            <td class="vars_value">lighten(@tab-control__background-color, 5%)</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered tab background</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-color-visited</th>
//            <td>@tab-control__color</td>
//            <td class="vars_value">@text__color__muted</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Visited tab color</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-text-decoration-visited</th>
//            <td>@tab-control__color</td>
//            <td class="vars_value"></td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Visited tab text-decoration</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-color-hover</th>
//            <td>@tab-control__hover__color</td>
//            <td class="vars_value">@tab-control__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered tab text color</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-text-decoration-hover</th>
//            <td>@tab-control__text-decoration</td>
//            <td class="vars_value">@tab-control__text-decoration</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered tab text-decoration</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-background-color-active</th>
//            <td>@tab-control__active__background-color</td>
//            <td class="vars_value">lighten(@tab-control__background-color, 15%)</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active tab background</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-color-active</th>
//            <td>@tab-control__active__color</td>
//            <td class="vars_value">@text__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active tab text color</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-text-decoration-active</th>
//            <td>@tab-control__text-decoration</td>
//            <td class="vars_value">@tab-control__text-decoration</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active tab text-decoration</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-height</th>
//            <td>@tab-control__height</td>
//            <td class="vars_value">@indent__l</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Height of tab control</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-margin-right</th>
//            <td>@tab-control__margin-right</td>
//            <td class="vars_value">@indent__xs</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Right margin of tab title block</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-padding-top</th>
//            <td>@tab-control__padding-top</td>
//            <td class="vars_value">@indent__xs</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tab control padding top</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_tab-control-padding-right</th>
//            <td>@tab-control__padding-right</td>
//            <td class="vars_value">@indent__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tab control padding right</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-padding-bottom</th>
//            <td>@tab-control__padding-bottom</td>
//            <td class="vars_value">@tab-control__padding-bottom</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tab control padding bottom</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-padding-left</th>
//            <td>@tab-control__padding-left</td>
//            <td class="vars_value">@tab-control__padding-left</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tab control padding left</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-border-width</th>
//            <td>@tab-control__border-width</td>
//            <td class="vars_value">@border-width__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tab control border width</td>
//        </tr>
//        <tr>
//            <th>@_tab-control-border-color</th>
//            <td>@tab-control__border-color</td>
//            <td class="vars_value">@border-color__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tab control border color</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Tab content settings</th>
//        </tr>
//        <tr>
//            <th>@_tab-content-background-color</th>
//            <td>@tab-content__background-color</td>
//            <td class="vars_value">@tab-control__active__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tab content background</td>
//        </tr>
//        <tr>
//            <th>@_tab-content-border-top-status</th>
//            <td>@tab-content__border-top-status</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">true | false</td>
//            <td>Tab content border top status. When set to 'true' the content has only top border. When set to 'false' the content has all 4 borders</td>
//        </tr>
//        <tr>
//            <th>@_tab-content-border</th>
//            <td>@tab-content__border</td>
//            <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tab content border</td>
//        </tr>
//        <tr>
//            <th>@_tab-content-margin-top</th>
//            <td>@tab-content__margin-top</td>
//            <td class="vars_value">@tab-control__height + @tab-control__border-width + @tab-control__padding-top + @tab-control__padding-bottom</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tab content top margin (it is the sum of tabs height and top border width)</td>
//        </tr>
//        <tr>
//            <th>@_tab-content-padding-top</th>
//            <td>@tab-content__padding-top</td>
//            <td class="vars_value">@indent__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tab content padding</td>
//        </tr>
//        <tr>
//            <th>@_tab-content-padding-right</th>
//            <td>@tab-content__padding-right</td>
//            <td class="vars_value">@indent__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tab content padding</td>
//        </tr>
//        <tr>
//            <th>@_tab-content-padding-bottom</th>
//            <td>@tab-content__padding-bottom</td>
//            <td class="vars_value">@tab-content__padding-top</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tab content padding</td>
//        </tr>
//        <tr>
//            <th>@_tab-content-padding-left</th>
//            <td>@tab-content__padding-left</td>
//            <td class="vars_value">@tab-content__padding-right</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tab content padding</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Accordion variables
//  #### The <code>.lib-data-accordion()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_accordion-control-font-family</th>
//            <td>@accordion-control__font-family</td>
//            <td class="vars_value">@tab-control__font-family</td>
//            <td class="vars_value" nowrap>'' | false | value</td>
//            <td>Accordion font family</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-font-size</th>
//            <td>@accordion-control__font-size</td>
//            <td class="vars_value">@font-size__l</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion font size</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-font-style</th>
//            <td>@accordion-control__font-style</td>
//            <td class="vars_value">@tab-control__font-style</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion font style</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-font-weight</th>
//            <td>@accordion-control__font-weight</td>
//            <td class="vars_value">@tab-control__font-weight</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion font weight</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-line-height</th>
//            <td>@accordion-control__line-height</td>
//            <td class="vars_value">@accordion-control__height</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion line height</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Accordion tabs controls settings</th>
//        </tr>
//        <tr>
//            <th>@_accordion-control-border-top</th>
//            <td>@accordion-control__border-top</td>
//            <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion control border</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-border-right</th>
//            <td>@accordion-control__border-right</td>
//            <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion control border</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-border-bottom</th>
//            <td>@accordion-control__border-bottom</td>
//            <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion control border</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-border-left</th>
//            <td>@accordion-control__border-left</td>
//            <td class="vars_value">@tab-control__border-width solid @tab-control__border-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion control border</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-background-color</th>
//            <td>@accordion-control__background-color</td>
//            <td class="vars_value">@tab-control__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion control background</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-color</th>
//            <td>@accordion-control__color</td>
//            <td class="vars_value">@tab-control__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion control color</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-text-decoration</th>
//            <td>@accordion-control__text-decoration</td>
//            <td class="vars_value">@tab-control__text-decoration</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion control text decoration</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-color-visited</th>
//            <td>@accordion-control__color</td>
//            <td class="vars_value">@accordion-control__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion control visited link color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_accordion-control-text-decoration-visited</th>
//            <td>@accordion-control__text-decoration</td>
//            <td class="vars_value">@accordion-control__text-decoration</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion control visited link text-decoration</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-background-color-hover</th>
//            <td>@accordion-control__hover__background-color</td>
//            <td class="vars_value">@tab-control__hover__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered accordion control background</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-color-hover</th>
//            <td>@accordion-control__hover__color</td>
//            <td class="vars_value">@tab-control__hover__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered accordion control text color</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-text-decoration-hover</th>
//            <td>@accordion-control__hover__text-decoration</td>
//            <td class="vars_value">@tab-control__hover__text-decoration</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered accordion control text-decoration</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-background-color-active</th>
//            <td>@accordion-control__active__background-color</td>
//            <td class="vars_value">@tab-control__active__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active accordion control background</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-color-active</th>
//            <td>@accordion-control__active__color</td>
//            <td class="vars_value">@tab-control__active__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active accordion control text color</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-text-decoration-active</th>
//            <td>@accordion-control__active__text-decoration</td>
//            <td class="vars_value">@tab-control__active__text-decoration</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Active accordion control text-decoration</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-height</th>
//            <td>@accordion-control__height</td>
//            <td class="vars_value">@indent__xl</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Height of accordion control</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-margin-bottom</th>
//            <td>@accordion-control__margin-bottom</td>
//            <td class="vars_value">@indent__xs</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Bottom margin of the accordion control</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-padding-top</th>
//            <td>@accordion-control__padding-top</td>
//            <td class="vars_value">@tab-control__padding-top</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion tab control padding top</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_accordion-control-padding-right</th>
//            <td>@accordion-control__padding-right</td>
//            <td class="vars_value">@indent__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion tab control padding right</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-padding-bottom</th>
//            <td>@accordion-control__padding-bottom</td>
//            <td class="vars_value">@tab-control__padding-bottom</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion tab control padding bottom</td>
//        </tr>
//        <tr>
//            <th>@_accordion-control-padding-left</th>
//            <td>@accordion-control__padding-left</td>
//            <td class="vars_value">@accordion-control__padding-right</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion tab control padding left</td>
//        </tr>
//        <tr>
//            <th colspan="5" class="vars_section">Accordion content settings</th>
//        </tr>
//        <tr>
//            <th>@_accordion-content-background-color</th>
//            <td>@accordion-content__background-color</td>
//            <td class="vars_value">@tab-control__active__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion tab content background</td>
//        </tr>
//        <tr>
//            <th>@_accordion-content-border</th>
//            <td>@accordion-content__border</td>
//            <td class="vars_value">@tab-content__border</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion tab content border</td>
//        </tr>
//        <tr>
//            <th>@_accordion-content-margin</th>
//            <td>@accordion-content__margin</td>
//            <td class="vars_value">0 0 @indent__xs</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion tab content margin</td>
//        </tr>
//        <tr>
//            <th>@_accordion-content-padding</th>
//            <td>@accordion-content__padding</td>
//            <td class="vars_value">@tab-content__padding-top @tab-content__padding-right @tab-content__padding-bottom @tab-content__padding-left</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Accordion tab content padding</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Table variables
//  #### The <code>.lib-table()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_table-width</th>
//            <td>@table__width</td>
//            <td class="vars_value">100%</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table width</td>
//        </tr>
//        <tr>
//            <th>@_cell-padding-horizontal</th>
//            <td>@table-cell__padding-horizontal</td>
//            <td class="vars_value">@indent__s</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table cell horizontal padding</td>
//        </tr>
//        <tr>
//            <th>@_cell-padding-vertical</th>
//            <td>@table-cell__padding-vertical</td>
//            <td class="vars_value">8px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table cell vertical padding</td>
//        </tr>
//        <tr>
//            <th>@_table-margin-bottom</th>
//            <td>@table__margin-bottom</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table margin bottom</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Table typography variables
//  #### The <code>.lib-table-typography()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_table-td-font-size </th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table cell font size</td>
//        </tr>
//        <tr>
//            <th>@_table-td-color</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table cell font color</td>
//        </tr>
//        <tr>
//            <th>@_table-td-font-family</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table cell font family</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_table-td-font-weight</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table cell font weight</td>
//        </tr>
//        <tr>
//            <th>@_table-td-line-height</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table cell line height</td>
//        </tr>
//        <tr>
//            <th>@_table-td-font-style</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table cell font style</td>
//        </tr>
//        <tr>
//            <th>@_table-th-font-size</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table header cell font size</td>
//        </tr>
//        <tr>
//            <th>@_table-th-color</th>
//            <td class="vars_value">@text__color__intense</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table header cell font color</td>
//        </tr>
//        <tr>
//            <th>@_table-th-font-family</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table header cell font family</td>
//        </tr>
//        <tr>
//            <th>@_table-th-font-weight</th>
//            <td class="vars_value">@font-weight__bold</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table header cell font weight</td>
//        </tr>
//        <tr>
//            <th>@_table-th-line-height</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table header cell line height</td>
//        </tr>
//        <tr>
//            <th>@_table-th-font-style</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table header cell font style</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Table caption variables
//  #### The <code>.lib-table-caption()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_table-caption-hide</th>
//            <td>@table-caption__hide</td>
//            <td class="vars_value">true</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table caption is visible</td>
//        </tr>
//        <tr>
//            <th>@_table-caption-font-size</th>
//            <td>@table-caption__font-size</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table caption font size</td>
//        </tr>
//        <tr>
//            <th>@_table-caption-color</th>
//            <td>@table-caption__color</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table caption text color</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_table-caption-font-family</th>
//            <td>@table-caption__font-family</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table caption font family</td>
//        </tr>
//        <tr>
//            <th>@_table-caption-font-weight</th>
//            <td>@table-caption__font-weight</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table caption font weight</td>
//        </tr>
//        <tr>
//            <th>@_table-caption-font-style</th>
//            <td>@table-caption__font-style</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table caption font style</td>
//        </tr>
//        <tr>
//            <th>@_table-caption-line-height</th>
//            <td>@table-caption__line-height</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table caption line height</td>
//        </tr>
//        <tr>
//            <th>@_table-caption-alignment</th>
//            <td>@table-caption__alignment</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table caption alignment</td>
//        </tr>
//        <tr>
//            <th>@_table-caption-margin-top</th>
//            <td>@table-caption__margin-top</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table caption top margin</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_table-caption-margin-bottom</th>
//            <td>@table-caption__margin-bottom</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table caption bottom margin</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Table cells resize variables
//  #### The <code>.lib-table-resize()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_th-padding-top</th>
//            <td>@table-cell__padding-vertical / 2</td>
//            <td class="vars_value">@_td-padding-top</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table header cell top padding</td>
//        </tr>
//        <tr>
//            <th>@_th-padding-right</th>
//            <td>@table-cell__padding-horizontal / 2</td>
//            <td class="vars_value">@_td-padding-right</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table header cell right padding</td>
//        </tr>
//        <tr>
//            <th>@_th-padding-bottom</th>
//            <td>@table-cell__padding-vertical / 2</td>
//            <td class="vars_value">@_td-padding-top</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table header cell bottom padding</td>
//        </tr>
//        <tr>
//            <th>@_th-padding-left</th>
//            <td>@table-cell__padding-horizontal / 2</td>
//            <td class="vars_value">@_td-padding-right</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table header cell left padding</td>
//        </tr>
//        <tr>
//            <th>@_td-padding-top</th>
//            <td>@table-cell__padding-vertical / 2</td>
//            <td class="vars_value">@table-cell__padding-vertical / 2</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table cell top padding</td>
//        </tr>
//        <tr>
//            <th>@_td-padding-right</th>
//            <td>@table-cell__padding-horizontal / 2</td>
//            <td class="vars_value">@table-cell__padding-horizontal / 2</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table cell right padding</td>
//        </tr>
//        <tr>
//            <th>@_td-padding-bottom</th>
//            <td>@table-cell__padding-vertical / 2</td>
//            <td class="vars_value">@_td-padding-top</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table cell bottom padding</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_td-padding-left</th>
//            <td>@table-cell__padding-horizontal / 2</td>
//            <td class="vars_value" nowrap="nowrap">@_td-padding-right</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table cell left padding</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Table background variables
//  #### The <code>.lib-table-background-color()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Variables list names</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_table-background-color</th>
//            <td>@table__background-color</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table background</td>
//        </tr>
//        <tr>
//            <th>@_table-head-background-color</th>
//            <td>@table-head__background-color</td>
//            <td class="vars_value">@table__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table thead background</td>
//        </tr>
//        <tr>
//            <th>@_table-foot-background-color</th>
//            <td>@table-foot__background-color</td>
//            <td class="vars_value">@table__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table tfoot background</td>
//        </tr>
//        <tr>
//            <th>@_table-body-th-background-color</th>
//            <td>@table-body-th__background-color</td>
//            <td class="vars_value">@table__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table header cells background</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_table-td-background-color</th>
//            <td>@table-td__background-color</td>
//            <td class="vars_value">@table__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table cells background</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Table borders customization variables
//  #### The <code>.lib-table-bordered()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_table_type</th>
//            <td>-</td>
//            <td class="vars_value">normal</td>
//            <td class="vars_value">normal | horizontal | vertical | light | clear | horizontal_body</td>
//            <td>Table border settings. When is set to "horizontal_body", the table border settings are applied only for tbody</td>
//        </tr>
//        <tr>
//            <th>@_table_border-width</th>
//            <td>@table__border-width</td>
//            <td class="vars_value" nowrap="nowrap">@border-width__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table border width</td>
//        </tr>
//        <tr>
//            <th>@_table_border-style</th>
//            <td>@table__border-style</td>
//            <td class="vars_value">solid</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table border style</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@_table_border-color</th>
//            <td>@table__border-color</td>
//            <td class="vars_value">@border-color__base</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Table border color</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Striped table variable
//  #### The <code>.lib-table-striped()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Variables list names</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_stripped-background-color</th>
//            <td class="vars_value">@table-cell-stripped__background-color</td>
//            <td class="vars_value">lighten(@table-cell__hover__background-color, 15%)</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Striped cells background color</td>
//        </tr>
//        <tr>
//            <th>@_stripped-color</th>
//            <td class="vars_value">@table-cell-stripped__color</td>
//            <td class="vars_value">@text__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Striped cells text color</td>
//        </tr>
//        <tr>
//            <th>@_stripped-direction</th>
//            <td class="vars_value">-</td>
//            <td class="vars_value">horizontal</td>
//            <td class="vars_value">horizontal | vertical</td>
//            <td>Stripes direction</td>
//        </tr>
//        <tr>
//            <th>@_stripped-highlight</th>
//            <td class="vars_value">-</td>
//            <td class="vars_value">odd</td>
//            <td class="vars_value">odd | even</td>
//            <td>Rows stripes are applied to</td>
//        </tr>
//    </table>
//  </pre>
//
//  # Table with rows hover mixin variables
//  #### The <code>.lib-table-hover()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_table_cell-background-color-hover</th>
//            <td>@table-cell__hover__background-color</td>
//            <td class="vars_value">@panel__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered table row background</td>
//        </tr>
//        <tr>
//            <th>@_table_cell-odd-background-color-hover</th>
//            <td>@table-cell__hover__background-color</td>
//            <td class="vars_value">@_table_cell-background-color-hover</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Hovered table odd row background</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Responsive table technics #2 variables
//  #### The <code>.lib-table-responsive()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Variables list names</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_table-background-color-responsive</th>
//            <td class="vars_value">@table-responsive__background-color</td>
//            <td class="vars_value">@table__background-color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Responsive table background</td>
//        </tr>
//        <tr>
//            <th>@_table-th-background-color-responsive</th>
//            <td class="vars_value">@table-responsive-th__background-color</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Responsive table header cells background</td>
//        </tr>
//        <tr>
//            <th>@_reset-table-striped</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">-</td>
//            <td class="vars_value">true | false</td>
//            <td>Responsive table striped cells</td>
//        </tr>
//        <tr>
//            <th>@_reset-table-hover</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">-</td>
//            <td class="vars_value">true | false</td>
//            <td>Responsive table hovered table row background</td>
//        </tr>
//        <tr>
//            <th>@_table-responsive-cell-padding</th>
//            <td class="vars_value">@table-responsive-cell__padding</td>
//            <td class="vars_value">@indent__xs 0</td>
//            <td class="vars_value">true | false</td>
//            <td>Responsive table cells padding</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Tooltips variables
//  #### The <code>.lib-tooltip()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Global variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_tooltip-position</th>
//            <td>-</td>
//            <td class="vars_value">top</td>
//            <td class="vars_value">top | right | bottom | left</td>
//            <td>Side of the element tooltip is displayed on</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-selector-toggle</th>
//            <td>-</td>
//            <td class="vars_value">~".tooltip-toggle"</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>The class name of the element that toggles tooltip</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-selector-content</th>
//            <td>-</td>
//            <td class="vars_value">~".tooltip-content"</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>The tooltip content class name</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-background</th>
//            <td>@tooltip__background</td>
//            <td class="vars_value">@color-white</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip background color</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-border-color</th>
//            <td>@tooltip__border-color</td>
//            <td class="vars_value">#bbb</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip border color</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-border-width</th>
//            <td>@tooltip__border-width</td>
//            <td class="vars_value">1px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip border width</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-border-radius</th>
//            <td>@tooltip__border-radius</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip border radius</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-color</th>
//            <td>@tooltip__color</td>
//            <td class="vars_value">@primary__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip text color</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-cursor</th>
//            <td>@tooltip__cursor</td>
//            <td class="vars_value">help</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip cursor</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-font-size</th>
//            <td>@tooltip__font-size</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip font size</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-font-family</th>
//            <td>@tooltip__font-family</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip font family</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-font-weight</th>
//            <td>@tooltip__font-weight</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip font weight</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-font-style</th>
//            <td>@tooltip__font-style</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip font style</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-line-height</th>
//            <td>@tooltip__line-height</td>
//            <td class="vars_value">1.4</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip line height</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-margin</th>
//            <td>@tooltip__margin</td>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip margin</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-padding</th>
//            <td>@tooltip__padding</td>
//            <td class="vars_value">12px 16px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip padding</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-min-width</th>
//            <td>@tooltip__min-width</td>
//            <td class="vars_value">210px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip minimal width</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-max-width</th>
//            <td>@tooltip__max-width</td>
//            <td class="vars_value">360px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip maximal width</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-arrow-size</th>
//            <td>@tooltip-arrow__size</td>
//            <td class="vars_value">5px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip arrow size</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-arrow-offset</th>
//            <td>@tooltip-arrow__offset</td>
//            <td class="vars_value">10px</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip arrow offset</td>
//        </tr>
//        <tr>
//            <th>@_tooltip-z-index</th>
//            <td>@tooltip__z-index</td>
//            <td class="vars_value">100</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Tooltip z-index</td>
//        </tr>
//    </table>
//  </pre>
//
//  ## Components
//  ### Cross Components variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//      <tr>
//        <th>@component__shadow-size__base</th>
//        <td class="vars_value">5px</td>
//        <td class="vars_value">constant</td>
//        <td>Shadow size across all components. Used to count overlay zones sizes</td>
//      </tr>
//      <tr>
//        <th>@component__box-shadow__base</th>
//        <td class="vars_value">1px 1px @component__shadow-size__base rgba(0, 0, 0, .5)</td>
//        <td class="vars_value">constant</td>
//        <td>Shadow style</td>
//      </tr>
//      <tr>
//        <th>@component-modal__opacity</th>
//        <td class="vars_value">.98</td>
//        <td class="vars_value">constant</td>
//        <td>Default opacity for stacked components</td>
//      </tr>
//    </table>
//  </pre>
//
//  ## Utilities
//  #### <code>.lib-css()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Default value </th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_property</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Any css property</td>
//        </tr>
//        <tr>
//            <th>@_value</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Any css value</td>
//        </tr>
//        <tr>
//            <th>@_prefix</th>
//            <td class="vars_value">0</td>
//            <td class="vars_value">'' | false | 1</td>
//            <td>If set to "1" adds -ms-, -webkit- and -moz- prefixes to the property</td>
//        </tr>
//    </table>
//  </pre>
//
//
//  #### <code>.lib-rotate()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Default value </th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@rotation</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Transform rotate value, false or ''</td>
//        </tr>
//    </table>
//  </pre>
//
//
//  #### <code>.lib-input-placeholder()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_input-placeholder-color</th>
//            <td class="vars_value">@form-element-input-placeholder__color</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Input placeholder color</td>
//        </tr>
//        <tr>
//            <th>@_input-placeholder-font-weight</th>
//            <td class="vars_value">@form-element-input__font-weight</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Input placeholder font-weight</td>
//        </tr>
//    </table>
//  </pre>
//
//
//  #### <code>.lib-background-gradient()</code> mixin variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Allowed values</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_background-gradient</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | true</td>
//            <td>If set to 'true' the element has gradient background</td>
//        </tr>
//        <tr>
//            <th>@_background-gradient-direction</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | horizontal | vertical</td>
//            <td>Gradient direction (horizontal or vertical)</td>
//        </tr>
//        <tr>
//            <th>@_background-gradient-color-start</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Gradient start color (any css color)</td>
//        </tr>
//        <tr>
//            <th>@_background-gradient-color-end</th>
//            <td class="vars_value">''</td>
//            <td class="vars_value">'' | false | value</td>
//            <td>Gradient end color (any css color) </td>
//        </tr>
//        <tr>
//            <th>@_background-gradient-color-position</th>
//            <td class="vars_value">false</td>
//            <td class="vars_value">'' | false | true</td>
//            <td>Sets the background-color fallback property. When set to 'false', the background-color property will be set to @_background-gradient-color-end. When set to 'true', the background-color property will be set to @_background-gradient-color-start</td>
//        </tr>
//    </table>
//  </pre>