Breadcrumbs

src/assets/styles/common-breadcrumbs.scss

@@ -0,0 +1,41 @@
+@use 'common-mixins';
+
+.breadcrumbs-container {
+    display: flex;
+    align-items: center;
+
+    > *:not(:last-child) {
+        margin-right: 6px;
+    }
+
+    mat-icon {
+        width: 16px;
+        min-width: 16px;
+    }
+}
+
+.breadcrumb {
+    text-decoration: none;
+    color: var(--iqser-accent);
+    font-weight: 600;
+    width: fit-content;
+    white-space: nowrap;
+
+    &.back {
+        display: flex !important;
+        justify-content: center;
+        align-items: center;
+
+        mat-icon {
+            margin-right: 8px;
+        }
+    }
+
+    &:last-child {
+        @include common-mixins.line-clamp(1);
+    }
+
+    &.active {
+        color: var(--iqser-primary);
+    }
+}

src/assets/styles/common-styles.scss

@@ -8,3 +8,4 @@
 @use 'common-components';
 @use 'common-menu';
 @use 'common-base-screen';
+@use 'common-breadcrumbs';