/* ===== Pagination Component ===== */

.ui-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.ui-pagination-nav-group,
.ui-pagination-list {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-pagination-list {
    flex-wrap: wrap;
}

.ui-pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    border: 1px solid var(--pagination-item-border, var(--meb-border-pagination-item, var(--meb-border-pagination)));
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.ui-pagination-page,
.ui-pagination-nav {
    min-width: var(--pagination-item-size, 48px);
    min-height: var(--pagination-item-size, 48px);
    padding: 0 16px;
    border-radius: var(--pagination-radius, 40px);
    background: var(--pagination-item-background, var(--meb-surface-pagination-item, var(--meb-surface-card)));
    color: var(--pagination-item-foreground, var(--meb-text-pagination-item, var(--meb-text-default)));
    cursor: pointer;
}

.ui-pagination-page {
    box-shadow: var(--pagination-shadow, none);
}

.ui-pagination-nav {
    min-width: calc(var(--pagination-item-size, 48px) + 16px);
    min-height: calc(var(--pagination-item-size, 48px) + 16px);
    padding: 0 24px;
    box-shadow: var(--pagination-shadow, none);
}

.ui-pagination-page:hover:not(:disabled),
.ui-pagination-nav:hover:not(:disabled) {
    background: var(--pagination-item-hover-background, var(--meb-surface-pagination-item-hover, var(--meb-surface-input-filled)));
}

.ui-pagination-page.active {
    background: var(--pagination-item-active-background, var(--meb-surface-pagination-item-active, var(--meb-accent-primary)));
    color: var(--pagination-item-active-foreground, var(--meb-text-pagination-item-active, var(--meb-text-inverse)));
    border-color: var(--pagination-item-active-border, var(--meb-border-pagination-item-active, var(--meb-border-accent)));
    box-shadow: var(--pagination-shadow-active, var(--meb-shadow-pagination-active, var(--meb-shadow-none)));
}

.ui-pagination-page:focus-visible,
.ui-pagination-nav:focus-visible {
    outline: 2px solid var(--pagination-focus-ring, var(--meb-focus-pagination, var(--meb-border-accent)));
    outline-offset: 2px;
}

.ui-pagination-page.disabled,
.ui-pagination-page:disabled,
.ui-pagination-nav.disabled,
.ui-pagination-nav:disabled {
    background: var(--pagination-item-disabled-background, var(--meb-surface-pagination-item-disabled, var(--meb-surface-disabled)));
    color: var(--pagination-item-disabled-foreground, var(--meb-text-pagination-item-disabled, var(--meb-text-muted)));
    border-color: var(--pagination-item-disabled-border, var(--meb-border-pagination-item-disabled, var(--meb-border-subtle)));
    cursor: not-allowed;
}

.ui-pagination-nav.disabled .ui-pagination-icon,
.ui-pagination-nav:disabled .ui-pagination-icon {
    color: var(--pagination-icon-disabled, var(--meb-icon-pagination-disabled, currentColor));
}

.ui-pagination-ellipsis {
    min-width: var(--pagination-item-size, 48px);
    min-height: var(--pagination-item-size, 48px);
    padding: 0 8px;
    border: none;
    background: transparent;
    color: var(--pagination-item-foreground, var(--meb-text-pagination-item, var(--meb-text-default)));
}

.ui-pagination-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--pagination-icon, var(--meb-icon-pagination, currentColor));
}

.ui-pagination-icon svg {
    width: 100%;
    height: 100%;
}

.ui-pagination.variant-compact,
.ui-pagination.variant-compact .ui-pagination-nav-group,
.ui-pagination.variant-compact .ui-pagination-list {
}

.ui-pagination.variant-compact .ui-pagination-page,
.ui-pagination.variant-compact .ui-pagination-ellipsis {
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
}

.ui-pagination.variant-compact .ui-pagination-nav {
    min-width: 52px;
    min-height: 52px;
    padding: 0 18px;
}

.ui-pagination.variant-minimal .ui-pagination-page,
.ui-pagination.variant-minimal .ui-pagination-nav {
    border-color: var(--pagination-border, var(--meb-border-pagination, var(--meb-border-subtle)));
    box-shadow: none;
}

.ui-pagination.variant-minimal .ui-pagination-page.active {
    box-shadow: none;
}

/* Spread layout: prev/next anchored to the row edges with the page numbers centered between
   (Figma game-list desktop). The number list takes the remaining width and centers its items. */
.ui-pagination.variant-spread {
    justify-content: space-between;
}

.ui-pagination.variant-spread .ui-pagination-list {
    flex: 1 1 auto;
}

@media (prefers-reduced-motion: reduce) {
    .ui-pagination-item {
        transition: none;
    }
}