/* =====================================================
   SPI UI Framework
   Pagination
   Version : 1.0.0
===================================================== */

.spi-pagination{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
}

.spi-pagination-item{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:36px;
    height:36px;

    padding:0 10px;

    border:1px solid #e2e8f0;
    border-radius:9px;

    background:#ffffff;

    color:#475569;

    font-size:13px;
    font-weight:600;

    text-decoration:none;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.spi-pagination-item:hover{
    background:#f8fafc;

    border-color:#cbd5e1;

    color:#0f172a;

    transform:translateY(-1px);
}

.spi-pagination-active{
    background:#16a866;

    border-color:#16a866;

    color:#ffffff;

    cursor:default;
}

.spi-pagination-active:hover{
    background:#16a866;

    border-color:#16a866;

    color:#ffffff;

    transform:none;
}

.spi-pagination-disabled{
    opacity:.4;

    cursor:not-allowed;
}

.spi-pagination-disabled:hover{
    transform:none;

    background:#ffffff;
}

.spi-pagination-dots{
    border-color:transparent;

    background:transparent;

    cursor:default;
}

.spi-pagination-dots:hover{
    border-color:transparent;

    background:transparent;

    transform:none;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:768px){

    .spi-pagination{
        justify-content:center;
    }

    .spi-pagination-item{
        min-width:34px;
        height:34px;

        padding:0 8px;
    }

}