Issue #3446921: Change the style for the Page Footer component to follow with Varbase Design System

components/organisms/page-footer/page-footer.css

-.site-footer section.region-footer > * {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  justify-content: center;
-  font-size: .65rem;
-  padding: 1rem 1rem 0 1rem;
-}
-
-@media screen and (min-width: 992px) {
-  .site-footer section.region-footer > * {
-    flex: 1 0 0;
-  }
-}
-
-.site-footer .menu--footer ul.nav {
-  display: flex;
-  flex-flow: row;
-  flex-wrap: wrap;
-  justify-content: center;
+footer.footer {
+  background-color: #084298;
+  color: var(--bs-white);
+}
+
+footer.footer a {
+  color: var(--bs-white);
+  text-decoration: none;
+}
+
+footer.footer a:hover, footer.footer a:focus, footer.footer a:active, footer.footer a.active {
+  color: var(--bs-white);
+  text-decoration: underline;
+}
+
+footer.footer .footer-logo-image {
+  height: 1.88rem;
+}
+
+.social-media-menu-icons li.nav-item > a {
+  overflow: hidden;
+  text-indent: -9999px;
+}
+
+.social-media-menu-icons li.nav-item > a::before {
+  text-indent: 0;
+}
+
+[dir="ltr"] .social-media-menu-icons li.nav-item > a::before {
+  float: left;
+}
+
+[dir="rtl"] .social-media-menu-icons li.nav-item > a::before {
+  float: right;
+}
+
+.social-media-menu-icons li.nav-item > a:hover, .social-media-menu-icons li.nav-item > a:focus, .social-media-menu-icons li.nav-item > a:active, .social-media-menu-icons li.nav-item > a.active {
+  color: #cfe2ff;
 }
 

components/organisms/page-footer/page-footer.scss

 // Page footer styles.
 @import "../../defaults";   // Global component defaults.
 
-.site-footer {
-  section.region-footer {
-    > * {
-      display: flex;
-      flex-flow: column;
-      align-items: center;
-      justify-content: center;
-      @include font-size(0.65rem);
-      @include padding($spacer $spacer 0 $spacer);
-      @media screen and (min-width: map-get($grid-breakpoints, "lg")) {
-        flex: 1 0 0;
-      }
+footer.footer {
+  background-color: shade-color($primary, 40%);
+  color: var(--bs-white);
+
+  a {
+    color: var(--bs-white);
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.is-active {
+      color: var(--bs-white);
+      text-decoration: underline;
     }
   }
 
-  .menu--footer {
-    ul.nav {
-      display: flex;
-      flex-flow: row;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
+  .footer-logo-image {
+    height: 1.88rem;
+  }
+}
+
+.social-media-menu-icons li.nav-item > a {
+  overflow: hidden;
+  text-indent: -9999px;  
+
+  &::before {
+    text-indent: 0;
+    float: left;
+  }
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.active {
+    color: tint-color($primary, 80%);
   }
 }

components/organisms/page-footer/page-footer.twig

@@ -6,15 +6,15 @@
 #}
 
 {% if page.footer_top or page.footer_bottom %}
-  <footer class="footer small w-100 bg-light mt-auto py-3">
+  <footer class="footer w-100 mt-auto py-3">
     {% if page.footer_top %}
-      <div class="w-100 footer-top">
+      <div class="w-100 footer-top mt-5">
         {% if container_footer_top %}
         <div class="{{ container_footer_top }}">
         {% endif %}
           <div class="row">
             <div class="col-12">
-              <div class="d-flex justify-content-md-between align-items-md-center">
+              <div class="d-flex align-content-stretch flex-wrap">
                  {{ page.footer_top}}
               </div>
             </div>
@@ -26,13 +26,16 @@
     {% endif %}
 
     {% if page.footer_bottom %}
-      <div class="w-100 footer-bottom">
+      <div class="w-100 footer-bottom mb-5">
         {% if container_footer_bottom %}
         <div class="{{ container_footer_bottom }}">
         {% endif %}
+          {# Horizontal line when footer bottom has content. #}
+          <div class="text-wight"><hr></div> 
+
           <div class="row">
             <div class="col-12">
-              <div class="d-flex justify-content-md-between align-items-md-center">
+              <div class="d-flex align-content-stretch flex-wrap">
                 {{ page.footer_bottom }}
               </div>
             </div>