Merged in feat/sw-3231-move-lightbox-to-design-system (pull request #2619)

feat(SW-3231): Move Lightbox to design-system

* Move Lightbox to design-system

* Fix self-referencing imports

* Fix broken import


Approved-by: Matilda Landström

packages/design-system/lib/components/Lightbox/lightbox.module.css

@@ -0,0 +1,57 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: var(--lightbox-z-index);
+
+  &[data-entering] {
+    animation: darken-background 0.2s;
+  }
+
+  &[data-exiting] {
+    animation: darken-background 0.2s reverse;
+  }
+}
+
+.content {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: var(--lightbox-z-index);
+}
+
+@media screen and (min-width: 768px) {
+  .content {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    overflow: hidden;
+
+    &:not(.fullViewContent) {
+      border-radius: var(--Corner-radius-lg);
+    }
+
+    &.fullViewContent {
+      width: 100vw;
+      height: 100vh;
+    }
+
+    &.galleryContent {
+      width: min(var(--max-width-page), 1090px);
+      height: min(725px, 85dvh);
+    }
+  }
+}
+
+@keyframes darken-background {
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+
+  to {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}