feat(mistica-css): breadcrumbs (#1349)

[WEB-2176](https://jira.tid.es/browse/WEB-2176)

---------

Co-authored-by: david.nieto <david.nieto@vdshop.es>

Author: DavidNietoGonzalez

css/mistica-common.css

@@ -99,7 +99,7 @@
         --mistica-boxed-border: 1px solid var(--mistica-color-border);
     }
 }
-
+ 
 [data-mistica-color-scheme='dark'][data-mistica-skin] > *,
 [data-mistica-color-scheme='dark'] [data-mistica-variant='default'] > *,
 [data-mistica-color-scheme='dark'] .mistica-card > *,
@@ -452,6 +452,46 @@ label.mistica-chip > input:checked + span {
     text-decoration: none;
 }
 
+/* Breadcrumbs */
+.mistica-breadcrumb ol {
+    display: block;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.mistica-breadcrumb li {
+    display: inline;
+}
+
+.mistica-breadcrumb a {
+    text-decoration: underline;
+    font-size: var(--mistica-font-size-1);
+    line-height: var(--mistica-line-height-1);
+    font-weight: var(--mistica-font-weight-1);
+    color: var(--vcolor-textPrimary);
+}
+
+.mistica-breadcrumb li + li::before {
+    display: inline-block;
+    margin: -1px 0.25em;
+    transform: rotate(18deg);
+    border-right: 0.1em solid var(--vcolor-textPrimary);
+    height: 0.8em;
+    content: "";
+  }
+
+.mistica-breadcrumb a:hover {
+    text-decoration-thickness: 0.125rem;
+}
+
+.mistica-breadcrumb li:last-of-type a {
+    pointer-events: none;
+    color: var(--vcolor-textSecondary);
+    padding-right: 0;
+    text-decoration: none;
+}
+
 /* Buttons */
 [class^='mistica-button'] {
     --button-font-size: var(--mistica-font-size-3);

examples/css/index.html

@@ -196,6 +196,38 @@ <h3 class="mistica-text-title2">Chip</h3>
                     >
                 </div>
 
+                <h3 class="mistica-text-title2">Breadcrumbs</h3>
+                <div class="cards-group">
+                    <nav class="mistica-breadcrumb">
+                        <ol>
+                            <li>
+                                <a href="/">Home</a>
+                            </li>
+                            <li>
+                                <a href="/">Section</a>
+                            </li>
+                            <li>
+                                <a aria-current="page" href="">Subsection</a>
+                            </li>
+                        </ol>
+                    </nav>
+                </div>
+                <div class="cards-group">
+                    <nav class="mistica-breadcrumb">
+                        <ol>
+                            <li>
+                                <a href="/">This is a long link in the breadcrumbs</a>
+                            </li>
+                            <li>
+                                <a href="/">This is a long link in the breadcrumbs</a>
+                            </li>
+                            <li>
+                                <a aria-current="page" href="">Subsection</a>
+                            </li>
+                        </ol>
+                    </nav>
+                </div>
+
                 <h3 class="mistica-text-title2">Buttons</h3>
                 <div>
                     <a class="mistica-button-primary" href="#">Primary</a>