@import "variables";

vn-paging {
    display: block;
    text-align: center;
    
    ul {
        box-shadow: 0 0 .4em $color-shadow;
        background-color: #fff;
        display: inline-block;
        margin: 20px 0;
        border-radius: .1em;
        padding: 0;
    }
    li {
        display: inline;

        &:first-child > a,
        &:first-child > span {
            margin-left: 0;
        }
        &.active > a {
            background: $color-active;
            color: #fff;
        }
        & > a,
        & > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: inherit;
            text-decoration: none;
        }
        &:not(.active) > a:hover {
            background-color: #ddd;
        }
    }
}