Merge branch 'PROD-1943_css-refactor' into PROD-1516_work-filter

Author: brooketopcoder

src-ts/header/Header.module.scss

@@ -1,4 +1,4 @@
-@import '../lib/styles';
+@import '../lib/styles/includes';
 
 .header-wrap {
     display: block;
@@ -19,10 +19,6 @@
         grid-template-columns: $header-height 1fr $header-height;
         align-items: center;
     }
-
-    @include ltesm {
-        height: $header-height;
-    }
 }
 
 .subheader {

src-ts/header/logo/Logo.module.scss

@@ -1,4 +1,4 @@
-@import '../../lib/styles';
+@import '../../lib/styles/includes';
 
 .logo-no-link,
 .logo-link {

src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.module.scss

@@ -1,4 +1,4 @@
-@import '../../../lib/styles';
+@import '../../../lib/styles/includes';
 
 .tool-selectors-narrow {
     display: none;
@@ -22,6 +22,7 @@
         top: $header-height;
         left: 0;
         bottom: 0;
+        height: $content-height;
         width: calc(100% - calc(2 * $pad-xxl));
         z-index: 100;
         background-color: $black-100;

src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../lib/styles';
+@import '../../../../lib/styles/includes';
 
 .tool-selector-narrow {
 
@@ -13,7 +13,7 @@
         border-top: 1px solid $black-60;
         padding: $pad-lg 0;
         color: $tc-white;
-        @include font-weight-medium;
+        font-weight: $font-weight-medium;
         background-color: $black-100;
 
         svg {

src-ts/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.module.scss

@@ -1,4 +1,4 @@
-@import '../../../lib/styles/';
+@import '../../../lib/styles/includes';
 
 .tool-selectors-wide {
     display: flex;

src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../lib/styles/';
+@import '../../../../lib/styles/includes';
 
 .tool-selector-wide {
     padding-right: 0;

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../lib/styles';
+@import '../../../../lib/styles/includes';
 
 .profile-selector {
     display: flex;

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../../lib/styles';
+@import '../../../../../lib/styles/includes';
 
 $overlaySquare: $pad-xxxxl;
 

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.module.scss

@@ -1,4 +1,5 @@
-@import '../../../../../../lib/styles';
+@use '../../../../../../lib/styles/typography';
+@import '../../../../../../lib/styles/includes';
 
 $arrowTipIconHeight: 9px;
 

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../../lib/styles';
+@import '../../../../../lib/styles/includes';
 
 @include ltemd {
     .login,