style: update Pagination CSS variables for improved layout and responsiveness

Author: ismail9k

docs/components/pagination.md

@@ -37,11 +37,11 @@ import { Pagination as CarouselPagination } from 'vue3-carousel'
 | --------------------------- | ------------------------- | ---------------------------------- |
 | `--vc-pgn-active-color`     | `var(--vc-clr-primary)`   | Active pagination button color     |
 | `--vc-pgn-background-color` | `var(--vc-clr-secondary)` | Pagination button background color |
-| `--vc-pgn-border-radius`    | `10px`                    | Pagination button border radius    |
+| `--vc-pgn-border-radius`    | `0`                       | Pagination button border radius    |
 | `--vc-pgn-gap`              | `6px`                     | Gap between pagination buttons     |
 | `--vc-pgn-height`           | `4px`                     | Pagination button height           |
 | `--vc-png-bottom`           | `10px`                    | Bottom spacing for pagination      |
-| `--vc-png-left`             | `10px`                    | Left spacing for vertical mode     |
+| `--vc-png-left`             | `auto`                    | Left spacing for vertical mode     |
 | `--vc-png-right`            | `10px`                    | Right spacing for vertical mode    |
 | `--vc-pgn-width`            | `16px`                    | Pagination button width            |
 

src/components/Pagination/Pagination.css

@@ -1,11 +1,11 @@
 :root {
   --vc-pgn-active-color: var(--vc-clr-primary);
   --vc-pgn-background-color: var(--vc-clr-secondary);
-  --vc-pgn-border-radius: 10px;
+  --vc-pgn-border-radius: 0;
   --vc-pgn-gap: 6px;
   --vc-pgn-height: 4px;
   --vc-png-bottom: 10px;
-  --vc-png-left: 10px;
+  --vc-png-left: auto;
   --vc-png-right: 10px;
   --vc-pgn-width: 16px;
 }