feat(SW-187): Fixed LanguageSwitcher for footer

components/LanguageSwitcher/languageSwitcher.module.css

@@ -1,6 +1,5 @@
 .button {
   background-color: transparent;
-  color: var(--Base-Text-High-contrast);
   font-family: var(--typography-Caption-Regular-fontFamily);
   font-size: var(--typography-Caption-Regular-fontSize);
   border-width: 0;
@@ -13,6 +12,14 @@
   width: 100%;
 }
 
+.burgundy .button {
+  color: var(--Base-Text-High-contrast);
+}
+
+.pale .button {
+  color: var(--Primary-Dark-On-Surface-Text);
+}
+
 .chevron {
   justify-self: end;
   transition: transform 0.3s;
@@ -45,29 +52,43 @@
 
   .dropdown {
     position: absolute;
-    top: 2.25rem;
     background-color: var(--Base-Surface-Primary-light-Normal);
     border-radius: var(--Corner-radius-Large);
     box-shadow: 0px 0px 14px 6px #0000001a;
     display: none;
     min-width: 12.5rem;
     z-index: 1;
+  }
+  .top .dropdown {
+    top: 2.25rem;
     bottom: auto;
   }
 
-  /* Triangle above dropdown */
+  .top .dropdown::before {
+    top: -1.25rem;
+    transform: rotate(180deg);
+  }
+
+  /* Triangle 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;
   }
 
+  .bottom .dropdown {
+    top: auto;
+    bottom: 2.25rem;
+  }
+
+  .bottom .dropdown::before {
+    top: 100%;
+  }
+
   .button {
     grid-template-columns: repeat(3, max-content);
     font-size: var(--typography-Body-Bold-fontSize);