.pagination,
.pager {
    @include list-unstyled;
    @include pagination-link-style;
}

.pagination {
    li {
        a,
        span {
            padding: .4em 1em;
            &.ic {
                padding: .4em .75em;
            }
        }
        a {
            color: #828282;
        }
        &.active {
            span {
                color: $brand-primary;
                border-bottom: 1px solid $brand-primary;
            }
        }
    }
}

.pager {
    li {
        a {
            color: $brand-primary;
            padding: .5em .75em;
            &.prev .rex-icon {
                padding-right: 1em;
            }
            &.next .rex-icon {
                padding-left: 1em;
            }
        }
    }
    &.pager-title {
        li {
            a {
                background: transparent;
            }
            .prev-title {
                position: relative;
                &:before {
                    content: 'Prev';
                    color: #686868;
                    position: absolute;
                    top: -1.5em;
                    left: 0;
                    font-size: 1.2rem;
                }
                &:lang(ja) {
                    &:before {
                        content: '前へ';
                    }
                }
            }
            .next-title {
                position: relative;
                &:before {
                    content: 'Next';
                    color: #686868;
                    position: absolute;
                    top: -1.5em;
                    right: .5em;
                    font-size: 1.2rem;
                }
                &:lang(ja) {
                    &:before {
                        content: '次へ';
                    }
                }
            }
        }
    }
}