.root {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

.info {
  flex: 1;
  white-space: nowrap;
}

.pages {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pageBtn,
.arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--space-1);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-family: var(--font-family);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  line-height: 1;
}

.pageBtn:hover:not(:disabled),
.arrow:hover:not(:disabled) {
  background: var(--color-bg);
  border-color: var(--color-border);
}

.pageBtn.active {
  background: var(--color-primary);
  color: var(--color-primary-fg);
  border-color: var(--color-primary);
  font-weight: 700;
  cursor: default;
}

.arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 28px;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  user-select: none;
}

.sizeSelect {
  height: 28px;
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-family: var(--font-family);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
}

.sizeSelect:focus {
  border-color: var(--color-primary);
}