From a361eeb7a54c11680aea8a8a86c5b0fed8b79d3f Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Mon, 20 Apr 2026 12:53:39 +0300
Subject: [PATCH] =?UTF-8?q?ScheduleSearchPage:=20direction-switch=20exact?=
 =?UTF-8?q?=20Angular=20styles=20(130=C3=9740,=20extra-blue=20segmented)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ScheduleSearchPage.scss        | 50 +++++++++++--------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/features/schedule/components/ScheduleSearchPage.scss b/src/features/schedule/components/ScheduleSearchPage.scss
index 5c148bbc..d8bca885 100644
--- a/src/features/schedule/components/ScheduleSearchPage.scss
+++ b/src/features/schedule/components/ScheduleSearchPage.scss
@@ -31,47 +31,53 @@
 }
 
 // `Туда / Обратно` segmented switch in the sticky header for round-
-// trip schedules. Mirrors Angular's `schedule-direction-switch`: two
-// flat buttons with a plane icon, the active one filled white.
+// trip schedules. Mirrors Angular `schedule-direction-switch.component`
+// exactly: fixed-width 130×40 buttons with an extra-blue border, the
+// active button filled extra-blue with white text.
 .schedule-direction-switch {
   display: flex;
-  gap: 0;
-  background: colors.$blue-extra-light;
-  border-bottom: 1px solid colors.$border;
 
   &__btn {
-    flex: 1;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
-    padding: 12px 16px;
-    background: transparent;
-    border: 0;
-    border-right: 1px solid colors.$border;
-    color: colors.$light-gray;
-    font-size: 14px;
+    width: 130px;
+    height: 40px;
+    background: colors.$white;
+    border: 1px solid colors.$extra-blue;
+    color: colors.$extra-blue;
+    font-size: 12px;
     font-weight: 500;
+    line-height: 16px;
     cursor: pointer;
     transition: background-color 120ms ease, color 120ms ease;
+    border-radius: 0;
 
-    &:last-child { border-right: 0; }
+    &:first-child {
+      border-right: none;
+      border-top-left-radius: vars.$border-radius;
+      border-bottom-left-radius: vars.$border-radius;
+    }
 
-    &:hover {
-      background: colors.$blue-extra-light;
-      color: colors.$blue;
+    &:last-child {
+      border-left: none;
+      border-top-right-radius: vars.$border-radius;
+      border-bottom-right-radius: vars.$border-radius;
     }
 
     &--active {
-      background: colors.$white;
-      color: colors.$blue;
+      background: colors.$extra-blue;
+      color: colors.$white;
 
-      .schedule-direction-switch__icon { color: colors.$blue; }
+      .schedule-direction-switch__icon { color: colors.$white; }
     }
   }
 
   &__icon {
-    color: colors.$light-gray;
+    margin-right: 5px;
+    width: 19px;
+    height: 19px;
+    color: colors.$extra-blue;
     transition: color 120ms ease;
     fill: currentColor;