fix(SW-1877): rewrote css to be a bit more modern

apps/scandic-web/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css

@@ -54,9 +54,10 @@
   border: none;
   background: transparent;
   height: 100%;
-  /* a bit of a hack of centering the popover and its arrow */
-  padding: 0 10px;
-  margin: 0 -10px;
+
+  /* this increases the width of the button for tapping */
+  padding: 0 5px;
+  margin: 0 -5px;
 }
 
 .dialog {
@@ -68,7 +69,7 @@
   border-radius: var(--Corner-radius-Medium);
   min-width: 169px;
   outline: none;
-  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 4px 2px rgb(0 0 0 / 10%);
 }
 
 .dialogLink {
@@ -82,21 +83,6 @@
   background-color: var(--Base-Surface-Primary-light-Hover);
 }
 
-@media screen and (max-width: 767px) {
-  .desktop {
-    display: none;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .mobile {
-    display: none;
-  }
-  .desktop {
-    display: flex;
-  }
-}
-
 .tooltipTrigger {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -111,3 +97,18 @@
   color: var(--Text-Inverted);
   outline: none;
 }
+
+@media screen and (width <= 767px) {
+  .desktop {
+    display: none;
+  }
+}
+
+@media screen and (width >= 768px) {
+  .mobile {
+    display: none;
+  }
+  .desktop {
+    display: flex;
+  }
+}