From 76452fa478dd304bd610b4669c88a3a313f343d8 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Tue, 24 Oct 2023 12:44:46 +0300
Subject: [PATCH] work for #7116 Semi-transparency drop-down menu issue.

---
 src/common-styles/sv-popup.scss | 145 ++++++++++++++------------------
 1 file changed, 61 insertions(+), 84 deletions(-)

diff --git a/src/common-styles/sv-popup.scss b/src/common-styles/sv-popup.scss
index 2e161a864d..09da3bcc8a 100644
--- a/src/common-styles/sv-popup.scss
+++ b/src/common-styles/sv-popup.scss
@@ -57,23 +57,16 @@ sv-popup {
 
   padding: calcSize(11) calcSize(15);
   box-sizing: border-box;
-
-  .sv-popup__body-content {
-    padding: calcSize(4);
-    height: auto;
-  }
 }
 
-.sv-popup--confirm-delete {
+.sv-popup--confirm-delete > .sv-popup__container {
+  border-radius: calcSize(1);
+
   .sv-popup__shadow {
     height: initial;
   }
 
-  .sv-popup__container {
-    border-radius: calcSize(1);
-  }
-
-  .sv-popup__body-content {
+  & > .sv-popup__shadow > .sv-popup__body-content {
     border-radius: calcSize(1);
   }
 
@@ -103,33 +96,34 @@ sv-popup {
   }
 }
 
-.sv-popup--modal>.sv-popup__container {
+.sv-popup--modal > .sv-popup__container {
   position: static;
 }
 
+.sv-popup--modal > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
+  padding: calcSize(4);
+  height: auto;
+  box-shadow: $shadow-large;
+  background-color: $background-dim-light;
+
+  .sv-popup__body-footer {
+    padding-bottom: 2px;
+  }
+}
+
 .sv-popup--overlay {
   width: 100%;
   height: $popup-overlay-height;
+}
 
-  .sv-popup__container {
-    background: $background-semitransparent;
-    max-width: 100vw;
-    max-height: calc(#{$popup-overlay-height} - 1 * #{$base-unit});
-    height: calc(#{$popup-overlay-height} - 1 * #{$base-unit});
-    width: 100%;
-    padding-top: calcSize(2);
-    border: unset;
-  }
-
-  .sv-popup__body-content {
-    max-height: $popup-overlay-height;
-    max-width: 100vw;
-    border-radius: calcCornerRadius(4) calcCornerRadius(4) 0px 0px;
-    background: $background;
-    box-shadow: $shadow-large;
-    padding: calcSize(3) calcSize(2) calcSize(2);
-    height: calc(100% - calc(1 * #{$base-unit}));
-  }
+.sv-popup--overlay > .sv-popup__container {
+  background: $background-semitransparent;
+  max-width: 100vw;
+  max-height: calc(#{$popup-overlay-height} - 1 * #{$base-unit});
+  height: calc(#{$popup-overlay-height} - 1 * #{$base-unit});
+  width: 100%;
+  padding-top: calcSize(2);
+  border: unset;
 
   .sv-popup__scrolling-content {
     height: calc(100% - (10 * var(--base-unit, 8px)));
@@ -143,6 +137,10 @@ sv-popup {
     width: 100%;
   }
 
+  .sv-popup__body-footer .sv-action {
+    flex: 1 0 0;
+  }
+
   .sv-popup__body-footer-item {
     width: 100%;
   }
@@ -154,10 +152,15 @@ sv-popup {
   }
 }
 
-.sv-popup--overlay {
-  .sv-popup__body-footer .sv-action {
-    flex: 1 0 0;
-  }
+.sv-popup--overlay > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
+  background-color: $background-dim;
+  max-height: $popup-overlay-height;
+  max-width: 100vw;
+  border-radius: calcCornerRadius(4) calcCornerRadius(4) 0px 0px;
+  background: $background;
+  box-shadow: $shadow-large;
+  padding: calcSize(3) calcSize(2) calcSize(2);
+  height: calc(100% - calc(1 * #{$base-unit}));
 }
 
 .sv-popup--modal .sv-popup__scrolling-content {
@@ -205,7 +208,7 @@ sv-popup {
   }
 }
 
-.sv-popup--show-pointer.sv-popup--right .sv-popup__container {
+.sv-popup--show-pointer.sv-popup--right > .sv-popup__container {
   transform: translate(calcSize(1));
 
   .sv-popup__pointer {
@@ -213,7 +216,7 @@ sv-popup {
   }
 }
 
-.sv-popup--show-pointer.sv-popup--left .sv-popup__container {
+.sv-popup--show-pointer.sv-popup--left > .sv-popup__container {
   transform: translate(calcSize(-1));
 
   .sv-popup__pointer {
@@ -271,50 +274,28 @@ sv-popup {
   }
 }
 
-.sv-popup--dropdown {
-  .sv-list__filter {
-    margin-bottom: calcSize(1);
-  }
-
-  .sv-popup__shadow {
-    box-shadow: $shadow-medium;
-  }
-
-  .sv-popup__body-content {
-    background-color: $background;
-    padding: calcSize(1) 0;
-    height: 100%;
-  }
-}
-
-.sv-popup.sv-popup--dropdown .sv-popup__body-content .sv-list {
-  background-color: transparent;
+.sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow {
+  box-shadow: $shadow-medium;
 }
+.sv-popup--dropdown > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
+  background-color: $background;
+  padding: calcSize(1) 0;
+  height: 100%;
 
-.sv-dropdown-popup {
-  .sv-popup__body-content {
-    padding: calcSize(0.5) 0;
+  .sv-list {
+    background-color: transparent;
   }
 
   .sv-list__filter {
-    margin-bottom: 0;
+    margin-bottom: calcSize(1);
   }
 }
 
-.sv-popup--modal {
-  .sv-popup__body-content {
-    box-shadow: $shadow-large;
-    background-color: $background-dim-light;
-  }
-
-  .sv-popup__body-footer {
-    padding-bottom: 2px;
-  }
-}
+.sv-dropdown-popup > .sv-popup__container > .sv-popup__shadow > .sv-popup__body-content {
+  padding: calcSize(0.5) 0;
 
-.sv-popup--overlay {
-  .sv-popup__body-content {
-    background-color: $background-dim;
+  .sv-list__filter {
+    margin-bottom: 0;
   }
 }
 
@@ -322,10 +303,17 @@ sv-popup {
 .sv-popup--dropdown-overlay {
   z-index: 2001;
   padding: 0;
+}
+
+.sv-popup--dropdown-overlay > .sv-popup__container {
+  max-height: calc(var(--sv-popup-overlay-height, 100vh));
+  height: calc(var(--sv-popup-overlay-height, 100vh));
+  padding-top: 0;
 
   .sv-popup__body-content {
     padding: 0;
     border-radius: 0;
+    height: calc(var(--sv-popup-overlay-height, 100vh));
   }
 
   .sv-popup__body-footer .sv-action-bar {
@@ -344,16 +332,6 @@ sv-popup {
     margin: 0;
   }
 
-  .sv-popup__container {
-    max-height: calc(var(--sv-popup-overlay-height, 100vh));
-    height: calc(var(--sv-popup-overlay-height, 100vh));
-    padding-top: 0;
-  }
-
-  .sv-popup__body-content {
-    height: calc(var(--sv-popup-overlay-height, 100vh));
-  }
-
   .sv-popup__body-footer {
     background-color: $background-dim;
     margin-top: 0;
@@ -503,8 +481,7 @@ sv-popup {
   }
 }
 
-
-.sv-popup--dropdown-overlay.sv-popup--tablet {
+.sv-popup--dropdown-overlay.sv-popup--tablet > .sv-popup__container {
   .sv-popup__body-content {
     --sv-popup-overlay-max-height: calc(var(--sv-popup-overlay-height, 100vh) - #{$base-unit} * 8);
     --sv-popup-overlay-max-width: calc(100% - #{$base-unit} * 8);