feat(SW-184): added language switcher

components/Header/TopMenu/LanguageSwitcher/languageSwitcher.module.css

@@ -1,3 +1,7 @@
+.languageSwitcher {
+  position: relative;
+}
+
 .button {
   background-color: transparent;
   color: var(--Base-Text-High-contrast);
@@ -15,3 +19,62 @@
 .chevron.isExpanded {
   transform: rotate(180deg);
 }
+
+.dropdown {
+  position: absolute;
+  top: 2.25rem;
+  right: 0;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  padding: var(--Spacing-x2) var(--Spacing-x3);
+  border-radius: var(--Corner-radius-Large);
+  box-shadow: 0px 0px 14px 6px #0000001a;
+  display: none;
+  min-width: 12.5rem;
+  z-index: 1;
+}
+
+/* Triangle above dropdown */
+.dropdown::before {
+  content: "";
+  position: absolute;
+  top: -1.25rem;
+  right: 2.4rem;
+  transform: rotate(180deg);
+  border-width: 0.75rem;
+  border-style: solid;
+  border-color: var(--Base-Surface-Primary-light-Normal) transparent transparent
+    transparent;
+}
+
+.dropdown.isExpanded {
+  display: block;
+}
+
+.list {
+  list-style: none;
+}
+
+.link {
+  color: var(--Scandic-Brand-Burgundy);
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Body-Regular-fontSize);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+  padding: var(--Spacing-x1);
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  gap: var(--Spacing-x1);
+  justify-content: space-between;
+  align-items: center;
+  text-decoration: none;
+}
+
+.link:hover {
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.link.active,
+.link:hover {
+  font-weight: 600;
+}