/*

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

By default, the pager centers links.

Markup:
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Styleguide 13

*/

@if $pager {


    .pager {
        @include clearfix();
        list-style: none;
        margin: rhythm() 0;
        text-align: center;

        li {
            display: inline;

            a,
            span {
                @include border-radius($base-border-radius);
                border-style: solid;
                border-width: 1px;
                display: inline-block;
                line-height: 1em;
                padding: $pager-padding;
                @extend %pager--btn !optional;
            }

            a:hover,
            a:focus {
                @extend %pager--btn__hover !optional;
            }
            a:active {
                @extend %pager--btn__active !optional;
            }
        }

/*

Alignment

Alternatively, you can align each link to the sides:

Markup:
<ul class="pager">
  <li class="previous"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

Styleguide 13.1

*/

        [rel="next"],
        .next > a,
        .next > span {
            float: right;
        }

        [rel="prev"],
        .previous > a,
        .previous > span {
            float: left;
        }

/*

Disabled state

Pager links also use the general `.disabled` utility class from the pagination.

Markup:
<ul class="pager">
  <li class="previous disabled"><a href="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul>

Styleguide 13.2

*/

        .disabled > a,
        .disabled > a:hover,
        .disabled > a:focus,
        .disabled > span {
            cursor: default;
            @extend %pager--btn__disabled !optional;
        }

    }


}