Improved the pagination styling (rapidez#558)

resources/css/app.css

@@ -1,5 +1,6 @@
 @import 'components/vue-slider';
 @import './theme-variables.css';
+@import './components/pagination.css';
 
 @tailwind base;
 @tailwind components;

resources/css/components/pagination.css

@@ -0,0 +1,37 @@
+.pagination .pagination-button:first-child:nth-last-child(3),
+.pagination .pagination-button:first-child:nth-last-child(3) ~ .pagination-button {
+    @apply hidden;
+}
+
+.pagination {
+    @apply flex flex-wrap justify-center gap-x-2 !m-0 !my-6 max-md:gap-y-4;
+}
+
+.pagination-button {
+    @apply !font-semibold !font-sans !border !border-border !rounded !bg-white !text-neutral !shadow;
+}
+
+.pagination-button.active {
+    @apply !border !border-none !bg-primary !text-white !shadow-none;
+}
+
+.pagination-button:first-child {
+    @apply !mr-auto max-md:w-full max-md:order-last;
+}
+
+.pagination-button:last-child {
+    @apply !ml-auto max-md:w-full max-md:-order-1;
+}
+
+.pagination-button:not(:first-child):not(:last-child) {
+    @apply !m-0 !size-14 max-md:flex-1 max-md:w-auto;
+}
+
+.pagination-button:first-child,
+.pagination-button:last-child {
+    @apply h-14 px-6 max-md:!m-0;
+}
+
+.pagination-button[disabled] {
+    @apply opacity-60;
+}

resources/views/listing/products.blade.php

@@ -10,8 +10,10 @@
     :react="{and: reactiveFilters}"
     :sort-options="sortOptions"
     :inner-class="{
-        button: '!bg-inactive disabled:!bg-opacity-60 !text-white [&.active]:!bg-neutral',
-        sortOptions: '{{ $dropdownClasses }}'
+        button: 'pagination-button',
+        current: 'current-button',
+        sortOptions: '{{ $dropdownClasses }}',
+        pagination: 'pagination'
     }"
     prev-label="@lang('Prev')"
     next-label="@lang('Next')"