/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../_common";

/**
 *    <nav class="pagination small pill">
 *        <ul>
 *            <li><a href="" class="button">Previous</a></li>
 *            <li><a href="" class="button">1</a></li>
 *            <li><a href="" class="button">2</a></li>
 *            <li class="active"><a href="" class="button">3</a></li>
 *            <li><a href="" class="button">4</a></li>
 *            <li><a href="" class="button">5</a></li>
 *            <li class="disabled"><a href="" class="button">Next</a></li>
 *        </ul>
 *    </nav>
 */

.pagination {
    display: block;
    margin: $margin 0;

    ul,
    li {
        @include reset-inline-block;
        list-style: none;
    }

    li {
        float: left;
        margin-right: $padding / 2;

        .button {
            float: left;
        }

        &.is-active {
            z-index: 1;
        }
    }

    @include clear-fix;
}

//-------------------- Modifiers --------------------//

.pagination.pagination--grouped {
    li {
        margin-left: -1px;
        margin-right: 0;

        &:first-child { margin-left: 0; }
        &:hover, .button:hover { z-index: 1; }

        .button {
            margin: 0;
            border-radius: 0;
        }
    }

    // Shape: round
    &.round {
        ul {
            border-radius: $round;
        }

        li:first-child .button {
            border-top-left-radius: $round;
            border-bottom-left-radius: $round;
        }

        li:last-child .button {
            border-top-right-radius: $round;
            border-bottom-right-radius: $round;
        }
    }

    // Shape: pill
    &.pill {
        ul {
            border-radius: $pill;
        }

        li:first-child .button {
            border-top-left-radius: $pill;
            border-bottom-left-radius: $pill;
        }

        li:last-child .button {
            border-top-right-radius: $pill;
            border-bottom-right-radius: $pill;
        }
    }

    // Shape: oval
    &.oval {
        ul {
            border-radius: #{$oval-x} / #{$oval-y};
        }

        li:first-child .button {
            border-radius: #{$oval-x} 0 0 #{$oval-x} / #{$oval-y} 0 0 #{$oval-y};
        }

        li:last-child .button {
            border-radius: 0 #{$oval-x} #{$oval-x} 0 / 0 #{$oval-y} #{$oval-y} 0;
        }
    }

    // Shape: skew
    &.skew {
        ul {
            border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
        }

        li:first-child .button {
            border-radius: #{$skew-x} 0 0 0 / #{$skew-y} 0 0 0;
        }

        li:last-child .button {
            border-radius: 0 #{$skew-x} 0 0 / 0 #{$skew-y} 0 0;
        }
    }
}