kai.t
/
magento2-docker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
magento2-docker/lib/web/css/docs/source/_variables.less

7378 lines
298 KiB
Plaintext
Executable File
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// /**
// * 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 | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></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 | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></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 | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></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 | <span style="white-space: nowrap">page-layout-1column</span> | <span style="white-space: nowrap">page-layout-2columns-left</span> | <span style="white-space: nowrap">page-layout-2columns-right</span> | <span style="white-space: nowrap">page-layout-3columns</span></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>
Reference in New Issue View Git Blame Copy Permalink