From 71b836ec7b0e4b9ec3683f03ecd78e509980de84 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 14:37:03 +0300
Subject: [PATCH] FlightsMapFilter exchange button: 35x40 pill with +/-10px
 margin overlap (Angular .button-change parity)

---
 .../flights-map/components/FlightsMapStartPage.scss | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/features/flights-map/components/FlightsMapStartPage.scss b/src/features/flights-map/components/FlightsMapStartPage.scss
index b8f037a4..28addf1c 100644
--- a/src/features/flights-map/components/FlightsMapStartPage.scss
+++ b/src/features/flights-map/components/FlightsMapStartPage.scss
@@ -210,21 +210,26 @@
     }
   }
 
+  // Mirrors Angular's `.change-container .button-change` under
+  // left-accordeon: a 35×40 pill sitting between the two city pickers,
+  // shifted up/down by $space-m so the button overlaps the two inputs
+  // rather than sitting in the vertical gap between them.
   &__exchange {
     align-self: center;
     width: 35px;
-    height: vars.$standard-button-height;
-    background: transparent;
+    height: vars.$medium-button-height;
+    margin-top: vars.$space-m;
+    margin-bottom: -(vars.$space-m);
+    background: colors.$white;
     border: none;
     box-shadow: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: opacity 0.2s;
     padding: 0;
 
-    &:hover { opacity: 0.7; }
+    &:hover { background-color: colors.$white; }
   }
 
   &__exchange-icon {