/*
====================================================
 PM UI Framework - Pagination
 File: pagination.css
 Version: 0.1.0
====================================================
*/


/* -------------------------------------------------
   Pagination Base
------------------------------------------------- */

.pm-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}


/* Pagination items */

.pm-pagination li {
    margin: 0;
    padding: 0;
}


/* Pagination links */

.pm-pagination a,
.pm-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 2.5rem;
    height: 2.5rem;

    padding: 0 0.75rem;

    font-size: 0.95rem;
    font-weight: 500;

    text-decoration: none;

    border-radius: var(--pm-radius-md);

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

/* -------------------------------------------------
   Pagination Appearance
------------------------------------------------- */

.pm-pagination a {
    color: var(--pm-text);
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
}


/* Hover */

.pm-pagination a:hover {
    color: #ffffff;
    background: var(--pm-primary);
    border-color: var(--pm-primary);
    transform: translateY(-1px);
}


/* Active page */

.pm-pagination .active a,
.pm-pagination .is-active,
.pm-pagination span.current {
    color: #ffffff;
    background: var(--pm-primary);
    border-color: var(--pm-primary);

    cursor: default;
}


/* Disabled */

.pm-pagination .disabled a,
.pm-pagination .disabled span,
.pm-pagination a[aria-disabled="true"] {

    color: var(--pm-text-muted);

    background: var(--pm-background);

    border-color: var(--pm-border);

    pointer-events: none;

    opacity: .6;
}

/* -------------------------------------------------
   Pagination Navigation
------------------------------------------------- */


/* Previous / Next buttons */

.pm-pagination .pm-page-prev,
.pm-pagination .pm-page-next {

    padding-left: 1rem;
    padding-right: 1rem;

    font-weight: 600;
}


/* Arrow icons */

.pm-pagination .pm-page-prev::before {

    content: "←";

    margin-right: .4rem;

}


.pm-pagination .pm-page-next::after {

    content: "→";

    margin-left: .4rem;

}



/* -------------------------------------------------
   Pagination Sizes
------------------------------------------------- */


/* Small */

.pm-pagination-sm a,
.pm-pagination-sm span {

    min-width: 2rem;
    height: 2rem;

    padding: 0 .55rem;

    font-size: .85rem;

}


/* Large */

.pm-pagination-lg a,
.pm-pagination-lg span {

    min-width: 3rem;
    height: 3rem;

    padding: 0 1rem;

    font-size: 1.05rem;

}

/* -------------------------------------------------
   Pagination Variants
------------------------------------------------- */


/* Rounded pill style */

.pm-pagination-pill a,
.pm-pagination-pill span {

    border-radius: var(--pm-radius-pill);

}



/* -------------------------------------------------
   Pagination Alignment
------------------------------------------------- */

.pm-pagination-start {

    justify-content: flex-start;

}


.pm-pagination-end {

    justify-content: flex-end;

}



/* -------------------------------------------------
   Focus Accessibility
------------------------------------------------- */

.pm-pagination a:focus-visible {

    outline: 3px solid var(--pm-accent);

    outline-offset: 2px;

}



/* -------------------------------------------------
   Responsive
------------------------------------------------- */

@media (max-width: 576px) {


    .pm-pagination {

        flex-wrap: wrap;

        gap: .25rem;

    }


    .pm-pagination a,
    .pm-pagination span {

        min-width: 2.25rem;

        height: 2.25rem;

        padding: 0 .6rem;

        font-size: .9rem;

    }


    .pm-pagination .pm-page-prev,
    .pm-pagination .pm-page-next {

        padding-left: .75rem;

        padding-right: .75rem;

    }


}