From 6db943971772cab4e9943ff853039cff4ae65e51 Mon Sep 17 00:00:00 2001
From: Vladimir Kharlampidi <nolimits4web@gmail.com>
Date: Tue, 24 Jan 2023 14:44:10 +0300
Subject: [PATCH] feat(navigation): more CSS variables to control appearance
 and position

---
 src/modules/navigation/navigation.less | 9 +++++----
 src/modules/navigation/navigation.scss | 9 +++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/modules/navigation/navigation.less b/src/modules/navigation/navigation.less
index 6ea6361b6..71abf0a28 100644
--- a/src/modules/navigation/navigation.less
+++ b/src/modules/navigation/navigation.less
@@ -1,14 +1,15 @@
 :root {
   --swiper-navigation-size: 44px;
   /*
-  --swiper-navigation-offset: 10px;
+  --swiper-navigation-top-offset: 50%;
+  --swiper-navigation-sides-offset: 10px;
   --swiper-navigation-color: var(--swiper-theme-color);
   */
 }
 .swiper-button-prev,
 .swiper-button-next {
   position: absolute;
-  top: 50%;
+  top: var(--swiper-navigation-top-offset, 50%);
   width: calc(var(--swiper-navigation-size) / 44 * 27);
   height: var(--swiper-navigation-size);
   margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
@@ -45,7 +46,7 @@
   &:after {
     content: 'prev';
   }
-  left: var(--swiper-navigation-offset, 10px);
+  left: var(--swiper-navigation-sides-offset, 10px);
   right: auto;
 }
 .swiper-button-next,
@@ -53,7 +54,7 @@
   &:after {
     content: 'next';
   }
-  right: var(--swiper-navigation-offset, 10px);
+  right: var(--swiper-navigation-sides-offset, 10px);
   left: auto;
 }
 .swiper-button-lock {
diff --git a/src/modules/navigation/navigation.scss b/src/modules/navigation/navigation.scss
index 889b93174..e06cbbc6e 100644
--- a/src/modules/navigation/navigation.scss
+++ b/src/modules/navigation/navigation.scss
@@ -3,7 +3,8 @@
   :root {
     --swiper-navigation-size: 44px;
     /*
-  --swiper-navigation-color: var(--swiper-theme-color);
+  --swiper-navigation-top-offset: 50%;
+  --swiper-navigation-sides-offset: 10px;
   --swiper-navigation-color: var(--swiper-theme-color);
   */
   }
@@ -11,7 +12,7 @@
 .swiper-button-prev,
 .swiper-button-next {
   position: absolute;
-  top: 50%;
+  top: var(--swiper-navigation-top-offset, 50%);
   width: calc(var(--swiper-navigation-size) / 44 * 27);
   height: var(--swiper-navigation-size);
   margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
@@ -48,7 +49,7 @@
   &:after {
     content: 'prev';
   }
-  left: var(--swiper-navigation-offset, 10px);
+  left: var(--swiper-navigation-sides-offset, 10px);
   right: auto;
 }
 .swiper-button-next,
@@ -56,7 +57,7 @@
   &:after {
     content: 'next';
   }
-  right: var(--swiper-navigation-offset, 10px);
+  right: var(--swiper-navigation-sides-offset, 10px);
   left: auto;
 }
 .swiper-button-lock {