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

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

//  # Pagination HTML markup
//  Pagination is used to display numbers of pages in case content exceeds page limits. The markup corresponds to accesibility demands.
//
//  Required HTML markup:
//  ```html
//  <div class="pages">
//      <strong class="label" id="paging-label">Page</strong>
//      <ul class="items" aria-labelledby="paging-label">
//          <li class="item">
//              <a href="1" class="action previous">
//                  <span class="label">Page</span>
//                  <span>Previous</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>1</span>
//              </a>
//          </li>
//          <li class="item current">
//              <strong class="page">
//                  <span class="label">You're currently reading page</span>
//                  <span>2</span>
//              </strong>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>3</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="action next">
//                  <span class="label">Page</span>
//                  <span>Next</span>
//              </a>
//          </li>
//      </ul>
//  </div>
//  ```

.pages {
    .lib-pager();
}

//  # Pagination 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-font-text-hide</th>
//            <td>@pager-icon__text-hide</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-font-position</th>
//            <td>@pager-icon__position</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>

//  # Pagination with label and gradient background on links
//
//  To display label set:
//  ```css
//  @_pager-label-display: inline-block
//  ```
//  To set up gradient background on pages numbers use:
//  ```css
//  @_pager-gradient: true
//  ```
//  To set gradient start and end colors for default and hovered link states use:
//  ```css
//  @_pager-gradient-color-start: #f4f4f4
//  @_pager-gradient-color-end: #ccc
//  @_pager-gradient-color-start-hover: #ccc
//  @_pager-gradient-color-end-hover: #f4f4f4
//  ```
//  To set an icon on "previous" and "next" links use:
//  ```css
//  @_pager-icon-use: true
//  @_pager-icon-previous-content: @icon-prev
//  @_pager-icon-next-content: @icon-next
//  ```
//  ```html
//  <div class="example-pages-1">
//      <strong class="label" id="paging-label">Page</strong>
//      <ul class="items" aria-labelledby="paging-label">
//          <li class="item">
//              <a href="1" class="action previous">
//                  <span class="label">Page</span>
//                  <span>Previous</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>1</span>
//              </a>
//          </li>
//          <li class="item current">
//              <strong class="page">
//                  <span class="label">You're currently reading page</span>
//                  <span>2</span>
//              </strong>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>3</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="action next">
//                  <span class="label">Page</span>
//                  <span>Next</span>
//              </a>
//          </li>
//      </ul>
//  </div>
//  ```

