<div class="m-pagination__wrap">
	<div class="m-pagination">
		<span class="m-pagination__i m-pagination__i--active"> 1 </span>
		<a href="#" class="m-pagination__i"> 2 </a>
		<a href="#" class="m-pagination__i"> 3 </a>
		<span class="m-pagination__i"> &hellip; </span>
		<a href="#" class="m-pagination__i"> 10 </a>
		<br class="m-pagination__break">
		<a rel="first" class="m-pagination__i m-pagination__i--first"> &laquo; </a>
		<a rel="prev" class="m-pagination__i m-pagination__i--prev"> &lsaquo; </a>
		<a href="#" rel="next" class="m-pagination__i m-pagination__i--next"> &rsaquo; </a>
		<a href="#" rel="last" class="m-pagination__i m-pagination__i---last"> &raquo; </a>
	</div>
</div>

.m-pagination {

    display: inline-block;
    font-size: 0;
    margin: space(1) * -1;

    &__wrap {

        text-align: center;

    }

    &__i {

        @include font-size(normal);
        @include text-underline(none);
        box-sizing: content-box;
        display: inline-block;
        line-height: em(38px);
        margin: space(1);
        padding: 0;
        text-align: center;
        transition: color $base-transition;
        width: em(38px);

        &#{&}--active {

            color: color('black');

        }

        &,
        &:hover {

            color: color('gray');

        }

        &[href] {

            &:hover,
            &:focus {

                color: color('black');

            }

        }

        @media(min-width: breakpoint-min(md)) {

            &--first,
            &--prev {

                float: left;

            }

        }

    }

    &__break {

        @media(min-width: breakpoint-min(md)) {

            display: none;

        }

    }

}