made pagination and mostly finalized the searchbox

public/css/searchbox.css

@@ -323,6 +323,45 @@
   gap: 0;
 }
 
+/* Pagination */
+#pexpo-core-pagination {
+  margin-top: 20px;
+  display:flex;
+  justify-content:center;
+  gap: 12px;
+}
+
+#pexpo-core-pagination button {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  box-shadow: 0 8px 22px var(--stroke2);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  cursor:pointer;
+
+  &:focus-visible, &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: default;
+    box-shadow: none;
+  }
+}
+
+#pexpo-core-page-number {
+  font-size: 14px;
+  color: var(--text);
+  text-align: center;
+  display: flex;
+  align-items: center;
+}
+
 /* Filter drawer */
 .pexpo-core-filterDrawerBackdrop {
   position:absolute;
@@ -407,33 +446,33 @@
   width: 50px;
   height: 25px;
   cursor: pointer;
-}
 
-.pexpo-core-toggle label::before {
-  content: '';
-  display: block;
-  width: 100%; 
-  height: 100%;
-  border-radius: 4px;
-  background: var(--toggle-bg-off);
-  border: 1.5px solid color-mix(in srgb, var(--toggle-bg-off), black var(--darker));
-  box-sizing: border-box;
-  transition: all 0.2s ease-in;
-}
+  &::before {
+    content: '';
+    display: block;
+    width: 100%; 
+    height: 100%;
+    border-radius: 4px;
+    background: var(--toggle-bg-off);
+    border: 1.5px solid color-mix(in srgb, var(--toggle-bg-off), black var(--darker));
+    box-sizing: border-box;
+    transition: all 0.2s ease-in;
+  }
 
-.pexpo-core-toggle label::after {
-  content: '';
-  display: block;
-  height: 21px;
-  width: 21px;
-  border-radius: 2px;
-  background: var(--toggle-nub-color);
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  transition: all 0.2s ease-in;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-} 
+  &::after {
+    content: '';
+    display: block;
+    height: 21px;
+    width: 21px;
+    border-radius: 2px;
+    background: var(--toggle-nub-color);
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    transition: all 0.2s ease-in;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  }
+}
 
 .pexpo-core-toggle input:checked + label::before {
   background: var(--toggle-bg-on);
@@ -595,6 +634,70 @@
   right: -4px;
 }
 
+.pexpo-core-icons-arrow-left {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  transform: scale(var(--ggs, 1));
+  width: 22px;
+  height: 22px;
+}
+.pexpo-core-icons-arrow-left::after,
+.pexpo-core-icons-arrow-left::before {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  left: 3px;
+}
+.pexpo-core-icons-arrow-left::after {
+  width: 8px;
+  height: 8px;
+  border-bottom: 2px solid;
+  border-left: 2px solid;
+  transform: rotate(45deg);
+  bottom: 7px;
+}
+.pexpo-core-icons-arrow-left::before {
+  width: 16px;
+  height: 2px;
+  bottom: 10px;
+  background: currentColor;
+}
+
+.pexpo-core-icons-arrow-right {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  transform: scale(var(--ggs, 1));
+  width: 22px;
+  height: 22px;
+}
+.pexpo-core-icons-arrow-right::after,
+.pexpo-core-icons-arrow-right::before {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  right: 3px;
+}
+.pexpo-core-icons-arrow-right::after {
+  width: 8px;
+  height: 8px;
+  border-top: 2px solid;
+  border-right: 2px solid;
+  transform: rotate(45deg);
+  bottom: 7px;
+}
+.pexpo-core-icons-arrow-right::before {
+  width: 16px;
+  height: 2px;
+  bottom: 10px;
+  background: currentColor;
+}
+
+
+
 @media (max-width: 720px) {
   .pexpo-core-topbar { flex-direction:column; }
   .pexpo-core-searchWrap { justify-content:stretch; }