Issue #17: Updated the "Federal Header" library override (s)css sty…

…les since Sass Framework update

scss/components/openfed_federalheader/federalheader-block.scss

@@ -4,8 +4,15 @@
 // Visual styles for the "Openfed FederalHeader" block.
 //
 
-// Import Sass variables, functions, mixins and placeholders.
-@import '../../config/imports';
+// Load required `Framework SASS` modules.
+@use '../../config/variable-overrides';
+@use '../../../_sass-framework/helpers/units';
+@use '../../../_sass-framework/layout/breakpoint';
+
+// The following comment starts with a "!". So it will not be removed during
+// the (SASS) compilation. It is just to alert project contributors that the
+// (CSS) output file can not be modified under any circumstances.
+/*! Compiled SASS file | Do NOT modify from here !*/
 
 // This document follows Drupal CSS coding standards, Sass Guidelines
 // and Sass Style Guide. Read more about these topics:
@@ -19,11 +26,14 @@
 
 // Markup generated by federalheader-block.html.twig.
 //
-#{$blocks} {
-    
+.block {
+
   // Block name: "Federal header" (Federal Header).
   //
   &--openfed-federalheader {
+    --federalheader-block-link-margin-right: var(--margin-small);
+    --federalheader-block-logo-width: #{units.rem(37px)};
+    --federalheader-block-logo-height: #{units.rem(30px)};
 
     // Federal header (Link)
     //
@@ -33,25 +43,25 @@
       // Responsiveness
       // Properties for at least small devices (Landscape phones, 576px and up).
       //
-      @include breakpoint-up('small') {
-        @include rem('margin-right', map-get($component-margins, 'small'));
+      @include breakpoint.up('small') {
         display: inline-block;
-        vertical-align: text-bottom;
+        margin-right: var(--federalheader-block-link-margin-right);
+        vertical-align: middle;
       }
     }
 
     // Federal header (Link)
     //
     &__logo {
-      @include rem('width', 37px);
-      @include rem('height', 30px);
       display: inline-block;
+      width: var(--federalheader-block-logo-width);
+      height: var(--federalheader-block-logo-height);
 
       // Responsiveness
       // Properties for at least small devices (Landscape phones, 576px and up).
       //
-      @include breakpoint-up('small') {
-        vertical-align: text-bottom;
+      @include breakpoint.up('small') {
+        vertical-align: middle;
       }
     }
   }