fix(SW-1877): new responsive breadcrumbs

apps/scandic-web/components/TempDesignSystem/Popover/Arrow/index.tsx

@@ -1,18 +1,14 @@
-import styles from "./arrow.module.css"
+import { arrowVariants } from "./variants"
+
+import type { ArrowProps } from "./arrow"
+
+export function Arrow({ color, size }: ArrowProps) {
+  const className = arrowVariants({ color, size })
 
-export function Arrow() {
   return (
-    <div className={styles.arrow}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="27"
-        height="13"
-        fill="none"
-      >
-        <path
-          fill="#fff"
-          d="M13.093 12.193.9 0h25.8L14.508 12.193a1 1 0 0 1-1.415 0Z"
-        />
+    <div className={className}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 13">
+        <path d="M13.093 12.193.9 0h25.8L14.508 12.193a1 1 0 0 1-1.415 0Z" />
       </svg>
     </div>
   )