nav.pagination {
    display: block;
    margin: 20px 0 0;

    ul {
        @extend .list-unstyled, .list-inline;
        display: inline-block;
        margin: 0;

        li {
            border-top: 1px solid #ccc;
            padding: 0.5em 0;
            display: inline;

            a,
            > span {
                position: relative;
                float: left;
                padding: 6px 12px;
                line-height: 1.6;
                text-decoration: none;
                color: $link-color;
                background-color: #fff;
                border: 1px solid #ddd;
                margin-left: -1px;

                &:focus,
                &:hover {
                    z-index: 3;
                    color: #003552;
                    background-color: #f5f5f5;
                    border-color: #ddd;
                    cursor: pointer;
                }
            }

            &.active a,
            &.active > span {
                z-index: 2;
                color: #fff;
                background-color: $link-color;
                border-color: $link-color;
                cursor: default;
            }

            .label {
                @extend .sr-only;
            }

            &.previous {
                a,
                > span {
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                }

                .arrow {
                    svg {
                        transform: rotate(180deg);
                    }
                }
            }

            &.next {
                a,
                > span {
                    border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px;
                }
            }

            @media (max-width: 400px) {
                &:not([class]):nth-last-of-type(-n + 7) {
                    display: none;
                }
            }
        }
    }
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #ccc;
}
