/* =========================================================
   Application UI - Pagination Component
   Path: public/assets/app/components/pagination/pagination.css

   Supports:
   - previous / next
   - page numbers
   - active state
   - disabled state
   - compact responsive wrapping
   - RTL / LTR

   Canonical Notes
   ---------------------------------------------------------
   - render only
   - consumes only tokens from variables.css
   - no theme logic
   - no business logic
========================================================= */


/* =========================================================
   ROOT CONTAINER
========================================================= */

.m-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--pagination_gap);

    padding: var(--pagination_padding_y) var(--pagination_padding_x);
    background: var(--pagination_bg);
}


/* =========================================================
   SUMMARY TEXT
========================================================= */

.m-pagination__summary {
    flex: 0 0 auto;

    color: var(--pagination_summary_text);
    font-size: var(--pagination_summary_font_size);
    font-weight: var(--pagination_summary_font_weight);
    line-height: var(--pagination_summary_line_height);
    white-space: nowrap;
}


/* =========================================================
   LIST CONTAINER
========================================================= */

.m-pagination__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--pagination_gap);
    min-width: 0;
}


/* =========================================================
   ITEM BASE
========================================================= */

.m-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    min-width: var(--pagination_item_min_width);
    height: var(--pagination_item_height);
    min-height: var(--pagination_item_height);
    padding-inline: var(--pagination_item_padding_inline);

    border: var(--pagination_item_border_width) solid var(--pagination_item_border);
    border-radius: var(--pagination_item_radius);

    background: var(--pagination_item_bg);
    color: var(--pagination_item_text);
    box-shadow: var(--pagination_item_shadow);

    font-size: var(--pagination_item_font_size);
    font-weight: var(--pagination_item_font_weight);
    line-height: var(--pagination_item_line_height);
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color var(--pagination_transition_fast),
        color var(--pagination_transition_fast),
        border-color var(--pagination_transition_fast),
        box-shadow var(--pagination_transition_fast),
        opacity var(--pagination_transition_fast);
}


/* =========================================================
   HOVER
========================================================= */

.m-pagination__item:hover {
    background: var(--pagination_item_hover_bg);
    color: var(--pagination_item_hover_text);
    border-color: var(--pagination_item_hover_border);
}


/* =========================================================
   FOCUS
========================================================= */

.m-pagination__item:focus,
.m-pagination__item:focus-visible {
    outline: none;
    background: var(--pagination_item_focus_bg);
    color: var(--pagination_item_focus_text);
    border-color: var(--pagination_item_focus_border);
    box-shadow: var(--pagination_item_focus_ring);
}


/* =========================================================
   ACTIVE PAGE
========================================================= */

.m-pagination__item.is-active {
    background: var(--pagination_item_active_bg);
    color: var(--pagination_item_active_text);
    border-color: var(--pagination_item_active_border);
    cursor: default;
}


/* =========================================================
   DISABLED
========================================================= */

.m-pagination__item.is-disabled {
    background: var(--pagination_item_disabled_bg);
    color: var(--pagination_item_disabled_text);
    border-color: var(--pagination_item_disabled_border);
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}


/* =========================================================
   PREVIOUS / NEXT
========================================================= */

.m-pagination__item--nav {
    font-weight: var(--pagination_nav_font_weight);
}


/* =========================================================
   ELLIPSIS
========================================================= */

.m-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    min-width: var(--pagination_item_min_width);
    height: var(--pagination_item_height);

    color: var(--pagination_ellipsis_text);
    font-size: var(--pagination_ellipsis_font_size);
    line-height: var(--pagination_ellipsis_line_height);
    white-space: nowrap;
}


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

@media (max-width: 640px) {
    .m-pagination {
        flex-direction: column;
        align-items: stretch;
        gap: var(--pagination_mobile_gap);
    }

    .m-pagination__list {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        justify-content: safe center;
        gap: min(var(--pagination_gap), .375rem);
        padding-block-end: 2px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .m-pagination__item {
        min-width: max(var(--pagination_item_min_width), 2.5rem);
        min-height: max(var(--pagination_item_height), 2.5rem);
    }

    .m-pagination__summary {
        text-align: center;
        white-space: normal;
    }
}