.pagination-wrape {
    margin: 30px 0 50px;
    text-align: center;

    .pagination {
        display: block;
        li{
            position: relative;
            display: inline-block;
            justify-content: center;
            padding-top: 12px;
            margin: 0 12px;
            width: 63px;
            @include media-query (767px) {
                width: 40px;
                margin: 0 4px;
                padding-top: 6px;
            }
            &::before{
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 63px;
                height: 63px;
                background-color: $gray-3;
                border: 5px solid $white-1;
                border-radius: 50%;
                z-index: 20;
                margin: 0 auto;
                @include media-query (767px) {
                    width: 40px;
                    height: 40px;
                }
            }
            &:after{
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 63px;
                border: 1px solid $accent-1;
                border-radius: 50%;
                height: 63px;
                margin: 0 auto;
                z-index: 30;
                @include media-query (767px) {
                    width: 40px;
                    height: 40px;
                }
            }
            a {
                position: relative;
                z-index: 50;
                text-align: center;
                font-weight: 700;
                font-size: 21px;
                line-height: 130%;
                color: $gray-2;
                -webkit-transition: all 0.5s;
                transition: all 0.5s;
                display: block;
                transition: all 0.5s;
                border: none;
                background: transparent;

                @include media-query (767px) {
                    font-size: 16px;
                }

                &:hover {
                    color: $black-1

                }
                &.current {
                    color: $black-1
                }
            }
            &:first-child {
                margin-left: 0;
            }
            &.arrow-box{
                a{
                    i{
                        padding: 0;
                        font-size: 32px;
                        color: $accent-1;
                        background-color: transparent;
                        @include media-query (767px) {
                            font-size: 24px;
                        }
                    }
                }
                .page-link {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                    &:focus{
                        outline: 0;
                        box-shadow: none;
                    }
                }
                
                &::before{
                    display: none;
                }
                &:after{
                    display: none;
                }  
            }
        }
        
    }
    
}

.dark{
    .pagination-wrape {
        .pagination {
            li{
                &::before{
                    background-color: $black-1;
                    border-color: $black-2;
                }
                a {
                    color: $accent-1;
                    &:hover {
                        color: $gray-3;

                    }
                    &.current {
                        color: $gray-3;
                    }
                }
            }
            
        }
        
    }
}