feat: add customization examples for navigation component in documentation and improve CSS for better layout

Author: ismail9k

docs/components/navigation.md

@@ -68,6 +68,46 @@ You can customize the navigation buttons using slots:
 | `--vc-nav-height`        | `30px`                    | Navigation button height        |
 | `--vc-nav-width`         | `30px`                    | Navigation button width         |
 
+### Customization Examples
+
+There are two ways to customize the navigation appearance:
+
+#### 1. Using CSS Custom Properties
+
+```css
+.carousel {
+  --vc-nav-background: rgba(0, 0, 0, 0.3);
+  --vc-nav-color: white;
+  --vc-nav-color-hover: #e5e5e5;
+  --vc-nav-border-radius: 50%;
+  --vc-nav-width: 40px;
+  --vc-nav-height: 40px;
+}
+```
+
+#### 2. Direct CSS Override
+
+```css
+.carousel__next,
+.carousel__prev {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  color: white;
+}
+
+.carousel__next:hover,
+.carousel__prev:hover {
+  color: #e5e5e5;
+}
+
+.carousel__next--disabled,
+.carousel__prev--disabled {
+  opacity: 0.3;
+}
+```
+
 ## Accessibility
 
 - Buttons include descriptive ARIA labels

src/components/Navigation/Navigation.css

@@ -13,18 +13,15 @@
   background: var(--vc-nav-background);
   border: 0;
   border-radius: var(--vc-nav-border-radius);
-  box-sizing: content-box;
   color: var(--vc-nav-color);
   cursor: pointer;
   display: flex;
   font-size: var(--vc-nav-height);
   height: var(--vc-nav-height);
   justify-content: center;
-  margin: 0 10px;
   padding: 0;
   position: absolute;
-  text-align: center;
-  top: 50%;
+  inset-block-start: 50%;
   transform: translateY(-50%);
   width: var(--vc-nav-width);
 }
@@ -36,50 +33,37 @@
 }
 
 .carousel__next {
-  right: 0;
+  inset-inline-end: 0;
 }
 
 .carousel__prev {
-  left: 0;
+  inset-inline-start: 0;
 }
 
-.carousel.is-btt {
-  .carousel__next {
-    top: 0;
-  }
+.carousel.is-vertical {
+  .carousel__next,
   .carousel__prev {
-    bottom: 0;
+    inset-inline: auto 50%;
+    inset-block-start: auto;
+    transform: translateX(50%);
   }
-}
 
-.carousel.is-rtl {
-  .carousel__next {
-    left: 0;
-    right: auto;
+  &.is-ttb {
+    .carousel__next {
+      inset-block-end: 0;
+    }
+    .carousel__prev {
+      inset-block-start: 0;
+    }
   }
-  .carousel__prev {
-    left: auto;
-    right: 0;
-  }
-}
 
-.carousel.is-ttb {
-  .carousel__next {
-    bottom: 0;
-  }
-  .carousel__prev {
-    top: 0;
-  }
-}
-
-.carousel.is-vertical {
-  .carousel__next,
-  .carousel__prev {
-    left: auto;
-    margin: 5px auto;
-    right: 50%;
-    top: auto;
-    transform: translate(50%);
+  &.is-btt {
+    .carousel__next {
+      inset-block-start: 0;
+    }
+    .carousel__prev {
+      inset-block-end: 0;
+    }
   }
 }