Feat/BOOK-424 campaign banner

Approved-by: Bianca Widstam

apps/scandic-web/components/CampaignBanner/campaignBanner.module.css

@@ -0,0 +1,97 @@
+.campaignBanner {
+  width: 100%;
+  z-index: var(--header-z-index);
+  position: relative;
+  background-color: var(--Surface-Brand-Primary-3-Default);
+}
+
+.content {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  width: 100%;
+  max-width: var(--max-width-navigation);
+  margin: 0 auto;
+}
+
+.innerContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  text-decoration: none;
+  color: var(--Text-Inverted);
+  padding: var(--Space-x025) 0;
+
+  &:not(.withBookingCode) {
+    gap: var(--Space-x15);
+  }
+}
+
+.text {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+}
+
+.marquee {
+  padding: 4px 4px 4px 0; /* Adjustment to handle overflow for link focus */
+}
+.marqueeText {
+  gap: var(--Space-x15);
+}
+
+.tag {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+
+  &:not(.withBookingCode) {
+    height: 24px;
+    padding: 0 var(--Space-x1);
+    flex-shrink: 0;
+    border-radius: var(--Corner-radius-sm);
+    border: 1px solid var(--Border-Inverted);
+  }
+}
+
+.closeButton {
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.link {
+  color: var(--Text-Inverted);
+}
+
+.bookingCode {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--Space-x05);
+
+  & > span {
+    display: flex;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .innerContent {
+    padding-left: var(--Space-x2);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .content {
+    max-width: var(--max-width-page);
+    gap: var(--Space-x15);
+  }
+
+  .marquee {
+    gap: var(--Space-x2);
+  }
+
+  .closeButton {
+    margin-right: -12px; /* Adjusts the position because of banners max width */
+  }
+}