// PAGINATION
.wpstream-pagination {
  width: 100%;
  margin-top: 16px;
}


.pagination {
    display: flex;
    justify-content: flex-start;
    gap: 15px;

    &__link {
        a {
        border: 1px solid  var(--secondary-white-color);  
        border-radius: 24px !important;
        color: var(--secondary-white-color);
        font-weight: 500;
        display: flex;
        align-items: center;  
        background-color: var(--night-color);
        svg {
            path {
                fill: var(--secondary-white-color);
            }
        }
        
        &:hover {
            border: 1px solid  var(--secondary-white-color);
            background-color: var(--secondary-white-color) ;
            color:  var(--night-color);
            
            svg {
                path {
                    fill: var(--night-color);
                }
            }
        }
        }

        &--prev {
        a {
            padding: 7px 20px 7px 12px;
        }
        }

        &--next {
        a {
            padding: 7px 12px 7px 20px;
        }
        }
    }
    
    &__page-items {
        display: flex;
        gap: 12px;

        .page-item {
        a {
            border: 1px solid  var(--secondary-white-color);
            border-radius: 50% !important;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color:var(--night-color);
            color: var(--secondary-white-color);

            &:hover {
            background-color:var(--secondary-white-color);
            color:  var(--night-color);
            }
        }
        }

        .page-item.active {
            a {
                background-color:var(--secondary-white-color);
                color: var(--night-color);
            }
        }
    }

    
}

.wpstream-grid-container{
        .pagination__link--next .page-link,
        .pagination__link--prev .page-link{
            padding: 7px 20px 7px 12px!important;
              width: auto !important;
        }
        
        .page-item{
            border:none;

            .page-link{
                border-radius: 50%;
                width: 40px;
                height: 40px;
                text-align: center;            
                border: 1px solid var(--wpstream-header-search-border-color, var(--wpstream-header-search-border-color-default));
                background-color: transparent;
                color: var(--bs-body-color);
                padding: 0px;
                line-height: 38px;
                &.current,
                &:hover {
                    border: 1px solid var(--night-color);
                    background-color: var(--secondary-white-color) ;
                    color:  var(--night-color);
                }
            }
            
        }
      
}











.wpstream-dashboard-page-wrapper{
    .pagination {
    display: flex;
    justify-content: flex-start;
    gap: 15px;

    &__link {
        a {
        border: 1px solid var(--light-grey);
        border-radius: 24px !important;
        color: var(--night-color);
        font-weight: 500;
        display: flex;
        align-items: center;
        background-color:transparent;
        svg {
            path {
                fill: var(--night-color);
            }
        } 
     
       
        &:hover {
            border: 1px solid var(--night-color);
            background-color: var(--night-color);
            color: var(--secondary-white-color);
            
            svg {
                path {
                    fill: var(--secondary-white-color);
                }
            }
            }
        }

        &--prev {
        a {
            padding: 7px 20px 7px 12px;
        }
        }

        &--next {
        a {
            padding: 7px 12px 7px 20px;
        }
        }
    }
    
    &__page-items {
        display: flex;
        gap: 12px;

        .page-item {
        a {
            border: none;
            border-radius: 50% !important;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--night-color);  
            background-color:transparent;
            border: 1px solid var(--light-grey);
            &:hover {
            background-color: var(--night-color);
            color: var(--secondary-white-color);
            }
        }
        }

        .page-item.active {
        a {
            background-color: var(--night-color);
            color: var(--secondary-white-color);
        }
        }
    }
    }
}