/* Shared Pagination composition. Button and Select own their visual states. */
.octopus-pagination[hidden] { display:none; }
.octopus-pagination {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: var(--space-component-sm);
    width: 100%;
    min-width: 0;
    font-family: var(--font-sans);
}
.octopus-pagination__info { display:flex; min-width:0; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-component-sm); }
.octopus-pagination[data-octopus-pagination-size="lg"] > :is(.octopus-button,[data-flux-button]) { height:var(--control-height-lg); min-height:var(--control-height-lg); }
.octopus-pagination__info > p { margin:0; white-space:nowrap; font-size:var(--type-body-size); line-height:var(--type-body-leading); color:var(--color-text-primary); }
.octopus-pagination__info > p strong { font-weight:600; }
.octopus-pagination [data-octopus-pagination-per-page] { margin:0; min-width:0; max-width:100%; }
.octopus-pagination__apply { margin-top:var(--space-component-xs); }
[data-octopus-pagination-per-page][data-enhanced] .octopus-pagination__apply { display:none; }
@media(max-width:39.9375rem) {
    .octopus-pagination { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:calc(var(--space-component-xs) * 1.5); }
    .octopus-pagination__info { grid-column:1 / -1; grid-row:1; gap:calc(var(--space-component-xs) * 1.5); }
    .octopus-pagination > [rel="prev"] { grid-column:1; grid-row:2; }
    .octopus-pagination > [rel="next"] { grid-column:2; grid-row:2; }
    .octopus-pagination__info > p { font-size:var(--type-body-secondary-size); }
}

/* Compact is the same pagination, joined into a single small control.
   IconButton ghost and Tooltip retain canonical hover/focus/disabled behavior. */
.octopus-pagination[data-octopus-pagination-variant="compact"] {
    --pagination-height:var(--control-height-md);
    --pagination-font-size:var(--type-body-secondary-size);
    --pagination-padding:calc(var(--space-component-xs) * 1.5);
    position:relative;
    width:max-content;
    max-width:100%;
    height:var(--pagination-height);
    gap:0;
    border-radius:var(--shape-radius-component);
    background:var(--color-white);
}
.octopus-pagination[data-octopus-pagination-variant="compact"]:not([hidden]) { display:inline-flex; }
.octopus-pagination[data-octopus-pagination-variant="compact"][data-octopus-pagination-size="sm"] {
    --pagination-height:var(--control-height-sm);
    --pagination-font-size:var(--type-caption-size);
    --pagination-padding:var(--space-component-xs);
}
.octopus-pagination[data-octopus-pagination-variant="compact"][data-octopus-pagination-size="lg"] {
    --pagination-height:var(--control-height-lg);
    --pagination-font-size:var(--type-body-size);
    --pagination-padding:calc(var(--space-component-xs) * 2);
}
/* Paint the frame without subtracting from the canonical 32/40/48px hit areas. */
.octopus-pagination[data-octopus-pagination-variant="compact"]::after {
    content:"";
    position:absolute;
    inset:0;
    border:1px solid var(--color-border-subtle);
    border-radius:inherit;
    pointer-events:none;
}
.dark .octopus-pagination[data-octopus-pagination-variant="compact"] { background:var(--color-bg-surface); }
.octopus-pagination[data-octopus-pagination-variant="compact"] > [data-flux-tooltip] { display:inline-flex; flex:none; }
.octopus-pagination[data-octopus-pagination-variant="compact"] :is([data-flux-button],.octopus-button) {
    width:var(--pagination-height);
    height:var(--pagination-height);
    min-height:var(--pagination-height);
    padding:0;
    border-radius:0;
}
.octopus-pagination[data-octopus-pagination-variant="compact"] [rel="prev"] {
    border-start-start-radius:var(--shape-radius-component);
    border-end-start-radius:var(--shape-radius-component);
}
.octopus-pagination[data-octopus-pagination-variant="compact"] [rel="next"] {
    border-start-end-radius:var(--shape-radius-component);
    border-end-end-radius:var(--shape-radius-component);
}
.octopus-pagination[data-octopus-pagination-variant="compact"] .octopus-pagination__info {
    flex:none;
    align-self:stretch;
    padding-inline:var(--pagination-padding);
    border-inline:1px solid var(--color-border-subtle);
}
.octopus-pagination[data-octopus-pagination-variant="compact"] .octopus-pagination__info > p {
    display:flex;
    align-items:baseline;
    gap:calc(var(--space-component-xs) / 2);
    font-size:var(--pagination-font-size);
    font-variant-numeric:tabular-nums;
    color:var(--color-text-secondary);
}
.octopus-pagination[data-octopus-pagination-variant="compact"] [data-pagination-current] { color:var(--color-text-primary); }
.octopus-pagination[data-octopus-pagination-variant="compact"] :is([data-pagination-current],[data-pagination-total]) {
    min-width:var(--pagination-digits,1ch);
    text-align:center;
}