.example-pages-1 {
    .lib-pager(
        @_pager-font-size: 12px,
        @_pager-label-display: inline-block,
        @_pager-item-margin: 0 3px,
        @_pager-gradient: true,
        @_pager-gradient-direction: vertical,
        @_pager-color: #333,
        @_pager-gradient-color-start: #f4f4f4,
        @_pager-gradient-color-end: #ccc,
        @_pager-border: 1px solid darken(#ccc, 10%),
        @_pager-color-hover: #333,
        @_pager-gradient-color-start-hover: #ccc,
        @_pager-gradient-color-end-hover: #f4f4f4,
        @_pager-border-hover: 1px solid darken(#ccc, 20%),
        @_pager-action-gradient: false,
        @_pager-current-color: #f7b32e,
        @_pager-current-border: 1px solid darken(#1979c3, 10%),
        @_pager-current-background: #1979c3,
        @_pager-icon-use: true,
        @_pager-icon-previous-content: @icon-prev,
        @_pager-icon-next-content: @icon-next,
        @_pager-icon-font-size: 30px,
        @_pager-action-color-hover: #ff5501
    );
}

//  # Pagination with "previous"..."next" text links and label
//
//  Text view of pagination without borders, backgrounds and icons
//
//  Disable icon use for "previous" and "next" links
//  ```css
//  @_pager-icon-use: false
//  ```
//  Display pager label
//  ```css
//  @_pager-label-display: inline-block
//  ```
//  ```html
//  <div class="example-pages-2">
//     <strong class="label" id="paging-label">Page</strong>
//      <ul class="items" aria-labelledby="paging-label">
//          <li class="item">
//              <a href="1" class="action previous">
//                  <span class="label">Page</span>
//                  <span>Previous</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>1</span>
//              </a>
//          </li>
//          <li class="item current">
//              <strong class="page">
//                  <span class="label">You're currently reading page</span>
//                  <span>2</span>
//              </strong>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>3</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="action next">
//                  <span class="label">Page</span>
//                  <span>Next</span>
//              </a>
//          </li>
//      </ul>
//  </div>
//  ```

.example-pages-2 {
    .lib-pager(
        @_pager-label-display: inline-block,
        @_pager-icon-use: false
    );
}

//  # Pagination without label, with solid background
//
//  Pagination without label, with solid background and icons on previous/next links
//
//  Hide pager label:
//  ```css
//  @_pager-label-display: none
//  ```
//  To set background and font colors for default, visited, hover, active states, use:
//  ```css
//  @_pager-color: #fff,
//  @_pager-background: @link__color,
//  @_pager-color-visited: #fff,
//  @_pager-background-visited: @link__visited__color,
//  @_pager-color-hover: #fff,
//  @_pager-background-hover: @link__hover__color,
//  @_pager-color-active: #fff,
//  @_pager-background-active: @link__active__color,
//  @_pager-current-color: #fff,
//  @_pager-current-background: @link__visited__color,
//  @_pager-action-background: @link__color,
//  @_pager-icon-font-color: #fff,
//  @_pager-action-background-visited: @link__visited__color
//  ```
//  To set current page background and font color, use:
//  ```css
//  @_pager-current-color: #fff,
//  @_pager-current-background: @link__visited__color
//  ```
//  To set background and icon color for default, visited, hover, active states of "previous" and "next" links, use:
//  ```css
//  @_pager-action-background: @link__color,
//  @_pager-action-background-visited: @link__visited__color,
//  @_pager-action-background-hover: @link__hover__color,
//  @_pager-action-background-active: @link__active__color,
//
//  @_pager-icon-font-color: #fff,
//  @_pager-icon-font-color-visited: #fff,
//  @_pager-icon-font-color-hover: #fff,
//  @_pager-icon-font-color-active: #fff
//  ```
//
//  ```html
//  <div class="example-pages-3">
//      <strong class="label" id="paging-label">Page</strong>
//      <ul class="items" aria-labelledby="paging-label">
//          <li class="item">
//              <a href="1" class="action previous">
//                  <span class="label">Page</span>
//                  <span>Previous</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>1</span>
//              </a>
//          </li>
//          <li class="item current">
//              <strong class="page">
//                  <span class="label">You're currently reading page</span>
//                  <span>2</span>
//              </strong>
//          </li>
//          <li class="item">
//              <a href="1" class="page">
//                  <span class="label">Page</span>
//                  <span>3</span>
//              </a>
//          </li>
//          <li class="item">
//              <a href="1" class="action next">
//                  <span class="label">Page</span>
//                  <span>Next</span>
//              </a>
//          </li>
//      </ul>
//  </div>
//  ```

.example-pages-3 {
    .lib-pager(
        @_pager-label-display: none,
        @_pager-color: @color-white,
        @_pager-background: @link__color,
        @_pager-color-visited: @color-white,
        @_pager-background-visited: @link__visited__color,
        @_pager-color-hover: @color-white,
        @_pager-background-hover: @link__hover__color,
        @_pager-color-active: @color-white,
        @_pager-background-active: @link__active__color,
        @_pager-current-color: @color-white,
        @_pager-current-background: @link__visited__color,
        @_pager-action-background: @link__color,
        @_pager-action-background-visited: @link__visited__color,
        @_pager-action-background-hover: @link__hover__color,
        @_pager-action-background-active: @link__active__color,
        @_pager-action-color: @color-white,
        @_pager-action-color-hover: @color-white,
        @_pager-action-color-active: @color-white
    );
}