Merged in feat/LOY-423-Nights-Stayed-Progress-for-L6-Members (pull request #3360)

feat(LOY-423): Add progress bar for L6 members showing nights stayed

* feat(LOY-423): Add progress bar for L6 members showing nights stayed

* chore(LOY-423): shorten css selector


Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/L6Progress/l6Progress.module.css

@@ -0,0 +1,95 @@
+.l6Progress {
+  border-radius: var(--Corner-radius-md);
+  border: 1px solid var(--Border-Divider-Default);
+  background: var(--Surface-Primary-Default);
+  padding: var(--Space-x3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x2);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x05);
+}
+
+.title,
+.since {
+  color: var(--Text-Secondary);
+}
+
+.progressSection {
+  display: grid;
+  grid-template-columns: min-content 1fr auto;
+  gap: var(--Space-x05);
+  align-items: center;
+  grid-template-areas:
+    "startLabel  .    endLabel"
+    "startValue  bar  endValue";
+}
+
+.startLabelText {
+  grid-area: startLabel;
+  color: var(--Text-Secondary);
+}
+
+.endLabelText {
+  grid-area: endLabel;
+  text-align: right;
+  color: var(--Text-Secondary);
+}
+
+.startValue {
+  grid-area: startValue;
+  color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
+  padding-right: var(--Space-x2);
+}
+
+.progressBar {
+  grid-area: bar;
+}
+
+.endValue {
+  grid-area: endValue;
+  text-align: right;
+  color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
+  padding-left: var(--Space-x2);
+}
+
+.startDivider,
+.endDivider {
+  display: none;
+}
+
+@media screen and (min-width: 768px) {
+  .l6Progress {
+    padding: var(--Space-x3) var(--Space-x4);
+  }
+
+  .header {
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--Space-x1);
+  }
+
+  .progressSection {
+    grid-template-columns: auto auto auto 1fr auto auto auto;
+    gap: var(--Space-x2);
+    grid-template-areas: "startLabel startDiv startValue bar endValue endDiv endLabel";
+  }
+
+  .startDivider {
+    grid-area: startDiv;
+    display: block;
+  }
+
+  .endDivider {
+    grid-area: endDiv;
+    display: block;
+  }
+
+  .endValue .endLabelText {
+    text-align: left;
+  }
+}