fix(SW-1877): new responsive breadcrumbs

apps/scandic-web/components/TempDesignSystem/Popover/Arrow/arrow.module.css

@@ -1,22 +1,39 @@
-.arrow {
-  transform-origin: center;
-  transform: translateY(-2px);
+.arrow > svg {
+  display: block;
 }
 
 [data-placement="left"] .arrow,
 [data-placement="left top"] .arrow,
 [data-placement="left bottom"] .arrow {
-  transform: rotate(270deg) translateY(-6px);
+  transform: rotate(270deg);
 }
 
 [data-placement="right"] .arrow,
 [data-placement="right top"] .arrow,
 [data-placement="right bottom"] .arrow {
-  transform: rotate(90deg) translateY(-6px);
+  transform: rotate(90deg);
 }
 
 [data-placement="bottom"] .arrow,
 [data-placement="bottom left"] .arrow,
 [data-placement="bottom right"] .arrow {
-  transform: rotate(180deg) translateY(-2px);
+  transform: rotate(180deg);
+}
+
+.small {
+  width: 14px;
+  height: 8px;
+}
+
+.medium {
+  width: 27px;
+  height: 13px;
+}
+
+.black {
+  fill: var(--Surface-UI-Fill-Intense);
+}
+
+.white {
+  fill: var(--Surface-UI-Fill-Default);
 }