feat(pagination): enhance component's interactive states (#10485)

**Related Issue:**
[#9991](#9991)

## Summary

- Add `2px` gap between all of the component's elements.
- Update chevron icon on `:hover` and `:pressed` to `text-color-1`
(currently `brand`).
- Update `background-color` on `:pressed` to `bg-foreground-3`.
- Update inactive page `:pressed` to `text-color-1` and
`bg-foreground-3`.
- Increase active state `:focus` `bottom-border` to `4px`.

packages/calcite-components/src/components/pagination/pagination.scss

@@ -5,6 +5,7 @@
 
 .list {
   @apply flex list-none m-0 p-0;
+  column-gap: var(--calcite-spacing-base);
 }
 
 .list-item {
@@ -87,18 +88,25 @@
   &:hover {
     @apply border-b-color-2;
   }
+  &:active {
+    @apply bg-foreground-3 text-color-1;
+  }
   &.selected {
     @apply text-color-1 border-b-color-brand font-medium;
+
+    &:focus {
+      border-block-end-width: var(--calcite-spacing-xxs);
+      padding-block-start: var(--calcite-spacing-base);
+    }
   }
 }
 
 .chevron {
   &:hover {
-    @apply bg-foreground-2;
-    color: theme("backgroundColor.brand");
+    @apply bg-foreground-2 text-color-1;
   }
   &:active {
-    @apply bg-foreground-3;
+    @apply bg-foreground-3 text-color-1;
   }
   &.disabled {
     @apply pointer-events-none bg-transparent;