From 92752d5953270de085dfdf72d6e8c42a30a1eb35 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 18 Mar 2025 21:09:59 +0900
Subject: [PATCH] [Update] Main Page: MainFunctionSwitch: to be a bit smaller
 than before for allow long label on its main function.

---
 .../MainFunctionSwitch.module.scss            |  4 ++-
 src-ui/common_css/mixins.scss                 | 28 +++++++++++--------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
index 750505f7..0c1949bf 100644
--- a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
+++ b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
@@ -78,7 +78,9 @@ $pending_label_color: var(--dark_500_color);
 }
 
 .toggle_control {
-    @include toggle_control_styles;
+    // @include toggle_control_styles;
+    @include toggle_control_styles($toggle_width: 3.6rem, $toggle_height: 1.4rem);
+
     display: flex;
     justify-content: end;
     align-items: center;
diff --git a/src-ui/common_css/mixins.scss b/src-ui/common_css/mixins.scss
index 4e563960..b0229e88 100644
--- a/src-ui/common_css/mixins.scss
+++ b/src-ui/common_css/mixins.scss
@@ -48,35 +48,41 @@ $toggle_width: 4rem;
 $toggle_height: 1.6rem;
 $toggle_gutter: 0.1rem;
 $toggle_radius: 50%;
-$toggle_control_speed: .15s;
+$toggle_control_speed: 0.15s;
 $toggle_control_ease: ease-out;
 
-$toggle_radius: calc($toggle_height / 2);
-$toggle_control_size: $toggle_height - calc($toggle_gutter * 2);
+@mixin toggle_control_styles(
+    $toggle_width: $toggle_width,
+    $toggle_height: $toggle_height,
+    $toggle_gutter: $toggle_gutter,
+    $toggle_background_color_on: $toggle_background_color_on,
+    $toggle_background_color_off: $toggle_background_color_off,
+    $toggle_control_color: $toggle_control_color,
+    $toggle_control_speed: $toggle_control_speed,
+    $toggle_control_ease: $toggle_control_ease
+) {
+    $toggle_radius: calc($toggle_height / 2);
+    $toggle_control_size: calc($toggle_height - ($toggle_gutter * 2));
 
-@mixin toggle_control_styles {
-    display: block;
-    position: relative;
-    height: 100%;
-    width: auto;
     .control {
         position: relative;
-        height: $toggle_height;
         width: $toggle_width;
+        height: $toggle_height;
         border-radius: $toggle_radius;
         background-color: $toggle_background_color_off;
+        transition: background-color $toggle_control_speed $toggle_control_ease;
         &:after {
             content: "";
             position: absolute;
-            left: $toggle_gutter;
             top: $toggle_gutter;
+            left: $toggle_gutter;
             width: $toggle_control_size;
             height: $toggle_control_size;
             border-radius: $toggle_radius;
             background: $toggle_control_color;
             transition: left $toggle_control_speed $toggle_control_ease;
         }
-        &.is_pending:after{
+        &.is_pending:after {
             background-color: var(--dark_600_color);
         }
         &.is_hovered {