diff --git a/.sass-lint-fix.yml b/.sass-lint-fix.yml
deleted file mode 100644
index b56a2e4b06..0000000000
--- a/.sass-lint-fix.yml
+++ /dev/null
@@ -1,12 +0,0 @@
-files:
-  include:
-    - 'src/**/*.s+(a|c)ss'
-    - 'src-docs/**/*.s+(a|c)ss'
-syntax:
-    include:
-      - scss
-      - sass
-resolvers:
-  hex-notation: 1
-options:
-  optOut: false
\ No newline at end of file
diff --git a/.sass-lint.yml b/.sass-lint.yml
deleted file mode 100644
index f2031b4e4f..0000000000
--- a/.sass-lint.yml
+++ /dev/null
@@ -1,90 +0,0 @@
-options:
-  formatter: '../cli-engine/formatters/stylish'
-files:
-  include:
-    - 'src/**/*.s+(a|c)ss'
-    - 'src-docs/**/*.s+(a|c)ss'
-  ignore:
-    # These are themes of outside libraries we import
-    - 'src/components/series_chart/**/*.s+(a|c)ss'
-    - 'src/components/date_picker/**/*.s+(a|c)ss'
-rules:
-  quotes:
-    - 2
-    -
-      style: 'single'
-  # } else { style on one line, like our JS
-  brace-style:
-    - 2
-    -
-      style: '1tbs'
-  variable-name-format:
-    - 2
-    -
-      convention: 'camelcase'
-  # Needs regex, right now we ignore
-  class-name-format: 0
-  # Order how you please
-  property-sort-order: 0
-  hex-notation:
-    - 2
-    -
-      style: 'uppercase'
-  mixins-before-declarations:
-    - 2
-    -
-      exclude: ['ouiBreakpoint', 'ouiCanAnimate']
-  mixin-name-format:
-    - 2
-    -
-      allow-leading-underscore: false
-      convention: 'camelcase'
-  # Use none instead of 0 for no border
-  border-zero:
-    - 2
-    - convention: 'none'
-  force-element-nesting: 0
-  # something { not something{
-  space-before-brace:
-    - 2
-  force-pseudo-nesting: 0
-  # 2 spaces for indentation
-  indentation: 2
-  function-name-format:
-    - 2
-    -
-      allow-leading-underscore: false
-      convention: 'camelcase'
-  # This removes the need for ::hover
-  pseudo-element: 0
-  # ($var / 2) rather than ($var/2)
-  space-around-operator: 2
-  # We minify css, so this doesn't apply
-  no-css-comments: 0
-  # We use _ (underscores) for import path that don't directly compile
-  clean-import-paths: 0
-  # Allows input[type=search]
-  force-attribute-nesting: 0
-  no-qualifying-elements:
-    - 2
-    -
-      # Allows input[type=search]
-      allow-element-with-attribute: 1
-  # Files can end without a newline
-  final-newline: 0
-  # We use some rare duplicate property values for browser variance
-  no-duplicate-properties:
-    - 2
-    -
-      exclude:
-        - 'font-size'
-        - 'word-break'
-  # Put a line-break between sections of CSS, but allow quicky one-liners for legibility
-  empty-line-between-blocks:
-    - 2
-    -
-      allow-single-line-rulesets: 1
-  # Warns are nice for deprecations and development
-  no-warn: 0
-  # Transition all is useful in certain situations and there's no recent info to suggest slowdown
-  no-transition-all: 0
diff --git a/.stylelintignore b/.stylelintignore
new file mode 100644
index 0000000000..6eeec870de
--- /dev/null
+++ b/.stylelintignore
@@ -0,0 +1,2 @@
+build
+target
diff --git a/.stylelintrc b/.stylelintrc
deleted file mode 100644
index 8168ad3708..0000000000
--- a/.stylelintrc
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "rules": {
-    "number-leading-zero": "never",
-    "color-hex-case": "upper"
-  }
-}
\ No newline at end of file
diff --git a/.stylelintrc.yml b/.stylelintrc.yml
new file mode 100644
index 0000000000..8a70ee1dd0
--- /dev/null
+++ b/.stylelintrc.yml
@@ -0,0 +1,19 @@
+extends:
+  - stylelint-config-standard-scss
+rules:
+  # while we still use node-sass, only legacy rgb() notation is allowed
+  color-function-notation: "legacy"
+  # recommended to turn off descending specificity since we use a lot of nesting:
+  # https://stylelint.io/user-guide/rules/list/no-descending-specificity/
+  no-descending-specificity: null
+  # need to use global function/value names from EUI
+  function-name-case: null
+  value-keyword-case: null
+  scss/no-global-function-names: null
+  # camelCase names
+  keyframes-name-pattern: "^[a-z][a-zA-Z0-9_-]+$"
+  selector-class-pattern: "^[a-z][a-zA-Z0-9_-]+$"
+  selector-id-pattern: "^[a-z][a-zA-Z0-9_-]+$"
+  scss/at-mixin-pattern: "^[a-z][a-zA-Z0-9_-]+$"
+  scss/at-function-pattern: "^[a-z][a-zA-Z0-9_-]+$"
+  scss/dollar-variable-pattern: "^[a-z][a-zA-Z0-9_-]+$"
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b73a6cc573..85bb71f65b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -74,6 +74,7 @@
 - [CVE-2023-26115] Bump word-wrap from 1.2.3 to 1.2.4 ([#891](https://github.com/opensearch-project/oui/pull/891))
 - Bump Node version to 18.16.0 ([#900](https://github.com/opensearch-project/oui/pull/900))
 - Bump `node-sass` to a patched version based on `libsass@3.6.5` ([#977](https://github.com/opensearch-project/oui/pull/977)); see [patch commit](https://github.com/AMoo-Miki/node-sass/commit/43c74c0966b05c1e21a1e5e20a0c467ec8e669b4) for details.
+- Replace `sass-lint` with `stylelint` ([#949](https://github.com/opensearch-project/oui/pull/949))
 
 ### 🪛 Refactoring
 
diff --git a/package.json b/package.json
index a3a92f8e15..6a74104f4c 100644
--- a/package.json
+++ b/package.json
@@ -20,12 +20,12 @@
     "clean": "node ./scripts/compile-clean.js",
     "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.js\"",
     "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
-    "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass",
+    "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-style",
     "lint-fix": "yarn lint-es-fix",
     "lint-es": "eslint --cache \"{src,src-docs}/**/*.{ts,tsx,js}\" --max-warnings 0",
     "lint-es-fix": "yarn lint-es --fix",
-    "lint-sass": "sass-lint -v --max-warnings 0",
-    "lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml",
+    "lint-style": "stylelint \"{src,src-docs}/**/*.scss\" --max-warnings 0",
+    "lint-style-fix": "yarn lint-style --fix",
     "test": "yarn lint && yarn test-unit",
     "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
     "test-a11y": "node ./scripts/a11y-testing",
@@ -74,12 +74,6 @@
     "react-view/**/minimist": "^1.2.6",
     "react-view/@miksu/prettier/minimatch": "^3.0.8",
     "remark-parse/trim": "0.0.3",
-    "sass-lint-auto-fix/**/minimist": "^1.2.6",
-    "sass-lint-auto-fix/merge": "^2.1.1",
-    "sass-lint/**/minimist": "^1.2.6",
-    "sass-lint/eslint": "^7.10.0",
-    "sass-lint/front-matter": "^4.0.2",
-    "sass-lint/merge": "^2.1.1",
     "start-server-and-test/**/minimist": "^1.2.6",
     "webpack-dev-server/**/ansi-regex": "^5.0.1",
     "webpack-dev-server/chokidar/glob-parent": "^6.0.1",
@@ -216,6 +210,7 @@
     "moment-timezone": "^0.5.41",
     "node-sass": "npm:@amoo-miki/node-sass@9.0.0-libsass-3.6.5",
     "pegjs": "^0.10.0",
+    "postcss": "^8.4.28",
     "postcss-cli": "^7.1.2",
     "postcss-inline-svg": "^4.1.0",
     "postcss-loader": "^4.0.1",
@@ -237,13 +232,13 @@
     "resolve": "^1.22.1",
     "rimraf": "^5.0.1",
     "sass-extract": "^2.1.0",
-    "sass-lint": "^1.13.1",
-    "sass-lint-auto-fix": "^0.21.2",
     "sass-loader": "npm:@bsfishy/sass-loader@node-sass-9",
     "sass-vars-to-js-loader": "^2.1.1",
     "shelljs": "^0.8.5",
     "start-server-and-test": "^2.0.0",
     "style-loader": "^1.2.1",
+    "stylelint": "^15.10.3",
+    "stylelint-config-standard-scss": "^10.0.0",
     "terser-webpack-plugin": "^4.1.0",
     "typescript": "4.0.5",
     "url-loader": "^4.1.0",
diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
index f5cff78bcc..aba3f02ad9 100644
--- a/src-docs/src/components/guide_components.scss
+++ b/src-docs/src/components/guide_components.scss
@@ -16,7 +16,7 @@ $guideZLevelHighest: $ouiZLevel9 + 1000;
 $elasticLogoTextLight: #FFF;
 $elasticLogoTextDark: #1C1E23;
 
-#guide { // sass-lint:disable-line no-ids
+#guide {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
@@ -33,7 +33,7 @@ body {
 .ouiBody--headerIsFixed--double {
   @include ouiHeaderAffordForFixed($ouiHeaderHeightCompensation * 2);
 
-  #guide { // sass-lint:disable-line no-ids
+  #guide {
     min-height: calc(100vh - #{$ouiHeaderHeightCompensation * 2});
   }
 
@@ -46,11 +46,13 @@ body {
 
 .guideSideNav {
   @include ouiSideNavEmbellish;
+
   min-width: $guideSideNavWidth;
 }
 
 .guideSideNav__content {
   @include ouiYScroll;
+
   padding: 0 $ouiSizeL $ouiSizeL;
 }
 
@@ -100,7 +102,7 @@ body {
 .guideDemo__highlightLayout--playground > div:not(.ouiPage) {
   height: 100%;
   width: 100%;
-  padding: 0 !important; // sass-lint:disable-line no-important
+  padding: 0 !important;
 
   > .ouiPage--grow {
     height: 100%;
@@ -137,14 +139,12 @@ body {
   padding: $ouiSize;
 }
 
-// sass-lint:disable no-important
 .guideDemo__textLines {
   background-image: linear-gradient($ouiFocusBackgroundColor 1px, transparent 1px) !important;
   background-size: 100% 8px !important;
   background-position-y: 2px;
 }
 
-// sass-lint:disable no-important
 .guideDemo__textLines--s {
   background-image: linear-gradient($ouiFocusBackgroundColor 1px, transparent 1px) !important;
   background-size: 100% 7px !important;
@@ -179,7 +179,7 @@ body {
 }
 
 .guideDemo__ghostBackground {
-  @if (lightness($ouiTextColor) < 50) {
+  @if  lightness($ouiTextColor) < 50 {
     color: $ouiColorGhost;
     background: $ouiColorDarkestShade !important; // Override OuiPanel specificity
   }
@@ -247,6 +247,7 @@ body {
 
 .guideDemo__notificationEvent {
   @include ouiFontSizeS;
+
   display: flex;
   flex-direction: column;
 
@@ -324,10 +325,11 @@ body {
   color: $ouiColorAccentText;
 }
 
-
+/* stylelint-disable no-invalid-position-at-import-rule */
 @import '../views/guidelines/index';
 @import 'guide_section/index';
 @import 'guide_rule/index';
+/* stylelint-enable no-invalid-position-at-import-rule */
 
 @include ouiBreakpoint('xs', 's') {
   .guideSideNav {
@@ -348,17 +350,16 @@ body {
   min-width: 200px;
   flex-basis: 100% !important;
 
-  // sass-lint:disable-block mixins-before-declarations
   @include ouiBreakpoint('s', 'm') {
-    flex-basis: 45% !important; // sass-lint:disable-line no-important
+    flex-basis: 45% !important;
   }
 
   @include ouiBreakpoint('l') {
-    flex-basis: 30% !important; // sass-lint:disable-line no-important
+    flex-basis: 30% !important;
   }
 
   @include ouiBreakpoint('xl') {
-    flex-basis: 22% !important; // sass-lint:disable-line no-important
+    flex-basis: 22% !important;
   }
 }
 
@@ -383,7 +384,7 @@ body {
     width: 100%;
     height: auto;
 
-    &:before {
+    &::before {
       content: '';
       display: block;
       position: absolute;
@@ -458,7 +459,6 @@ body {
 }
 
 .guideHome__footerLogo {
-  // sass-lint:disable-block no-important
   vertical-align: middle;
   display: inline-block !important;
   margin-bottom: 0 !important;
diff --git a/src-docs/src/components/guide_section/_guide_section.scss b/src-docs/src/components/guide_section/_guide_section.scss
index 5beda5dfbc..40cfe756ff 100644
--- a/src-docs/src/components/guide_section/_guide_section.scss
+++ b/src-docs/src/components/guide_section/_guide_section.scss
@@ -40,5 +40,5 @@
 }
 
 .guideSectionTabs__tab {
-  font-weight: $ouiFontWeightMedium !important; // sass-lint:disable-line no-important
+  font-weight: $ouiFontWeightMedium !important;
 }
diff --git a/src-docs/src/services/playground/_playground_compiler.scss b/src-docs/src/services/playground/_playground_compiler.scss
index 4f86bf4d42..d1fc5933fc 100644
--- a/src-docs/src/services/playground/_playground_compiler.scss
+++ b/src-docs/src/services/playground/_playground_compiler.scss
@@ -11,6 +11,6 @@
 
 .playgroundWrapper {
   > div {
-    display: block !important; // sass-lint:disable-line no-important
+    display: block !important;
   }
 }
diff --git a/src-docs/src/theme_dark.scss b/src-docs/src/theme_dark.scss
index 0cfed9c329..43cac8743c 100644
--- a/src-docs/src/theme_dark.scss
+++ b/src-docs/src/theme_dark.scss
@@ -9,10 +9,11 @@
  * GitHub history for details.
  */
 
-// sass-lint:disable no-url-domains, no-url-protocols
+/* stylelint-disable-next-line import-notation */
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
-@import url('https://rsms.me/inter/inter-ui.css');
 
+/* stylelint-disable-next-line import-notation */
+@import url('https://rsms.me/inter/inter-ui.css');
 @import '../../src/theme_dark';
 @import './components/guide_components';
 @import './services/playground/index';
diff --git a/src-docs/src/theme_light.scss b/src-docs/src/theme_light.scss
index b88c094394..ea0503cbc7 100644
--- a/src-docs/src/theme_light.scss
+++ b/src-docs/src/theme_light.scss
@@ -9,10 +9,11 @@
  * GitHub history for details.
  */
 
-// sass-lint:disable no-url-domains, no-url-protocols
+/* stylelint-disable-next-line import-notation */
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
-@import url('https://rsms.me/inter/inter-ui.css');
 
+/* stylelint-disable-next-line import-notation */
+@import url('https://rsms.me/inter/inter-ui.css');
 @import '../../src/theme_light';
 @import './components/guide_components';
 @import './services/playground/index';
diff --git a/src-docs/src/theme_next_dark.scss b/src-docs/src/theme_next_dark.scss
index cab47044b0..ff061aa6d4 100644
--- a/src-docs/src/theme_next_dark.scss
+++ b/src-docs/src/theme_next_dark.scss
@@ -9,9 +9,8 @@
  * GitHub history for details.
  */
 
-// sass-lint:disable no-url-domains, no-url-protocols
+/* stylelint-disable-next-line import-notation */
 @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
-
 @import '../../src/theme_next_dark';
 @import './components/guide_components';
 @import './services/playground/index';
diff --git a/src-docs/src/theme_next_light.scss b/src-docs/src/theme_next_light.scss
index 4ce311637c..b4dfbd56fa 100644
--- a/src-docs/src/theme_next_light.scss
+++ b/src-docs/src/theme_next_light.scss
@@ -9,9 +9,8 @@
  * GitHub history for details.
  */
 
-// sass-lint:disable no-url-domains, no-url-protocols
+/* stylelint-disable-next-line import-notation */
 @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
-
 @import '../../src/theme_next_light';
 @import './components/guide_components';
 @import './services/playground/index';
diff --git a/src-docs/src/views/guidelines/index.scss b/src-docs/src/views/guidelines/index.scss
index ecb91326c7..37666886a7 100644
--- a/src-docs/src/views/guidelines/index.scss
+++ b/src-docs/src/views/guidelines/index.scss
@@ -33,7 +33,6 @@
   font-size: $ouiFontSizeS;
 }
 
-// sass-lint:disable no-important
 .guidelineColor__title {
   color: $ouiColorMediumShade !important;
 }
@@ -79,12 +78,10 @@
   background: shade($ouiColorDanger, 30%);
 }
 
-// sass-lint:disable no-color-literals
 .guideSass__swatch--primaryLight {
   background: #0079A5;
 }
 
-// sass-lint:disable no-color-literals
 .guideSass__swatch--primaryDark {
   background: #4DA1C0;
 }
@@ -182,12 +179,14 @@
 
   .guideSass__overflowShadowText {
     @include ouiYScrollWithShadows;
+
     padding: $ouiSizeS;
   }
 }
 
 .guideSass__overflowShadowsX {
   @include ouiXScrollWithShadows;
+
   padding: $ouiSizeS $ouiSizeS 0;
 
   .guideSass__overflowShadowTextX {
@@ -305,7 +304,6 @@
   border-left: $ouiBorderThick;
 }
 
-// sass-lint:disable no-color-literals
 .guideSass__themedBox--light {
   border-color: #0079A5;
   background: tint(#0079A5, 90%);
@@ -313,7 +311,6 @@
 }
 
 .guideSass__themedBox--dark {
-  // sass-lint:disable no-color-literals
   border-color: #4DA1C0;
   background: shade(#4DA1C0, 70%);
   color: #FFF;
@@ -338,13 +335,14 @@
   background-color: $ouiColorEmptyShade;
 }
 
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
 @import 'colors/color_section';
 
 @include ouiBreakpoint('xl') {
   .guideSass__breakpointExample {
     background: $ouiColorPrimary;
 
-    &:before {
+    &::before {
       content: 'You are currently in the xl breakpoint';
     }
   }
@@ -354,7 +352,7 @@
   .guideSass__breakpointExample {
     background: $ouiColorSecondary;
 
-    &:before {
+    &::before {
       content: 'You are currently in the l breakpoint';
     }
   }
@@ -364,7 +362,7 @@
   .guideSass__breakpointExample {
     background: $ouiColorAccent;
 
-    &:before {
+    &::before {
       content: 'You are currently in the m breakpoint';
     }
   }
@@ -374,7 +372,7 @@
   .guideSass__breakpointExample {
     background: $ouiColorWarning;
 
-    &:before {
+    &::before {
       content: 'You are currently in the s breakpoint';
     }
   }
@@ -384,7 +382,7 @@
   .guideSass__breakpointExample {
     background: $ouiColorDanger;
 
-    &:before {
+    &::before {
       content: 'You are currently in the xs breakpoint';
     }
   }
diff --git a/src-docs/src/views/suggest/_global_filter_group.scss b/src-docs/src/views/suggest/_global_filter_group.scss
index c8a822ef5a..52ecf1f359 100644
--- a/src-docs/src/views/suggest/_global_filter_group.scss
+++ b/src-docs/src/views/suggest/_global_filter_group.scss
@@ -16,7 +16,6 @@
   margin-top: $ouiSizeXS;
 }
 
-// sass-lint:disable quotes
 .globalFilterGroup__branch {
   padding: $ouiSize $ouiSize $ouiSizeS $ouiSizeS;
   background-repeat: no-repeat;
diff --git a/src-docs/src/views/suggest/_saved_queries.scss b/src-docs/src/views/suggest/_saved_queries.scss
index 4da1fbb481..561b13bca4 100644
--- a/src-docs/src/views/suggest/_saved_queries.scss
+++ b/src-docs/src/views/suggest/_saved_queries.scss
@@ -35,8 +35,9 @@
 
 .savedQueryManagement__list {
   @include ouiYScrollWithShadows;
+
   max-height: inherit; // Fixes overflow for applied max-height
   // Left/Right padding is calculated to match the left alignment of the
   // popover text and buttons
-  padding: ($ouiSizeM / 2) $ouiSizeXS !important; // sass-lint:disable-line no-important
+  padding: ($ouiSizeM / 2) $ouiSizeXS !important;
 }
diff --git a/src/components/accessibility/_screen_reader.scss b/src/components/accessibility/_screen_reader.scss
index 7e7fdb87cc..5a3243b34f 100644
--- a/src/components/accessibility/_screen_reader.scss
+++ b/src/components/accessibility/_screen_reader.scss
@@ -11,6 +11,6 @@
 
 // The `:active` selector is necessary for Safari which removes `:focus` when a button is pressed
 .ouiScreenReaderOnly,
-.ouiScreenReaderOnly--showOnFocus:not(:focus):not(:active) {
+.ouiScreenReaderOnly--showOnFocus:not(:focus, :active) {
   @include ouiScreenReaderOnly;
 }
diff --git a/src/components/accessibility/_skip_link.scss b/src/components/accessibility/_skip_link.scss
index 5198b60e21..6f539807f5 100644
--- a/src/components/accessibility/_skip_link.scss
+++ b/src/components/accessibility/_skip_link.scss
@@ -10,10 +10,10 @@
  */
 
 .ouiSkipLink {
-  transition: none !important; // sass-lint:disable-line no-important
+  transition: none !important;
 
   &:focus {
-    animation: none !important; // sass-lint:disable-line no-important
+    animation: none !important;
   }
 
   // Set positions on focus only as to no override screenReaderOnly position
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
index 7c9a36a738..00aa717380 100644
--- a/src/components/accordion/_accordion.scss
+++ b/src/components/accordion/_accordion.scss
@@ -16,6 +16,7 @@
 
 .ouiAccordion__button {
   @include ouiFontSize;
+
   text-align: left;
   width: 100%;
   flex-grow: 1;
@@ -31,6 +32,7 @@
   &:focus {
     .ouiAccordion__iconWrapper {
       @include ouiAccordionIconFocus;
+
       outline: none; // The `outline` gets applied to the whole button, we don't need a second one on the icon
     }
   }
@@ -49,6 +51,7 @@
 .ouiAccordion__iconWrapper {
   @include size($ouiSize);
   @include ouiAccordionIconMargin;
+
   border-radius: $ouiBorderRadius;
   flex-shrink: 0;
 
@@ -81,7 +84,6 @@
   opacity: 0;
   overflow: hidden;
   transform: translatez(0);
-  // sass-lint:disable-block indentation
   transition:
     height $ouiAnimSpeedNormal $ouiAnimSlightResistance,
     opacity $ouiAnimSpeedNormal $ouiAnimSlightResistance;
diff --git a/src/components/accordion/_mixins.scss b/src/components/accordion/_mixins.scss
index 0491514fad..80679ac82d 100644
--- a/src/components/accordion/_mixins.scss
+++ b/src/components/accordion/_mixins.scss
@@ -11,6 +11,7 @@
 
 @mixin ouiAccordionIconFocus {
   @include ouiFocusRing;
+
   color: $ouiColorPrimary;
 }
 
@@ -27,5 +28,7 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiAccordionIconFocus { @include ouiAccordionIconFocus; }
+
 @mixin euiAccordionIconMargin($align: left) { @include ouiAccordionIconMargin($align); }
+
 /* End of Aliases */
diff --git a/src/components/aspect_ratio/_aspect_ratio.scss b/src/components/aspect_ratio/_aspect_ratio.scss
index be943ccfa9..2846c6b79b 100644
--- a/src/components/aspect_ratio/_aspect_ratio.scss
+++ b/src/components/aspect_ratio/_aspect_ratio.scss
@@ -13,7 +13,6 @@
   position: relative;
 
   > * {
-    // sass-lint:disable-block no-important
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
diff --git a/src/components/avatar/_avatar.scss b/src/components/avatar/_avatar.scss
index 3c7758176d..734c80bba5 100644
--- a/src/components/avatar/_avatar.scss
+++ b/src/components/avatar/_avatar.scss
@@ -23,11 +23,13 @@
 
 .ouiAvatar--user {
   @include innerBorder('dark', 50%, .05);
+
   border-radius: 50%;
 }
 
 .ouiAvatar--space {
   @include innerBorder('dark', $ouiBorderRadius, .05);
+
   border-radius: $ouiBorderRadius;
 }
 
@@ -48,21 +50,22 @@ $avatarSizing: (
   ),
   m: (
     size: $ouiSizeXL,
-    font-size: $ouiSize*.9
+    font-size: $ouiSize * .9
   ),
   l: (
     size: $ouiSizeXXL,
-    font-size: $ouiSizeL*.8
+    font-size: $ouiSizeL * .8
   ),
   xl: (
     size: ($ouiSize * 4),
-    font-size: $ouiSizeXL*.8
+    font-size: $ouiSizeXL * .8
   ),
 );
 
 @each $size, $map in $avatarSizing {
   .ouiAvatar--#{$size} {
     @include size(map-get($map, 'size'));
+
     line-height: map-get($map, 'size');
     font-size: map-get($map, 'font-size');
   }
diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss
index c0f7755add..438405ba47 100644
--- a/src/components/badge/_badge.scss
+++ b/src/components/badge/_badge.scss
@@ -26,12 +26,12 @@
   vertical-align: middle;
   cursor: default;
   max-width: 100%;
+
   // The badge will only ever be as wide as its content
   // So, make the text left aligned to ensure all badges line up the same
   text-align: left;
 
   &.ouiBadge-isDisabled {
-    // sass-lint:disable-block no-important
     // Using !important to override inline styles
     color: makeHighContrastColor($ouiButtonColorDisabled, $ouiButtonColorDisabled, 2) !important;
     background-color: $ouiButtonColorDisabled !important;
@@ -54,6 +54,7 @@
 
   .ouiBadge__childButton {
     @include ouiTextTruncate;
+
     flex: 1 1 auto; // Must be 1 and 1 for IE to properly truncate
     text-align: inherit;
     font-weight: inherit;
@@ -89,12 +90,13 @@
 
     .ouiBadge__icon {
       // Remove margins from icon itself so that focus state doesn't include that space
-      margin: 0 !important; // sass-lint:disable-line no-important
+      margin: 0 !important;
     }
   }
 
   .ouiBadge__text {
     @include ouiTextTruncate;
+
     flex: 1 1 auto;
     cursor: default;
   }
diff --git a/src/components/badge/badge_group/_badge_group.scss b/src/components/badge/badge_group/_badge_group.scss
index 67af1c8843..d369fa804c 100644
--- a/src/components/badge/badge_group/_badge_group.scss
+++ b/src/components/badge/badge_group/_badge_group.scss
@@ -36,4 +36,5 @@ $ouiBadgeGroupGutterTypes: (
 
 /* OUI -> EUI Aliases */
 $euiBadgeGroupGutterTypes: $ouiBadgeGroupGutterTypes;
+
 /* End of Aliases */
diff --git a/src/components/badge/beta_badge/_beta_badge.scss b/src/components/badge/beta_badge/_beta_badge.scss
index 4e4a2036f8..eb4c494efb 100644
--- a/src/components/badge/beta_badge/_beta_badge.scss
+++ b/src/components/badge/beta_badge/_beta_badge.scss
@@ -15,7 +15,6 @@
   border-radius: $ouiSizeL;
   box-shadow: inset 0 0 0 1px $ouiBorderColor;
   vertical-align: super; // if displayed inline with text
-
   font-size: $ouiFontSizeXS;
   font-weight: $ouiFontWeightBold;
   text-transform: uppercase;
@@ -27,8 +26,10 @@
 
   &:focus {
     @include ouiFocusRing;
+
     // Can't use `currentColor` because of possible white text, so always keep it black
     outline-color: lightOrDarkTheme($ouiColorInk, $ouiColorGhost);
+
     // The rounded corners of the badge doesn't match well with the outline, so push it outward
     outline-offset: 2px;
   }
@@ -39,6 +40,7 @@
 
   &.ouiBetaBadge--small {
     @include fontSize($ouiFontSize * .625);
+
     line-height: $ouiSize + $ouiSizeXS;
     padding: 0 $ouiSizeM;
   }
@@ -72,6 +74,7 @@
 
 .ouiBetaBadge--subdued {
   $backgroundColor: tint($ouiColorLightShade, 30%);
+
   background: $backgroundColor;
   color: chooseLightOrDarkText($backgroundColor, $ouiColorGhost, $ouiColorInk);
 
@@ -83,6 +86,7 @@
 .ouiBetaBadge--hollow {
   &.ouiBetaBadge-isClickable {
     $backgroundColor: tint($ouiColorLightShade, 30%);
+
     color: chooseLightOrDarkText($backgroundColor, $ouiColorGhost, $ouiColorInk);
   }
 }
diff --git a/src/components/badge/notification_badge/_notification_badge.scss b/src/components/badge/notification_badge/_notification_badge.scss
index 2915d73aaf..e20ff3bd29 100644
--- a/src/components/badge/notification_badge/_notification_badge.scss
+++ b/src/components/badge/notification_badge/_notification_badge.scss
@@ -26,6 +26,7 @@
   cursor: default;
 
   $backgroundColor: $ouiColorAccentText;
+
   background: $backgroundColor;
   color: chooseLightOrDarkText($backgroundColor, $ouiColorGhost, $ouiColorInk);
 }
@@ -33,6 +34,7 @@
 .ouiNotificationBadge--medium {
   // Increase the default size a bit
   $size: $ouiSize + $ouiSizeXS;
+
   line-height: $size;
   height: $size;
   min-width: $ouiSizeL;
@@ -40,6 +42,7 @@
 
 .ouiNotificationBadge--subdued {
   $backgroundColor: tint($ouiColorLightShade, 30%);
+
   background: $backgroundColor;
   color: chooseLightOrDarkText($backgroundColor, $ouiColorGhost, $ouiColorInk);
 }
diff --git a/src/components/basic_table/_basic_table.scss b/src/components/basic_table/_basic_table.scss
index a5be4ff16d..2589f67188 100644
--- a/src/components/basic_table/_basic_table.scss
+++ b/src/components/basic_table/_basic_table.scss
@@ -10,7 +10,6 @@
  */
 
 .ouiBasicTable {
-
   &-loading {
     position: relative;
 
@@ -18,7 +17,7 @@
       overflow: hidden;
     }
 
-    tbody:before {
+    tbody::before {
       position: absolute;
       content: '';
       width: 100%;
@@ -33,7 +32,7 @@
 
 
 @keyframes ouiBasicTableLoading {
-  from {
+  0% {
     left: 0;
     width: 0;
   }
diff --git a/src/components/beacon/_beacon.scss b/src/components/beacon/_beacon.scss
index 3a36c651d6..ac536465bf 100644
--- a/src/components/beacon/_beacon.scss
+++ b/src/components/beacon/_beacon.scss
@@ -14,8 +14,8 @@
   background-color: $ouiColorVis0;
   border-radius: 50%;
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     position: absolute;
     content: '';
     height: 100%;
@@ -27,11 +27,11 @@
     box-shadow: 0 0 1px 1px $ouiColorVis0;
   }
 
-  &:before {
+  &::before {
     animation: ouiBeaconPulseLarge 2.5s infinite ease-out;
   }
 
-  &:after {
+  &::after {
     animation: ouiBeaconPulseSmall 2.5s infinite ease-out .25s;
   }
 }
diff --git a/src/components/bottom_bar/_bottom_bar.scss b/src/components/bottom_bar/_bottom_bar.scss
index 6dd519fdb0..f958547d90 100644
--- a/src/components/bottom_bar/_bottom_bar.scss
+++ b/src/components/bottom_bar/_bottom_bar.scss
@@ -15,10 +15,10 @@
   right: 0;
 
   @include ouiBottomShadowFlat($ouiShadowColorLarge);
+
   background: $ouiHeaderDarkBackgroundColor;
   color: $ouiColorGhost;
 
-  // sass-lint:disable-block mixins-before-declarations
   @include ouiCanAnimate {
     animation: ouiBottomBarAppear $ouiAnimSpeedSlow $ouiAnimSlightResistance;
   }
diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss
index abd7db5346..b2273820f9 100644
--- a/src/components/breadcrumbs/_breadcrumbs.scss
+++ b/src/components/breadcrumbs/_breadcrumbs.scss
@@ -16,6 +16,7 @@
 
 .ouiBreadcrumbs {
   @include ouiFontSizeS;
+
   margin-bottom: -$ouiSizeXS; /* 1 */
   display: flex;
   align-items: center;
@@ -28,10 +29,10 @@
 
   &:not(.ouiBreadcrumb--last) {
     // TODO: remove important: https://github.com/opensearch-project/oui/issues/376
-    color: $ouiBreadcrumbInactiveTextColor !important; // sass-lint:disable-line no-important
+    color: $ouiBreadcrumbInactiveTextColor !important;
 
     &:hover {
-      color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important
+      color: $ouiBreadCrumbHoverColor !important;
     }
   }
 }
@@ -42,12 +43,12 @@
 
 .ouiBreadcrumb--collapsed {
   flex-shrink: 0;
-  color: $ouiBreadcrumbCollapsedLink !important; // sass-lint:disable-line no-important
-  vertical-align: top !important; // sass-lint:disable-line no-important
+  color: $ouiBreadcrumbCollapsedLink !important;
+  vertical-align: top !important;
 }
 
 .ouiBreadcrumb__collapsedLink:hover {
-  color: $ouiBreadCrumbHoverColor !important; // sass-lint:disable-line no-important
+  color: $ouiBreadCrumbHoverColor !important;
 }
 
 .ouiBreadcrumbs--truncate {
@@ -74,6 +75,7 @@
 
 .ouiBreadcrumb--truncate {
   @include ouiTextTruncate;
+
   max-width: 100%;
   text-align: center;
   vertical-align: top; // overflow hidden causes misalignment of links and slashes, this fixes that
@@ -92,12 +94,8 @@
   &::before {
     content: '';
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: $ouiBreadcrumbSpacing / 2;
-    right: $ouiBreadcrumbSpacing / 2;
+    inset: 0 $ouiBreadcrumbSpacing / 2 0 $ouiBreadcrumbSpacing / 2;
     z-index: -1;
-
     transform: skewX(-20deg);
     border-radius: $ouiSizeXS;
   }
diff --git a/src/components/breadcrumbs/_variables.scss b/src/components/breadcrumbs/_variables.scss
index e5c2d5a045..9866c2e4ec 100644
--- a/src/components/breadcrumbs/_variables.scss
+++ b/src/components/breadcrumbs/_variables.scss
@@ -11,7 +11,6 @@
 
 $ouiBreadcrumbSpacing: $ouiSizeS !default;
 $ouiBreadcrumbTruncateWidth: $ouiSize * 10 !default;
-
 $ouiBreadcrumbActiveBackground: tintOrShade($ouiColorPrimary, 72%, 41%) !default;
 $ouiBreadcrumbInactiveBackground: tint($ouiColorLightShade, 14%) !default;
 $ouiBreadcrumbCollapsedLink: shadeOrTint($ouiColorPrimaryText, 61%, 20%) !default;
@@ -21,10 +20,10 @@ $ouiBreadCrumbHoverColor: shadeOrTint($ouiBreadcrumbInactiveTextColor, 16%, 6%)
 /* OUI -> EUI Aliases */
 $euiBreadcrumbSpacing: $ouiBreadcrumbSpacing;
 $euiBreadcrumbTruncateWidth: $ouiBreadcrumbTruncateWidth;
-
 $euiBreadcrumbActiveBackground: $ouiBreadcrumbActiveBackground;
 $euiBreadcrumbInactiveBackground: $ouiBreadcrumbInactiveBackground;
 $euiBreadcrumbCollapsedLink: $ouiBreadcrumbCollapsedLink;
 $euiBreadcrumbInactiveTextColor: $ouiBreadcrumbInactiveTextColor;
 $euiBreadCrumbHoverColor: $ouiBreadCrumbHoverColor;
+
 /* End of Aliases */
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 80093ffb6e..8911b87d40 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -10,7 +10,6 @@
  */
 
 // This file has lots of modifiers and is somewhat nesty by nature
-// sass-lint:disable nesting-depth
 
 // Our base button
 .ouiButton {
@@ -49,6 +48,7 @@
 
   &.ouiButton-isDisabled {
     @include ouiButtonContentDisabled;
+
     color: $ouiButtonColorDisabledText;
     border-color: $ouiButtonColorDisabled;
 
@@ -70,6 +70,7 @@
     &:focus,
     &:focus-within {
       @include ouiSlightShadow;
+
       text-decoration: none;
     }
   }
@@ -78,10 +79,10 @@
 // Create button modifiers based upon the map.
 @each $name, $color in $ouiButtonTypes {
   .ouiButton--#{$name} {
-    @if ($name == 'ghost') {
+    @if  $name == 'ghost' {
       // Ghost is unique and ALWAYS sits against a dark background.
       color: $color;
-    } @else if ($name == 'text') {
+    } @else if $name == 'text' {
       // The default color is lighter than the normal text color, make the it the text color
       color: $ouiTextColor;
     } @else {
@@ -112,9 +113,10 @@
 
     &:not([class*='isDisabled']) {
       $shadowColor: $ouiShadowColor;
-      @if ($name == 'ghost') {
+
+      @if  $name == 'ghost' {
         $shadowColor: $ouiColorInk;
-      } @else if (lightness($ouiTextColor) < 50) {
+      } @else if lightness($ouiTextColor) < 50 {
         // Only if this is the light theme do we use the button variant color to colorize the shadow
         $shadowColor: desaturate($color, 60%);
       }
@@ -125,6 +127,7 @@
       &:focus,
       &:focus-within {
         @include ouiSlightShadowHover($shadowColor);
+
         background-color: transparentize($color, .9);
       }
     }
@@ -138,6 +141,7 @@
   &:focus,
   &:focus-within {
     @include ouiSlightShadow($ouiColorInk);
+
     color: $ouiButtonColorGhostDisabled;
     border-color: $ouiButtonColorGhostDisabled;
   }
diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss
index d18a7bb3d1..26c97b4805 100644
--- a/src/components/button/button_empty/_button_empty.scss
+++ b/src/components/button/button_empty/_button_empty.scss
@@ -20,7 +20,6 @@
   border-color: transparent;
   background-color: transparent;
   box-shadow: none;
-  // sass-lint:disable-block no-important
   transform: none !important; /* 1 */
   animation: none !important; /* 1 */
   transition-timing-function: ease-in; /* 2 */
@@ -92,10 +91,10 @@ $ouiButtonEmptyTypes: (
 // Create button modifiers based upon the map.
 @each $name, $color in $ouiButtonEmptyTypes {
   .ouiButtonEmpty--#{$name} {
-    @if ($name == 'ghost') {
+    @if  $name == 'ghost' {
       // Ghost is unique and ALWAYS sits against a dark background.
       color: $color;
-    } @else if ($name == 'text') {
+    } @else if $name == 'text' {
       // The default color is lighter than the normal text color, make the it the text color
       color: $ouiTextColor;
     } @else {
@@ -108,7 +107,7 @@ $ouiButtonEmptyTypes: (
     }
 
     &:hover {
-      @if ($name == 'disabled') {
+      @if  $name == 'disabled' {
         cursor: not-allowed;
       }
     }
@@ -119,4 +118,5 @@ $ouiButtonEmptyTypes: (
 
 /* OUI -> EUI Aliases */
 $euiButtonEmptyTypes: $ouiButtonEmptyTypes;
+
 /* End of Aliases */
diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
index 38c166f296..9102c4421f 100644
--- a/src/components/button/button_group/_button_group.scss
+++ b/src/components/button/button_group/_button_group.scss
@@ -29,6 +29,7 @@
 
 .ouiButtonGroup__buttons {
   @include ouiSlightShadow;
+
   border-radius: $ouiBorderRadius + 1px; // Simply for the box-shadow
   max-width: 100%;
   display: flex;
@@ -41,7 +42,7 @@
 
 .ouiButtonGroup--compressed {
   .ouiButtonGroup__buttons {
-    box-shadow: none !important; // sass-lint:disable-line no-important
+    box-shadow: none !important;
     border-radius: $ouiFormControlCompressedBorderRadius;
     background-color: $ouiFormBackgroundColor;
     height: $ouiFormControlCompressedHeight;
diff --git a/src/components/button/button_group/_button_group_button.scss b/src/components/button/button_group/_button_group_button.scss
index 39a900894b..147d0701ff 100644
--- a/src/components/button/button_group/_button_group_button.scss
+++ b/src/components/button/button_group/_button_group_button.scss
@@ -14,7 +14,6 @@
   @include ouiFont;
   @include ouiFontSize;
 
-  // sass-lint:disable-block indentation
   transition: background-color $ouiAnimSpeedNormal ease-in-out,
               border-color $ouiAnimSpeedNormal ease-in-out,
               color $ouiAnimSpeedNormal ease-in-out;
@@ -53,6 +52,7 @@
 
   &.ouiButtonGroupButton-isDisabled {
     @include ouiButtonContentDisabled;
+
     color: $ouiButtonColorDisabledText;
 
     &.ouiButtonGroupButton-isSelected {
@@ -71,11 +71,11 @@
 
   @each $name, $color in $ouiButtonTypes {
     &.ouiButtonGroupButton--#{$name}:not([class*='isDisabled']) {
-      @if ($name == 'ghost') {
+      @if  $name == 'ghost' {
         // Ghost is unique and ALWAYS sits against a dark background.
         // Compressed styles don't support ghost color, it defaults to the text color
         color: $color;
-      } @else if ($name == 'text') {
+      } @else if $name == 'text' {
         // The default color is lighter than the normal text color, make the it the text color
         color: $ouiTextColor;
       } @else {
@@ -175,6 +175,7 @@
     line-height: $ouiFormControlCompressedHeight - 2px; // prevents descenders from getting cut off
     font-size: $ouiFontSizeS;
     border-radius: $ouiBorderRadius;
+
     // Offset the background color from the border by 2px
     // by clipping background to before the padding starts
     padding: 2px;
diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss
index 82586813e6..ce5fc64621 100644
--- a/src/components/button/button_icon/_button_icon.scss
+++ b/src/components/button/button_icon/_button_icon.scss
@@ -10,7 +10,6 @@
  */
 
 // This file has lots of modifiers and is somewhat nesty by nature
-// sass-lint:disable nesting-depth
 
 .ouiButtonIcon {
   @include ouiButton;
@@ -31,12 +30,13 @@
   }
 
   &.ouiButtonIcon--empty {
-    box-shadow: none !important; // sass-lint:disable-line no-important
+    box-shadow: none !important;
     border: none;
   }
 
   &.ouiButtonIcon-isDisabled {
     @include ouiButtonContentDisabled;
+
     color: $ouiButtonColorDisabledText;
     border-color: $ouiButtonColorDisabled;
 
@@ -58,6 +58,7 @@
     &:focus,
     &:focus-within {
       @include ouiSlightShadow;
+
       text-decoration: none;
     }
   }
@@ -76,10 +77,10 @@
 // Create button modifiers based upon the map.
 @each $name, $color in $ouiButtonTypes {
   .ouiButtonIcon--#{$name} {
-    @if ($name == 'ghost') {
+    @if  $name == 'ghost' {
       // Ghost is unique and ALWAYS sits against a dark background.
       color: $color;
-    } @else if ($name == 'text') {
+    } @else if $name == 'text' {
       // The default color is lighter than the normal text color, make the it the text color
       color: $ouiTextColor;
     } @else {
@@ -110,9 +111,10 @@
 
     &:not([class*='isDisabled']) {
       $shadowColor: $ouiShadowColor;
-      @if ($name == 'ghost') {
+
+      @if  $name == 'ghost' {
         $shadowColor: $ouiColorInk;
-      } @else if (lightness($ouiTextColor) < 50) {
+      } @else if lightness($ouiTextColor) < 50 {
         // Only if this is the light theme do we use the button variant color to colorize the shadow
         $shadowColor: desaturate($color, 60%);
       }
@@ -123,6 +125,7 @@
       &:focus,
       &:focus-within {
         @include ouiSlightShadowHover($shadowColor);
+
         background-color: transparentize($color, .9);
       }
     }
@@ -136,6 +139,7 @@
   &:focus,
   &:focus-within {
     @include ouiSlightShadow($ouiColorInk);
+
     color: $ouiButtonColorGhostDisabled;
     border-color: $ouiButtonColorGhostDisabled;
   }
diff --git a/src/components/button/button_icon/_variables.scss b/src/components/button/button_icon/_variables.scss
index a9986fde22..70b4154f87 100644
--- a/src/components/button/button_icon/_variables.scss
+++ b/src/components/button/button_icon/_variables.scss
@@ -24,4 +24,5 @@ $ouiButtonIconTypes: (
 
 /* OUI -> EUI Aliases */
 $euiButtonIconTypes: $ouiButtonIconTypes;
+
 /* End of Aliases */
diff --git a/src/components/call_out/_call_out.scss b/src/components/call_out/_call_out.scss
index 117ecaab51..c9104e0187 100644
--- a/src/components/call_out/_call_out.scss
+++ b/src/components/call_out/_call_out.scss
@@ -20,12 +20,14 @@
 
   .ouiCallOutHeader__icon {
     flex: 0 0 auto;
+
     // Vertically center icon with first line of title
     transform: translateY(2px);
   }
 
   .ouiCallOutHeader__title {
     @include ouiCallOutTitle;
+
     margin-bottom: 0; // In case it's nested inside OuiText
   }
 
diff --git a/src/components/call_out/_index.scss b/src/components/call_out/_index.scss
index 5361d94909..d88b42e4aa 100644
--- a/src/components/call_out/_index.scss
+++ b/src/components/call_out/_index.scss
@@ -11,5 +11,4 @@
 
 @import 'variables';
 @import 'mixins';
-
 @import 'call_out';
diff --git a/src/components/call_out/_mixins.scss b/src/components/call_out/_mixins.scss
index 7584bc453e..ac42014a7f 100644
--- a/src/components/call_out/_mixins.scss
+++ b/src/components/call_out/_mixins.scss
@@ -10,14 +10,14 @@
  */
 
 @function ouiCallOutColor($type: 'primary', $returnBackgroundOrForeground: 'background') {
-  @if (map-has-key($ouiCallOutTypes, $type)) {
+  @if  map-has-key($ouiCallOutTypes, $type) {
     $color: map-get($ouiCallOutTypes, $type);
     $backgroundColor: tintOrShade($color, 90%, 70%);
     $foregroundColor: shadeOrTint(makeHighContrastColor($color, $backgroundColor), 0, 20%);
 
-    @if ($returnBackgroundOrForeground == 'background') {
+    @if  $returnBackgroundOrForeground == 'background' {
       @return $backgroundColor;
-    } @else if ($returnBackgroundOrForeground == 'foreground') {
+    } @else if $returnBackgroundOrForeground == 'foreground' {
       @return $foregroundColor;
     } @else {
       @warn 'Incorrect value provided as $returnBackgroundOrForeground';
@@ -28,11 +28,13 @@
 }
 
 @mixin ouiCallOutTitle($size: null) {
-  @if ($size == 's') {
+  @if  $size == 's' {
     @include ouiTitle('xxs');
+
     font-weight: $ouiFontWeightRegular;
   } @else {
     @include ouiTitle('xs');
+
     font-weight: $ouiFontWeightRegular;
   }
 }
@@ -40,5 +42,7 @@
 
 /* OUI -> EUI Aliases */
 @function euiCallOutColor($type: 'primary', $returnBackgroundOrForeground: 'background') { @return ouiCallOutColor($type, $returnBackgroundOrForeground); }
+
 @mixin euiCallOutTitle($size: null) { @include ouiCallOutTitle($size); }
+
 /* End of Aliases */
diff --git a/src/components/call_out/_variables.scss b/src/components/call_out/_variables.scss
index 8b11a0d41f..d69957b722 100644
--- a/src/components/call_out/_variables.scss
+++ b/src/components/call_out/_variables.scss
@@ -20,4 +20,5 @@ $ouiCallOutTypes: (
 
 /* OUI -> EUI Aliases */
 $euiCallOutTypes: $ouiCallOutTypes;
+
 /* End of Aliases */
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index 67bee60bd0..4afbcf2cf5 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -24,7 +24,6 @@
   min-height: 1px; /* 2 */
 
   &.ouiCard-isDisabled {
-    // sass-lint:disable-block no-important
     cursor: not-allowed !important; // duplicate property due to Chrome bug
     transform: none !important;
     box-shadow: none !important;
@@ -42,7 +41,7 @@
       cursor: inherit;
     }
 
-    .ouiCard__betaBadge:not(.ouiBetaBadge-isClickable):not(.ouiBetaBadge--hollow) {
+    .ouiCard__betaBadge:not(.ouiBetaBadge-isClickable, .ouiBetaBadge--hollow) {
       box-shadow: inset 0 0 0 1px $ouiBorderColor;
       background: transparent;
       color: inherit;
@@ -131,7 +130,6 @@
     }
 
     .ouiCard__top {
-
       .ouiCard__image {
         width: calc(100% + (#{$paddingAmount} * 2));
         left: $paddingAmount * -1;
@@ -141,7 +139,7 @@
         // IF both exist, position the icon centered on top of image
         + .ouiCard__icon {
           transform: translate(-50%, -75%); // Fallback for IE as it doesn't accept calcs in translates
-          transform: translate(-50%, calc(-50% + #{$paddingAmount * -1})); // sass-lint:disable-line no-duplicate-properties
+          transform: translate(-50%, calc(-50% + #{$paddingAmount * -1}));
         }
       }
     }
@@ -193,7 +191,7 @@
 @each $name, $color in $ouiCardSelectButtonBorders {
   .ouiCard--isSelectable--#{$name}.ouiCard-isSelected:not(.ouiCard-isDisabled) {
     // Override .ouiPanel.has--Border
-    border-color: $color !important; // sass-lint:disable-line no-important
+    border-color: $color !important;
   }
 }
 
@@ -233,7 +231,6 @@
   // otherwise the button tag won't properly align contents to top
   &.ouiCard--hasIcon {
     flex-direction: row;
-    // sass-lint:disable-block no-important
     align-items: flex-start !important; /* 3 */
 
     .ouiCard__top,
diff --git a/src/components/card/_card_select.scss b/src/components/card/_card_select.scss
index cf4b957837..f8fb9f5c9b 100644
--- a/src/components/card/_card_select.scss
+++ b/src/components/card/_card_select.scss
@@ -12,6 +12,7 @@
 .ouiCardSelect {
   // Option select button that expands to sides and bottom
   @include ouiCardBottomNodePosition;
+
   font-weight: $ouiFontWeightBold;
 
   // Create button modifiers based upon the map.
@@ -20,7 +21,7 @@
       background-color: $color;
 
       // Custom success text color since it doesn't exist on OuiButtonEmpty
-      @if ($name == 'success') {
+      @if  $name == 'success' {
         color: makeHighContrastColor($ouiColorSuccess, $color);
       }
     }
diff --git a/src/components/card/_mixins.scss b/src/components/card/_mixins.scss
index bac626715c..891915abd6 100644
--- a/src/components/card/_mixins.scss
+++ b/src/components/card/_mixins.scss
@@ -13,9 +13,10 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  height: $ouiCardBottomNodeHeight !important;  // sass-lint:disable-line no-important -- To override .ouiButtonEmpty--xSmall
   width: 100%;
+  height: $ouiCardBottomNodeHeight !important;
   overflow: hidden;
+
   // Subtract 1px from border radius since it sits inside a border-radius
   border-bottom-left-radius: $ouiBorderRadius - 1px;
   border-bottom-right-radius: $ouiBorderRadius - 1px;
@@ -24,4 +25,5 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiCardBottomNodePosition { @include ouiCardBottomNodePosition; }
+
 /* End of Aliases */
diff --git a/src/components/card/_variables.scss b/src/components/card/_variables.scss
index 1dabe7d482..caf989d981 100644
--- a/src/components/card/_variables.scss
+++ b/src/components/card/_variables.scss
@@ -11,7 +11,6 @@
 
 $ouiCardSpacing: map-get($ouiPanelPaddingModifiers, 'paddingMedium');
 $ouiCardBottomNodeHeight: $ouiSizeXXL;
-
 $ouiCardSelectButtonBorders: (
   text: $ouiColorSuccess, // Default for selected
   primary: $ouiColorPrimary,
@@ -19,7 +18,6 @@ $ouiCardSelectButtonBorders: (
   danger: $ouiColorDanger,
   ghost: $ouiColorDarkShade,
 );
-
 $ouiCardSelectButtonBackgrounds: (
   text: $ouiColorLightestShade, // Default for unselected
   primary: tintOrShade($ouiColorPrimary, 90%, 70%),
@@ -27,7 +25,6 @@ $ouiCardSelectButtonBackgrounds: (
   danger: tintOrShade($ouiColorDanger, 90%, 70%),
   ghost: $ouiColorDarkShade,
 );
-
 $ouiCardPaddingModifiers: (
   'paddingNone': 0,
   'paddingSmall': $ouiSizeS,
@@ -42,4 +39,5 @@ $euiCardBottomNodeHeight: $ouiCardBottomNodeHeight;
 $euiCardSelectButtonBorders: $ouiCardSelectButtonBorders;
 $euiCardSelectButtonBackgrounds: $ouiCardSelectButtonBackgrounds;
 $euiCardPaddingModifiers: $ouiCardPaddingModifiers;
+
 /* End of Aliases */
diff --git a/src/components/card/checkable_card/_checkable_card.scss b/src/components/card/checkable_card/_checkable_card.scss
index 602e0bed6f..69d2824880 100644
--- a/src/components/card/checkable_card/_checkable_card.scss
+++ b/src/components/card/checkable_card/_checkable_card.scss
@@ -23,6 +23,7 @@ $ouiCheckableCardPadding: map-get($ouiPanelPaddingModifiers, 'paddingMedium');
 
 .ouiCheckableCard__label {
   cursor: pointer;
+
   // Expand the label to cover the whole panel for easier click target
   display: block;
   width: calc(100% + #{$ouiCheckableCardPadding * 2});
@@ -42,4 +43,5 @@ $ouiCheckableCardPadding: map-get($ouiPanelPaddingModifiers, 'paddingMedium');
 
 /* OUI -> EUI Aliases */
 $euiCheckableCardPadding: $ouiCheckableCardPadding;
+
 /* End of Aliases */
diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index 79505ed14e..08c776da43 100644
--- a/src/components/code/_code_block.scss
+++ b/src/components/code/_code_block.scss
@@ -18,6 +18,7 @@
 
   .ouiCodeBlock__pre {
     @include ouiScrollBar;
+
     height: 100%;
     overflow: auto;
     display: block;
@@ -33,6 +34,7 @@
 
   .ouiCodeBlock__code {
     @include ouiCodeFont;
+
     display: block;
     line-height: $ouiLineHeight;
     font-weight: $ouiCodeFontWeightRegular;
@@ -55,13 +57,9 @@
 
   &.ouiCodeBlock-isFullScreen {
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
 
     .ouiCodeBlock__pre {
-      // sass-lint:disable-block no-important
       padding: $ouiSizeXL !important;
     }
 
@@ -187,7 +185,7 @@
     }
   }
 
-  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {
+  .token.punctuation:not(.interpolation-punctuation, [class*='attr-']) {
     opacity: .7;
   }
 
diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
index bc808d997e..eece090529 100644
--- a/src/components/collapsible_nav/_collapsible_nav.scss
+++ b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -12,7 +12,7 @@
 // Extends <OuiFlyout>
 
 .ouiCollapsibleNav:not([class*='push']) {
-  z-index: $ouiZNavigation !important; // sass-lint:disable-line no-important
+  z-index: $ouiZNavigation !important;
 }
 
 .ouiCollapsibleNav.ouiFlyout {
diff --git a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
index 809e14fb00..48af13392d 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
+++ b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
@@ -35,7 +35,7 @@
   // Forcing better contrast of focus state on OuiAccordion toggle icon
   .ouiCollapsibleNavGroup__heading:focus .ouiAccordion__iconWrapper {
     color: $ouiCollapsibleNavGroupDarkHighContrastColor;
-    animation-name: ouiCollapsibleNavGroupDarkFocusRingAnimate !important; // sass-lint:disable-line no-important
+    animation-name: ouiCollapsibleNavGroupDarkFocusRingAnimate !important;
   }
 
   .ouiCollapsibleNavGroup__title {
diff --git a/src/components/color_picker/_color_picker.scss b/src/components/color_picker/_color_picker.scss
index 8f22c15777..3be429dc87 100644
--- a/src/components/color_picker/_color_picker.scss
+++ b/src/components/color_picker/_color_picker.scss
@@ -38,11 +38,9 @@
 
 .ouiColorPicker__popoverPanel--pickerOnly {
   // Override of OuiPanel padding
-  // sass-lint:disable no-important
   padding-bottom: 0 !important;
 }
 
-// sass-lint:disable no-important
 .ouiColorPicker__input--inGroup {
   height: $ouiFormControlLayoutGroupInputHeight !important;
   box-shadow: none !important;
diff --git a/src/components/color_picker/_hue.scss b/src/components/color_picker/_hue.scss
index c846a22f41..a8b6fe71ce 100644
--- a/src/components/color_picker/_hue.scss
+++ b/src/components/color_picker/_hue.scss
@@ -11,7 +11,6 @@
 
 // This wraps the range. It is needed because there is no way to do a linear gradient in ie11 for the track
 .ouiHue {
-  // sass-lint:disable-block no-color-literals
   background: linear-gradient(to right,
     #FF3232 0%,
     #FFF130 20%,
@@ -26,8 +25,8 @@
   position: relative;
 
   // To make our fake range skinny, we add some pseudo borders to fake the height of the gradient
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: '';
     left: 0;
     position: absolute;
@@ -36,7 +35,7 @@
     width: 100%;
   }
 
-  &:after {
+  &::after {
     bottom: 0;
   }
 }
@@ -60,9 +59,8 @@
   // Resets for the range
 
   // Disable linter for these very unique vendor controls
-  // sass-lint:disable-block no-vendor-prefixes
   &::-webkit-slider-thumb {
-    -webkit-appearance: none;
+    appearance: none;
     margin-top: 0;
   }
 
diff --git a/src/components/color_picker/_saturation.scss b/src/components/color_picker/_saturation.scss
index e7ec24f707..3b97020422 100644
--- a/src/components/color_picker/_saturation.scss
+++ b/src/components/color_picker/_saturation.scss
@@ -21,10 +21,7 @@
   .ouiSaturation__lightness,
   .ouiSaturation__saturation {
     position: absolute;
-    top: -1px; // hides a slight color inconsistency
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: -1px 0 0; // hides a slight color inconsistency
     border-radius: $ouiBorderRadius / 2;
   }
 
@@ -45,13 +42,10 @@
     margin-left: $ouiColorPickerIndicatorSize * -.5;
     border: 1px solid $ouiColorDarkestShade;
 
-    &:before {
+    &::before {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       border-radius: 100%;
       border: 1px solid $ouiColorLightestShade;
     }
diff --git a/src/components/color_picker/_variables.scss b/src/components/color_picker/_variables.scss
index cd936aa148..67456e096b 100644
--- a/src/components/color_picker/_variables.scss
+++ b/src/components/color_picker/_variables.scss
@@ -9,10 +9,10 @@
  * GitHub history for details.
  */
 
-$ouiColorPickerValueRange0: rgba(255, 255, 255, 1);
-$ouiColorPickerValueRange1: rgba(255, 255, 255, 0);
-$ouiColorPickerSaturationRange0: rgba(0, 0, 0, 1);
-$ouiColorPickerSaturationRange1: rgba(0, 0, 0, 0);
+$ouiColorPickerValueRange0: rgba(255, 255, 255, 100%);
+$ouiColorPickerValueRange1: rgba(255, 255, 255, 0%);
+$ouiColorPickerSaturationRange0: rgba(0, 0, 0, 100%);
+$ouiColorPickerSaturationRange1: rgba(0, 0, 0, 0%);
 $ouiColorPickerIndicatorSize: $ouiSizeM;
 $ouiColorPickerWidth: ($ouiSizeL * 5) + ($ouiSizeS * 4); // 5 columns of swatches + margins + border
 
@@ -24,4 +24,5 @@ $euiColorPickerSaturationRange0: $ouiColorPickerSaturationRange0;
 $euiColorPickerSaturationRange1: $ouiColorPickerSaturationRange1;
 $euiColorPickerIndicatorSize: $ouiColorPickerIndicatorSize;
 $euiColorPickerWidth: $ouiColorPickerWidth;
+
 /* End of Aliases */
diff --git a/src/components/color_picker/color_palette_display/_color_palette_display.scss b/src/components/color_picker/color_palette_display/_color_palette_display.scss
index 5244d27ffd..6b64ecd595 100644
--- a/src/components/color_picker/color_palette_display/_color_palette_display.scss
+++ b/src/components/color_picker/color_palette_display/_color_palette_display.scss
@@ -19,6 +19,7 @@
 @each $name, $size in $ouiColorPaletteDisplaySizes {
   .ouiColorPaletteDisplay--#{$name} {
     @include innerBorder('dark', $size, .2);
+
     height: $size;
     border-radius: $size;
   }
diff --git a/src/components/color_picker/color_palette_display/_variables.scss b/src/components/color_picker/color_palette_display/_variables.scss
index 6170727a13..41e2dbffdc 100644
--- a/src/components/color_picker/color_palette_display/_variables.scss
+++ b/src/components/color_picker/color_palette_display/_variables.scss
@@ -19,4 +19,5 @@ $ouiColorPaletteDisplaySizes: (
 
 /* OUI -> EUI Aliases */
 $euiColorPaletteDisplaySizes: $ouiColorPaletteDisplaySizes;
+
 /* End of Aliases */
diff --git a/src/components/color_picker/color_stops/_color_stops.scss b/src/components/color_picker/color_stops/_color_stops.scss
index e8023edc9f..e53f44944f 100644
--- a/src/components/color_picker/color_stops/_color_stops.scss
+++ b/src/components/color_picker/color_stops/_color_stops.scss
@@ -36,6 +36,7 @@
 .ouiColorStops__addTarget {
   @include ouiCustomControl($type: 'round');
   @include ouiRangeThumbStyle;
+
   position: absolute;
   top: 0;
   height: $ouiRangeThumbHeight;
@@ -69,7 +70,7 @@
 
   // Background color can potentially have opacity
   // Pseudo element placed below the thumb to prevent the track from showing through
-  &:before {
+  &::before {
     content: '';
     display: block;
     position: absolute;
@@ -83,7 +84,6 @@
 }
 
 .ouiColorStopThumb.ouiRangeThumb:not(:disabled) {
-  // sass-lint:disable-block no-color-literals, indentation
   top: 0;
   margin-top: 0;
   pointer-events: auto;
@@ -100,11 +100,10 @@
 }
 
 .ouiColorStopPopover-isLoadingPanel {
-  // sass-lint:disable-block no-important
   visibility: hidden !important; // Overrides a stateful class on OuiPopover -> OuiPanel
 }
 
-.ouiColorStops.ouiColorStops-isDragging:not(.ouiColorStops-isDisabled):not(.ouiColorStops-isReadOnly) {
+.ouiColorStops.ouiColorStops-isDragging:not(.ouiColorStops-isDisabled, .ouiColorStops-isReadOnly) {
   cursor: grabbing;
 }
 
diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss
index d73cd47471..f5d81f5662 100644
--- a/src/components/combo_box/_combo_box.scss
+++ b/src/components/combo_box/_combo_box.scss
@@ -11,6 +11,7 @@
 
 .ouiComboBox {
   @include ouiFormControlSize(auto, $includeAlternates: true);
+
   position: relative;
 
   /**
@@ -28,11 +29,11 @@
     @include ouiFormControlStyle($includeStates: false, $includeSizes: true);
     @include ouiFormControlWithIcon($isIconOptional: true);
     @include ouiFormControlSize(auto, $includeAlternates: true);
+
     padding: $ouiSizeXS $ouiSizeS;
     display: flex; /* 1 */
     outline: none; // Fixes an intermittent focus ring in Firefox
 
-    // sass-lint:disable-block mixins-before-declarations
     // to override the padding added above
     @include ouiFormControlLayoutPadding(1); /* 2 */
 
@@ -86,13 +87,13 @@
    * 5. Prevent a lot of input from causing the react-input-autosize to overflow the container.
    */
   .ouiComboBox__input {
-    // sass-lint:disable-block no-important
     display: inline-flex !important; /* 1 */
     height: $ouiSizeXL; /* 2 */
     overflow: hidden; /* 5 */
 
     > input {
       @include ouiFont;
+
       appearance: none; /* 3 */
       padding: 0;
       border: none;
@@ -122,8 +123,8 @@
 
   &.ouiComboBox-isDisabled {
     .ouiComboBox__inputWrap {
-      // sass-lint:disable-block no-vendor-prefixes
       @include ouiFormControlDisabledStyle;
+
       -webkit-text-fill-color: unset; // overrides $ouiFormControlDisabledColor because the color doesn't work with multiple background colors
     }
 
@@ -144,7 +145,6 @@
       padding-top: 0;
       padding-bottom: 0;
 
-      // sass-lint:disable-block mixins-before-declarations
       @include ouiFormControlLayoutPadding(1, $compressed: true); /* 2 */
 
       &.ouiComboBox__inputWrap-isClearable {
@@ -168,7 +168,6 @@
   // Overrides the ouiFormControlLayout prepend and append height that is 100%
   .ouiFormControlLayout__prepend,
   .ouiFormControlLayout__append {
-    // sass-lint:disable-block no-important
     height: auto !important;
   }
 }
diff --git a/src/components/combo_box/combo_box_input/_combo_box_input.scss b/src/components/combo_box/combo_box_input/_combo_box_input.scss
index a90a5a9a12..c3f92ce5f2 100644
--- a/src/components/combo_box/combo_box_input/_combo_box_input.scss
+++ b/src/components/combo_box/combo_box_input/_combo_box_input.scss
@@ -14,7 +14,6 @@
 
   // Ensure that no input states are visible on the hidden input
   input {
-    // sass-lint:disable-block no-important
     border: none !important;
     box-shadow: none !important;
     outline: none !important;
diff --git a/src/components/combo_box/combo_box_input/_combo_box_placeholder.scss b/src/components/combo_box/combo_box_input/_combo_box_placeholder.scss
index 3389431c17..a0356231e6 100644
--- a/src/components/combo_box/combo_box_input/_combo_box_placeholder.scss
+++ b/src/components/combo_box/combo_box_input/_combo_box_placeholder.scss
@@ -11,12 +11,14 @@
 
 .ouiComboBoxPlaceholder {
   @include ouiTextTruncate;
+
   // Afford for the caret. The loading state is accounted for in _combo_box.scss
   @include ouiFormControlLayoutPadding(1, 'right');
+
   position: absolute;
   pointer-events: none;
   padding-left: $ouiSizeXS;
   line-height: $ouiSizeXL;
   color: $ouiFormControlPlaceholderText;
-  margin-bottom: 0 !important; // sass-lint:disable-line no-important
+  margin-bottom: 0 !important;
 }
diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
index 5747436f87..08d21958cb 100644
--- a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
+++ b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
@@ -15,7 +15,7 @@
  */
 .ouiComboBoxOptionsList {
   // Remove transforms from popover panel
-  transform: none !important; // sass-lint:disable-line no-important
+  transform: none !important;
   top: 0;
 
   &.ouiPopover__panel-isAttached.ouiComboBoxOptionsList--top { /* 1 */
@@ -25,6 +25,7 @@
 
 .ouiComboBoxOptionsList__empty {
   @include ouiTextBreakWord; /* 2 */
+
   padding: $ouiSizeS;
   text-align: center;
   word-wrap: break-word;
diff --git a/src/components/comment_list/_comment_event.scss b/src/components/comment_list/_comment_event.scss
index 9e6f4af421..3c186eb07b 100644
--- a/src/components/comment_list/_comment_event.scss
+++ b/src/components/comment_list/_comment_event.scss
@@ -37,6 +37,7 @@
 
 .ouiCommentEvent--regular {
   @include ouiSlightShadow;
+
   border-radius: $ouiBorderRadius;
   border: $ouiBorderThin;
 
@@ -50,10 +51,10 @@
      * Fix for IE when using align-items:center in an item that has min-height
         (https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042)
      */
-    // sass-lint:disable-block mixins-before-declarations
     @include internetExplorerOnly {
       &::after {
         content: '';
+
         // Calculates the minimum height based on full header's min-height minus the vertical padding
         min-height: $ouiSizeXXL - $ouiSizeS;
         font-size: 0;
diff --git a/src/components/context_menu/_context_menu.scss b/src/components/context_menu/_context_menu.scss
index d65cff3ff2..9ecfe84a1e 100644
--- a/src/components/context_menu/_context_menu.scss
+++ b/src/components/context_menu/_context_menu.scss
@@ -40,4 +40,5 @@ $ouiContextMenuWidth: $ouiSize * 16;
 
 /* OUI -> EUI Aliases */
 $euiContextMenuWidth: $ouiContextMenuWidth;
+
 /* End of Aliases */
diff --git a/src/components/context_menu/_context_menu_panel.scss b/src/components/context_menu/_context_menu_panel.scss
index 27fd6514b7..428f868d4f 100644
--- a/src/components/context_menu/_context_menu_panel.scss
+++ b/src/components/context_menu/_context_menu_panel.scss
@@ -51,6 +51,7 @@
 
 .ouiContextMenuPanelTitle {
   @include ouiPopoverTitle;
+
   padding: $ouiSizeM;
   width: 100%;
   text-align: left;
@@ -63,6 +64,7 @@
 
   &--small {
     @include ouiPopoverTitle('s');
+
     padding: ($ouiSizeS * .75) $ouiSizeS;
   }
 }
diff --git a/src/components/control_bar/_control_bar.scss b/src/components/control_bar/_control_bar.scss
index 8b5876fdb5..ffcc752835 100644
--- a/src/components/control_bar/_control_bar.scss
+++ b/src/components/control_bar/_control_bar.scss
@@ -14,6 +14,7 @@
   color: $ouiControlBarText;
   display: flex;
   flex-direction: column;
+
   // This large box shadow helps prevent a flicker of dark
   // background when the content is shown and hidden
   box-shadow: inset 0 $ouiControlBarInitialHeight 0 $ouiControlBarBackground, inset 0 600rem 0 $ouiPageBackgroundColor;
@@ -73,6 +74,7 @@
 
 .ouiControlBar__content {
   @include ouiScrollBar;
+
   overflow-y: auto;
   width: 100%;
   height: calc(100% - #{$ouiControlBarInitialHeight});
@@ -139,6 +141,7 @@
 .ouiControlBar__text {
   @include ouiTextTruncate;
   @include ouiFontSizeS;
+
   padding: 0 $ouiSizeS;
   color: $ouiControlBarText;
 
@@ -150,6 +153,7 @@
 .ouiControlBar__tab {
   @include ouiTextTruncate;
   @include ouiFontSizeS;
+
   color: $ouiControlBarText;
   padding: 0 $ouiSize;
   text-align: center;
diff --git a/src/components/control_bar/_variables.scss b/src/components/control_bar/_variables.scss
index c3a9310445..8d5c16c78b 100644
--- a/src/components/control_bar/_variables.scss
+++ b/src/components/control_bar/_variables.scss
@@ -31,4 +31,5 @@ $euiControlBarBorderColor: $ouiControlBarBorderColor;
 $euiControlBarInitialHeight: $ouiControlBarInitialHeight;
 $euiControlBarMaxHeight: $ouiControlBarMaxHeight;
 $euiControlBarHeights: $ouiControlBarHeights;
+
 /* End of Aliases */
diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss
index ce83c3b9e0..3fd48f8454 100644
--- a/src/components/datagrid/_data_grid.scss
+++ b/src/components/datagrid/_data_grid.scss
@@ -20,10 +20,7 @@
 .ouiDataGrid--fullScreen {
   height: 100%;
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: $ouiZModal;
   background: $ouiColorEmptyShade;
 
@@ -91,7 +88,6 @@
 }
 
 .ouiDataGrid__pagination {
-
   padding-top: $ouiSizeXS;
   flex-grow: 0;
 }
@@ -117,6 +113,7 @@
 
 .ouiDataGrid__controlScroll {
   @include ouiYScrollWithShadows;
+
   max-height: $ouiDataGridPopoverMaxHeight;
   padding: $ouiSizeS;
   margin: -$ouiSizeS; // Offset against the panel to make the scrollbar flush scrollbars
@@ -128,5 +125,6 @@
 
 .ouiDataGrid__virtualized {
   @include ouiScrollBar($ouiColorDarkShade, $ouiColorEmptyShade);
+
   scroll-padding: 0;
 }
diff --git a/src/components/datagrid/_data_grid_column_resizer.scss b/src/components/datagrid/_data_grid_column_resizer.scss
index 2b3d13c7f4..65375b180c 100644
--- a/src/components/datagrid/_data_grid_column_resizer.scss
+++ b/src/components/datagrid/_data_grid_column_resizer.scss
@@ -21,7 +21,7 @@
   z-index: 2; // Needs to be a level above the cells themselves in case of overlaps
 
   // Center a vertical line within the button above
-  &:after {
+  &::after {
     content: '';
     position: absolute;
     left: $ouiSizeS - 1px;
@@ -46,12 +46,11 @@
 // we don't use negative positioning and the borders from the cell will match the container.
 @include ouiDataGridHeaderCell {
   &:last-child {
-
     .ouiDataGridColumnResizer {
       right: 0;
       width: $ouiSize / 2;
 
-      &:after {
+      &::after {
         left: auto;
         right: 0;
       }
diff --git a/src/components/datagrid/_data_grid_column_selector.scss b/src/components/datagrid/_data_grid_column_selector.scss
index a67bd76231..b882218eef 100644
--- a/src/components/datagrid/_data_grid_column_selector.scss
+++ b/src/components/datagrid/_data_grid_column_selector.scss
@@ -14,6 +14,7 @@
 
   &-isDragging {
     @include ouiBottomShadow;
+
     background: $ouiColorEmptyShade;
   }
 }
@@ -21,6 +22,7 @@
 // Because we only want this to scroll vertically, we need to offset inner ouiFlexGroup negative padding by adding padding
 .ouiDataGridColumnSelector__columnList {
   @include ouiYScrollWithShadows;
+
   max-height: 400px;
   margin: 0 (-$ouiSizeS);
 }
@@ -31,10 +33,10 @@
 
 .ouiDataGridColumnSelectorPopover {
   // Hack because the fixed positions of drag and drop don't work inside of transformed elements
-  // sass-lint:disable-block no-important
   transform: none !important;
   transition: none !important;
   margin-top: -$ouiSizeS;
+
   // IE11 needs a min-width
   min-width: $ouiSize * 12;
 }
diff --git a/src/components/datagrid/_data_grid_column_sorting.scss b/src/components/datagrid/_data_grid_column_sorting.scss
index 3593c8c1a6..7293c39d1c 100644
--- a/src/components/datagrid/_data_grid_column_sorting.scss
+++ b/src/components/datagrid/_data_grid_column_sorting.scss
@@ -10,25 +10,26 @@
  */
 
 .ouiDataGridColumnSorting__item {
-
   &-isDragging {
     @include ouiBottomShadow;
+
     background: $ouiColorEmptyShade;
   }
 }
 
 .ouiDataGridColumnSortingPopover {
   // Hack because the fixed positions of drag and drop don't work inside of transformed elements
-  // sass-lint:disable-block no-important
   transform: none !important;
   transition: none !important;
   margin-top: -$ouiSizeS;
+
   // IE11 needs a min-width
   min-width: $ouiSize * 12;
 }
 
 .ouiDataGridColumnSorting__fieldList {
   @include ouiYScrollWithShadows;
+
   padding-top: $ouiSizeXS;
   padding-bottom: $ouiSizeXS;
   max-height: 300px;
@@ -36,6 +37,7 @@
 
 .ouiDataGridColumnSorting__field {
   @include ouiInteractiveStates;
+
   display: block;
   padding: $ouiSizeXS $ouiSizeS;
   width: 100%;
@@ -46,17 +48,18 @@
   @include ouiBreakpoint('xs', 's') {
     padding-left: $ouiSizeXS;
   }
+
   padding-left: $ouiSizeL;
 
   .ouiDataGridColumnSorting__order {
     @include ouiBreakpoint('xs', 's') {
       min-width: unset;
     }
+
     min-width: 200px;
     border: none;
 
     // Hack to overwrite some nested, unreachable component code with button groups
-    // sass-lint:disable-block no-important
     button {
       font-size: $ouiFontSizeXS !important;
     }
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 480477c43c..e7b8a23404 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -41,6 +41,7 @@
 
   &:focus {
     @include ouiDataGridCellFocus;
+
     margin-top: -1px;
   }
 
@@ -80,6 +81,7 @@
   }
 
   // on focus, directly show action buttons (without animation), but still slide in the open popover button
+  /* stylelint-disable-next-line no-duplicate-selectors */
   &:focus {
     .ouiDataGridRowCell__actionButtonIcon {
       margin-left: $ouiDataGridCellPaddingM;
@@ -88,7 +90,7 @@
   }
 
   // if a cell is not hovered nor focused nor open via popover, don't show buttons in general
-  &:not(:hover):not(:focus):not(.ouiDataGridRowCell--open) {
+  &:not(:hover, :focus, .ouiDataGridRowCell--open) {
     .ouiDataGridRowCell__expandButtonIcon,
     .ouiDataGridRowCell__actionButtonIcon {
       display: none;
@@ -127,6 +129,7 @@
     &.ouiDataGridRowCell__truncate,
     .ouiDataGridRowCell__expandContent {
       @include ouiTextTruncate;
+
       overflow: hidden;
       white-space: nowrap;
     }
@@ -135,8 +138,8 @@
 
 .ouiDataGridRowCell__popover {
   @include ouiScrollBar;
+
   overflow: auto;
-  // sass-lint:disable-block no-important
   max-width: 400px !important;
   max-height: 400px !important;
 }
@@ -176,7 +179,7 @@
   width: 0;
   overflow: hidden;
   transition: none; // Have to take out the generic transition so it is instaneous on focus
-  box-shadow: none !important; // sass-lint:disable-line no-important
+  box-shadow: none !important;
 
   /* ToDo: Remove unnecessary logic: the old beta theme has
    * evolved and the statement below about the `Next` theme
@@ -204,7 +207,6 @@
 @include ouiDataGridStyles(rowHoverHighlight) {
   .ouiDataGridRow:hover {
     @include ouiDataGridRowCell {
-      // sass-lint:disable-block no-important
       // Needed to overtake striping
       background-color: $ouiColorHighlight !important;
     }
@@ -223,7 +225,6 @@
 // Border alternates
 @include ouiDataGridStyles(bordersNone) {
   @include ouiDataGridRowCell {
-    // sass-lint:disable-block no-important
     border-color: transparent !important;
   }
 }
diff --git a/src/components/datagrid/_data_grid_footer_row.scss b/src/components/datagrid/_data_grid_footer_row.scss
index a731c300ee..b14be296bd 100644
--- a/src/components/datagrid/_data_grid_footer_row.scss
+++ b/src/components/datagrid/_data_grid_footer_row.scss
@@ -23,7 +23,6 @@
 @include ouiDataGridStyles(footerOverline) {
   @include ouiDataGridFooterCell {
     border-top: $ouiBorderThick;
-    // sass-lint:disable-block no-important
     border-top-color: $ouiTextColor !important;
     background: $ouiColorEmptyShade !important;
   }
diff --git a/src/components/datagrid/_data_grid_header_row.scss b/src/components/datagrid/_data_grid_header_row.scss
index d88ffc2772..c444eff5db 100644
--- a/src/components/datagrid/_data_grid_header_row.scss
+++ b/src/components/datagrid/_data_grid_header_row.scss
@@ -42,6 +42,7 @@
 
   &:focus {
     @include ouiDataGridCellFocus;
+
     border-top: none;
   }
 
@@ -49,6 +50,7 @@
   &:not(.ouiDataGridHeaderCell--controlColumn) {
     &:focus-within {
       @include ouiDataGridCellFocus;
+
       border-top: none;
     }
 
@@ -76,6 +78,7 @@
 
     .ouiDataGridHeaderCell__content {
       @include ouiTextTruncate;
+
       overflow: hidden;
       white-space: nowrap;
       text-align: left;
@@ -93,7 +96,6 @@
 }
 
 .ouiDataGridHeader__action--selected {
-  // sass-lint:disable-block no-important
   font-weight: $ouiFontWeightBold !important;
 }
 
diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss
index 2c84dcd4d1..ec16d16c71 100644
--- a/src/components/datagrid/_mixins.scss
+++ b/src/components/datagrid/_mixins.scss
@@ -37,11 +37,13 @@ $ouiDataGridStyles: (
 // will produce `.ouiDataGrid--headerShade.ouiDataGrid--fontSizeLarge
 @function ouiDataGridSelector($selectorKeys...) {
   $selectorList: '';
+
   @each $selector in $selectorKeys {
     // Spit out warnings when you make typos!
-    @if (index($ouiDataGridStyles, $selector != true)) {
+    @if  index($ouiDataGridStyles, $selector != true) {
       @error '#{$selector} is not an allowed value in the ouiDataGridStyles() mixin';
     }
+
     $selctorValue: #{$ouiDataGridPrefix}#{$selector};
     $selectorList: str-insert($selectorList, $selctorValue, 1000);
   }
@@ -85,26 +87,33 @@ $ouiDataGridStyles: (
 /* OUI -> EUI Aliases */
 $euiDataGridPrefix: $ouiDataGridPrefix;
 $euiDataGridStyles: $ouiDataGridStyles;
+
 @function euiDataGridSelector($selectorKeys...) { @return ouiDataGridSelector($selectorKeys...); }
+
 @mixin euiDataGridStyles($selectorKeys...) {
   @include ouiDataGridStyles($selectorKeys...) {
     @content;
   }
 }
+
 @mixin euiDataGridHeaderCell {
   .euiDataGridHeaderCell {
     @content;
   }
 }
+
 @mixin euiDataGridCellFocus { @include ouiDataGridCellFocus; }
+
 @mixin euiDataGridRowCell {
   .euiDataGridRowCell {
     @content;
   }
 }
+
 @mixin euiDataGridFooterCell {
   .euiDataGridRowCell.euiDataGridFooterCell {
     @content;
   }
 }
+
 /* End of Aliases */
diff --git a/src/components/datagrid/_variables.scss b/src/components/datagrid/_variables.scss
index 467fcb3e61..62076f0e7e 100644
--- a/src/components/datagrid/_variables.scss
+++ b/src/components/datagrid/_variables.scss
@@ -11,7 +11,6 @@
 
 $ouiDataGridColumnResizerWidth: 3px; // Odd number because it straddles a border
 $ouiDataGridPopoverMaxHeight: $ouiSize * 25;
-
 $ouiDataGridCellPaddingS: $ouiSizeXS;
 $ouiDataGridCellPaddingM: $ouiSizeM / 2;
 $ouiDataGridCellPaddingL: $ouiSizeS;
@@ -25,4 +24,5 @@ $euiDataGridCellPaddingS: $ouiDataGridCellPaddingS;
 $euiDataGridCellPaddingM: $ouiDataGridCellPaddingM;
 $euiDataGridCellPaddingL: $ouiDataGridCellPaddingL;
 $euiDataGridVerticalBorder: $ouiDataGridVerticalBorder;
+
 /* End of Aliases */
diff --git a/src/components/date_picker/_date_picker.scss b/src/components/date_picker/_date_picker.scss
index ea84f72e76..e03e376787 100644
--- a/src/components/date_picker/_date_picker.scss
+++ b/src/components/date_picker/_date_picker.scss
@@ -28,10 +28,11 @@
 // There is one for light and dark.
 @mixin datePicker__arrow {
   background-position: center;
-  @if (lightness($ouiColorEmptyShade) > 50) {
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImFycm93X2Rvd24tYSIgZD0iTTEzLjA2ODg1MDgsNS4xNTcyNTAzOCBMOC4zODQyMzk3NSw5Ljc2ODI3NDI4IEM4LjE3MDU0NDE1LDkuOTc4NjEzMDggNy44Mjk5OTIxNCw5Ljk3OTE0MDk1IDcuNjE1NzYwMjUsOS43NjgyNzQyOCBMMi45MzExNDkxNSw1LjE1NzI1MDM4IEMyLjcxODEzNTksNC45NDc1ODMyMSAyLjM3Mjc3MzE5LDQuOTQ3NTgzMjEgMi4xNTk3NTk5NCw1LjE1NzI1MDM4IEMxLjk0Njc0NjY5LDUuMzY2OTE3NTYgMS45NDY3NDY2OSw1LjcwNjg1NTIyIDIuMTU5NzU5OTQsNS45MTY1MjI0IEw2Ljg0NDM3MTA0LDEwLjUyNzU0NjMgQzcuNDg1MTc0MjQsMTEuMTU4MjgzNiA4LjUxNjQ0OTc5LDExLjE1NjY4NTEgOS4xNTU2Mjg5NiwxMC41Mjc1NDYzIEwxMy44NDAyNDAxLDUuOTE2NTIyNCBDMTQuMDUzMjUzMyw1LjcwNjg1NTIyIDE0LjA1MzI1MzMsNS4zNjY5MTc1NiAxMy44NDAyNDAxLDUuMTU3MjUwMzggQzEzLjYyNzIyNjgsNC45NDc1ODMyMSAxMy4yODE4NjQxLDQuOTQ3NTgzMjEgMTMuMDY4ODUwOCw1LjE1NzI1MDM4IFoiLz4gIDwvZGVmcz4gIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDx1c2UgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYXJyb3dfZG93bi1hIi8+ICA8L2c+PC9zdmc+);
+
+  @if  lightness($ouiColorEmptyShade) > 50 {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImFycm93X2Rvd24tYSIgZD0iTTEzLjA2ODg1MDgsNS4xNTcyNTAzOCBMOC4zODQyMzk3NSw5Ljc2ODI3NDI4IEM4LjE3MDU0NDE1LDkuOTc4NjEzMDggNy44Mjk5OTIxNCw5Ljk3OTE0MDk1IDcuNjE1NzYwMjUsOS43NjgyNzQyOCBMMi45MzExNDkxNSw1LjE1NzI1MDM4IEMyLjcxODEzNTksNC45NDc1ODMyMSAyLjM3Mjc3MzE5LDQuOTQ3NTgzMjEgMi4xNTk3NTk5NCw1LjE1NzI1MDM4IEMxLjk0Njc0NjY5LDUuMzY2OTE3NTYgMS45NDY3NDY2OSw1LjcwNjg1NTIyIDIuMTU5NzU5OTQsNS45MTY1MjI0IEw2Ljg0NDM3MTA0LDEwLjUyNzU0NjMgQzcuNDg1MTc0MjQsMTEuMTU4MjgzNiA4LjUxNjQ0OTc5LDExLjE1NjY4NTEgOS4xNTU2Mjg5NiwxMC41Mjc1NDYzIEwxMy44NDAyNDAxLDUuOTE2NTIyNCBDMTQuMDUzMjUzMyw1LjcwNjg1NTIyIDE0LjA1MzI1MzMsNS4zNjY5MTc1NiAxMy44NDAyNDAxLDUuMTU3MjUwMzggQzEzLjYyNzIyNjgsNC45NDc1ODMyMSAxMy4yODE4NjQxLDQuOTQ3NTgzMjEgMTMuMDY4ODUwOCw1LjE1NzI1MDM4IFoiLz4gIDwvZGVmcz4gIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDx1c2UgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYXJyb3dfZG93bi1hIi8+ICA8L2c+PC9zdmc+");
   } @else {
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImRvd25hcnJvd3doaXRlLWEiIGQ9Ik0xMy4wNjg4NTA4LDUuMTU3MjUwMzggTDguMzg0MjM5NzUsOS43NjgyNzQyOCBDOC4xNzA1NDQxNSw5Ljk3ODYxMzA4IDcuODI5OTkyMTQsOS45NzkxNDA5NSA3LjYxNTc2MDI1LDkuNzY4Mjc0MjggTDIuOTMxMTQ5MTUsNS4xNTcyNTAzOCBDMi43MTgxMzU5LDQuOTQ3NTgzMjEgMi4zNzI3NzMxOSw0Ljk0NzU4MzIxIDIuMTU5NzU5OTQsNS4xNTcyNTAzOCBDMS45NDY3NDY2OSw1LjM2NjkxNzU2IDEuOTQ2NzQ2NjksNS43MDY4NTUyMiAyLjE1OTc1OTk0LDUuOTE2NTIyNCBMNi44NDQzNzEwNCwxMC41Mjc1NDYzIEM3LjQ4NTE3NDI0LDExLjE1ODI4MzYgOC41MTY0NDk3OSwxMS4xNTY2ODUxIDkuMTU1NjI4OTYsMTAuNTI3NTQ2MyBMMTMuODQwMjQwMSw1LjkxNjUyMjQgQzE0LjA1MzI1MzMsNS43MDY4NTUyMiAxNC4wNTMyNTMzLDUuMzY2OTE3NTYgMTMuODQwMjQwMSw1LjE1NzI1MDM4IEMxMy42MjcyMjY4LDQuOTQ3NTgzMjEgMTMuMjgxODY0MSw0Ljk0NzU4MzIxIDEzLjA2ODg1MDgsNS4xNTcyNTAzOCBaIi8+ICA8L2RlZnM+ICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8dXNlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2Rvd25hcnJvd3doaXRlLWEiLz4gIDwvZz48L3N2Zz4=);
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImRvd25hcnJvd3doaXRlLWEiIGQ9Ik0xMy4wNjg4NTA4LDUuMTU3MjUwMzggTDguMzg0MjM5NzUsOS43NjgyNzQyOCBDOC4xNzA1NDQxNSw5Ljk3ODYxMzA4IDcuODI5OTkyMTQsOS45NzkxNDA5NSA3LjYxNTc2MDI1LDkuNzY4Mjc0MjggTDIuOTMxMTQ5MTUsNS4xNTcyNTAzOCBDMi43MTgxMzU5LDQuOTQ3NTgzMjEgMi4zNzI3NzMxOSw0Ljk0NzU4MzIxIDIuMTU5NzU5OTQsNS4xNTcyNTAzOCBDMS45NDY3NDY2OSw1LjM2NjkxNzU2IDEuOTQ2NzQ2NjksNS43MDY4NTUyMiAyLjE1OTc1OTk0LDUuOTE2NTIyNCBMNi44NDQzNzEwNCwxMC41Mjc1NDYzIEM3LjQ4NTE3NDI0LDExLjE1ODI4MzYgOC41MTY0NDk3OSwxMS4xNTY2ODUxIDkuMTU1NjI4OTYsMTAuNTI3NTQ2MyBMMTMuODQwMjQwMSw1LjkxNjUyMjQgQzE0LjA1MzI1MzMsNS43MDY4NTUyMiAxNC4wNTMyNTMzLDUuMzY2OTE3NTYgMTMuODQwMjQwMSw1LjE1NzI1MDM4IEMxMy42MjcyMjY4LDQuOTQ3NTgzMjEgMTMuMjgxODY0MSw0Ljk0NzU4MzIxIDEzLjA2ODg1MDgsNS4xNTcyNTAzOCBaIi8+ICA8L2RlZnM+ICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8dXNlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2Rvd25hcnJvd3doaXRlLWEiLz4gIDwvZz48L3N2Zz4=");
   }
 }
 
@@ -71,6 +72,7 @@
 
 .react-datepicker {
   @include ouiFont;
+
   font-size: $ouiFontSizeXS;
   color: $ouiColorFullShade;
   display: flex;
@@ -80,11 +82,8 @@
 
 // When in time only mode we make the dropdown look more like the combo box styling.
 .react-datepicker--time-only {
-
   .react-datepicker__time-container {
-
     .react-datepicker__time {
-
       .react-datepicker__time-box {
         width: 100%;
 
@@ -108,6 +107,7 @@
   }
 
 
+  /* stylelint-disable-next-line no-duplicate-selectors */
   .react-datepicker__time-container {
     border-left: 0;
   }
@@ -123,12 +123,12 @@
 // .react-datepicker__triangle {
 // }
 
+/* stylelint-disable-next-line no-duplicate-selectors */
 .ouiDatePicker.ouiDatePicker--shadow .react-datepicker-popper {
   z-index: $ouiZContentMenu;
   animation: ouiAnimFadeIn $ouiAnimSpeedFast ease-in;
 
   &[data-placement^="bottom"] {
-
     // .react-datepicker__triangle {
     // }
   }
@@ -195,6 +195,7 @@
 .react-datepicker__navigation {
   cursor: pointer;
   position: absolute;
+
   // Pixel pushing because these are icons against text
   top: $ouiSize + ($ouiSizeXS / 2);
   width: 0;
@@ -205,6 +206,7 @@
 
   &--previous {
     @include datePicker__arrow;
+
     left: $ouiSize + $ouiSizeXS;
     height: $ouiSize;
     width: $ouiSize;
@@ -235,6 +237,7 @@
 
   &--next {
     @include datePicker__arrow;
+
     // Pixel value because of some padding on the icon
     right: 20px;
     height: $ouiSize;
@@ -331,6 +334,7 @@
 
       ul.react-datepicker__time-list {
         @include ouiScrollBar;
+
         height: 204px !important;
         display: flex;
         flex-direction: column;
@@ -344,6 +348,7 @@
           text-align: right;
           color: $ouiColorDarkShade;
           white-space: nowrap;
+
           // IE needs this to fix collapsing flex
           line-height: $ouiSizeM;
 
@@ -352,14 +357,17 @@
             cursor: pointer;
             text-decoration: underline;
           }
+
           &--selected {
             background-color: $ouiColorPrimary;
             color: white;
             border-radius: $ouiBorderRadius / 2;
+
             &:hover {
               background-color: $ouiColorPrimary;
             }
           }
+
           &--disabled {
             color: $ouiColorLightShade;
 
@@ -382,8 +390,10 @@
   line-height: $ouiSizeXL - $ouiSizeXS;
   text-align: center;
   margin: 0 $ouiSizeXS;
+
   &.react-datepicker__week-number--clickable {
     cursor: pointer;
+
     &:hover {
       border-radius: $ouiBorderRadius;
       background-color: $ouiColorEmptyShade;
@@ -427,6 +437,7 @@
     font-weight: bold;
     color: $ouiColorPrimary;
   }
+
   &--outside-month {
     color: $ouiColorDarkShade;
   }
@@ -539,10 +550,7 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
+  inset: 0;
   z-index: 1;
   text-align: center;
   border-radius: $ouiBorderRadius;
@@ -566,8 +574,7 @@
 
 // Strike that, reverse it Willy Wonka style
 .react-datepicker__year-dropdown {
-  flex-wrap: wrap-reverse;
-  flex-direction: row-reverse;
+  flex-flow: row-reverse wrap-reverse;
   justify-content: flex-end;
 }
 
@@ -592,9 +599,6 @@
   }
 
   &:last-of-type {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     border-bottom-left-radius: $ouiBorderRadius;
     border-bottom-right-radius: $ouiBorderRadius;
@@ -659,6 +663,7 @@
     border-bottom-color: $ouiFocusBackgroundColor;
   }
 }
+
 .react-datepicker__navigation:focus {
   background-color: $ouiFocusBackgroundColor;
 }
@@ -677,7 +682,7 @@
 .react-datepicker__focusTrap {
   display: flex;
 }
-
+/* stylelint-disable scss/comment-no-empty */
 // The below is for the portal version of react-datepicker which we do not use.
 // It is shown here just to know what their baseline includes.
 
@@ -788,3 +793,5 @@
 //     }
 //   }
 // }
+/* stylelint-enable scss/comment-no-empty */
+
diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss
index 5ba820eb6c..9c9e20f474 100644
--- a/src/components/date_picker/_date_picker_range.scss
+++ b/src/components/date_picker/_date_picker_range.scss
@@ -15,8 +15,10 @@
 
 .ouiDatePickerRange {
   @include ouiFormControlSize(auto, $includeAlternates: true);
+
   // Match just the regular drop shadow of inputs
-  @include ouiFormControlDefaultShadow();
+  @include ouiFormControlDefaultShadow;
+
   display: flex;
   align-items: center;
   padding: 1px; /* 1 */
diff --git a/src/components/date_picker/_variables.scss b/src/components/date_picker/_variables.scss
index 63f045f813..c2ad92f97d 100644
--- a/src/components/date_picker/_variables.scss
+++ b/src/components/date_picker/_variables.scss
@@ -14,4 +14,5 @@ $ouiDatePickerCalendarWidth: 284px;
 
 /* OUI -> EUI Aliases */
 $euiDatePickerCalendarWidth: $ouiDatePickerCalendarWidth;
+
 /* End of Aliases */
diff --git a/src/components/date_picker/super_date_picker/_index.scss b/src/components/date_picker/super_date_picker/_index.scss
index bc81816a33..79ebdebb94 100644
--- a/src/components/date_picker/super_date_picker/_index.scss
+++ b/src/components/date_picker/super_date_picker/_index.scss
@@ -11,7 +11,6 @@
 
 @import 'variables';
 @import 'mixins';
-
 @import 'date_popover/index';
 @import 'quick_select_popover/index';
 @import 'super_date_picker';
diff --git a/src/components/date_picker/super_date_picker/_mixins.scss b/src/components/date_picker/super_date_picker/_mixins.scss
index 9db02e9a4e..e41121ba4c 100644
--- a/src/components/date_picker/super_date_picker/_mixins.scss
+++ b/src/components/date_picker/super_date_picker/_mixins.scss
@@ -11,6 +11,7 @@
 
 @mixin ouiSuperDatePickerText {
   @include ouiFormControlText;
+
   display: block;
   width: 100%;
   padding: 0 $ouiSizeS;
@@ -23,4 +24,5 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiSuperDatePickerText { @include ouiSuperDatePickerText; }
+
 /* End of Aliases */
diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss
index a316556712..881dc33027 100644
--- a/src/components/date_picker/super_date_picker/_super_date_picker.scss
+++ b/src/components/date_picker/super_date_picker/_super_date_picker.scss
@@ -24,7 +24,6 @@
 }
 
 .ouiSuperDatePicker {
-  // sass-lint:disable-block no-important
   // Allow it to always grow to fit the container since the default form max width is too small
   max-width: 100% !important;
 
@@ -48,6 +47,7 @@
 
 .ouiSuperDatePicker__prettyFormat {
   @include ouiSuperDatePickerText;
+
   display: flex;
   justify-content: space-between;
   text-align: left;
diff --git a/src/components/date_picker/super_date_picker/_variables.scss b/src/components/date_picker/super_date_picker/_variables.scss
index 900eca2dfd..f393a15551 100644
--- a/src/components/date_picker/super_date_picker/_variables.scss
+++ b/src/components/date_picker/super_date_picker/_variables.scss
@@ -16,4 +16,5 @@ $ouiSuperDatePickerButtonWidth: $ouiButtonMinWidth + ($ouiSizeXS * 1.5);
 /* OUI -> EUI Aliases */
 $euiSuperDatePickerWidth: $ouiSuperDatePickerWidth;
 $euiSuperDatePickerButtonWidth: $ouiSuperDatePickerButtonWidth;
+
 /* End of Aliases */
diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
index 2930349584..f666d290ec 100644
--- a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
+++ b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
@@ -11,6 +11,7 @@
 
 .ouiDatePopoverButton {
   @include ouiSuperDatePickerText;
+
   background-size: 100%; // For the bottom "border" via background-image
 
   &:focus,
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
index c9e53c67c1..6a3961220c 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
@@ -16,13 +16,13 @@
 
 .ouiQuickSelectPopover__section {
   @include ouiScrollBar;
+
   max-height: $ouiSizeM * 11;
   overflow: hidden;
   overflow-y: auto;
   padding: $ouiSizeS 0 $ouiSizeXS; // Offset negative margin from flex items
 }
 
-// sass-lint:disable no-important
 .ouiQuickSelectPopover__buttonText {
   // Override specificity from universal and sibling selectors
   margin-right: $ouiSizeXS !important;
diff --git a/src/components/description_list/_description_list.scss b/src/components/description_list/_description_list.scss
index 947b76e5f7..949b1a9a59 100644
--- a/src/components/description_list/_description_list.scss
+++ b/src/components/description_list/_description_list.scss
@@ -10,12 +10,10 @@
  */
 
 .ouiDescriptionList {
-  // sass-lint:disable-block nesting-depth
-
   &.ouiDescriptionList--row {
-
     .ouiDescriptionList__title {
       @include ouiTitle('xs');
+
       line-height: $ouiLineHeight;
       margin-top: $ouiSize;
 
@@ -48,9 +46,9 @@
 
     // Compressed gets smaller fonts.
     &.ouiDescriptionList--compressed {
-
       .ouiDescriptionList__title {
         @include ouiTitle('xxs');
+
         line-height: $ouiLineHeight;
       }
 
@@ -66,6 +64,7 @@
 
         .ouiDescriptionList__description {
           @include ouiTitle('xxs');
+
           line-height: $ouiLineHeight;
         }
       }
@@ -91,6 +90,7 @@
 
     .ouiDescriptionList__title {
       @include ouiTitle('xs');
+
       line-height: $ouiLineHeight;
       width: 50%; // Flex-basis doesn't work in IE with padding
       padding-right: $ouiSizeS;
@@ -98,6 +98,7 @@
 
     .ouiDescriptionList__description {
       @include ouiFontSize;
+
       width: 50%; // Flex-basis doesn't work in IE with padding
       padding-left: $ouiSizeS;
     }
@@ -117,6 +118,7 @@
 
       .ouiDescriptionList__description {
         @include ouiTitle('xs');
+
         line-height: $ouiLineHeight;
       }
     }
@@ -124,6 +126,7 @@
     &.ouiDescriptionList--compressed {
       .ouiDescriptionList__title {
         @include ouiTitle('xxs');
+
         line-height: $ouiLineHeight;
       }
 
@@ -139,6 +142,7 @@
 
         .ouiDescriptionList__description {
           @include ouiTitle('xxs');
+
           line-height: $ouiLineHeight;
         }
       }
@@ -157,6 +161,7 @@
 
       .ouiDescriptionList__description {
         @include ouiFontSizeS;
+
         margin-top: 0;
       }
 
@@ -180,9 +185,9 @@
   }
 
   &.ouiDescriptionList--inline {
-
     .ouiDescriptionList__title {
       @include ouiFontSizeS;
+
       display: inline;
       border-radius: $ouiBorderRadius;
       font-weight: $ouiFontWeightRegular;
@@ -199,13 +204,13 @@
 
     .ouiDescriptionList__description {
       @include ouiFontSizeS;
+
       display: inline;
       word-break: break-all;
     }
 
     // Compressed when inline is even smaller.
     &.ouiDescriptionList--compressed {
-
       .ouiDescriptionList__title {
         @include ouiFontSizeXS;
       }
diff --git a/src/components/drag_and_drop/_draggable.scss b/src/components/drag_and_drop/_draggable.scss
index eb02f8463e..68aed02c99 100644
--- a/src/components/drag_and_drop/_draggable.scss
+++ b/src/components/drag_and_drop/_draggable.scss
@@ -9,22 +9,20 @@
  * GitHub history for details.
  */
 
-// sass-lint:disable no-empty-rulesets
-
 .ouiDraggable {
   &.ouiDraggable--isDragging {
     // Overriding inline styles on JS-inserted HTML elements
-    z-index: $ouiZLevel9 !important; // sass-lint:disable-line no-important
+    z-index: $ouiZLevel9 !important;
   }
 
   &.ouiDraggable--hasClone:not(.ouiDraggable--isDragging) {
     // Overriding inline styles on JS-inserted HTML elements
-    transform: none !important; // sass-lint:disable-line no-important
+    transform: none !important;
   }
 
   &.ouiDraggable--withoutDropAnimation {
     // Overriding inline styles on JS-inserted HTML elements
-    transition-duration: .001s !important; // sass-lint:disable-line no-important
+    transition-duration: .001s !important;
   }
 
   &:focus > .ouiDraggable__item,
diff --git a/src/components/drag_and_drop/_droppable.scss b/src/components/drag_and_drop/_droppable.scss
index 6ea5ecba71..683671f88d 100644
--- a/src/components/drag_and_drop/_droppable.scss
+++ b/src/components/drag_and_drop/_droppable.scss
@@ -11,6 +11,7 @@
 
 .ouiDroppable {
   $ouiDroppableColor: $ouiColorSecondary;
+
   transition: background-color $ouiAnimSpeedExtraSlow ease;
 
   &.ouiDroppable--isDraggingType:not(.ouiDroppable--isDisabled) {
@@ -24,7 +25,7 @@
   .ouiDroppable__placeholder {
     &.ouiDroppable__placeholder--isHidden {
       // Overriding inline styles on JS-inserted HTML elements
-      display: none !important; // sass-lint:disable-line no-important
+      display: none !important;
     }
   }
 }
@@ -33,6 +34,7 @@
 
 .ouiDroppable--withPanel {
   @include ouiBottomShadowMedium;
+
   border-radius: $ouiBorderRadius;
 }
 
diff --git a/src/components/drag_and_drop/_variables.scss b/src/components/drag_and_drop/_variables.scss
index f7e56f2fdf..cefb104d7c 100644
--- a/src/components/drag_and_drop/_variables.scss
+++ b/src/components/drag_and_drop/_variables.scss
@@ -18,4 +18,5 @@ $ouiDragAndDropSpacing: (
 
 /* OUI -> EUI Aliases */
 $euiDragAndDropSpacing: $ouiDragAndDropSpacing;
+
 /* End of Aliases */
diff --git a/src/components/empty_prompt/_empty_prompt.scss b/src/components/empty_prompt/_empty_prompt.scss
index 33a46ff348..386dafd15c 100644
--- a/src/components/empty_prompt/_empty_prompt.scss
+++ b/src/components/empty_prompt/_empty_prompt.scss
@@ -9,6 +9,7 @@
  * GitHub history for details.
  */
 
+/* stylelint-disable-next-line scss/at-import-no-partial-leading-underscore */
 @import '../text/_variables';
 
 .ouiEmptyPrompt {
diff --git a/src/components/expression/_expression.scss b/src/components/expression/_expression.scss
index 886062fa17..48052dc18f 100644
--- a/src/components/expression/_expression.scss
+++ b/src/components/expression/_expression.scss
@@ -35,6 +35,7 @@
 
   &.ouiExpression--columns {
     border-color: transparent;
+
     // Ensures there's no flash of the dashed style before turning solid for the active state
     border-bottom-style: solid;
     margin-bottom: $ouiSizeXS;
@@ -46,6 +47,7 @@
     .ouiExpression__description,
     .ouiExpression__value {
       @include ouiTextTruncate;
+
       display: inline-block;
       vertical-align: bottom;
     }
@@ -84,7 +86,6 @@
   &.ouiExpression-isClickable {
     background-color: $ouiColorLightestShade;
 
-    // sass-lint:disable-block nesting-depth
     &:focus,
     &:hover:not(:disabled) {
       .ouiExpression__description,
@@ -118,6 +119,7 @@
 
     &.ouiExpression-isActive {
       border-bottom-color: $color;
+      /* stylelint-disable-next-line declaration-block-no-shorthand-property-overrides */
       border-color: $color;
     }
 
diff --git a/src/components/expression/_variables.scss b/src/components/expression/_variables.scss
index a3ce7c3c80..e8f8882fde 100644
--- a/src/components/expression/_variables.scss
+++ b/src/components/expression/_variables.scss
@@ -23,4 +23,5 @@ $ouiExpressionColors: (
 
 /* OUI -> EUI Aliases */
 $euiExpressionColors: $ouiExpressionColors;
+
 /* End of Aliases */
diff --git a/src/components/facet/_facet_button.scss b/src/components/facet/_facet_button.scss
index e458d81760..b098ef1373 100644
--- a/src/components/facet/_facet_button.scss
+++ b/src/components/facet/_facet_button.scss
@@ -31,6 +31,7 @@
 
   &:focus {
     background-color: $ouiFocusBackgroundColor;
+
     // use box-shadow as a "faux outline" to apply left/right padding only
     box-shadow: -$ouiSizeXS 0 $ouiFocusBackgroundColor, $ouiSizeXS 0 $ouiFocusBackgroundColor;
   }
@@ -67,6 +68,7 @@
 .ouiFacetButton__text {
   @include ouiTextShift;
   @include ouiTextTruncate;
+
   flex-grow: 1;
   vertical-align: middle;
 
diff --git a/src/components/facet/_facet_group.scss b/src/components/facet/_facet_group.scss
index b4c9e6a58a..348f0a362e 100644
--- a/src/components/facet/_facet_group.scss
+++ b/src/components/facet/_facet_group.scss
@@ -27,6 +27,7 @@
 
       .ouiFacetButton {
         margin-left: $gutterAdjustment;
+
         // Adjust the max-width so it fits within the allotted margin
         max-width: calc(100% - #{$gutterAdjustment});
       }
diff --git a/src/components/facet/_index.scss b/src/components/facet/_index.scss
index debb3de152..dd1c8bed24 100644
--- a/src/components/facet/_index.scss
+++ b/src/components/facet/_index.scss
@@ -10,6 +10,5 @@
  */
 
 @import 'variables';
-
 @import 'facet_button';
 @import 'facet_group';
diff --git a/src/components/facet/_variables.scss b/src/components/facet/_variables.scss
index aac8952c79..bf86eedfa8 100644
--- a/src/components/facet/_variables.scss
+++ b/src/components/facet/_variables.scss
@@ -19,4 +19,5 @@ $ouiFacetGutterSizes: (
 
 /* OUI -> EUI Aliases */
 $euiFacetGutterSizes: $ouiFacetGutterSizes;
+
 /* End of Aliases */
diff --git a/src/components/filter_group/_filter_button.scss b/src/components/filter_group/_filter_button.scss
index 31dec76f54..9015df675f 100644
--- a/src/components/filter_group/_filter_button.scss
+++ b/src/components/filter_group/_filter_button.scss
@@ -68,5 +68,6 @@
 .ouiFilterButton__textShift {
   @include ouiTextShift;
   @include ouiTextTruncate;
+
   min-width: $ouiSize * 3;
 }
diff --git a/src/components/filter_group/_filter_group.scss b/src/components/filter_group/_filter_group.scss
index 316e7a9060..a18c51c4e5 100644
--- a/src/components/filter_group/_filter_group.scss
+++ b/src/components/filter_group/_filter_group.scss
@@ -65,7 +65,6 @@
     display: flex;
 
     .ouiFilterButton {
-      // sass-lint:disable-block no-important
       flex-grow: 1 !important;
     }
   }
diff --git a/src/components/filter_group/_filter_select_item.scss b/src/components/filter_group/_filter_select_item.scss
index fab7f5f638..57d285fc0c 100644
--- a/src/components/filter_group/_filter_select_item.scss
+++ b/src/components/filter_group/_filter_select_item.scss
@@ -25,6 +25,7 @@
   &:focus,
   &-isFocused {
     @include ouiFocusBackground;
+
     color: $ouiColorPrimary;
   }
 }
diff --git a/src/components/flex/_flex_grid.scss b/src/components/flex/_flex_grid.scss
index 1aabd01d88..a16762d28d 100644
--- a/src/components/flex/_flex_grid.scss
+++ b/src/components/flex/_flex_grid.scss
@@ -18,7 +18,6 @@
     flex-grow: 0;
 
     &.ouiFlexItem--flexGrowZero {
-      // sass-lint:disable-block no-important
       flex-grow: 0 !important;
       flex-basis: auto !important;
     }
@@ -38,15 +37,16 @@
   }
 }
 
+/* stylelint-disable length-zero-no-unit */
 $gutterTypes: (
   // We're using calc which requires the px unit
-  gutterNone: 0px, // sass-lint:disable-line zero-unit
+  gutterNone: 0px,
   gutterSmall: $ouiSizeS,
   gutterMedium: $ouiSize,
   gutterLarge: $ouiSizeL,
   gutterXLarge: $ouiSizeXL,
 );
-
+/* stylelint-enable length-zero-no-unit */
 $fractions: (
   fourths: (
     percentage: 25%,
@@ -102,7 +102,6 @@ $fractions: (
 
 @include ouiBreakpoint('xs', 's') {
   .ouiFlexGrid.ouiFlexGrid--responsive {
-    // sass-lint:disable-block no-important
     margin-left: 0 !important;
     margin-right: 0 !important;
     column-count: 1 !important;
diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
index 49cd501345..362d310ef7 100644
--- a/src/components/flex/_flex_item.scss
+++ b/src/components/flex/_flex_item.scss
@@ -42,7 +42,6 @@
 @include ouiBreakpoint('xs', 's') {
   .ouiFlexGroup--responsive > .ouiFlexItem,
   .ouiFlexGrid--responsive > .ouiFlexItem {
-    // sass-lint:disable-block no-important
     width: 100% !important;
     flex-basis: 100% !important;
     margin-left: 0 !important;
diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss
index 0fec0c694a..30660da7a4 100644
--- a/src/components/flyout/_flyout.scss
+++ b/src/components/flyout/_flyout.scss
@@ -11,6 +11,7 @@
 
 .ouiFlyout {
   @include ouiFlyout;
+
   animation: ouiFlyout $ouiAnimSpeedNormal $ouiAnimSlightResistance;
 
   // Remove focus ring because of `tabindex=0`
@@ -29,10 +30,11 @@
   &--outside {
     // match dropshadow
     @include ouiBottomShadowLarge;
+
     right: auto;
     left: 0;
+
     // Override the hover and focus transitions of buttons
-    // sass-lint:disable-block no-important
     transform: translateX(calc(-100% - #{$ouiSizeL})) !important;
     animation: none !important;
 
@@ -83,7 +85,6 @@ $flyoutSizes: (
 
 @each $modifier, $paddingAmount in $ouiFlyoutPaddingModifiers {
   .ouiFlyout--#{$modifier} {
-
     .ouiFlyoutHeader {
       padding: $paddingAmount $paddingAmount 0;
     }
@@ -130,7 +131,6 @@ $flyoutSizes: (
  * 2. If a custom maxWidth is set, we need to override it.
  */
 @include ouiBreakpoint('xs', 's') {
-  // sass-lint:disable-block no-important
   .ouiFlyout {
     max-width: 90vw !important; /* 1, 2 */
   }
@@ -153,7 +153,6 @@ $flyoutSizes: (
   // Pull in close buttons a little
   .ouiFlyout__closeButton--outside {
     // Override the hover and focus transitions of buttons
-    // sass-lint:disable-block no-important
     transform: translateX(calc(-100% - #{$ouiSizeXS})) !important;
 
     .ouiFlyout--left & {
diff --git a/src/components/flyout/_index.scss b/src/components/flyout/_index.scss
index aa89ec9d64..db28a7a0e8 100644
--- a/src/components/flyout/_index.scss
+++ b/src/components/flyout/_index.scss
@@ -11,7 +11,6 @@
 
 @import 'variables';
 @import 'mixins';
-
 @import 'flyout';
 @import 'flyout_body';
 @import 'flyout_footer';
diff --git a/src/components/flyout/_mixins.scss b/src/components/flyout/_mixins.scss
index 2bae21ea48..f50f74d8a9 100644
--- a/src/components/flyout/_mixins.scss
+++ b/src/components/flyout/_mixins.scss
@@ -12,9 +12,10 @@
 
 @mixin ouiFlyout {
   border-left: $ouiFlyoutBorder;
+
   // The mixin augments the above
-  // sass-lint:disable mixins-before-declarations
   @include ouiBottomShadowLarge($adjustBorders: true);
+
   position: fixed;
   top: 0;
   bottom: 0;
@@ -31,4 +32,5 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiFlyout { @include ouiFlyout; }
+
 /* End of Aliases */
diff --git a/src/components/flyout/_variables.scss b/src/components/flyout/_variables.scss
index e9453fd24f..006db8988a 100644
--- a/src/components/flyout/_variables.scss
+++ b/src/components/flyout/_variables.scss
@@ -10,7 +10,6 @@
  */
 
 $ouiFlyoutBorder: $ouiBorderThin !default;
-
 $ouiFlyoutPaddingModifiers: (
   'paddingNone': 0,
   'paddingSmall': $ouiSizeS,
@@ -22,4 +21,5 @@ $ouiFlyoutPaddingModifiers: (
 /* OUI -> EUI Aliases */
 $euiFlyoutBorder: $ouiFlyoutBorder;
 $euiFlyoutPaddingModifiers: $ouiFlyoutPaddingModifiers;
+
 /* End of Aliases */
diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
index b71fe4621a..57fe613c5c 100644
--- a/src/components/form/_form.scss
+++ b/src/components/form/_form.scss
@@ -11,6 +11,7 @@
 
 .ouiForm__error {
   @include ouiFontSizeS;
+
   list-style: disc;
 }
 
diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss
index 28376894cc..07a96bb592 100644
--- a/src/components/form/checkbox/_checkbox.scss
+++ b/src/components/form/checkbox/_checkbox.scss
@@ -47,7 +47,6 @@
     }
 
     &[disabled] {
-      // sass-lint:disable-block no-important
       cursor: not-allowed !important;
 
       ~ .ouiCheckbox__label {
diff --git a/src/components/form/field_password/_field_password.scss b/src/components/form/field_password/_field_password.scss
index 432aa859b4..adfa37791a 100644
--- a/src/components/form/field_password/_field_password.scss
+++ b/src/components/form/field_password/_field_password.scss
@@ -19,7 +19,6 @@
   }
 }
 
-// sass-lint:disable-block no-vendor-prefixes
 // Only remove Edge's internal reveal button if we're providing a custom one
 .ouiFieldPassword--withToggle::-ms-reveal {
   display: none;
diff --git a/src/components/form/field_search/_field_search.scss b/src/components/form/field_search/_field_search.scss
index b2a87af630..7f40148463 100644
--- a/src/components/form/field_search/_field_search.scss
+++ b/src/components/form/field_search/_field_search.scss
@@ -20,12 +20,11 @@
   @include ouiFormControlWithIcon($isIconOptional: false);
   @include ouiFormControlIsLoading;
 
-  // sass-lint:disable-block no-vendor-prefixes
-  -webkit-appearance: textfield; /* 1 */
+  appearance: textfield; /* 1 */
 
   &::-webkit-search-decoration,
   &::-webkit-search-cancel-button {
-    -webkit-appearance: none;  /* 1, 2 */
+    appearance: none;  /* 1, 2 */
   }
 
   &::-ms-clear {
diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss
index 844cccbe13..d0289e06aa 100644
--- a/src/components/form/file_picker/_file_picker.scss
+++ b/src/components/form/file_picker/_file_picker.scss
@@ -15,6 +15,7 @@
 
 .ouiFilePicker {
   @include ouiFormControlSize($includeAlternates: true);
+
   position: relative;
 
   &.ouiFilePicker--large {
@@ -81,14 +82,13 @@
 .ouiFilePicker__prompt {
   @include ouiFormControlDefaultShadow;
   @include ouiFormControlWithIcon; /* 2 */
+
   height: $ouiFormControlHeight;
   padding-top: $ouiFormControlPadding;
   padding-right: $ouiFormControlPadding;
   padding-bottom: $ouiFormControlPadding;
   pointer-events: none; /* 1 */
   border-radius: $ouiFormControlBorderRadius;
-
-  // sass-lint:disable-block indentation
   transition:
     box-shadow $ouiAnimSpeedFast ease-in,
     background-color $ouiAnimSpeedFast ease-in,
@@ -98,6 +98,7 @@
   .ouiFilePicker--compressed & {
     @include ouiFormControlStyleCompressed($includeStates: false);
     @include ouiFormControlWithIcon($compressed: true); /* 2 */
+
     height: $ouiFormControlCompressedHeight;
     border-radius: $ouiFormControlCompressedBorderRadius;
   }
@@ -123,10 +124,11 @@
 .ouiFilePicker__promptText {
   @include ouiFontSizeS;
   @include ouiTextTruncate;
+
   line-height: $ouiSize;
 
   // make normal sized prompt look like placeholder
-  .ouiFilePicker:not(.ouiFilePicker--large):not(.ouiFilePicker-hasFiles) & {
+  .ouiFilePicker:not(.ouiFilePicker--large, .ouiFilePicker-hasFiles) & {
     color: $ouiColorMediumShade;
   }
 }
@@ -189,7 +191,6 @@
 
 // Large styles only
 .ouiFilePicker--large {
-  // sass-lint:disable-block nesting-depth
   // Hover and focus
   .ouiFilePicker__input:hover:not(:disabled),
   .ouiFilePicker__input:focus {
diff --git a/src/components/form/file_picker/_variables.scss b/src/components/form/file_picker/_variables.scss
index 51db18b517..79d82d1d25 100644
--- a/src/components/form/file_picker/_variables.scss
+++ b/src/components/form/file_picker/_variables.scss
@@ -14,4 +14,5 @@ $ouiFilePickerTallHeight: $ouiSize * 8;
 
 /* OUI -> EUI Aliases */
 $euiFilePickerTallHeight: $ouiFilePickerTallHeight;
+
 /* End of Aliases */
diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
index ec5cfd2c83..4dae651101 100644
--- a/src/components/form/form_control_layout/_form_control_layout.scss
+++ b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -26,6 +26,7 @@
 .ouiFormControlLayout--group {
   // Match just the regular drop shadow of inputs
   @include ouiFormControlDefaultShadow;
+
   display: flex;
   align-items: stretch;
   padding: 1px; /* 1 */
@@ -48,6 +49,7 @@
   .ouiFormControlLayout__prepend,
   .ouiFormControlLayout__append {
     @include ouiTextTruncate;
+
     flex-shrink: 0;
     height: 100%;
     border-radius: 0;
@@ -106,7 +108,6 @@
     max-width: 50%; // Make sure max-width only applies to the outer most append/prepend element
   }
 
-  // sass-lint:disable-block no-important
   // This is the only way to target specific components to override styling
 
   // TEXT
@@ -119,7 +120,7 @@
     cursor: default !important; // pointer cursor on some form labels but not others is confusing
 
     // If the next sibling is not the input, pull it closer to the text to reduce space
-    + *:not(.ouiFormControlLayout__childrenWrapper):not(input) {
+    + *:not(.ouiFormControlLayout__childrenWrapper, input) {
       margin-left: -$ouiFormControlPadding;
     }
   }
@@ -132,7 +133,6 @@
     }
   }
 
-  //
   // BORDERS on buttons only
 
   .ouiButtonEmpty {
@@ -147,11 +147,11 @@
     border-left: $ouiFormInputGroupBorder;
   }
 
-  //
   // Compressed alterations
 
   &.ouiFormControlLayout--compressed {
     @include ouiFormControlDefaultShadow($borderOnly: true);
+
     border-radius: $ouiBorderRadius / 2;
     overflow: hidden; // Keeps backgrounds inside border radius
 
@@ -175,7 +175,6 @@
     }
   }
 
-  //
   // ReadOnly alterations
   &.ouiFormControlLayout--readOnly {
     @include ouiFormControlReadOnlyStyle;
diff --git a/src/components/form/form_control_layout/_form_control_layout_delimited.scss b/src/components/form/form_control_layout/_form_control_layout_delimited.scss
index ccf58d4e04..0d411d6ed4 100644
--- a/src/components/form/form_control_layout/_form_control_layout_delimited.scss
+++ b/src/components/form/form_control_layout/_form_control_layout_delimited.scss
@@ -12,6 +12,7 @@
 .ouiFormControlLayoutDelimited {
   // Match just the regular drop shadow of inputs
   @include ouiFormControlDefaultShadow;
+
   display: flex;
   align-items: stretch;
   padding: 1px; /* 1 */
@@ -29,14 +30,12 @@
   // Target when the ouiFormControlLayout is compressed without specifying the full class name in case it ever changes
   &[class*='--compressed'] {
     @include ouiFormControlDefaultShadow($borderOnly: true);
+
     border-radius: $ouiBorderRadius / 2;
 
     .ouiFormControlLayoutDelimited__input {
       height: 100%;
-      padding-top: 0; // Fixes IE
-      padding-bottom: 0; // Fixes IE
-      padding-left: $ouiFormControlCompressedPadding;
-      padding-right: $ouiFormControlCompressedPadding;
+      padding: 0 $ouiFormControlCompressedPadding 0 $ouiFormControlCompressedPadding; // Fixes IE // Fixes IE
     }
 
     .ouiFormControlLayoutIcons {
@@ -86,20 +85,18 @@
 }
 
 .ouiFormControlLayoutDelimited__input {
-  // sass-lint:disable-block no-important
   box-shadow: none !important;
   border-radius: 0 !important;
   text-align: center;
   height: 100%;
   min-width: 0; // Fixes FF
-
+  /* stylelint-disable-next-line no-duplicate-selectors */
   .ouiFormControlLayoutDelimited[class*='--compressed'] & {
     max-width: none;
   }
 }
 
 .ouiFormControlLayoutDelimited__delimeter {
-  // sass-lint:disable-block no-important
   line-height: 1 !important; // Override OuiText line-height
   flex: 0 0 auto;
   padding-left: $ouiFormControlPadding / 2;
diff --git a/src/components/form/form_error_text/_form_error_text.scss b/src/components/form/form_error_text/_form_error_text.scss
index 0e1002664e..4dd0dd39c4 100644
--- a/src/components/form/form_error_text/_form_error_text.scss
+++ b/src/components/form/form_error_text/_form_error_text.scss
@@ -11,6 +11,7 @@
 
 .ouiFormErrorText {
   @include ouiFontSizeXS;
+
   padding-top: $ouiSizeXS;
   color: $ouiColorDanger;
 }
diff --git a/src/components/form/form_help_text/_form_help_text.scss b/src/components/form/form_help_text/_form_help_text.scss
index e5d2916c0b..b3fad13749 100644
--- a/src/components/form/form_help_text/_form_help_text.scss
+++ b/src/components/form/form_help_text/_form_help_text.scss
@@ -11,6 +11,7 @@
 
 .ouiFormHelpText {
   @include ouiFontSizeXS;
+
   padding-top: $ouiSizeXS;
   color: $ouiColorDarkShade;
 }
diff --git a/src/components/form/form_label/_form_label.scss b/src/components/form/form_label/_form_label.scss
index 9c973ad554..980bf1eb22 100644
--- a/src/components/form/form_label/_form_label.scss
+++ b/src/components/form/form_label/_form_label.scss
@@ -14,6 +14,7 @@
  */
 .ouiFormLabel {
   @include ouiFormLabel;
+
   display: inline-block;
   transition: all $ouiAnimSpeedFast $ouiAnimSlightResistance;
 
diff --git a/src/components/form/form_row/_form_row.scss b/src/components/form/form_row/_form_row.scss
index 7c7a6610c0..656c6fa885 100644
--- a/src/components/form/form_row/_form_row.scss
+++ b/src/components/form/form_row/_form_row.scss
@@ -50,6 +50,7 @@
 
   .ouiFormRow__label {
     @include ouiTextBreakWord;
+
     hyphens: auto;
     max-width: 100%; // Fixes IE
   }
diff --git a/src/components/form/radio/_radio.scss b/src/components/form/radio/_radio.scss
index 90c9563199..e48319f8fb 100644
--- a/src/components/form/radio/_radio.scss
+++ b/src/components/form/radio/_radio.scss
@@ -41,7 +41,6 @@
     }
 
     &[disabled] {
-      //sass-lint:disable no-important
       cursor: not-allowed !important;
 
       ~ .ouiRadio__label {
diff --git a/src/components/form/range/_range_draggable.scss b/src/components/form/range/_range_draggable.scss
index 655b5ae677..fe40e62c90 100644
--- a/src/components/form/range/_range_draggable.scss
+++ b/src/components/form/range/_range_draggable.scss
@@ -27,10 +27,7 @@
 
   .ouiRangeDraggle__inner {
     position: absolute;
-    left: $ouiRangeThumbWidth;
-    right: $ouiRangeThumbWidth;
-    top: 0;
-    bottom: 0;
+    inset: 0 $ouiRangeThumbWidth 0 $ouiRangeThumbWidth;
   }
 
   &:not(.ouiRangeDraggable--disabled) {
diff --git a/src/components/form/range/_range_input.scss b/src/components/form/range/_range_input.scss
index f956177d49..8f943769ac 100644
--- a/src/components/form/range/_range_input.scss
+++ b/src/components/form/range/_range_input.scss
@@ -14,7 +14,6 @@
   min-width: $ouiSize * 4;
 
   .ouiRange__popover & {
-    // sass-lint:disable no-important
     margin: 0 !important;
     width: 100%;
   }
diff --git a/src/components/form/range/_range_levels.scss b/src/components/form/range/_range_levels.scss
index d88c8735d9..8137f01131 100644
--- a/src/components/form/range/_range_levels.scss
+++ b/src/components/form/range/_range_levels.scss
@@ -55,4 +55,5 @@ $ouiRangeLevelColors: (
 
 /* OUI -> EUI Aliases */
 $euiRangeLevelColors: $ouiRangeLevelColors;
+
 /* End of Aliases */
diff --git a/src/components/form/range/_range_slider.scss b/src/components/form/range/_range_slider.scss
index 35e1d2bf33..ed16f7ae86 100644
--- a/src/components/form/range/_range_slider.scss
+++ b/src/components/form/range/_range_slider.scss
@@ -35,7 +35,6 @@
   &:disabled {
     cursor: not-allowed;
 
-    // sass-lint:disable-block mixins-before-declarations
     @include ouiRangeThumbPerBrowser {
       cursor: not-allowed;
       border-color: $ouiRangeThumbBorderColor;
@@ -58,6 +57,7 @@
 
   @include ouiRangeTrackPerBrowser {
     @include ouiRangeTrackSize;
+
     background: $ouiRangeTrackColor;
     border: $ouiRangeTrackBorderWidth solid $ouiRangeTrackBorderColor;
     border-radius: $ouiRangeTrackRadius;
@@ -99,9 +99,8 @@
   // Resets
 
   // Disable linter for these very unique vendor controls
-  // sass-lint:disable-block no-vendor-prefixes
   &::-webkit-slider-thumb {
-    -webkit-appearance: none;
+    appearance: none;
     margin-top: ((-$ouiRangeTrackBorderWidth * 2 + $ouiRangeTrackHeight) / 2) - ($ouiRangeThumbHeight / 2);
   }
 
@@ -115,6 +114,7 @@
 
   &::-ms-track {
     @include ouiRangeTrackSize;
+
     background: transparent;
     border-color: transparent;
     border-width: ($ouiRangeThumbHeight / 2) 0;
diff --git a/src/components/form/range/_range_thumb.scss b/src/components/form/range/_range_thumb.scss
index 391ec95ad3..cf32108358 100644
--- a/src/components/form/range/_range_thumb.scss
+++ b/src/components/form/range/_range_thumb.scss
@@ -12,6 +12,7 @@
 .ouiRangeThumb {
   @include ouiCustomControl($type: 'round');
   @include ouiRangeThumbStyle;
+
   content: '';
   position: absolute;
   left: 0;
diff --git a/src/components/form/range/_range_ticks.scss b/src/components/form/range/_range_ticks.scss
index 0085ced23d..b91aa39cc5 100644
--- a/src/components/form/range/_range_ticks.scss
+++ b/src/components/form/range/_range_ticks.scss
@@ -41,8 +41,9 @@
 
   &:not(.ouiRangeTick--hasTickMark)::before {
     @include tickStyles;
+
     content: '';
-    left: calc(50% - #{($ouiSizeXS/2)});
+    left: calc(50% - #{($ouiSizeXS / 2)});
   }
 
   .ouiRangeTick__pseudo {
diff --git a/src/components/form/range/_range_tooltip.scss b/src/components/form/range/_range_tooltip.scss
index 17ce6094de..cf85c92256 100644
--- a/src/components/form/range/_range_tooltip.scss
+++ b/src/components/form/range/_range_tooltip.scss
@@ -24,8 +24,8 @@
 
 .ouiRangeTooltip__value {
   // Indentation for legibility in transition
-  // sass-lint:disable-block indentation
   @include ouiFontSizeS;
+
   border: 1px solid $ouiTooltipBackgroundColor;
   position: absolute;
   border-radius: $ouiBorderRadius;
@@ -63,8 +63,8 @@
   &.ouiRangeTooltip__value--right {
     margin-left: $ouiSizeL;
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       left: $arrowMinusSize;
     }
 
@@ -76,8 +76,8 @@
   &.ouiRangeTooltip__value--left {
     margin-right: $ouiSizeL;
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       left: auto;
       right: $arrowMinusSize;
     }
@@ -91,8 +91,8 @@
   &.ouiRangeTooltip__value--left {
     transform: translateX(0) translateY(-50%);
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       bottom: 50%;
       transform: translateY(50%) rotateZ(45deg);
     }
diff --git a/src/components/form/range/_range_wrapper.scss b/src/components/form/range/_range_wrapper.scss
index 8f9224b678..5c5b8c5bd0 100644
--- a/src/components/form/range/_range_wrapper.scss
+++ b/src/components/form/range/_range_wrapper.scss
@@ -18,6 +18,7 @@
 
 .ouiRangeWrapper {
   @include ouiFormControlSize($includeAlternates: true);
+
   display: flex;
   align-items: center;
 
diff --git a/src/components/form/select/_select.scss b/src/components/form/select/_select.scss
index 7bcbc54417..50c31f610f 100644
--- a/src/components/form/select/_select.scss
+++ b/src/components/form/select/_select.scss
@@ -26,6 +26,7 @@
 
   &--compressed {
     @include ouiFormControlWithIcon($side: 'right', $compressed: true); /* 1 */
+
     line-height: $ouiFormControlCompressedHeight; /* 2 */
     padding-top: 0; /* 2 */
     padding-bottom: 0; /* 2 */
@@ -40,7 +41,6 @@
   }
 
   // Turn off linter for some MS specific bits.
-  // sass-lint:disable no-vendor-prefixes
   &::-ms-expand {
     display: none;
   }
diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss
index 07b3d6e27b..5be58e4c08 100644
--- a/src/components/form/super_select/_super_select.scss
+++ b/src/components/form/super_select/_super_select.scss
@@ -11,6 +11,7 @@
 
 .ouiSuperSelect__listbox {
   @include ouiScrollBar;
+
   max-height: 300px;
   overflow: hidden;
   overflow-y: auto;
@@ -19,6 +20,7 @@
 .ouiSuperSelect__item {
   @include ouiFontSizeS;
   @include ouiInteractiveStates;
+
   padding: $ouiSizeS;
 }
 
diff --git a/src/components/form/super_select/_super_select_control.scss b/src/components/form/super_select/_super_select_control.scss
index 8fe61d10ad..707b6f3b6c 100644
--- a/src/components/form/super_select/_super_select_control.scss
+++ b/src/components/form/super_select/_super_select_control.scss
@@ -36,6 +36,7 @@
 
   &--compressed {
     @include ouiFormControlWithIcon($side: 'right', $compressed: true); /* 1 */
+
     line-height: $ouiFormControlCompressedHeight; /* 2 */
     padding-top: 0; /* 2 */
     padding-bottom: 0; /* 2 */
diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss
index 4ebfbe8c47..f287aa2d58 100644
--- a/src/components/form/switch/_switch.scss
+++ b/src/components/form/switch/_switch.scss
@@ -44,6 +44,7 @@
 
       .ouiSwitch__thumb {
         @include ouiCustomControlDisabled;
+
         background-color: $ouiSwitchOffColor;
       }
 
@@ -99,10 +100,7 @@
 
   .ouiSwitch__track {
     position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     overflow: hidden;
     border-radius: $ouiSwitchHeight;
   }
@@ -192,7 +190,6 @@
   // Compressed and mini switches have some style overlap
   &.ouiSwitch--compressed,
   &.ouiSwitch--mini {
-
     .ouiSwitch__button[aria-checked='false'] {
       .ouiSwitch__thumb {
         left: 1px;
diff --git a/src/components/form/text_area/_text_area.scss b/src/components/form/text_area/_text_area.scss
index eb2c6d827a..da085240bd 100644
--- a/src/components/form/text_area/_text_area.scss
+++ b/src/components/form/text_area/_text_area.scss
@@ -11,6 +11,7 @@
 
 .ouiTextArea {
   @include ouiFormControlStyle;
+
   line-height: $ouiLineHeight; // give more spacing between multiple lines
 
   // Textareas have their own sizing
diff --git a/src/components/header/_header_logo.scss b/src/components/header/_header_logo.scss
index caedd5321a..5be4e52e31 100644
--- a/src/components/header/_header_logo.scss
+++ b/src/components/header/_header_logo.scss
@@ -32,6 +32,7 @@
 
 .ouiHeaderLogo__text {
   @include ouiTitle('s');
+
   padding-left: $ouiSize;
   font-weight: $ouiFontWeightLight;
 }
@@ -48,6 +49,7 @@
 
   .ouiHeaderLogo__text {
     @include ouiTitle('xs');
+
     font-weight: $ouiFontWeightRegular;
   }
 }
diff --git a/src/components/header/_index.scss b/src/components/header/_index.scss
index 094d4de3d0..1864dba1dd 100644
--- a/src/components/header/_index.scss
+++ b/src/components/header/_index.scss
@@ -11,7 +11,6 @@
 
 // Components
 @import 'mixins';
-
 @import 'header';
 @import 'header_profile';
 @import 'header_links/index';
diff --git a/src/components/header/_mixins.scss b/src/components/header/_mixins.scss
index 13c84326f3..da6c4c95fe 100644
--- a/src/components/header/_mixins.scss
+++ b/src/components/header/_mixins.scss
@@ -24,7 +24,7 @@
   }
 
   .ouiHeaderSectionItem {
-    &:after {
+    &::after {
       background: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightestShade);
     }
   }
@@ -63,7 +63,7 @@
   }
 
   .euiHeaderSectionItem {
-    &:after {
+    &::after {
       background: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightestShade);
     }
   }
@@ -84,4 +84,5 @@
     stroke: $backgroundColor;
   }
 }
+
 /* End of Aliases */
diff --git a/src/components/header/header_alert/_header_alert.scss b/src/components/header/header_alert/_header_alert.scss
index 52ca373b5e..1f33946032 100644
--- a/src/components/header/header_alert/_header_alert.scss
+++ b/src/components/header/header_alert/_header_alert.scss
@@ -32,11 +32,13 @@
 
   .ouiHeaderAlert__title {
     @include ouiTitle('xs');
+
     margin-bottom: $ouiSizeS;
   }
 
   .ouiHeaderAlert__text {
     @include ouiFontSizeS;
+
     margin-bottom: $ouiSize;
   }
 
@@ -46,6 +48,7 @@
 
   .ouiHeaderAlert__date {
     @include ouiFontSizeXS;
+
     color: $ouiColorDarkShade;
   }
 }
diff --git a/src/components/header/header_links/_index.scss b/src/components/header/header_links/_index.scss
index 115250bbbe..bd8c007fe2 100644
--- a/src/components/header/header_links/_index.scss
+++ b/src/components/header/header_links/_index.scss
@@ -10,6 +10,5 @@
  */
 
 @import 'variables';
-
 @import 'header_links';
 @import 'header_link';
diff --git a/src/components/header/header_links/_variables.scss b/src/components/header/header_links/_variables.scss
index f15abcf528..711ae9d622 100644
--- a/src/components/header/header_links/_variables.scss
+++ b/src/components/header/header_links/_variables.scss
@@ -19,4 +19,5 @@ $ouiHeaderLinksGutterSizes: (
 
 /* OUI -> EUI Aliases */
 $euiHeaderLinksGutterSizes: $ouiHeaderLinksGutterSizes;
+
 /* End of Aliases */
diff --git a/src/components/header/header_section/_header_section_item.scss b/src/components/header/header_section/_header_section_item.scss
index 76c13266ab..a90e3951ad 100644
--- a/src/components/header/header_section/_header_section_item.scss
+++ b/src/components/header/header_section/_header_section_item.scss
@@ -16,7 +16,7 @@
   display: flex;
   align-items: center;
 
-  &:after {
+  &::after {
     position: absolute;
     content: '';
     top: $ouiSize;
@@ -27,14 +27,14 @@
 }
 
 .ouiHeaderSectionItem--borderLeft {
-  &:after {
+  &::after {
     left: 0;
     width: 1px;
   }
 }
 
 .ouiHeaderSectionItem--borderRight {
-  &:after {
+  &::after {
     width: 1px;
     left: auto;
     right: 0;
@@ -48,7 +48,7 @@
 
   .ouiHeaderSectionItem--borderLeft,
   .ouiHeaderSectionItem--borderRight {
-    &:after {
+    &::after {
       display: none;
     }
   }
diff --git a/src/components/header/header_section/_header_section_item_button.scss b/src/components/header/header_section/_header_section_item_button.scss
index 270134177e..8ce51d9517 100644
--- a/src/components/header/header_section/_header_section_item_button.scss
+++ b/src/components/header/header_section/_header_section_item_button.scss
@@ -47,6 +47,7 @@
   // Using specificity to override the default icon size
   .ouiHeaderSectionItemButton__notification.ouiHeaderSectionItemButton__notification--dot {
     @include size($ouiSize);
+
     top: 9%;
   }
 }
diff --git a/src/components/icon/_variables.scss b/src/components/icon/_variables.scss
index 02a02d5b6f..8ecf7ee49e 100644
--- a/src/components/icon/_variables.scss
+++ b/src/components/icon/_variables.scss
@@ -24,7 +24,6 @@ $ouiIconColors: (
   warning: makeGraphicContrastColor($ouiColorWarning),
   inherit: inherit
 );
-
 $ouiIconSizes: (
   small: $ouiSizeM,
   medium: $ouiSize,
@@ -38,4 +37,5 @@ $ouiIconSizes: (
 $euiIconLoadingOpacity: $ouiIconLoadingOpacity;
 $euiIconColors: $ouiIconColors;
 $euiIconSizes: $ouiIconSizes;
+
 /* End of Aliases */
diff --git a/src/components/image/_image.scss b/src/components/image/_image.scss
index 4dcb01a768..1a59accfa8 100644
--- a/src/components/image/_image.scss
+++ b/src/components/image/_image.scss
@@ -143,6 +143,7 @@
 
 .ouiImage__caption {
   @include ouiFontSizeS;
+
   margin-top: $ouiSizeXS;
   text-align: center;
 }
@@ -203,9 +204,7 @@
 }
 
 @include ouiBreakpoint('xs', 's', 'm') {
-
   .ouiImage {
-
     &.ouiImage--floatLeft,
     &.ouiImage--floatRight {
       float: none;
diff --git a/src/components/key_pad_menu/_index.scss b/src/components/key_pad_menu/_index.scss
index cd023f0ec5..cd9a6093b4 100644
--- a/src/components/key_pad_menu/_index.scss
+++ b/src/components/key_pad_menu/_index.scss
@@ -12,5 +12,4 @@
 // Key pad is a phone like nav comprised of an svg icon and a title.
 
 @import 'variables';
-
 @import 'key_pad_menu';
diff --git a/src/components/key_pad_menu/_key_pad_menu.scss b/src/components/key_pad_menu/_key_pad_menu.scss
index efe4603f62..b958172321 100644
--- a/src/components/key_pad_menu/_key_pad_menu.scss
+++ b/src/components/key_pad_menu/_key_pad_menu.scss
@@ -14,8 +14,7 @@
  */
 .ouiKeyPadMenu {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   width: $ouiKeyPadMenuSize * 3;
   max-width: 100%;
 }
@@ -27,7 +26,6 @@
 .ouiKeyPadMenuItem {
   @include ouiFont; /* 1 */
   // Disable indentation for transition legibility
-  // sass-lint:disable-block indentation
   display: block;
   padding: $ouiSizeXS;
   height: $ouiKeyPadMenuSize;
@@ -44,9 +42,10 @@
     &:hover,
     &:focus {
       @include ouiSlightShadow;
+
       border-color: $ouiBorderColor;
 
-      .ouiKeyPadMenuItem__icon { // sass-lint:disable-line nesting-depth
+      .ouiKeyPadMenuItem__icon {
         transform: translateY(0);
       }
     }
@@ -60,7 +59,7 @@
     .ouiKeyPadMenuItem__icon  {
       filter: grayscale(100%);
 
-      svg * { // sass-lint:disable-line nesting-depth
+      svg * {
         fill: $ouiButtonColorDisabledText;
       }
     }
@@ -85,7 +84,6 @@
       right: $ouiSizeS;
       z-index: 3;
 
-      // sass-lint:disable-block nesting-depth
       .ouiKeyPadMenuItem__betaBadge:not(.ouiBetaBadge--iconOnly) {
         padding: 0 ($ouiSizeM / 2);  /* 2 */
         overflow: hidden;  /* 2 */
@@ -97,6 +95,7 @@
 
 .ouiKeyPadMenuItem__betaBadge {
   @include size($ouiKeyPadMenuItemBetaBadgeSize);
+
   line-height: $ouiKeyPadMenuItemBetaBadgeSize;
   color: $ouiColorFullShade;
   background-color: tintOrShade($ouiColorLightShade, 50%, 0%);
diff --git a/src/components/key_pad_menu/_variables.scss b/src/components/key_pad_menu/_variables.scss
index e42aedb899..4c102ed19f 100644
--- a/src/components/key_pad_menu/_variables.scss
+++ b/src/components/key_pad_menu/_variables.scss
@@ -16,4 +16,5 @@ $ouiKeyPadMenuItemBetaBadgeSize: $ouiSize + $ouiSizeXS !default;
 /* OUI -> EUI Aliases */
 $euiKeyPadMenuSize: $ouiKeyPadMenuSize;
 $euiKeyPadMenuItemBetaBadgeSize: $ouiKeyPadMenuItemBetaBadgeSize;
+
 /* End of Aliases */
diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss
index 3754212d6a..a5a0295748 100644
--- a/src/components/link/_link.scss
+++ b/src/components/link/_link.scss
@@ -53,11 +53,12 @@ $ouiLinkColors: (
 }
 
 // Make button OuiLink's text selectable
-button.ouiLink { // sass-lint:disable-line no-qualifying-elements
+button.ouiLink {
   user-select: text;
 }
 
 
 /* OUI -> EUI Aliases */
 $euiLinkColors: $ouiLinkColors;
+
 /* End of Aliases */
diff --git a/src/components/link/_mixins.scss b/src/components/link/_mixins.scss
index 038ba49932..29ca1f7e08 100644
--- a/src/components/link/_mixins.scss
+++ b/src/components/link/_mixins.scss
@@ -26,4 +26,5 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiLink { @include ouiLink; }
+
 /* End of Aliases */
diff --git a/src/components/list_group/_index.scss b/src/components/list_group/_index.scss
index 010547b03a..90e9a6a919 100644
--- a/src/components/list_group/_index.scss
+++ b/src/components/list_group/_index.scss
@@ -10,7 +10,6 @@
  */
 
 @import 'variables';
-
 @import 'list_group';
 @import 'list_group_item';
 @import 'pinnable_list_group/index';
diff --git a/src/components/list_group/_variables.scss b/src/components/list_group/_variables.scss
index aaf72c512b..7efb139007 100644
--- a/src/components/list_group/_variables.scss
+++ b/src/components/list_group/_variables.scss
@@ -11,19 +11,16 @@
 
 $ouiListGroupItemHoverBackground: transparentize($ouiColorLightShade, .75);
 $ouiListGroupItemHoverBackgroundGhost: transparentize($ouiColorGhost, .9);
-
 $ouiListGroupGutterTypes: (
   gutterSmall: $ouiSizeS,
   gutterMedium: $ouiSize,
 );
-
 $ouiListGroupItemColorTypes: (
   primary: $ouiColorPrimaryText,
   text: $ouiTextColor,
   subdued: $ouiTextSubduedColor,
   ghost: $ouiColorGhost,
 );
-
 $ouiListGroupItemSizeTypes: (
   xSmall: $ouiFontSizeXS,
   small: $ouiFontSizeS,
@@ -38,4 +35,5 @@ $euiListGroupItemHoverBackgroundGhost: $ouiListGroupItemHoverBackgroundGhost;
 $euiListGroupGutterTypes: $ouiListGroupGutterTypes;
 $euiListGroupItemColorTypes: $ouiListGroupItemColorTypes;
 $euiListGroupItemSizeTypes: $ouiListGroupItemSizeTypes;
+
 /* End of Aliases */
diff --git a/src/components/list_group/pinnable_list_group/_pinnable_list_group.scss b/src/components/list_group/pinnable_list_group/_pinnable_list_group.scss
index 65b5a0ff6a..1f7710dfea 100644
--- a/src/components/list_group/pinnable_list_group/_pinnable_list_group.scss
+++ b/src/components/list_group/pinnable_list_group/_pinnable_list_group.scss
@@ -15,6 +15,6 @@
   }
 }
 
-.ouiPinnableListGroup__itemExtraAction-pinned:not(:hover):not(:focus) {
+.ouiPinnableListGroup__itemExtraAction-pinned:not(:hover, :focus) {
   color: makeGraphicContrastColor($ouiColorLightShade);
 }
diff --git a/src/components/loading/_loading_chart.scss b/src/components/loading/_loading_chart.scss
index 7e674656b8..1a8debbf71 100644
--- a/src/components/loading/_loading_chart.scss
+++ b/src/components/loading/_loading_chart.scss
@@ -27,7 +27,6 @@
   margin-bottom: -$ouiSize;
   margin-left: $ouiSizeXS / 2;
 
-  // sass-lint:disable-block mixins-before-declarations
   @include ouiCanAnimate {
     animation: ouiLoadingChart 1s infinite;
   }
diff --git a/src/components/loading/_loading_content.scss b/src/components/loading/_loading_content.scss
index 5764d0e0b8..758605ed29 100644
--- a/src/components/loading/_loading_content.scss
+++ b/src/components/loading/_loading_content.scss
@@ -38,7 +38,6 @@
     $ouiGradientStartStop 55%,
     );
 
-  // sass-lint:disable-block mixins-before-declarations
   @include ouiCanAnimate {
     animation: ouiLoadingContentGradientLoad 1.5s $ouiAnimSlightResistance infinite;
   }
diff --git a/src/components/loading/_loading_elastic.scss b/src/components/loading/_loading_elastic.scss
index 9b019b7a19..8268aa3fb1 100644
--- a/src/components/loading/_loading_elastic.scss
+++ b/src/components/loading/_loading_elastic.scss
@@ -35,6 +35,7 @@
   @include ouiCanAnimate {
     animation-name: ouiLoadingElastic;
   }
+
   animation-fill-mode: forwards;
   animation-direction: alternate;
   transform-style: preserve-3d;
diff --git a/src/components/loading/_loading_kibana.scss b/src/components/loading/_loading_kibana.scss
index 9f07d7dc6d..2260e1197f 100644
--- a/src/components/loading/_loading_kibana.scss
+++ b/src/components/loading/_loading_kibana.scss
@@ -14,10 +14,9 @@
   position: relative;
   display: inline-block;
 
-  // sass-lint:disable-block mixins-before-declarations
   @include ouiCanAnimate {
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       position: absolute;
       content: '';
       width: 90%;
@@ -27,12 +26,12 @@
       z-index: 1;
     }
 
-    &:before {
+    &::before {
       box-shadow: 0 0 8px $ouiColorFullShade;
       animation: 1s ouiLoadingKibanaPulsateAndFade $ouiAnimSlightResistance infinite;
     }
 
-    &:after {
+    &::after {
       background-color: $ouiColorFullShade;
       animation: 1s ouiLoadingKibanaPulsate $ouiAnimSlightResistance infinite;
     }
@@ -55,8 +54,8 @@
 .ouiLoadingKibana--medium {
   width: $ouiSize;
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     height: $ouiSizeXS - 1; /* 1 */
     bottom: -$ouiSizeXS;
   }
@@ -72,8 +71,8 @@
 .ouiLoadingKibana--large {
   width: $ouiSizeL;
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     height: $ouiSizeS - 2; /* 1 */
     bottom: -$ouiSizeS;
   }
@@ -88,8 +87,8 @@
 .ouiLoadingKibana--xLarge {
   width: $ouiSizeXL;
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     height: $ouiSizeS;
     bottom: -$ouiSizeM;
   }
diff --git a/src/components/loading/_loading_spinner.scss b/src/components/loading/_loading_spinner.scss
index fd705110c5..0d13836183 100644
--- a/src/components/loading/_loading_spinner.scss
+++ b/src/components/loading/_loading_spinner.scss
@@ -18,7 +18,6 @@
   border: solid $ouiSizeXS / 2 $ouiColorLightShade;
   border-color: ouiLoadingSpinnerBorderColors();
 
-  // sass-lint:disable-block mixins-before-declarations
   @include ouiCanAnimate {
     animation: ouiLoadingSpinner .6s infinite linear;
   }
diff --git a/src/components/loading/_variables.scss b/src/components/loading/_variables.scss
index f42364a76f..c2d95d1847 100644
--- a/src/components/loading/_variables.scss
+++ b/src/components/loading/_variables.scss
@@ -16,4 +16,5 @@ $ouiGradientMiddle: tintOrShade($ouiColorLightShade, 80%, 24%);
 /* OUI -> EUI Aliases */
 $euiGradientStartStop: $ouiGradientStartStop;
 $euiGradientMiddle: $ouiGradientMiddle;
+
 /* End of Aliases */
diff --git a/src/components/mark/_mark.scss b/src/components/mark/_mark.scss
index 78c5854de0..03f88021c0 100644
--- a/src/components/mark/_mark.scss
+++ b/src/components/mark/_mark.scss
@@ -12,6 +12,7 @@
 .ouiMark {
   background-color: transparent;
   font-weight: $ouiFontWeightBold;
+
   // Override the browser's black color.
   // Can't use `inherit` because the text to background color contrast may not be sufficient
   color: $ouiTextColor;
diff --git a/src/components/markdown_editor/_markdown_editor_drop_zone.scss b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
index 216bcb8a8c..e2919f6f8e 100644
--- a/src/components/markdown_editor/_markdown_editor_drop_zone.scss
+++ b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
@@ -38,13 +38,11 @@
     .ouiMarkdownEditorTextArea,
     .ouiMarkdownEditorTextArea:focus,
     .ouiMarkdownEditor:focus-within .ouiMarkdownEditorTextArea {
-      // sass-lint:disable-block no-important
       background-color: transparentize($ouiColorPrimary, .9) !important;
     }
 
     .ouiMarkdownEditorTextArea,
     .ouiMarkdownEditorTextArea:focus {
-      // sass-lint:disable-block no-important
       background-image: ouiFormControlGradient($ouiColorPrimary) !important;
     }
   }
@@ -54,7 +52,6 @@
     .ouiMarkdownEditorTextArea,
     .ouiMarkdownEditorTextArea:focus,
     .ouiMarkdownEditor:focus-within .ouiMarkdownEditorTextArea {
-      // sass-lint:disable-block no-important
       background-color: transparentize($ouiColorDanger, .9) !important;
     }
   }
@@ -62,7 +59,6 @@
   &--hasError {
     .ouiMarkdownEditorTextArea,
     .ouiMarkdownEditorTextArea:focus {
-      // sass-lint:disable-block no-important
       background-image: ouiFormControlGradient($ouiColorDanger) !important;
     }
   }
diff --git a/src/components/markdown_editor/_markdown_editor_preview.scss b/src/components/markdown_editor/_markdown_editor_preview.scss
index 69acd2b12c..81fcf4c928 100644
--- a/src/components/markdown_editor/_markdown_editor_preview.scss
+++ b/src/components/markdown_editor/_markdown_editor_preview.scss
@@ -11,6 +11,7 @@
 
 .ouiMarkdownEditorPreview {
   @include ouiScrollBar;
+
   background: $ouiColorEmptyShade;
   min-height: $ouiMarkdownEditorMinHeight;
   overflow-y: auto;
diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss
index 66640efa73..580cab35dc 100644
--- a/src/components/markdown_editor/_markdown_editor_text_area.scss
+++ b/src/components/markdown_editor/_markdown_editor_text_area.scss
@@ -12,22 +12,23 @@
 .ouiMarkdownEditorTextArea {
   @include ouiFormControlText;
   @include ouiScrollBar;
+
   width: 100%;
   height: 100%;
   min-height: $ouiMarkdownEditorMinHeight;
   padding: $ouiSizeM;
   border: $ouiBorderThin;
   border-bottom: none;
+
   // Overrides the ouiFormControlText line-height that is very small
   line-height: $ouiLineHeight;
   resize: vertical;
   background-color: $ouiFormBackgroundColor;
   background-repeat: no-repeat;
   background-size: 0% 100%;
+
   // Removes default firefox margin
   margin: 0;
-
-  // sass-lint:disable-block indentation
   transition:
     box-shadow $ouiAnimSpeedFast ease-in,
     background-image $ouiAnimSpeedFast ease-in,
diff --git a/src/components/markdown_editor/_markdown_format.scss b/src/components/markdown_editor/_markdown_format.scss
index 2aa63c3a69..d49f492585 100644
--- a/src/components/markdown_editor/_markdown_format.scss
+++ b/src/components/markdown_editor/_markdown_format.scss
@@ -26,7 +26,7 @@ $browserDefaultFontSize: 16px;
 // We're setting a function o transform px in em
 // because it's easier to think in px
 @function em($pixels, $context: $browserDefaultFontSize) {
-  @return #{$pixels/$context}em;
+  @return #{$pixels / $context}em;
 }
 
 .ouiMarkdownFormat {
@@ -40,7 +40,7 @@ $browserDefaultFontSize: 16px;
   $ouiMarkdownFontSizeXS: em(12px);
   $ouiMarkdownFontSizeS: em(14px);
   $ouiMarkdownFontSize: em(16px);
-  $ouiMarkdownFontSizeM:  em(18px);
+  $ouiMarkdownFontSizeM: em(18px);
   $ouiMarkdownFontSizeL: em(20px);
   $ouiMarkdownFontSizeXL: em(28px);
   $ouiMarkdownFontSizeXXL: em(36px);
@@ -70,7 +70,6 @@ $browserDefaultFontSize: 16px;
   }
 
   > div > *:first-child {
-    // sass-lint:disable-block no-important
     margin-top: 0 !important;
   }
 
@@ -81,7 +80,6 @@ $browserDefaultFontSize: 16px;
 
   > div > *:last-child,
   .ouiCheckbox {
-    // sass-lint:disable-block no-important
     margin-bottom: 0 !important;
   }
 
@@ -118,12 +116,14 @@ $browserDefaultFontSize: 16px;
 
   h1 {
     font-size: $ouiMarkdownFontSizeXXL;
+    /* stylelint-disable-next-line number-max-precision */
     line-height: 1.333333em;
     font-weight: 300;
   }
 
   h2 {
     font-size: $ouiMarkdownFontSizeXL;
+    /* stylelint-disable-next-line number-max-precision */
     line-height: 1.428571em;
     font-weight: 300;
   }
@@ -142,12 +142,14 @@ $browserDefaultFontSize: 16px;
 
   h5 {
     font-size: $ouiMarkdownFontSizeS;
+    /* stylelint-disable-next-line number-max-precision */
     line-height: 1.142857em;
     font-weight: 700;
   }
 
   h6 {
     font-size: $ouiMarkdownFontSizeXS;
+    /* stylelint-disable-next-line number-max-precision */
     line-height: 1.333333em;
     font-weight: 700;
     text-transform: uppercase;
diff --git a/src/components/markdown_editor/_variables.scss b/src/components/markdown_editor/_variables.scss
index 95a6483d72..cd52322b5e 100644
--- a/src/components/markdown_editor/_variables.scss
+++ b/src/components/markdown_editor/_variables.scss
@@ -14,4 +14,5 @@ $ouiMarkdownEditorMinHeight: '150px';
 
 /* OUI -> EUI Aliases */
 $euiMarkdownEditorMinHeight: $ouiMarkdownEditorMinHeight;
+
 /* End of Aliases */
diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index 6c207d3a76..cdc69bc8b8 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -18,10 +18,11 @@
 
 .ouiModal {
   border: $ouiBorderThin;
+
   // This mixin overwrites some of the border above
-  @include ouiBottomShadowLarge($adjustBorders: true); // sass-lint:disable-line mixins-before-declarations
-  display: flex; /* 1 */
+  @include ouiBottomShadowLarge($adjustBorders: true);
 
+  display: flex; /* 1 */
   position: relative;
   background-color: $ouiColorEmptyShade;
   border-radius: $ouiBorderRadius;
@@ -47,7 +48,6 @@
 .ouiModal--maxWidth-default {
   // Sass and CSS's versions of `min` collide here, so we use all uppercase to ensure the CSS version is used
   // https://css-tricks.com/when-sass-and-new-css-features-collide/#the-solution
-  // sass-lint:disable-block function-name-format
   max-width: MIN(#{map-get($ouiBreakpoints, 'm')}, calc(100vw - #{$ouiSize}));
 }
 
@@ -71,12 +71,14 @@
 .ouiModalBody {
   flex-grow: 1;
   overflow: hidden;
+
   // The below fixes scroll on Chrome and Safari
   display: flex;
   flex-direction: column;
 
   .ouiModalBody__overflow {
     @include ouiYScrollWithShadows;
+
     padding: $ouiSizeS $ouiSizeL;
   }
 }
@@ -129,20 +131,17 @@
 // On mobile we fix modals as a takeover.
 @include ouiBreakpoint('xs', 's') {
   .ouiModal {
-    // sass-lint:disable-block no-important
     position: fixed;
     width: 100vw !important;
     max-width: none !important;
     min-width: 0 !important;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
+    inset: 0;
     border-radius: 0;
     border: none;
 
     &.ouiModal--confirmation {
       @include ouiBottomShadowLarge($ouiShadowColorLarge, $reverse: true);
+
       top: auto;
     }
 
@@ -158,7 +157,7 @@
   .ouiModalFooter {
     width: 100%;
     background: $ouiColorLightestShade;
-    padding: $ouiSizeM $ouiSizeL !important; // sass-lint:disable-line no-important
+    padding: $ouiSizeM $ouiSizeL !important;
     justify-content: stretch;
 
     > * {
diff --git a/src/components/notification/_notification_event.scss b/src/components/notification/_notification_event.scss
index 96db26af17..1185234147 100644
--- a/src/components/notification/_notification_event.scss
+++ b/src/components/notification/_notification_event.scss
@@ -25,6 +25,7 @@
 
 .ouiNotificationEvent__title {
   @include ouiTitle('xs');
+
   display: flex;
 
   // ensure links get the right color
@@ -33,7 +34,7 @@
   }
 
   &--isRead {
-    color: $ouiColorDarkShade !important; // sass-lint:disable-line no-important
+    color: $ouiColorDarkShade !important;
   }
 }
 
diff --git a/src/components/notification/_notification_event_meta.scss b/src/components/notification/_notification_event_meta.scss
index fa4a63ecec..ba6d20898d 100644
--- a/src/components/notification/_notification_event_meta.scss
+++ b/src/components/notification/_notification_event_meta.scss
@@ -12,10 +12,9 @@
 .ouiNotificationEventMeta {
   position: relative;
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
   justify-content: space-between;
   align-items: center;
-  flex-wrap: wrap;
   margin-right: $ouiSizeXS;
   min-height: $ouiSizeL; // ensures the same size of the read button to properly center align
 
diff --git a/src/components/overlay_mask/_overlay_mask.scss b/src/components/overlay_mask/_overlay_mask.scss
index 06419611a1..9c68eea7af 100644
--- a/src/components/overlay_mask/_overlay_mask.scss
+++ b/src/components/overlay_mask/_overlay_mask.scss
@@ -11,10 +11,7 @@
 
 .ouiOverlayMask {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,7 +20,7 @@
 
   $backgroundColor: $ouiColorEmptyShade;
 
-  @if (lightness($ouiTextColor) > 50) {
+  @if  lightness($ouiTextColor) > 50 {
     $backgroundColor: $ouiColorLightShade;
   }
 
diff --git a/src/components/page/_index.scss b/src/components/page/_index.scss
index 6e98d08330..d2c94697ec 100644
--- a/src/components/page/_index.scss
+++ b/src/components/page/_index.scss
@@ -10,7 +10,6 @@
  */
 
 @import 'mixins';
-
 @import 'page';
 @import 'page_body/index';
 @import 'page_content/index';
diff --git a/src/components/page/_mixins.scss b/src/components/page/_mixins.scss
index 2feebf4323..83d5ecc927 100644
--- a/src/components/page/_mixins.scss
+++ b/src/components/page/_mixins.scss
@@ -25,4 +25,5 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiPageRestrictWidth { @include ouiPageRestrictWidth; }
+
 /* End of Aliases */
diff --git a/src/components/page/_page.scss b/src/components/page/_page.scss
index a81ffd91f8..573615df98 100644
--- a/src/components/page/_page.scss
+++ b/src/components/page/_page.scss
@@ -11,6 +11,7 @@
 
 .ouiPage {
   @include ouiPageRestrictWidth;
+
   display: flex;
   background-color: $ouiPageBackgroundColor;
   flex-shrink: 0; // Ensures Safari doesn't shrink height beyond contents
@@ -38,7 +39,6 @@
       min-width: $ouiPageSidebarMinWidth;
       margin-right: $amount;
 
-      // sass-lint:disable-block mixins-before-declarations
       @include ouiBreakpoint('xs', 's') {
         margin-right: 0;
         margin-bottom: $amount;
diff --git a/src/components/page/page_body/_page_body.scss b/src/components/page/page_body/_page_body.scss
index aa16a0c7f8..916fcbaf07 100644
--- a/src/components/page/page_body/_page_body.scss
+++ b/src/components/page/page_body/_page_body.scss
@@ -11,13 +11,16 @@
 
 .ouiPageBody {
   @include ouiPageRestrictWidth;
+
   display: flex;
   flex-direction: column;
   align-items: stretch;
   flex: 1 1 100%;
+
   // Make sure that inner flex layouts don't get larger than this container
   max-width: 100%;
   min-width: 0;
+
   // Commenting out for posterity
   // Adding z-index disallows fullscreens like OuiDataGrid to get above the headers
   // z-index: 1; // Ensures any side nav emphasis gets rendered under shadow
@@ -38,6 +41,7 @@
     & > .ouiPageHeader:not([class*='--padding']) {
       // Match the body's padding for spacing if it doesn't have it's own
       margin-bottom: $amount;
+
       // When the page header is actually inside of a panelled page body,
       // We want to add some extra separation between it and the content body
       border-bottom: $ouiBorderThin;
diff --git a/src/components/page/page_header/_page_header.scss b/src/components/page/page_header/_page_header.scss
index 88709a0acc..a17c417fca 100644
--- a/src/components/page/page_header/_page_header.scss
+++ b/src/components/page/page_header/_page_header.scss
@@ -16,6 +16,7 @@
 
 .ouiPageHeader {
   @include ouiPageRestrictWidth;
+
   width: 100%;
   display: flex;
   flex-direction: row;
diff --git a/src/components/page/page_side_bar/_page_side_bar.scss b/src/components/page/page_side_bar/_page_side_bar.scss
index 4870839c2b..4740d15bc8 100644
--- a/src/components/page/page_side_bar/_page_side_bar.scss
+++ b/src/components/page/page_side_bar/_page_side_bar.scss
@@ -33,6 +33,7 @@
 @include ouiBreakpoint('m', 'l', 'xl') {
   .ouiPageSideBar--sticky {
     @include ouiScrollBar;
+
     overflow-y: auto;
     flex-grow: 1;
     position: sticky;
diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss
index 2d6144a855..08e3e5c0b0 100644
--- a/src/components/pagination/_pagination.scss
+++ b/src/components/pagination/_pagination.scss
@@ -14,7 +14,6 @@
   align-items: center;
 
   &__compressedText {
-    // sass-lint:disable-block no-important
     display: inline-flex;
     align-items: center;
     line-height: 1 !important; // Override OuiText line-height
diff --git a/src/components/panel/split_panel/_split_panel.scss b/src/components/panel/split_panel/_split_panel.scss
index da66ee1aa9..af111e1b0a 100644
--- a/src/components/panel/split_panel/_split_panel.scss
+++ b/src/components/panel/split_panel/_split_panel.scss
@@ -17,8 +17,8 @@
   .ouiSplitPanel__inner {
     flex-basis: 0%; // Make sure they're evenly split
     // Ensure no movement if they have click handlers
-    transform: none !important; // sass-lint:disable-line no-important
-    box-shadow: none !important; // sass-lint:disable-line no-important
+    transform: none !important;
+    box-shadow: none !important;
   }
 
   @each $modifier, $amount in $ouiPanelBorderRadiusModifiers {
diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss
index b095a1dcff..b981b27b17 100644
--- a/src/components/popover/_popover.scss
+++ b/src/components/popover/_popover.scss
@@ -41,8 +41,8 @@
  */
 .ouiPopover__panel {
   // Ignore linting for legibility of transition property, and the mixin performs an overwrite
-  // sass-lint:disable-block indentation
   @include ouiBottomShadow($adjustBorders: true);
+
   position: absolute;
   min-width: $ouiButtonMinWidth; /* 1 */
   max-width: calc(100vw - #{$ouiSizeXL}); /* 3 */
@@ -75,7 +75,7 @@
     height: 0;
 
     // This fakes a border on the arrow.
-    &:before {
+    &::before {
       position: absolute;
       content: '';
       height: 0;
@@ -83,7 +83,7 @@
     }
 
     // This part of the arrow matches the panel.
-    &:after {
+    &::after {
       position: absolute;
       content: '';
       height: 0;
@@ -91,14 +91,14 @@
     }
 
     &.ouiPopover__panelArrow--top {
-      &:before {
+      &::before {
         bottom: -$ouiPopoverArrowSize + 2;
         border-left: $ouiPopoverArrowSize solid transparent;
         border-right: $ouiPopoverArrowSize solid transparent;
         border-top: $ouiPopoverArrowSize solid $ouiBorderColor;
       }
 
-      &:after {
+      &::after {
         bottom: -$ouiPopoverArrowSize + 3;
         border-left: $ouiPopoverArrowSize solid transparent;
         border-right: $ouiPopoverArrowSize solid transparent;
@@ -107,7 +107,7 @@
     }
 
     &.ouiPopover__panelArrow--right {
-      &:before {
+      &::before {
         left: -$ouiPopoverArrowSize;
         top: 50%;
         border-top: $ouiPopoverArrowSize solid transparent;
@@ -115,7 +115,7 @@
         border-right: $ouiPopoverArrowSize solid $ouiBorderColor;
       }
 
-      &:after {
+      &::after {
         left: -$ouiPopoverArrowSize + 1;
         top: 50%;
         border-top: $ouiPopoverArrowSize solid transparent;
@@ -125,14 +125,14 @@
     }
 
     &.ouiPopover__panelArrow--bottom {
-      &:before {
+      &::before {
         top: -$ouiPopoverArrowSize;
         border-left: $ouiPopoverArrowSize solid transparent;
         border-right: $ouiPopoverArrowSize solid transparent;
         border-bottom: $ouiPopoverArrowSize solid $ouiBorderColor;
       }
 
-      &:after {
+      &::after {
         top: -$ouiPopoverArrowSize + 1;
         border-left: $ouiPopoverArrowSize solid transparent;
         border-right: $ouiPopoverArrowSize solid transparent;
@@ -141,7 +141,7 @@
     }
 
     &.ouiPopover__panelArrow--left {
-      &:before {
+      &::before {
         right: -$ouiPopoverArrowSize + 1;
         top: 50%;
         border-top: $ouiPopoverArrowSize solid transparent;
@@ -149,7 +149,7 @@
         border-left: $ouiPopoverArrowSize solid $ouiBorderColor;
       }
 
-      &:after {
+      &::after {
         right: -$ouiPopoverArrowSize + 2;
         top: 50%;
         border-top: $ouiPopoverArrowSize solid transparent;
diff --git a/src/components/popover/_variables.scss b/src/components/popover/_variables.scss
index 2bfa6742c2..01c3fafb05 100644
--- a/src/components/popover/_variables.scss
+++ b/src/components/popover/_variables.scss
@@ -16,4 +16,5 @@ $ouiPopoverTranslateDistance: $ouiSizeS !default;
 /* OUI -> EUI Aliases */
 $euiPopoverArrowSize: $ouiPopoverArrowSize;
 $euiPopoverTranslateDistance: $ouiPopoverTranslateDistance;
+
 /* End of Aliases */
diff --git a/src/components/progress/_progress.scss b/src/components/progress/_progress.scss
index d1e7e19c7b..a93a0fe006 100644
--- a/src/components/progress/_progress.scss
+++ b/src/components/progress/_progress.scss
@@ -10,7 +10,6 @@
  */
 
 // This file uses uncommon vendor prefixes not covered by our compilers
-// sass-lint:disable no-vendor-prefixes
 
 .ouiProgress {
   position: relative;
@@ -60,7 +59,7 @@ $ouiProgressSizes: (
  * See https://css-tricks.com/html5-progress-element/ for more info.
  */
 .ouiProgress--indeterminate {
-  &:before {
+  &::before {
     position: absolute;
     content: '';
     width: 100%;
@@ -113,13 +112,13 @@ $ouiProgressSizes: (
     }
 
     &.ouiProgress--indeterminate {
-      &:before {
+      &::before {
         background-color: $color;
       }
     }
   }
 
-  @if ($name != 'customColor') {
+  @if  $name != 'customColor' {
     .ouiProgress__data--#{$name} {
       .ouiProgress__valueText {
         color: makeHighContrastColor($color);
@@ -179,4 +178,5 @@ $ouiProgressSizes: (
 
 /* OUI -> EUI Aliases */
 $euiProgressSizes: $ouiProgressSizes;
+
 /* End of Aliases */
diff --git a/src/components/progress/_variables.scss b/src/components/progress/_variables.scss
index 1e67796cd9..db3144c396 100644
--- a/src/components/progress/_variables.scss
+++ b/src/components/progress/_variables.scss
@@ -35,4 +35,5 @@ $ouiProgressColors: (
 
 /* OUI -> EUI Aliases */
 $euiProgressColors: $ouiProgressColors;
+
 /* End of Aliases */
diff --git a/src/components/resizable_container/_resizable_button.scss b/src/components/resizable_container/_resizable_button.scss
index 40ddf37f0c..8e33486839 100644
--- a/src/components/resizable_container/_resizable_button.scss
+++ b/src/components/resizable_container/_resizable_button.scss
@@ -16,8 +16,8 @@
   flex-shrink: 0;
   z-index: $ouiZLevel1;
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: '';
     display: block;
     position: absolute;
@@ -38,17 +38,17 @@
     margin-left: -($ouiResizableButtonSize / 2);
     margin-right: -($ouiResizableButtonSize / 2);
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       width: 1px;
       height: $ouiSizeM;
     }
 
-    &:before {
+    &::before {
       transform: translate(-2px, -50%);
     }
 
-    &:after {
+    &::after {
       transform: translate(1px, -50%);
     }
   }
@@ -59,37 +59,38 @@
     margin-top: -($ouiResizableButtonSize / 2);
     margin-bottom: -($ouiResizableButtonSize / 2);
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       width: $ouiSizeM;
       height: 1px;
     }
 
-    &:before {
+    &::before {
       transform: translate(-50%, -2px);
     }
 
-    &:after {
+    &::after {
       transform: translate(-50%, 1px);
     }
   }
 
-  //Lighten the "grab" icon on :hover
+  // Lighten the "grab" icon on :hover
   &:hover:not(:disabled) {
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       background-color: $ouiColorMediumShade;
-      transition-delay: $ouiResizableButtonTransitionSpeed; //Delay transition on hover so animation is not accidentally triggered on mouse over
+      transition-delay: $ouiResizableButtonTransitionSpeed; // Delay transition on hover so animation is not accidentally triggered on mouse over
     }
   }
 
-  //Add a transparent background to the container and emphasis the "grab" icon with primary color on :focus
+  // Add a transparent background to the container and emphasis the "grab" icon with primary color on :focus
   &:focus:not(:disabled) {
     background-color: transparentize($ouiColorPrimary, .9);
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       background-color: $ouiColorPrimary;
+
       // Overrides default transition so that "grab" icon background-color doesn't animate
       transition: (
         width $ouiResizableButtonTransitionSpeed ease,
@@ -100,41 +101,41 @@
     }
   }
 
-  //Morph the "grab" icon into a fluid 2px straight line on :hover and :focus
+  // Morph the "grab" icon into a fluid 2px straight line on :hover and :focus
   &:hover:not(:disabled),
   &:focus:not(:disabled) {
     &.ouiResizableButton--horizontal {
-      &:before,
-      &:after {
+      &::before,
+      &::after {
         height: 100%;
       }
 
-      &:before {
+      &::before {
         transform: translate(-1px, -50%);
       }
 
-      &:after {
+      &::after {
         transform: translate(0, -50%);
       }
     }
 
     &.ouiResizableButton--vertical {
-      &:before,
-      &:after {
+      &::before,
+      &::after {
         width: 100%;
       }
 
-      &:before {
+      &::before {
         transform: translate(-50%, -1px);
       }
 
-      &:after {
+      &::after {
         transform: translate(-50%, 0);
       }
     }
   }
 
   &:disabled {
-    display: none !important; // sass-lint:disable-line no-important
+    display: none !important;
   }
 }
diff --git a/src/components/resizable_container/_resizable_collapse_button.scss b/src/components/resizable_container/_resizable_collapse_button.scss
index 54ca724f98..68b88ca6e0 100644
--- a/src/components/resizable_container/_resizable_collapse_button.scss
+++ b/src/components/resizable_container/_resizable_collapse_button.scss
@@ -10,7 +10,6 @@
  */
 
 // This file has lots of modifiers and is somewhat nesty by nature because of positioning
-// sass-lint:disable nesting-depth
 
 /**
  * 1. The default position of the button should always be `middle`, so
@@ -21,10 +20,13 @@
 
 .ouiResizableToggleButton {
   @include ouiSlightShadow;
+
   position: absolute;
   z-index: $ouiZLevel1 + 1;
+
   // Remove animations from OuiButtonIcon because of the custom transforms
-  animation: none !important; // sass-lint:disable-line no-important
+  animation: none !important;
+
   // Remove transition from OuiButtonIcon because of the custom transforms
   transition-property: background, box-shadow;
 
@@ -38,7 +40,7 @@
     border-radius: 0;
   }
 
-  &:not(:focus):not(:active):not(.ouiResizableToggleButton-isVisible):not(.ouiResizableToggleButton-isCollapsed) {
+  &:not(:focus, :active, .ouiResizableToggleButton-isVisible, .ouiResizableToggleButton-isCollapsed) {
     @include ouiScreenReaderOnly;
   }
 }
@@ -80,9 +82,9 @@
     }
 
     &.ouiResizableToggleButton-isCollapsed {
-      top: 0 !important; // sass-lint:disable-line no-important
-      bottom: 0 !important; // sass-lint:disable-line no-important
-      transform: none !important; // sass-lint:disable-line no-important
+      top: 0 !important;
+      bottom: 0 !important;
+      transform: none !important;
       height: 100%;
 
       &.ouiResizableToggleButton--top {
@@ -135,10 +137,10 @@
     }
 
     &.ouiResizableToggleButton-isCollapsed {
-      top: 0 !important; // sass-lint:disable-line no-important
-      bottom: 0 !important; // sass-lint:disable-line no-important
-      left: 0 !important; // sass-lint:disable-line no-important
-      transform: none !important; // sass-lint:disable-line no-important
+      top: 0 !important;
+      bottom: 0 !important;
+      left: 0 !important;
+      transform: none !important;
       width: 100%;
 
       &.ouiResizableToggleButton--left {
diff --git a/src/components/resizable_container/_resizable_panel.scss b/src/components/resizable_container/_resizable_panel.scss
index 7be3a76fc1..ca9b57ef76 100644
--- a/src/components/resizable_container/_resizable_panel.scss
+++ b/src/components/resizable_container/_resizable_panel.scss
@@ -30,6 +30,7 @@
 
 .ouiResizablePanel__content--scrollable {
   @include ouiScrollBar;
+
   overflow-y: auto;
 }
 
@@ -43,20 +44,20 @@
 
 .ouiResizableContainer--horizontal {
   .ouiResizablePanel-isCollapsed {
-    min-width: 0 !important; // sass-lint:disable-line no-important
+    min-width: 0 !important;
   }
 
   .ouiResizablePanel--collapsible.ouiResizablePanel-isCollapsed {
-    min-width: $ouiSizeL !important; // sass-lint:disable-line no-important
+    min-width: $ouiSizeL !important;
   }
 }
 
 .ouiResizableContainer--vertical {
   .ouiResizablePanel-isCollapsed {
-    min-height: 0 !important; // sass-lint:disable-line no-important
+    min-height: 0 !important;
   }
 
   .ouiResizablePanel--collapsible.ouiResizablePanel-isCollapsed {
-    min-height: $ouiSizeL !important; // sass-lint:disable-line no-important
+    min-height: $ouiSizeL !important;
   }
 }
diff --git a/src/components/resizable_container/_variables.scss b/src/components/resizable_container/_variables.scss
index 5b37983fea..0293048f5f 100644
--- a/src/components/resizable_container/_variables.scss
+++ b/src/components/resizable_container/_variables.scss
@@ -16,4 +16,5 @@ $ouiResizableButtonSize: $ouiSize !default;
 /* OUI -> EUI Aliases */
 $euiResizableButtonTransitionSpeed: $ouiResizableButtonTransitionSpeed;
 $euiResizableButtonSize: $ouiResizableButtonSize;
+
 /* End of Aliases */
diff --git a/src/components/schema/_schema_item.scss b/src/components/schema/_schema_item.scss
index 474458cebf..e627cd7829 100644
--- a/src/components/schema/_schema_item.scss
+++ b/src/components/schema/_schema_item.scss
@@ -11,7 +11,6 @@
 
 .ouiSchemaItem {
   display: flex;
-  // sass-lint:disable-block no-misspelled-properties
   gap: $ouiSizeS;
   align-items: center;
   padding: $ouiSizeS;
@@ -38,7 +37,6 @@
 }
 
 .ouiSchemaItem__actions {
-  // sass-lint:disable-block no-misspelled-properties
   gap: $ouiSizeXS;
   display: flex;
 
@@ -54,6 +52,7 @@
 
 .ouiSchemaItem--withPanel {
   @include ouiBottomShadowSmall;
+
   border: $ouiBorderThin;
 
   &:hover {
@@ -63,7 +62,6 @@
 
 .ouiSchemaItem--compressed {
   padding: $ouiSizeXS;
-  // sass-lint:disable-block no-misspelled-properties
   gap: $ouiSizeXS;
   font-size: $ouiFontSizeXS;
 
diff --git a/src/components/selectable/selectable_list/_selectable_list.scss b/src/components/selectable/selectable_list/_selectable_list.scss
index b58bec7125..eb65ee8bfd 100644
--- a/src/components/selectable/selectable_list/_selectable_list.scss
+++ b/src/components/selectable/selectable_list/_selectable_list.scss
@@ -33,6 +33,7 @@
 
 .ouiSelectableList__groupLabel {
   @include ouiTitle('xxxs');
+
   display: flex;
   align-items: center;
   border-bottom: $ouiSelectableListItemBorder;
diff --git a/src/components/selectable/selectable_list/_selectable_list_item.scss b/src/components/selectable/selectable_list/_selectable_list_item.scss
index 38583bd594..78fcc33249 100644
--- a/src/components/selectable/selectable_list/_selectable_list_item.scss
+++ b/src/components/selectable/selectable_list/_selectable_list_item.scss
@@ -11,6 +11,7 @@
 
 .ouiSelectableListItem {
   @include ouiFontSizeS;
+
   display: inline-flex; // Necessary to make sure it doesn't force the whole popover to be too wide
   width: 100%;
   text-align: left;
@@ -57,5 +58,6 @@
 
 .ouiSelectableListItem__text {
   @include ouiTextTruncate;
+
   flex-grow: 1; // Pushes appended content to the far right
 }
diff --git a/src/components/selectable/selectable_list/_variables.scss b/src/components/selectable/selectable_list/_variables.scss
index 336639fb1b..731d783313 100644
--- a/src/components/selectable/selectable_list/_variables.scss
+++ b/src/components/selectable/selectable_list/_variables.scss
@@ -16,4 +16,5 @@ $ouiSelectableListItemPadding: $ouiSizeXS $ouiSizeM;
 /* OUI -> EUI Aliases */
 $euiSelectableListItemBorder: $ouiSelectableListItemBorder;
 $euiSelectableListItemPadding: $ouiSelectableListItemPadding;
+
 /* End of Aliases */
diff --git a/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss b/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss
index 28e157eb9f..87e6138582 100644
--- a/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss
+++ b/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss
@@ -11,7 +11,7 @@
 
 .ouiSelectableTemplateSitewide__listItem {
   .ouiSelectableListItem__text {
-    text-decoration: none !important; // sass-lint:disable-line no-important
+    text-decoration: none !important;
   }
 
   // TODO: Any better way to override this focus underline?
diff --git a/src/components/selectable/selectable_templates/_variables.scss b/src/components/selectable/selectable_templates/_variables.scss
index d69a045abb..cef839ebfb 100644
--- a/src/components/selectable/selectable_templates/_variables.scss
+++ b/src/components/selectable/selectable_templates/_variables.scss
@@ -35,4 +35,5 @@ $ouiSelectableTemplateSitewideTypes: (
 
 /* OUI -> EUI Aliases */
 $euiSelectableTemplateSitewideTypes: $ouiSelectableTemplateSitewideTypes;
+
 /* End of Aliases */
diff --git a/src/components/side_nav/_index.scss b/src/components/side_nav/_index.scss
index f461e6225e..3aa7a5a9bc 100644
--- a/src/components/side_nav/_index.scss
+++ b/src/components/side_nav/_index.scss
@@ -11,6 +11,5 @@
 
 @import 'variables';
 @import 'mixins';
-
 @import 'side_nav';
 @import 'side_nav_item';
diff --git a/src/components/side_nav/_mixins.scss b/src/components/side_nav/_mixins.scss
index d246c268c7..ec3fd597a6 100644
--- a/src/components/side_nav/_mixins.scss
+++ b/src/components/side_nav/_mixins.scss
@@ -9,8 +9,6 @@
  * GitHub history for details.
  */
 
-// sass-lint:disable indentation no-color-keywords no-color-literals
-
 @mixin ouiSideNavEmbellish {
   background:
     linear-gradient(160deg, $ouiSideNavEmphasizedBackgroundColor 0, $ouiSideNavEmphasizedBackgroundColor $ouiSizeXL, rgba(red, 0) 0),
@@ -20,4 +18,5 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiSideNavEmbellish { @include ouiSideNavEmbellish; }
+
 /* End of Aliases */
diff --git a/src/components/side_nav/_side_nav.scss b/src/components/side_nav/_side_nav.scss
index b532edc108..b50dd0ba09 100644
--- a/src/components/side_nav/_side_nav.scss
+++ b/src/components/side_nav/_side_nav.scss
@@ -15,7 +15,7 @@
   border-bottom: $ouiBorderThin;
   width: 100%;
   text-align: left;
-  border-radius: 0 !important; // sass-lint:disable-line no-important
+  border-radius: 0 !important;
   font-size: $ouiFontSizeM;
   padding: 0 $ouiSize; // This plus the inner padding is equal to paddingSize large for OuiPage
 
diff --git a/src/components/side_nav/_side_nav_item.scss b/src/components/side_nav/_side_nav_item.scss
index d8719ac570..6dbe01d74a 100644
--- a/src/components/side_nav/_side_nav_item.scss
+++ b/src/components/side_nav/_side_nav_item.scss
@@ -19,6 +19,7 @@
 
 .ouiSideNavItemButton {
   @include ouiFontSizeS;
+
   text-align: left; /* 1 */
   display: block;
   width: 100%;
@@ -92,6 +93,7 @@
 
     .ouiSideNavItemButton__label {
       @include ouiTitle('xs');
+
       color: inherit;
     }
   }
@@ -100,7 +102,7 @@
     position: static;
     margin-left: 0;
 
-    &:after {
+    &::after {
       display: none;
     }
   }
@@ -159,7 +161,7 @@
     padding-left: $ouiSizeS;
     padding-right: $ouiSizeS; /* 2 */
 
-    &:after {
+    &::after {
       position: absolute; /* 2 */
       content: '';
       top: $ouiSizeM;
@@ -178,6 +180,7 @@
 .ouiSideNavItem--emphasized {
   background: $ouiSideNavEmphasizedBackgroundColor;
   color: $ouiSideNavRootTextcolor;
+
   // The large y values allow the shadow to stretch beyond the side nav bounds to it's parents container
   box-shadow: 100px 0 0 0 $ouiSideNavEmphasizedBackgroundColor, -100px 0 0 0 $ouiSideNavEmphasizedBackgroundColor;
 
diff --git a/src/components/side_nav/_variables.scss b/src/components/side_nav/_variables.scss
index 2acea9798f..52956c604f 100644
--- a/src/components/side_nav/_variables.scss
+++ b/src/components/side_nav/_variables.scss
@@ -16,6 +16,7 @@ $ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorLightShade, .7);
 @function ouiSideNavEmphasizedContrast($textColor, $ratio: $ouiContrastRatioText) {
   $backgroundColorSimulated: mix($ouiPageBackgroundColor, $ouiColorLightShade, 70%);
   $color: makeHighContrastColor($textColor, $backgroundColorSimulated, $ratio);
+
   @return $color;
 }
 
@@ -32,5 +33,7 @@ $euiSideNavRootTextcolor: $ouiSideNavRootTextcolor;
 $euiSideNavBranchTextcolor: $ouiSideNavBranchTextcolor;
 $euiSideNavSelectedTextcolor: $ouiSideNavSelectedTextcolor;
 $euiSideNavDisabledTextcolor: $ouiSideNavDisabledTextcolor;
+
 @function euiSideNavEmphasizedContrast($textColor, $ratio: $ouiContrastRatioText) { @return ouiSideNavEmphasizedContrast($textColor, $ratio); }
+
 /* End of Aliases */
diff --git a/src/components/steps/_index.scss b/src/components/steps/_index.scss
index 4ddf1d828b..bd2f13c330 100644
--- a/src/components/steps/_index.scss
+++ b/src/components/steps/_index.scss
@@ -11,7 +11,6 @@
 
 @import 'variables';
 @import 'mixins';
-
 @import 'step_number';
 @import 'steps';
 @import 'sub_steps';
diff --git a/src/components/steps/_step_number.scss b/src/components/steps/_step_number.scss
index 05ef0f9442..a95521f20d 100644
--- a/src/components/steps/_step_number.scss
+++ b/src/components/steps/_step_number.scss
@@ -59,7 +59,8 @@
   @each $name, $color in $ouiStepStatusColorsToFade {
     &--#{$name} {
       $backgroundColor: $color;
-      @if (saturation($color) > 0%) {
+
+      @if  saturation($color) > 0% {
         $backgroundColor: tintOrShade($color, 90%, 70%);
       }
 
diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss
index 63502d353e..43e8166231 100644
--- a/src/components/steps/_steps.scss
+++ b/src/components/steps/_steps.scss
@@ -14,7 +14,6 @@
  */
 
 .ouiStep {
-  // sass-lint:disable indentation
   // Create border on all but the last step
   &:not(:last-of-type) {
     background-image: linear-gradient(
diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss
index c5be21590f..37f2c13414 100644
--- a/src/components/steps/_steps_horizontal.scss
+++ b/src/components/steps/_steps_horizontal.scss
@@ -99,6 +99,7 @@
 
 .ouiStepHorizontal__title {
   @include ouiTitle('xs');
+
   margin-top: $ouiSizeS;
   font-weight: $ouiFontWeightRegular;
   text-align: center;
@@ -118,7 +119,7 @@
 
 // Selected state
 .ouiStepHorizontal-isSelected {
-  .ouiStepHorizontal__number:not([class*='danger']):not([class*='warning']):not([class*='loading']) {
+  .ouiStepHorizontal__number:not([class*='danger'], [class*='warning'], [class*='loading']) {
     @include ouiSlightShadow(desaturate($ouiColorPrimary, 20%));
   }
 
diff --git a/src/components/steps/_variables.scss b/src/components/steps/_variables.scss
index 137cb1802c..99c1a82872 100644
--- a/src/components/steps/_variables.scss
+++ b/src/components/steps/_variables.scss
@@ -27,4 +27,5 @@ $euiStepNumberSize: $ouiStepNumberSize;
 $euiStepNumberSmallSize: $ouiStepNumberSmallSize;
 $euiStepNumberMargin: $ouiStepNumberMargin;
 $euiStepStatusColorsToFade: $ouiStepStatusColorsToFade;
+
 /* End of Aliases */
diff --git a/src/components/suggest/_index.scss b/src/components/suggest/_index.scss
index f465e27e82..c4656f0e18 100644
--- a/src/components/suggest/_index.scss
+++ b/src/components/suggest/_index.scss
@@ -10,7 +10,5 @@
  */
 
 @import 'variables';
-
 @import 'suggest_item';
-
 @import 'suggest_input';
diff --git a/src/components/suggest/_suggest_input.scss b/src/components/suggest/_suggest_input.scss
index 5f9548e3ee..24358b2c2d 100644
--- a/src/components/suggest/_suggest_input.scss
+++ b/src/components/suggest/_suggest_input.scss
@@ -10,6 +10,5 @@
  */
 
 .ouiSuggestInput__statusIcon {
-  // sass-lint:disable-block no-important
   background-color: transparent !important; // Override typical append coloring
 }
diff --git a/src/components/suggest/_suggest_item.scss b/src/components/suggest/_suggest_item.scss
index 443ca3462b..a9fb33be94 100644
--- a/src/components/suggest/_suggest_item.scss
+++ b/src/components/suggest/_suggest_item.scss
@@ -25,7 +25,7 @@
       cursor: pointer;
       background-color: $ouiColorLightestShade;
 
-      .ouiSuggestItem__type { //sass-lint:disable-line nesting-depth
+      .ouiSuggestItem__type {
         color: $ouiColorDarkestShade;
       }
     }
@@ -34,6 +34,7 @@
   @each $name, $color in $ouiSuggestItemColors {
     .ouiSuggestItem__type--#{$name} {
       $backgroundColor: tintOrShade($color, 82%, 70%);
+
       background-color: $backgroundColor;
       color: makeHighContrastColor($color, $backgroundColor);
     }
@@ -62,6 +63,7 @@
 
   .ouiSuggestItem__label {
     @include ouiTextTruncate;
+
     font-family: var(--oui-code-font-family);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -74,6 +76,8 @@
       &.ouiSuggestItem__label--width#{$i} {
         flex-basis: $i * 1%;
         min-width: $i * 1%;
+
+        /* stylelint-disable-next-line scss/dollar-variable-pattern */
         $i: $i + 10;
       }
     }
@@ -92,12 +96,14 @@
 
     &.ouiSuggestItem__description--wrap {
       @include ouiTextBreakWord;
+
       white-space: normal;
       line-height: $ouiSizeM + 2px;
     }
 
     &.ouiSuggestItem__description--truncate {
       @include ouiTextTruncate;
+
       line-height: $ouiLineHeight;
     }
 
diff --git a/src/components/suggest/_variables.scss b/src/components/suggest/_variables.scss
index 0d4fb83b46..d13a88bf93 100644
--- a/src/components/suggest/_variables.scss
+++ b/src/components/suggest/_variables.scss
@@ -26,4 +26,5 @@ $ouiSuggestItemColors: (
 
 /* OUI -> EUI Aliases */
 $euiSuggestItemColors: $ouiSuggestItemColors;
+
 /* End of Aliases */
diff --git a/src/components/table/_index.scss b/src/components/table/_index.scss
index 64e8cd04ed..ab8024e010 100644
--- a/src/components/table/_index.scss
+++ b/src/components/table/_index.scss
@@ -11,8 +11,6 @@
 
 @import 'variables';
 @import 'mixins';
-
 @import 'table';
 @import 'responsive';
-
 @import 'mobile/index';
diff --git a/src/components/table/_mixins.scss b/src/components/table/_mixins.scss
index 871038e7b3..c3c570331f 100644
--- a/src/components/table/_mixins.scss
+++ b/src/components/table/_mixins.scss
@@ -19,6 +19,7 @@
 
 @mixin ouiTableCellCheckbox {
   @include ouiTableCell;
+
   width: $ouiTableCellCheckboxWidth;
   vertical-align: middle;
 }
@@ -33,6 +34,9 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiTableCell { @include ouiTableCell; }
+
 @mixin euiTableCellCheckbox { @include ouiTableCellCheckbox; }
+
 @mixin euiTableActionsBackgroundMobile { @include ouiTableActionsBackgroundMobile; }
+
 /* End of Aliases */
diff --git a/src/components/table/_responsive.scss b/src/components/table/_responsive.scss
index 239cd60547..9e5409422c 100644
--- a/src/components/table/_responsive.scss
+++ b/src/components/table/_responsive.scss
@@ -16,20 +16,17 @@
 
 @include ouiBreakpoint('xs', 's') {
   .ouiTableRowCell--hideForMobile { // must come last to override any special cases
-    // sass-lint:disable-block no-important
     display: none !important;
   }
 }
 
 @include ouiBreakpoint('m', 'l', 'xl') {
   .ouiTableRowCell--hideForDesktop { // must come last to override any special cases
-    // sass-lint:disable-block no-important
     display: none !important;
   }
 }
 
 @include ouiBreakpoint('xs', 's') {
-
   .ouiTable.ouiTable--responsive {
     // Not allowing compressed styles in mobile view (for now)
 
@@ -77,6 +74,7 @@
 
     .ouiTableRow {
       @include ouiBottomShadowSmall;
+
       background-color: map-get($ouiPanelBackgroundColorModifiers, 'plain');
       border-radius: $ouiBorderRadius;
       display: flex;
@@ -91,6 +89,7 @@
       &.ouiTableRow-isExpandable,
       &.ouiTableRow-hasActions {
         @include ouiTableActionsBackgroundMobile;
+
         padding-right: $ouiSizeXXL;
         position: relative;
       }
@@ -149,6 +148,7 @@
       &.ouiTableRow-isExpandedRow {
         @include ouiTableActionsBackgroundMobile;
         @include ouiBottomShadowSmall;
+
         margin-top: -$ouiTableCellContentPadding * 2;
         position: relative;
         z-index: 2; // on top of its parent/previous row
diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
index e8dd67a6e6..6704152616 100644
--- a/src/components/table/_table.scss
+++ b/src/components/table/_table.scss
@@ -37,6 +37,7 @@
   .ouiTable--compressed {
     .ouiTableCellContent {
       @include ouiFontSizeXS;
+
       padding: $ouiTableCellContentPaddingCompressed;
     }
   }
@@ -46,6 +47,7 @@
 .ouiTableHeaderCell {
   @include ouiTableCell;
   @include ouiTitle('xxs');
+
   font-weight: $ouiFontWeightMedium;
   border-top: none;
 
@@ -56,12 +58,14 @@
 
   .ouiTableCellContent__text {
     @include ouiFontSizeXS;
+
     font-weight: $ouiFontWeightSemiBold;
   }
 }
 
 .ouiTableHeaderButton {
   @include ouiFontSizeS;
+
   color: inherit;
   width: 100%;
 
@@ -89,6 +93,7 @@
 
 .ouiTableHeaderCellCheckbox {
   @include ouiTableCellCheckbox;
+
   border-top: none;
 }
 
@@ -99,7 +104,6 @@
 
 
   &.ouiTableRow-isClickable {
-
     &:hover {
       background-color: $ouiTableHoverClickableColor;
       cursor: pointer;
@@ -169,6 +173,7 @@
 
 .ouiTableCellContent__text {
   @include ouiTextBreakWord; /* 4 */
+
   min-width: 0;
   text-overflow: ellipsis;
 }
@@ -196,7 +201,8 @@
 .ouiTableCellContent--overflowingContent {
   overflow: visible;
   white-space: normal;
-  //* 4 */ overflow-wrap is not supported on flex parents
+
+  // * 4 */ overflow-wrap is not supported on flex parents
   word-break: break-all; // Fallback for FF and IE
   word-break: break-word;
 }
diff --git a/src/components/table/_variables.scss b/src/components/table/_variables.scss
index 2d83d03a2d..22d4cdcaeb 100644
--- a/src/components/table/_variables.scss
+++ b/src/components/table/_variables.scss
@@ -13,9 +13,7 @@
 
 $ouiTableCellContentPadding: $ouiSizeS;
 $ouiTableCellContentPaddingCompressed: $ouiSizeXS;
-
 $ouiTableCellCheckboxWidth: $ouiSizeXL;
-
 $ouiTableActionsAreaWidth: $ouiSizeXXL;
 
 // Colors
@@ -39,4 +37,5 @@ $euiTableHoverSelectedColor: $ouiTableHoverSelectedColor;
 $euiTableActionsBorderColor: $ouiTableActionsBorderColor;
 $euiTableHoverClickableColor: $ouiTableHoverClickableColor;
 $euiTableFocusClickableColor: $ouiTableFocusClickableColor;
+
 /* End of Aliases */
diff --git a/src/components/table/mobile/_mobile.scss b/src/components/table/mobile/_mobile.scss
index 01e1e2cea7..12dc1ad18f 100644
--- a/src/components/table/mobile/_mobile.scss
+++ b/src/components/table/mobile/_mobile.scss
@@ -16,7 +16,6 @@
 }
 
 @include ouiBreakpoint('xs', 's') {
-
   .ouiTableHeaderMobile {
     display: flex;
     justify-content: flex-end;
diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
index 092fcce7ae..d73eb4333c 100644
--- a/src/components/tabs/_tabs.scss
+++ b/src/components/tabs/_tabs.scss
@@ -11,6 +11,7 @@
 
 .ouiTabs {
   @include ouiScrollBar;
+
   display: flex;
   max-width: 100%;
   overflow-x: auto;
@@ -19,7 +20,6 @@
   flex-shrink: 0; // don't ever let this shrink in height if direct descendent of flex
 
   // Changing height of scrollbar so it sits flush with border
-  // sass-lint:disable no-vendor-prefixes
   &::-webkit-scrollbar {
     height: 3px;
   }
@@ -37,6 +37,7 @@
 
 .ouiTab {
   @include fontSize($ouiTabFontSize);
+
   color: $ouiTextColor;
   background-color: transparent;
   cursor: pointer;
@@ -99,6 +100,7 @@
 
   .ouiTabs--small & {
     @include fontSize($ouiTabFontSizeS);
+
     padding: $ouiSizeS;
   }
 
diff --git a/src/components/tabs/_variables.scss b/src/components/tabs/_variables.scss
index 1b281ae579..bb4100c0fa 100644
--- a/src/components/tabs/_variables.scss
+++ b/src/components/tabs/_variables.scss
@@ -18,4 +18,5 @@ $ouiTabFontSizeL: $ouiFontSizeM !default;
 $euiTabFontSize: $ouiTabFontSize;
 $euiTabFontSizeS: $ouiTabFontSizeS;
 $euiTabFontSizeL: $ouiTabFontSizeL;
+
 /* End of Aliases */
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
index e258b7e5c5..79b6e6a12d 100644
--- a/src/components/text/_text.scss
+++ b/src/components/text/_text.scss
@@ -13,6 +13,7 @@
 
 @mixin ouiScaleText($baseFontSize) {
   $baseLineHeightMultiplier: $baseFontSize / 2;
+
   line-height: convertToRem($baseLineHeightMultiplier * 3);
 
   p,
@@ -111,10 +112,12 @@
 .ouiText {
   @include ouiText;
   @include ouiFontSize;
+
   // The ouiText mixin forces a color. Since ouiText is usually a child
   // of other styling concerns, we should inherit their coloring. The default
   // coloring will likely coming from the reset.scss anyway.
   color: inherit;
+
   // OuiImage with floats are often used within OuiText.
   clear: both;
 
@@ -160,8 +163,8 @@
       margin-bottom: 0;
     }
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       position: absolute;
       content: '';
       height: 2px;
@@ -171,11 +174,11 @@
       background: $ouiColorDarkShade;
     }
 
-    &:before {
+    &::before {
       top: 0;
     }
 
-    &:after {
+    &::after {
       bottom: 0;
     }
   }
@@ -203,6 +206,7 @@
 
   h6 {
     @include ouiTitle('xxxs');
+
     text-transform: uppercase;
   }
 
@@ -221,6 +225,7 @@
 
   code {
     @include ouiCodeFont;
+
     display: inline-block; // ensures background stretches the full line-height
     font-weight: $ouiFontWeightRegular;
   }
@@ -229,6 +234,7 @@
 
   &.ouiText--constrainedWidth {
     max-width: $ouiTextConstrainedMaxWidth;
+
     // If the max-width is way too short of the width of the container,
     // at least make it 2/3 of its parent
     min-width: 75%;
@@ -236,7 +242,7 @@
 
   > :last-child,
   .ouiTextColor > :last-child {
-    margin-bottom: 0 !important; // sass-lint:disable-line no-important
+    margin-bottom: 0 !important;
   }
 }
 
@@ -253,4 +259,5 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiScaleText($baseFontSize) { @include ouiScaleText($baseFontSize); }
+
 /* End of Aliases */
diff --git a/src/components/text/_text_color.scss b/src/components/text/_text_color.scss
index 0c0dfafd63..2f2335beab 100644
--- a/src/components/text/_text_color.scss
+++ b/src/components/text/_text_color.scss
@@ -24,12 +24,11 @@ $ouiTextColors: (
 // Create color modifiers based on the map
 @each $name, $color in $ouiTextColors {
   .ouiTextColor--#{$name} {
-
     // The below function makes sure the color is accessible on our default background.
     color: makeHighContrastColor($color, $ouiColorEmptyShade);
 
     @if $name == 'ghost' {
-      color: $color !important; // sass-lint:disable-line no-important
+      color: $color !important;
     }
   }
 }
@@ -37,4 +36,5 @@ $ouiTextColors: (
 
 /* OUI -> EUI Aliases */
 $euiTextColors: $ouiTextColors;
+
 /* End of Aliases */
diff --git a/src/components/text/_variables.scss b/src/components/text/_variables.scss
index 3d6736a7a3..f3cd2f1b8f 100644
--- a/src/components/text/_variables.scss
+++ b/src/components/text/_variables.scss
@@ -14,4 +14,5 @@ $ouiTextConstrainedMaxWidth: 36em;
 
 /* OUI -> EUI Aliases */
 $euiTextConstrainedMaxWidth: $ouiTextConstrainedMaxWidth;
+
 /* End of Aliases */
diff --git a/src/components/toast/_global_toast_list.scss b/src/components/toast/_global_toast_list.scss
index bf4ff3c043..2b20b88be6 100644
--- a/src/components/toast/_global_toast_list.scss
+++ b/src/components/toast/_global_toast_list.scss
@@ -15,6 +15,7 @@
  */
 .ouiGlobalToastList {
   @include ouiScrollBar;
+
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -26,10 +27,8 @@
   overflow-y: auto;
 
   // Hide the scrollbar entirely
-  // sass-lint:disable-block no-misspelled-properties
   scrollbar-width: none;
 
-  // sass-lint:disable-block no-vendor-prefixes
   &::-webkit-scrollbar {
     width: 0;
     height: 0;
diff --git a/src/components/toast/_index.scss b/src/components/toast/_index.scss
index 8db31b181a..277684a94d 100644
--- a/src/components/toast/_index.scss
+++ b/src/components/toast/_index.scss
@@ -17,4 +17,5 @@ $ouiToastWidth: $ouiSize * 20;
 
 /* OUI -> EUI Aliases */
 $euiToastWidth: $ouiToastWidth;
+
 /* End of Aliases */
diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss
index 59f5b34b58..9a36151a21 100644
--- a/src/components/toast/_toast.scss
+++ b/src/components/toast/_toast.scss
@@ -11,8 +11,8 @@
 
 .ouiToast {
   border: $ouiBorderThin;
+
   // This overwrites some of the border above
-  // sass-lint:disable-block mixins-before-declarations
   @include ouiBottomShadowLarge($adjustBorders: true);
 
   position: relative;
@@ -100,6 +100,7 @@ $ouiToastTypes: (
 .ouiToastHeader__title {
   @include ouiTitle('xs');
   @include ouiTextBreakWord;
+
   font-weight: $ouiFontWeightLight;
 }
 
@@ -117,4 +118,5 @@ $ouiToastTypes: (
 
 /* OUI -> EUI Aliases */
 $euiToastTypes: $ouiToastTypes;
+
 /* End of Aliases */
diff --git a/src/components/token/_variables.scss b/src/components/token/_variables.scss
index 1e53cbbd11..74e236e20a 100644
--- a/src/components/token/_variables.scss
+++ b/src/components/token/_variables.scss
@@ -9,8 +9,6 @@
  * GitHub history for details.
  */
 
-// sass-lint:disable indentation
-
 $ouiTokenGrayColor: lightOrDarkTheme($ouiColorDarkShade, $ouiColorMediumShade);
 
 // Appends the gray color to the color blind palette
@@ -20,7 +18,6 @@ $ouiTokenTypes: map-merge($ouiPaletteColorBlind, (
     behindText: $ouiTokenGrayColor,
   )
 ));
-
 $ouiTokenTypeKeys: map-keys($ouiTokenTypes);
 
 
@@ -33,4 +30,5 @@ $euiTokenTypes: map-merge($euiPaletteColorBlind, (
   )
 ));
 $euiTokenTypeKeys: map-keys($euiTokenTypes);
+
 /* End of Aliases */
diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss
index 59b0c23594..f410f7edcd 100644
--- a/src/components/tool_tip/_tool_tip.scss
+++ b/src/components/tool_tip/_tool_tip.scss
@@ -16,13 +16,14 @@
 .ouiToolTip {
   @include ouiToolTipStyle;
   @include ouiToolTipAnimation('top');
+
   position: absolute;
   opacity: 0;
 
   // Custom sizing
   $arrowSize: $ouiSizeM;
-  $arrowPlusSize: (($arrowSize/2) + 1px) * -1; /* 1 */
-  $arrowMinusSize: (($arrowSize/2) - 1px) * -1; /* 1 */
+  $arrowPlusSize: (($arrowSize / 2) + 1px) * -1; /* 1 */
+  $arrowMinusSize: (($arrowSize / 2) - 1px) * -1; /* 1 */
 
   .ouiToolTip__arrow {
     content: '';
@@ -32,7 +33,6 @@
     background-color: $ouiTooltipBackgroundColor;
     width: $arrowSize;
     height: $arrowSize;
-
     transform: translateY($arrowPlusSize) rotateZ(45deg); /* 1 */
   }
 
diff --git a/src/components/tour/_tour.scss b/src/components/tour/_tour.scss
index c0cda79372..a6da8b9686 100644
--- a/src/components/tour/_tour.scss
+++ b/src/components/tour/_tour.scss
@@ -15,8 +15,9 @@
 
 .ouiTourHeader {
   border-bottom: none;
+
   // Overriding default `OuiPopoverTitle` styles
-  margin-bottom: $ouiSizeS !important; // sass-lint:disable-line no-important
+  margin-bottom: $ouiSizeS !important;
 
 
   .ouiTourHeader__title { // nested for additional specificity to override OuiTitle styles
@@ -30,8 +31,9 @@
 
 .ouiTourFooter {
   background-color: $ouiColorLightestShade;
+
   // Overriding default `OuiPopoverFooter` styles
-  margin-top: $ouiSizeL !important; // sass-lint:disable-line no-important
+  margin-top: $ouiSizeL !important;
 }
 
 .ouiTour {
@@ -59,7 +61,7 @@
   }
 
   .ouiPopover__panelArrow.ouiPopover__panelArrow--top {
-    &:after {
+    &::after {
       border-top-color: $ouiColorLightestShade;
     }
 
diff --git a/src/global_styling/functions/_colors.scss b/src/global_styling/functions/_colors.scss
index 8cf997fb1d..9645399db5 100644
--- a/src/global_styling/functions/_colors.scss
+++ b/src/global_styling/functions/_colors.scss
@@ -27,7 +27,7 @@
 // For theming. Checks the text color and tells us whether it's light or dark.
 // Based on that we either tint (add white) or shade (add black).
 @function tintOrShade($color, $tint, $shade) {
-  @if (lightness($ouiTextColor) > 50) {
+  @if  lightness($ouiTextColor) > 50 {
     @return shade($color, $shade);
   } @else {
     @return tint($color, $tint);
@@ -36,7 +36,7 @@
 
 // The reverse of the above
 @function shadeOrTint($color, $shade, $tint) {
-  @if (lightness($ouiTextColor) < 50) {
+  @if  lightness($ouiTextColor) < 50 {
     @return shade($color, $shade);
   } @else {
     @return tint($color, $tint);
@@ -46,7 +46,7 @@
 // Similar to above, but uses the light or dark color based
 // on whether it's the light or dark theme
 @function lightOrDarkTheme($lightColor, $darkColor) {
-  @if (lightness($ouiTextColor) < 50) {
+  @if  lightness($ouiTextColor) < 50 {
     @return $lightColor;
   } @else {
     @return $darkColor;
@@ -63,9 +63,8 @@
   @for $i from 1 through 3 {
     $rgb: nth($rgba, $i);
     $rgb: $rgb / 255;
-
+    /* stylelint-disable-next-line number-max-precision */
     $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4));
-
     $rgba2: append($rgba2, $rgb);
   }
 
@@ -87,7 +86,7 @@
   $lightContrast: contrastRatio($background, $lightText);
   $darkContrast: contrastRatio($background, $darkText);
 
-  @if ($lightContrast > $darkContrast) {
+  @if  $lightContrast > $darkContrast {
     @return $lightText;
   } @else {
     @return $darkText;
@@ -101,17 +100,17 @@
 // ex: makeContrastColor($lightPink, #FFF) would continually shade the pink until
 //     it had higher than 4.5 contrast on a white background.
 $ouiContrastRatioText: 4.5;
+
 @function makeHighContrastColor($foreground, $background: $ouiPageBackgroundColor, $ratio: $ouiContrastRatioText) {
   $contrast: contrastRatio($foreground, $background);
 
   // Determine the lightness factor of the background color first to
   // determine whether to shade or tint the foreground.
   $brightness: lightness($background);
-
   $highContrastTextColor: $foreground;
 
-  @while ($contrast < $ratio) {
-    @if ($brightness > 50) {
+  @while  $contrast < $ratio {
+    @if  $brightness > 50 {
       $highContrastTextColor: shade($highContrastTextColor, 5%);
     } @else {
       $highContrastTextColor: tint($highContrastTextColor, 5%);
@@ -119,12 +118,12 @@ $ouiContrastRatioText: 4.5;
 
     $contrast: contrastRatio($highContrastTextColor, $background);
 
-    @if (lightness($highContrastTextColor) < 5) {
+    @if  lightness($highContrastTextColor) < 5 {
       @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for light mode.';
       @return $highContrastTextColor;
     }
 
-    @if (lightness($highContrastTextColor) > 95) {
+    @if  lightness($highContrastTextColor) > 95 {
       @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for dark mode.';
       @return $highContrastTextColor;
     }
@@ -138,12 +137,14 @@ $ouiContrastRatioText: 4.5;
 // It is still recommended to use `makeHighContrastColor()` to attain a 4.5:1 ratio if the graphic is small or thinly stroked.
 // https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum)
 $ouiContrastRatioGraphic: 3;
+
 @function makeGraphicContrastColor($color, $background: $ouiPageBackgroundColor) {
   @return makeHighContrastColor($color, $background, $ouiContrastRatioGraphic);
 }
 
 // Disabled content only needs a contrast of at least 2 because there is no interaction available
 $ouiContrastRatioDisabled: 2;
+
 @function makeDisabledContrastColor($color, $background: $ouiPageBackgroundColor) {
   @return makeHighContrastColor($color, $background, $ouiContrastRatioDisabled);
 }
@@ -153,4 +154,5 @@ $ouiContrastRatioDisabled: 2;
 $euiContrastRatioText: $ouiContrastRatioText;
 $euiContrastRatioGraphic: $ouiContrastRatioGraphic;
 $euiContrastRatioDisabled: $ouiContrastRatioDisabled;
+
 /* End of Aliases */
diff --git a/src/global_styling/functions/_math.scss b/src/global_styling/functions/_math.scss
index 4d36cc020e..043753c6c5 100644
--- a/src/global_styling/functions/_math.scss
+++ b/src/global_styling/functions/_math.scss
@@ -9,60 +9,75 @@
  * GitHub history for details.
  */
 
-//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
 @function pow($number, $power) {
-  @if ($power != $power or ($power != 0 and $power == $power / 2)) {
+  @if  $power != $power or ($power != 0 and $power == $power / 2) {
     @return $power;
   }
-  @if ($power == 1) {
+
+  @if  $power == 1 {
     @return $number;
   }
-  @if ($power == 0) {
+
+  @if  $power == 0 {
     @return 1;
   }
-  @if ($power < 0) {
+
+  @if  $power < 0 {
     @return 1 / pow($number, -$power);
   }
-  @if (0 < $power and $power < 2) {
+
+  @if  0 < $power and $power < 2 {
     $hasLeadingOne: false;
-    @if (floor($power) == 1) {
+
+    @if  floor($power) == 1 {
       $power: $power - 1;
       $hasLeadingOne: true;
     } @else {
       $hasLeadingOne: false;
     }
+
     $doublePower: pow($number, $power * 2);
     $fullPower: nthRoot($doublePower, 2);
-    @if ($hasLeadingOne) {
+
+    @if  $hasLeadingOne {
       $fullPower: $fullPower * $number;
     }
+
     @return $fullPower;
-  } @else if (getDecimal($power) != 0) {
+  } @else if getDecimal($power) != 0 {
     $wholePower: floor($power);
     $decimalPower: getDecimal($power);
+
     @return pow($number, $wholePower) * pow($number, $decimalPower);
   } @else {
     $hasTrailingOne: $power % 2 == 1;
-    @if ($hasTrailingOne) {
+
+    @if  $hasTrailingOne {
       $power: $power - 1;
     }
+
     $halfPower: pow($number, floor($power / 2));
     $fullPower: $halfPower * $halfPower;
-    @if ($hasTrailingOne) {
+
+    @if  $hasTrailingOne {
       $fullPower: $fullPower * $number;
     }
+
     @return $fullPower;
   }
 }
 
 @function getDecimal($number) {
-  @if ($number < 0) {
+  @if  $number < 0 {
     $number: -$number;
   }
+
   @return $number % 1;
 }
 
 // From: http://rosettacode.org/wiki/Nth_root#JavaScript
+/* stylelint-disable scss/dollar-variable-pattern */
 @function nthRoot($num, $n: 2, $prec: 12) {
   $x: 1;
 
@@ -72,3 +87,4 @@
 
   @return $x;
 }
+/* stylelint-enable scss/dollar-variable-pattern */
diff --git a/src/global_styling/mixins/_beta_badge.scss b/src/global_styling/mixins/_beta_badge.scss
index 0e534c7b9a..ab6e186314 100644
--- a/src/global_styling/mixins/_beta_badge.scss
+++ b/src/global_styling/mixins/_beta_badge.scss
@@ -68,4 +68,5 @@
     }
   }
 }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss
index 26578d8b63..31f4cb5071 100644
--- a/src/global_styling/mixins/_button.scss
+++ b/src/global_styling/mixins/_button.scss
@@ -52,7 +52,6 @@
   text-decoration: none;
   border: solid 1px transparent;
 
-  // sass-lint:disable mixins-before-declarations
   // focus states should come after all default styles
   @include ouiButtonFocus;
 
@@ -81,7 +80,7 @@
     flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size
   }
 
-  @if ($isReverse) {
+  @if  $isReverse {
     flex-direction: row-reverse;
 
     > * + * {
@@ -118,8 +117,11 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiButtonBase { @include ouiButtonBase; }
+
 @mixin euiButtonFocus { @include ouiButtonFocus; }
+
 @mixin euiButton { @include ouiButton; }
+
 @mixin euiButtonContent($isReverse: false) {
   @include ouiButtonContent($isReverse);
 
@@ -128,6 +130,7 @@
     flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size
   }
 }
+
 @mixin euiButtonContentDisabled {
   @include ouiButtonContentDisabled;
 
@@ -139,4 +142,5 @@
     border-color: ouiLoadingSpinnerBorderColors(currentColor);
   }
 }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss
index dc4aa73095..fa1a879e7f 100644
--- a/src/global_styling/mixins/_form.scss
+++ b/src/global_styling/mixins/_form.scss
@@ -12,6 +12,7 @@
 // Labels
 @mixin ouiFormLabel {
   @include ouiFontSizeXS;
+
   color: $ouiTitleColor;
   font-weight: $ouiFontWeightSemiBold;
 }
@@ -21,7 +22,7 @@
   $iconPadding: $ouiFormControlPadding;
   $marginBetweenIcons: $ouiFormControlPadding / 2;
 
-  @if ($compressed) {
+  @if  $compressed {
     $iconPadding: $ouiFormControlCompressedPadding;
   }
 
@@ -40,12 +41,13 @@
   $clearSize: $ouiSize;
   $clearIconStroke: 2px;
 
-  @if ($size == 's') {
+  @if  $size == 's' {
     $clearSize: $ouiSizeM;
     $clearIconStroke: $ouiSizeXS;
   }
 
   @include size($clearSize);
+
   pointer-events: all;
   background-color: lightOrDarkTheme($ouiColorMediumShade, $ouiColorDarkShade);
   border-radius: $clearSize;
@@ -57,7 +59,9 @@
 
   #{$iconClass} {
     @include size($clearSize / 2);
+
     fill: $ouiColorEmptyShade;
+
     // increase thickness of icon at such a small size
     stroke: $ouiColorEmptyShade;
     stroke-width: $clearIconStroke;
@@ -65,13 +69,14 @@
 }
 
 @mixin ouiPlaceholderPerBrowser {
-  // sass-lint:disable-block no-vendor-prefixes
   // Each prefix must be its own content block
-  &::-webkit-input-placeholder { @content; opacity: 1; }
-  &::-moz-placeholder { @content; opacity: 1; }
-  &:-ms-input-placeholder { @content; opacity: 1; }
-  &:-moz-placeholder { @content; opacity: 1; }
+  /* stylelint-disable selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown, no-duplicate-selectors */
+  &::input-placeholder { @content; opacity: 1; }
+  &::placeholder { @content; opacity: 1; }
+  &:input-placeholder { @content; opacity: 1; }
+  &:placeholder { @content; opacity: 1; }
   &::placeholder { @content; opacity: 1; }
+  /* stylelint-enable selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown, no-duplicate-selectors */
 }
 
 @function ouiFormControlGradient($color: $ouiColorPrimary) {
@@ -85,6 +90,7 @@
 
 @mixin ouiFormControlText {
   @include ouiFont;
+
   font-size: $ouiFontSizeS;
   color: $ouiTextColor;
 
@@ -92,7 +98,6 @@
     line-height: 1em; // fixes text alignment in IE
   }
 
-  // sass-lint:disable-block mixins-before-declarations
   @include ouiPlaceholderPerBrowser {
     color: $ouiFormControlPlaceholderText;
   }
@@ -107,7 +112,7 @@
   width: 100%;
   height: $height;
 
-  @if ($includeAlternates) {
+  @if  $includeAlternates {
     &--fullWidth {
       max-width: 100%;
     }
@@ -123,7 +128,7 @@
 }
 
 @mixin ouiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) {
-  @if ($isIconOptional) {
+  @if  $isIconOptional {
     @at-root {
       #{&}--withIcon {
         @include ouiFormControlLayoutPadding(1, $side, $compressed);
@@ -137,7 +142,7 @@
 @mixin ouiFormControlIsLoading($isNextToIcon: false) {
   @at-root {
     #{&}-isLoading {
-      @if ($isNextToIcon) {
+      @if  $isNextToIcon {
         @include ouiFormControlLayoutPadding(2);
       } @else {
         @include ouiFormControlLayoutPadding(1);
@@ -145,7 +150,7 @@
     }
 
     #{&}-isLoading#{&}--compressed {
-      @if ($isNextToIcon) {
+      @if  $isNextToIcon {
         @include ouiFormControlLayoutPadding(2, $compressed: true);
       } @else {
         @include ouiFormControlLayoutPadding(1, $compressed: true);
@@ -157,12 +162,11 @@
 // 1. Must supply both values to background-size or some browsers apply the single value to both directions
 
 @mixin ouiFormControlDefaultShadow($borderOnly: false) {
-  // sass-lint:disable-block indentation
   background-color: $ouiFormBackgroundColor;
   background-repeat: no-repeat;
   background-size: 0% 100%; // 1
 
-  @if ($borderOnly) {
+  @if  $borderOnly {
     box-shadow: inset 0 0 0 1px $ouiFormBorderColor;
   } @else {
     box-shadow:
@@ -178,19 +182,18 @@
 
   // Fixes bug in Firefox where adding a transition to the background-color
   // caused a flash of differently styled dropdown.
-  @supports (-moz-appearance: none) { // sass-lint:disable-line no-vendor-prefixes
+  @supports (-moz-appearance: none) {
     // List *must* be in the same order as the above.
     transition-property: box-shadow, background-image, background-size;
   }
 }
 
 @mixin ouiFormControlFocusStyle($borderOnly: false) {
-  // sass-lint:disable-block indentation, empty-args
   background-color: tintOrShade($ouiColorEmptyShade, 0%, 40%);
   background-image: ouiFormControlGradient();
   background-size: 100% 100%; // 1
 
-  @if ($borderOnly) {
+  @if  $borderOnly {
     box-shadow: inset 0 0 0 1px $ouiFormBorderColor;
   } @else {
     box-shadow:
@@ -206,18 +209,17 @@
 }
 
 @mixin ouiFormControlDisabledTextStyle {
-  // sass-lint:disable-block no-vendor-prefixes
   color: $ouiFormControlDisabledColor;
   -webkit-text-fill-color: $ouiFormControlDisabledColor; // Required for Safari
 }
 
 @mixin ouiFormControlDisabledStyle {
   @include ouiFormControlDisabledTextStyle;
+
   cursor: not-allowed;
   background: $ouiFormBackgroundDisabledColor;
   box-shadow: inset 0 0 0 1px $ouiFormBorderDisabledColor;
 
-  // sass-lint:disable-block mixins-before-declarations
   @include ouiPlaceholderPerBrowser {
     color: $ouiFormControlDisabledColor;
   }
@@ -225,6 +227,7 @@
 
 @mixin ouiFormControlReadOnlyStyle {
   cursor: default;
+
   // Use transparency since there is no border and in case form is on a non-white background
   background: $ouiFormBackgroundReadOnlyColor;
   border-color: transparent;
@@ -243,7 +246,7 @@
   border-radius: $ouiFormControlBorderRadius;
   padding: $ouiFormControlPadding;
 
-  @if ($includeStates) {
+  @if  $includeStates {
     &:invalid { // 2
       @include ouiFormControlInvalidStyle;
     }
@@ -261,7 +264,6 @@
     }
 
     // Needs to be set for autofill
-    // sass-lint:disable-block no-vendor-prefixes
     &:-webkit-autofill,
     &:autofill {
       /* Many browsers use `!important` in their built-in `:-webkit-autofill` style declarations,
@@ -278,18 +280,18 @@
       ~ .euiFormControlLayoutIcons {
         color: $ouiColorDarkestShade;
       }
+
       /* End of Aliases */
     }
 
   }
 
-  @if ($includeSizes) {
+  @if  $includeSizes {
     &--compressed {
       @include ouiFormControlStyleCompressed($borderOnly, $includeStates);
     }
 
     &--inGroup {
-      // sass-lint:disable-block no-important
       box-shadow: none !important;
       border-radius: 0;
     }
@@ -298,10 +300,11 @@
 
 @mixin ouiFormControlStyleCompressed($borderOnly: false, $includeStates: true) {
   @include ouiFormControlDefaultShadow($borderOnly: true);
+
   padding: $ouiFormControlCompressedPadding;
   border-radius: $ouiFormControlCompressedBorderRadius;
 
-  @if ($includeStates) {
+  @if  $includeStates {
     &:invalid { // 2
       @include ouiFormControlInvalidStyle;
     }
@@ -327,6 +330,7 @@
 
   @if $size {
     $size: $size - 2px; // subtract 2px from size to account for border size
+
     padding: $size / 2;
   }
 
@@ -338,7 +342,7 @@
   } @else if $type == 'square' {
     border-radius: $ouiCheckboxBorderRadius;
   }
-  // sass-lint:disable-block indentation
+
   transition: background-color $ouiAnimSpeedFast ease-in,
               border-color $ouiAnimSpeedFast ease-in;
 }
@@ -347,6 +351,7 @@
   border-color: $ouiColorPrimary;
   background-color: $ouiColorPrimary;
 
+  /* stylelint-disable-next-line scss/at-if-no-null */
   @if $type != null {
     @include ouiIconBackground($type, $ouiColorEmptyShade);
   }
@@ -356,6 +361,8 @@
   border-color: $ouiColorLightShade;
   background-color: $ouiColorLightShade;
   box-shadow: none;
+
+  /* stylelint-disable-next-line scss/at-if-no-null */
   @if $type != null {
     @include ouiIconBackground($type, $ouiFormCustomControlDisabledIconColor);
   }
@@ -363,12 +370,12 @@
 
 @mixin ouiCustomControlFocused {
   @include ouiFocusRing('small');
+
   border-color: $ouiColorPrimary;
 }
 
 @mixin ouiHiddenSelectableInput {
   position: absolute;
-  // sass-lint:disable no-important
   opacity: 0 !important; // Make sure it's still hidden when :disabled
   width: 100%;
   height: 100%;
@@ -379,15 +386,21 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiFormLabel { @include ouiFormLabel; }
+
 @mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) { @include ouiFormControlLayoutPadding($numOfIcons, $side, $compressed); }
+
 @mixin euiFormControlLayoutClearIcon($iconClass, $size: 'm') { @include ouiFormControlLayoutClearIcon($iconClass, $size); }
+
 @mixin euiPlaceholderPerBrowser {
   @include ouiPlaceholderPerBrowser {
     @content;
   }
 }
+
 @function euiFormControlGradient($color: $ouiColorPrimary) { @return ouiFormControlGradient($color); }
+
 @mixin euiFormControlText { @include ouiFormControlText; }
+
 @mixin euiFormControlSize(
   $height: $ouiFormControlHeight,
   $includeAlternates: false
@@ -397,19 +410,35 @@
     $includeAlternates
   );
 }
+
 @mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) { @include ouiFormControlWithIcon($isIconOptional, $side, $compressed); }
+
 @mixin euiFormControlIsLoading($isNextToIcon: false) { @include ouiFormControlIsLoading($isNextToIcon); }
+
 @mixin euiFormControlDefaultShadow($borderOnly: false) { @include ouiFormControlDefaultShadow($borderOnly); }
+
 @mixin euiFormControlFocusStyle($borderOnly: false) { @include ouiFormControlFocusStyle($borderOnly); }
+
 @mixin euiFormControlInvalidStyle { @include ouiFormControlInvalidStyle; }
+
 @mixin euiFormControlDisabledTextStyle { @include ouiFormControlDisabledTextStyle; }
+
 @mixin euiFormControlDisabledStyle { @include ouiFormControlDisabledStyle; }
+
 @mixin euiFormControlReadOnlyStyle { @include ouiFormControlReadOnlyStyle; }
+
 @mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) { @include ouiFormControlStyle($borderOnly, $includeStates, $includeSizes); }
+
 @mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) { @include ouiFormControlStyleCompressed($borderOnly, $includeStates); }
+
 @mixin euiCustomControl($type: null, $size: $ouiSize) { @include ouiCustomControl($type, $size); }
+
 @mixin euiCustomControlSelected($type: null) { @include ouiCustomControlSelected($type); }
+
 @mixin euiCustomControlDisabled($type: null) { @include ouiCustomControlDisabled($type); }
+
 @mixin euiCustomControlFocused { @include ouiCustomControlFocused; }
+
 @mixin euiHiddenSelectableInput { @include ouiHiddenSelectableInput; }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_header.scss b/src/global_styling/mixins/_header.scss
index 2dd794c2c8..65541be604 100644
--- a/src/global_styling/mixins/_header.scss
+++ b/src/global_styling/mixins/_header.scss
@@ -59,4 +59,5 @@
     }
   }
 }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_helpers.scss b/src/global_styling/mixins/_helpers.scss
index ce347c1819..53e1e4471b 100644
--- a/src/global_styling/mixins/_helpers.scss
+++ b/src/global_styling/mixins/_helpers.scss
@@ -21,12 +21,9 @@
 
   position: relative;
 
-  &:after {
+  &::after {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     border-radius: $borderRadius;
     content: '';
     pointer-events: none;
@@ -38,10 +35,8 @@
 @mixin ouiScrollBar($thumbColor: $ouiColorDarkShade, $trackBackgroundColor: transparent) {
   // Firefox's scrollbar coloring cascades, but the sizing does not,
   // so it's being added to this mixin for allowing support wherever custom scrollbars are
-  // sass-lint:disable-block no-misspelled-properties
   scrollbar-width: thin;
 
-  // sass-lint:disable-block no-vendor-prefixes
   &::-webkit-scrollbar {
     width: $ouiScrollBar;
     height: $ouiScrollBar;
@@ -69,6 +64,7 @@
 // Just overflow and scrollbars
 @mixin ouiYScroll {
   @include ouiScrollBar;
+
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
@@ -84,6 +80,7 @@
 
 @mixin ouiXScroll {
   @include ouiScrollBar;
+
   overflow-x: auto;
 
   &:focus {
@@ -118,7 +115,6 @@
 
 // Specifically target IE11, but not Edge.
 @mixin internetExplorerOnly {
-  // sass-lint:disable-block no-vendor-prefixes
   @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
     @content;
   }
@@ -141,19 +137,27 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiScrollBar($thumbColor: $ouiColorDarkShade, $trackBackgroundColor: transparent) { @include ouiScrollBar($thumbColor, $trackBackgroundColor); }
+
 @mixin euiYScroll { @include ouiYScroll; }
+
 @mixin euiXScroll { @include ouiXScroll; }
+
 @mixin euiYScrollWithShadows { @include ouiYScrollWithShadows; }
+
 @mixin euiXScrollWithShadows { @include ouiXScrollWithShadows; }
+
 @mixin euiScreenReaderOnly { @include ouiScreenReaderOnly; }
+
 @mixin euiCanAnimate {
   @include ouiCanAnimate {
     @content;
   }
 }
+
 @mixin euiCantAnimate {
   @include ouiCantAnimate {
     @content;
   }
 }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_icons.scss b/src/global_styling/mixins/_icons.scss
index 581e49218e..58ed1166a7 100644
--- a/src/global_styling/mixins/_icons.scss
+++ b/src/global_styling/mixins/_icons.scss
@@ -11,7 +11,6 @@
 
 // For using icons as background images (data-uri)
 @mixin ouiIconBackground($type, $color: $ouiColorEmptyShade) {
-  // sass-lint:disable-block quotes
   @if variable-exists(type) == false {
     @error 'A $type:string must be provided to @mixin ouiIconBackground().';
   } @else if type-of($color) != color {
@@ -30,4 +29,5 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiIconBackground($type, $color: $ouiColorEmptyShade) { @include ouiIconBackground($type, $color); }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss
index 66051f0728..8e86e799e2 100644
--- a/src/global_styling/mixins/_index.scss
+++ b/src/global_styling/mixins/_index.scss
@@ -16,7 +16,6 @@
 @import 'helpers';
 @import 'states';
 @import 'icons';
-
 @import 'beta_badge';
 @import 'button';
 @import 'form';
diff --git a/src/global_styling/mixins/_loading.scss b/src/global_styling/mixins/_loading.scss
index dccfe2993e..f1f18aacc6 100644
--- a/src/global_styling/mixins/_loading.scss
+++ b/src/global_styling/mixins/_loading.scss
@@ -24,4 +24,5 @@
 ) {
   @return ouiLoadingSpinnerBorderColors($main, $highlight);
 }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_panel.scss b/src/global_styling/mixins/_panel.scss
index b727d2b476..15b416a864 100644
--- a/src/global_styling/mixins/_panel.scss
+++ b/src/global_styling/mixins/_panel.scss
@@ -29,6 +29,7 @@
 
       &#{$selector}--hasShadow {
         @include ouiBottomShadowSmall;
+
         border: $ouiBorderThin;
       }
 
@@ -46,6 +47,7 @@
         &:hover,
         &:focus {
           @include ouiSlightShadowHover;
+
           transform: translateY(-2px);
           cursor: pointer;
         }
@@ -71,4 +73,5 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiPanel($selector) { @include ouiPanel($selector); }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_popover.scss b/src/global_styling/mixins/_popover.scss
index affcaa8950..b1e05de062 100644
--- a/src/global_styling/mixins/_popover.scss
+++ b/src/global_styling/mixins/_popover.scss
@@ -10,9 +10,9 @@
  */
 
 @mixin ouiPopoverTitle($size: 'm') {
-  @if ($size == 's') {
+  @if  $size == 's' {
     @include ouiTitle('xxxs');
-  } @else if ($size == 'm') {
+  } @else if $size == 'm' {
     @include ouiTitle('xxs');
   } @else {
     @warn 'ouiPopoverTitle only accepts "s" or "m" sizes';
@@ -25,6 +25,7 @@
 
 @mixin ouiPopoverFooter {
   @include ouiFontSizeS;
+
   padding: $ouiSizeM;
   border-top: $ouiBorderThin;
 }
@@ -32,5 +33,7 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiPopoverTitle($size: 'm') { @include ouiPopoverTitle($size); }
+
 @mixin euiPopoverFooter { @include ouiPopoverFooter; }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_range.scss b/src/global_styling/mixins/_range.scss
index c579a20b60..880fdba73d 100644
--- a/src/global_styling/mixins/_range.scss
+++ b/src/global_styling/mixins/_range.scss
@@ -10,7 +10,6 @@
  */
 
 // Prefixes are unique in this file
-// sass-lint:disable no-vendor-prefixes
 
 @mixin ouiRangeTrackSize {
   height: $ouiRangeTrackHeight;
@@ -42,15 +41,19 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiRangeTrackSize { @include ouiRangeTrackSize; }
+
 @mixin euiRangeTrackPerBrowser {
   @include ouiRangeTrackPerBrowser {
     @content;
   }
 }
+
 @mixin euiRangeThumbStyle { @include ouiRangeThumbStyle; }
+
 @mixin euiRangeThumbPerBrowser {
   @include ouiRangeThumbPerBrowser {
     @content;
   }
 }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_responsive.scss b/src/global_styling/mixins/_responsive.scss
index ea69a35e83..875b3c17b4 100644
--- a/src/global_styling/mixins/_responsive.scss
+++ b/src/global_styling/mixins/_responsive.scss
@@ -12,8 +12,6 @@
 // This file makes use of double quotes to format errors with nested single quotes
 // The indentation linting freaks out on comments above else statements and is disabled.
 
-// sass-lint:disable quotes, no-warn, indentation
-
 // A sem-complicated mixin for breakpoints, that takes any number of
 // named breakpoints that exists in $ouiBreakpoints.
 
@@ -24,27 +22,27 @@
     $index: index($ouiBreakpointKeys, $size);
 
     // Check to make sure it exists in the allowed breakpoint names
-    @if ( $index ) {
-
+    @if   $index  {
       // Set the min size to the value of the size
       $minSize: map-get($ouiBreakpoints, $size);
 
       // If it is the last item, don't give it a max-width
-      @if ( $index == length($ouiBreakpointKeys) ) {
+      @if   $index == length($ouiBreakpointKeys)  {
         @media only screen and (min-width: $minSize) {
           @content;
         }
+
       // If it's not the last item, add a max-width
       } @else {
-
         // Set the max size to the value of the next size (-1px as to not overlap)
         $maxSize: map-get($ouiBreakpoints, nth($ouiBreakpointKeys, $index + 1)) - 1px;
 
         // If it's the the first item, don't set a min-width
-        @if ( $index == 1 ) {
+        @if   $index == 1  {
           @media only screen and (max-width: $maxSize) {
             @content;
           }
+
         // Otherwise it should have a min and max width
         } @else {
           @media only screen and (min-width: $minSize) and (max-width: $maxSize) {
@@ -52,6 +50,7 @@
           }
         }
       }
+
     // If it's not a known breakpoint, throw a warning
     } @else {
       @warn "ouiBreakpoint(): '#{$size}' is not a valid size in $ouiBreakpoints. Accepted values are '#{$ouiBreakpointKeys}'";
@@ -66,4 +65,5 @@
     @content;
   }
 }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_shadow.scss b/src/global_styling/mixins/_shadow.scss
index e1b9d33dae..8bf2786409 100644
--- a/src/global_styling/mixins/_shadow.scss
+++ b/src/global_styling/mixins/_shadow.scss
@@ -12,8 +12,6 @@
 // This file uses RGBA literal values responsibly
 // This file uses off-pattern indentation to be more readable
 
-// sass-lint:disable no-color-literals, no-color-keywords, indentation, quotes
-
 @mixin ouiSlightShadow($color: $ouiShadowColor, $opacity: .3) {
   box-shadow: 0 2px 2px -1px rgba($color, $opacity);
 }
@@ -50,7 +48,7 @@
     0 2px 2px 0 rgba($color, $opacity);
 
   // Never adjust borders if the border color is already on the dark side (dark theme)
-  @if ($adjustBorders and not (lightness($ouiBorderColor) < 50)) {
+  @if  $adjustBorders and not (lightness($ouiBorderColor) < 50) {
     border-color: tint($color, 75%);
     border-top-color: tint($color, 80%);
     border-bottom-color: tint($color, 55%);
@@ -63,7 +61,7 @@
   $adjustBorders: false,
   $reverse: false
 ) {
-  @if ($reverse) {
+  @if  $reverse {
     box-shadow:
       0 -40px 64px 0 rgba($color, $opacity),
       0 -24px 32px 0 rgba($color, $opacity),
@@ -80,7 +78,7 @@
   }
 
   // Never adjust borders if the border color is already on the dark side (dark theme)
-  @if ($adjustBorders and not (lightness($ouiBorderColor) < 50)) {
+  @if  $adjustBorders and not (lightness($ouiBorderColor) < 50) {
     border-color: tint($color, 70%);
     border-top-color: tint($color, 85%);
     border-bottom-color: tint($color, 55%);
@@ -89,7 +87,7 @@
 
 @mixin ouiSlightShadowHover($color: $ouiShadowColor, $opacity: .3) {
   box-shadow:
-    0 4px 8px 0 rgba($color, $opacity/2),
+    0 4px 8px 0 rgba($color, $opacity / 2),
     0 2px 2px -1px rgba($color, $opacity);
 }
 
@@ -100,16 +98,15 @@
 @mixin ouiOverflowShadow($direction: 'y', $side: 'both') {
   $hideHeight: $ouiScrollBarCorner * 1.25;
   $gradient: null;
-  $gradientStart:
-  transparentize(red, .9) 0%,
+  $gradientStart: transparentize(red, .9) 0%,
   transparentize(red, 0) $hideHeight;
-  $gradientEnd:
-  transparentize(red, 0) calc(100% - #{$hideHeight}),
+  $gradientEnd: transparentize(red, 0) calc(100% - #{$hideHeight}),
   transparentize(red, .9) 100%;
-  @if ($side == 'both' or $side == 'start' or $side == 'end') {
-    @if ($side == 'both') {
+
+  @if  $side == 'both' or $side == 'start' or $side == 'end' {
+    @if  $side == 'both' {
       $gradient: $gradientStart, $gradientEnd;
-    } @else if ($side == 'start') {
+    } @else if $side == 'start' {
       $gradient: $gradientStart;
     } @else {
       $gradient: $gradientEnd;
@@ -118,9 +115,9 @@
     @warn "ouiOverflowShadow() expects side to be 'both', 'start' or 'end' but got '#{$side}'";
   }
 
-  @if ($direction == 'y') {
+  @if  $direction == 'y' {
     mask-image: linear-gradient(to bottom, #{$gradient});
-  } @else if ($direction == 'x') {
+  } @else if $direction == 'x' {
     mask-image: linear-gradient(to right, #{$gradient});
   } @else {
     @warn "ouiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'";
@@ -130,10 +127,15 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiSlightShadow($color: $ouiShadowColor, $opacity: .3) { @include ouiSlightShadow($color, $opacity); }
+
 @mixin euiBottomShadowSmall($color: $ouiShadowColor, $opacity: .3) { @include ouiBottomShadowSmall($color, $opacity); }
+
 @mixin euiBottomShadowMedium($color: $ouiShadowColor, $opacity: .2) { @include ouiBottomShadowMedium($color, $opacity); }
+
 @mixin euiBottomShadowFlat($color: $ouiShadowColor, $opacity: .2) { @include ouiBottomShadowFlat($color, $opacity); }
+
 @mixin euiBottomShadow($color: $ouiShadowColorLarge, $opacity: .1, $adjustBorders: false) { @include ouiBottomShadow($color, $opacity, $adjustBorders); }
+
 @mixin euiBottomShadowLarge(
   $color: $ouiShadowColorLarge,
   $opacity: .1,
@@ -147,7 +149,11 @@
     $reverse
   );
 }
+
 @mixin euiSlightShadowHover($color: $ouiShadowColor, $opacity: .3) { @include ouiSlightShadowHover($color, $opacity); }
+
 @mixin euiSlightShadowActive($color: $ouiShadowColor, $opacity: .3) { @include ouiSlightShadowActive($color, $opacity); }
+
 @mixin euiOverflowShadow($direction: 'y', $side: 'both') { @include ouiOverflowShadow($direction, $side); }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_states.scss b/src/global_styling/mixins/_states.scss
index e4c31a8626..fc0f1aebff 100644
--- a/src/global_styling/mixins/_states.scss
+++ b/src/global_styling/mixins/_states.scss
@@ -12,10 +12,8 @@
 @mixin ouiFocusRing($size: 'small') {
   @if $size == 'large' {
     // It's always OK to use the focus animation. This will take precedence over times we turn it off individually like OuiButtonEmpty
-    // sass-lint:disable-block no-important
     animation: $ouiAnimSpeedSlow $ouiAnimSlightResistance 1 normal forwards focusRingAnimateLarge !important;
   } @else {
-    // sass-lint:disable-block no-important
     animation: $ouiAnimSpeedSlow $ouiAnimSlightResistance 1 normal forwards focusRingAnimate !important;
   }
 }
@@ -41,7 +39,7 @@
   cursor: not-allowed;
   text-decoration: none;
 
-  @if ($color) {
+  @if  $color {
     color: $color;
   }
 }
@@ -63,9 +61,15 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiFocusRing($size: 'small') { @include ouiFocusRing($size); }
+
 @mixin euiFocusBackground($color: $ouiColorPrimary) { @include ouiFocusBackground($color); }
+
 @mixin euiHoverState { @include ouiHoverState; }
+
 @mixin euiFocusState($color: $ouiColorPrimary) { @include ouiFocusState($color); }
+
 @mixin euiDisabledState($color: $ouiButtonColorDisabledText) { @include ouiDisabledState($color); }
+
 @mixin euiInteractiveStates($focusColor: $ouiColorPrimary, $disabledColor: $ouiButtonColorDisabledText) { @include ouiInteractiveStates($focusColor, $disabledColor); }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_tool_tip.scss b/src/global_styling/mixins/_tool_tip.scss
index ea10762cfb..c8e5668fd4 100644
--- a/src/global_styling/mixins/_tool_tip.scss
+++ b/src/global_styling/mixins/_tool_tip.scss
@@ -11,6 +11,7 @@
 
 @mixin ouiToolTipStyle($size: null) {
   @include ouiBottomShadow($color: $ouiColorInk);
+
   border-radius: $ouiBorderRadius;
   background-color: $ouiTooltipBackgroundColor;
   color: $ouiColorGhost;
@@ -18,11 +19,13 @@
   max-width: 256px;
   overflow-wrap: break-word;
 
-  @if ($size == 's') {
+  @if  $size == 's' {
     @include ouiFontSizeXS;
+
     padding: $ouiSizeS;
   } @else {
     @include ouiFontSizeS;
+
     padding: $ouiSizeM;
   }
 }
@@ -41,6 +44,9 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiToolTipStyle($size: null) { @include ouiToolTipStyle($size); }
+
 @mixin euiToolTipTitle { @include ouiToolTipTitle; }
+
 @mixin euiToolTipAnimation($side: 'top') { @include ouiToolTipAnimation($side); }
+
 /* End of Aliases */
diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
index 2d5ab518e0..1753cd74db 100644
--- a/src/global_styling/mixins/_typography.scss
+++ b/src/global_styling/mixins/_typography.scss
@@ -9,17 +9,13 @@
  * GitHub history for details.
  */
 
-// sass-lint:disable no-vendor-prefixes
-// sass-lint:disable no-important
-
 // Our base fonts
 
 @mixin ouiFont {
   font-family: var(--oui-font-family);
   font-weight: $ouiFontWeightRegular;
   letter-spacing: -.005em;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
   font-kerning: normal;
 }
 
@@ -36,9 +32,9 @@
 @mixin ouiTitle($size: 'm') {
   color: $ouiTitleColor;
 
-  @if (map-has-key($ouiTitles, $size)) {
+  @if  map-has-key($ouiTitles, $size) {
     @each $property, $value in map-get($ouiTitles, $size) {
-      @if ($property == 'font-size') {
+      @if  $property == 'font-size' {
         @include fontSize($value);
       } @else {
         #{$property}: $value;
@@ -54,48 +50,55 @@
 
 @mixin ouiFontSizeXS {
   @include fontSize($ouiFontSizeXS);
+
   line-height: $ouiLineHeight;
 }
 
 @mixin ouiFontSizeS {
   @include fontSize($ouiFontSizeS);
+
   line-height: $ouiLineHeight;
 }
 
 @mixin ouiFontSize {
   @include fontSize($ouiFontSize);
+
   line-height: $ouiLineHeight;
 }
 
 @mixin ouiFontSizeM {
   @include fontSize($ouiFontSizeM);
+
   line-height: $ouiLineHeight;
 }
 
 @mixin ouiFontSizeL {
   @include fontSize($ouiFontSizeL);
+
   line-height: $ouiLineHeight;
 }
 
 @mixin ouiFontSizeXL {
   @each $property, $value in map-get($ouiTitles, 'm') {
-    @if ($property == 'font-size') {
+    @if  $property == 'font-size' {
       @include fontSize($value);
     } @else {
       #{$property}: $value;
     }
   }
+
   line-height: 1.25;
 }
 
 @mixin ouiFontSizeXXL {
   @each $property, $value in map-get($ouiTitles, 'l') {
-    @if ($property == 'font-size') {
+    @if  $property == 'font-size' {
       @include fontSize($value);
     } @else {
       #{$property}: $value;
     }
   }
+
   line-height: 1.25;
 }
 
@@ -107,17 +110,14 @@
 }
 
 // Text truncation
-//
 // Prevent text from wrapping onto multiple lines, and truncate with an
 // ellipsis.
-//
 // 1. Ensure that the node has a maximum width after which truncation can
 //    occur.
 // 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
 //    nodes.
 
 @mixin ouiTextTruncate {
-  // sass-lint:disable-block no-important
   max-width: 100%; // 1
   overflow: hidden !important;
   text-overflow: ellipsis !important;
@@ -131,7 +131,6 @@
 
 
 // Text weight shifting
-//
 // When changing the font-weight based the state of the component
 // this mixin will ensure that the sizing is dependent on the boldest
 // weight so it doesn't shifter sibling content.
@@ -151,18 +150,33 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiFont { @include ouiFont; }
+
 @mixin euiCodeFont { @include ouiCodeFont; }
+
 @mixin euiText { @include ouiText; }
+
 @mixin euiTitle($size: 'm') { @include ouiTitle($size); }
+
 @mixin euiFontSizeXS { @include ouiFontSizeXS; }
+
 @mixin euiFontSizeS { @include ouiFontSizeS; }
+
 @mixin euiFontSize { @include ouiFontSize; }
+
 @mixin euiFontSizeM { @include ouiFontSizeM; }
+
 @mixin euiFontSizeL { @include ouiFontSizeL; }
+
 @mixin euiFontSizeXL { @include ouiFontSizeXL; }
+
 @mixin euiFontSizeXXL { @include ouiFontSizeXXL; }
+
 @mixin euiTextBreakWord { @include ouiTextBreakWord; }
+
 @mixin euiTextTruncate { @include ouiTextTruncate; }
+
 @mixin euiNumberFormat { @include ouiNumberFormat; }
+
 @mixin euiTextShift($fontWeight: $ouiFontWeightBold, $attr: 'data-text') { @include ouiTextShift($fontWeight, $attr); }
+
 /* End of Aliases */
diff --git a/src/global_styling/reset/_hacks.scss b/src/global_styling/reset/_hacks.scss
index cd76fab92f..21906205ea 100644
--- a/src/global_styling/reset/_hacks.scss
+++ b/src/global_styling/reset/_hacks.scss
@@ -12,5 +12,5 @@
 // Chrome has an issue around RTL languages in SVGs when letter-spacing is negative
 // https://bugs.chromium.org/p/chromium/issues/detail?id=966480
 svg text {
-  letter-spacing: normal !important; // sass-lint:disable-line no-important
+  letter-spacing: normal !important;
 }
diff --git a/src/global_styling/reset/_reset.scss b/src/global_styling/reset/_reset.scss
index fbf7164b32..3ba7ace335 100644
--- a/src/global_styling/reset/_reset.scss
+++ b/src/global_styling/reset/_reset.scss
@@ -10,14 +10,13 @@
  */
 
 // This file allows multi-line selectors to make it more readable
-// sass-lint:disable single-line-per-selector
 
 /**
  * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126).
  *
  */
 
-*, *:before, *:after {
+*, *::before, *::after {
   box-sizing: border-box;
 }
 
@@ -70,6 +69,7 @@ footer, header, hgroup, menu, nav, section {
 
 html {
   @include ouiFont;
+
   font-size: $ouiFontSize;
   color: $ouiTextColor;
   height: 100%;
@@ -83,7 +83,6 @@ body {
 *:focus {
   outline: none;
 
-  // sass-lint:disable no-vendor-prefixes
   // Disables border that shows up when tabbing in Firefox.
   &::-moz-focus-inner {
     border: none;
@@ -144,10 +143,10 @@ blockquote, q {
   quotes: none;
 }
 
-blockquote:before, blockquote:after,
-q:before, q:after {
+blockquote::before, blockquote::after,
+q::before, q::after {
   content: '';
-  content: none; // sass-lint:disable-line no-duplicate-properties
+  content: none;
 }
 
 table {
diff --git a/src/global_styling/reset/_scrollbar.scss b/src/global_styling/reset/_scrollbar.scss
index 6ebbbd28b0..c064e21876 100644
--- a/src/global_styling/reset/_scrollbar.scss
+++ b/src/global_styling/reset/_scrollbar.scss
@@ -13,7 +13,6 @@
 // However, the width sizing is not, but this has been added to the ouiScrollBar mixin as well
 
 html {
-  // sass-lint:disable-block no-misspelled-properties
   scrollbar-width: thin;
   scrollbar-color: transparentize($ouiColorDarkShade, .5) transparent; // Firefox support
 }
diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss
index e522b1ea3e..eb0b89f6b8 100644
--- a/src/global_styling/utility/_utility.scss
+++ b/src/global_styling/utility/_utility.scss
@@ -10,7 +10,6 @@
  */
 
 // This file utilizes !importants on purpose
-// sass-lint:disable no-important
 
 // Vertical alignment
 .oui-alignBaseline { vertical-align: baseline !important; }
@@ -55,6 +54,7 @@
   @include internetExplorerOnly {
     word-break: break-all !important;
   }
+
   overflow-wrap: break-word !important;
 }
 
@@ -101,9 +101,7 @@
   */
 .ouiIEFlexWrapFix {
   @include internetExplorerOnly {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 0%;
+    flex: 1 1 0%;
   }
 }
 
@@ -157,4 +155,5 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiFullHeight { @include ouiFullHeight; }
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_animations.scss b/src/global_styling/variables/_animations.scss
index 0cf4acb967..2160e54913 100644
--- a/src/global_styling/variables/_animations.scss
+++ b/src/global_styling/variables/_animations.scss
@@ -13,7 +13,6 @@
 
 $ouiAnimSlightBounce: cubic-bezier(.34, 1.61, .7, 1) !default;
 $ouiAnimSlightResistance: cubic-bezier(.694, .0482, .335, 1) !default;
-
 $ouiAnimSpeedExtraFast: 90ms !default;
 $ouiAnimSpeedFast: 150ms !default;
 $ouiAnimSpeedNormal: 250ms !default;
@@ -32,4 +31,5 @@ $euiAnimSpeedFast: $ouiAnimSpeedFast;
 $euiAnimSpeedNormal: $ouiAnimSpeedNormal;
 $euiAnimSpeedSlow: $ouiAnimSpeedSlow;
 $euiAnimSpeedExtraSlow: $ouiAnimSpeedExtraSlow;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_borders.scss b/src/global_styling/variables/_borders.scss
index 4bed6701b9..021dc7f511 100644
--- a/src/global_styling/variables/_borders.scss
+++ b/src/global_styling/variables/_borders.scss
@@ -13,7 +13,6 @@
 
 $ouiBorderWidthThin: 1px !default;
 $ouiBorderWidthThick: 2px !default;
-
 $ouiBorderColor: $ouiColorLightShade !default;
 $ouiBorderRadius: 4px !default;
 $ouiBorderRadiusSmall: $ouiBorderRadius / 2 !default;
@@ -31,4 +30,5 @@ $euiBorderRadiusSmall: $ouiBorderRadiusSmall;
 $euiBorderThick: $ouiBorderThick;
 $euiBorderThin: $ouiBorderThin;
 $euiBorderEditable: $ouiBorderEditable;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_buttons.scss b/src/global_styling/variables/_buttons.scss
index 22cda2773b..1d2a660d30 100644
--- a/src/global_styling/variables/_buttons.scss
+++ b/src/global_styling/variables/_buttons.scss
@@ -12,8 +12,8 @@
 $ouiButtonHeight: $ouiSizeXXL !default;
 $ouiButtonHeightSmall: $ouiSizeXL !default;
 $ouiButtonHeightXSmall: $ouiSizeL !default;
-
 $ouiButtonColorDisabled: tintOrShade($ouiTextColor, 70%, 70%) !default;
+
 // Only increase the contrast of background color to text to 2.0 for disabled
 $ouiButtonColorDisabledText: makeDisabledContrastColor($ouiButtonColorDisabled) !default;
 $ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightShade) !default;
@@ -40,4 +40,5 @@ $euiButtonColorDisabled: $ouiButtonColorDisabled;
 $euiButtonColorDisabledText: $ouiButtonColorDisabledText;
 $euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled;
 $euiButtonTypes: $ouiButtonTypes;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_collapsible_nav.scss b/src/global_styling/variables/_collapsible_nav.scss
index 2af9050dc8..f7c6ae6c4f 100644
--- a/src/global_styling/variables/_collapsible_nav.scss
+++ b/src/global_styling/variables/_collapsible_nav.scss
@@ -11,16 +11,12 @@
 
 // Should be same as OuiFlyout background color
 $ouiCollapsibleNavBackgroundColor: null !default;
-
 $ouiCollapsibleNavGroupNoneBackgroundColor: inherit !default;
-
 $ouiCollapsibleNavGroupLightBackgroundColor: $ouiPageBackgroundColor !default;
-
 $ouiCollapsibleNavGroupDarkBackgroundColor: lightOrDarkTheme(
   shade($ouiColorDarkestShade, 20%),
   shade($ouiColorLightestShade, 50%),
 ) !default;
-
 $ouiCollapsibleNavGroupDarkHighContrastColor: makeGraphicContrastColor(
   $ouiColorPrimary,
   $ouiCollapsibleNavGroupDarkBackgroundColor
@@ -33,4 +29,5 @@ $euiCollapsibleNavGroupNoneBackgroundColor: $ouiCollapsibleNavGroupNoneBackgroun
 $euiCollapsibleNavGroupLightBackgroundColor: $ouiCollapsibleNavGroupLightBackgroundColor;
 $euiCollapsibleNavGroupDarkBackgroundColor: $ouiCollapsibleNavGroupDarkBackgroundColor;
 $euiCollapsibleNavGroupDarkHighContrastColor: $ouiCollapsibleNavGroupDarkHighContrastColor;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss
index 9310b2d6a2..a31f6f4940 100644
--- a/src/global_styling/variables/_colors.scss
+++ b/src/global_styling/variables/_colors.scss
@@ -102,9 +102,7 @@ $ouiPaletteColorBlind: (
     behindText: #FF7E62,
   )
 ) !default;
-
 $ouiPaletteColorBlindKeys: map-keys($ouiPaletteColorBlind);
-
 $ouiColorVis0: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis0'), 'graphic') !default;
 $ouiColorVis1: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis1'), 'graphic') !default;
 $ouiColorVis2: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis2'), 'graphic') !default;
@@ -115,8 +113,6 @@ $ouiColorVis6: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis6'), 'graphic'
 $ouiColorVis7: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis7'), 'graphic') !default;
 $ouiColorVis8: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis8'), 'graphic') !default;
 $ouiColorVis9: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis9'), 'graphic') !default;
-
-// sass-lint:disable-block variable-name-format
 $ouiColorVis0_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis0'), 'behindText') !default;
 $ouiColorVis1_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis1'), 'behindText') !default;
 $ouiColorVis2_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis2'), 'behindText') !default;
@@ -148,7 +144,7 @@ $ouiCodeBlockTypeColor: makeHighContrastColor($ouiColorVis1, $ouiCodeBlockBackgr
 $ouiCodeBlockAttributeColor: inherit !default;
 $ouiCodeBlockSymbolColor: makeHighContrastColor($ouiColorVis9, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockParamsColor: inherit !default;
-$ouiCodeBlockMetaColor:  makeHighContrastColor($ouiTextSubduedColor, $ouiCodeBlockBackgroundColor) !default;
+$ouiCodeBlockMetaColor: makeHighContrastColor($ouiTextSubduedColor, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockTitleColor: makeHighContrastColor($ouiColorVis7, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockSectionColor: makeHighContrastColor($ouiColorVis9, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockAdditionColor: makeHighContrastColor($ouiColorVis0, $ouiCodeBlockBackgroundColor) !default;
@@ -274,4 +270,5 @@ $euiCodeBlockAdditionColor: $ouiCodeBlockAdditionColor;
 $euiCodeBlockDeletionColor: $ouiCodeBlockDeletionColor;
 $euiCodeBlockSelectorClassColor: $ouiCodeBlockSelectorClassColor;
 $euiCodeBlockSelectorIdColor: $ouiCodeBlockSelectorIdColor;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss
index cec0dec337..a4bc505eff 100644
--- a/src/global_styling/variables/_form.scss
+++ b/src/global_styling/variables/_form.scss
@@ -17,7 +17,6 @@ $ouiFormControlPadding: $ouiSizeM !default;
 $ouiFormControlCompressedPadding: $ouiSizeS !default;
 $ouiFormControlBorderRadius: 0 !default;
 $ouiFormControlCompressedBorderRadius: $ouiBorderRadiusSmall !default;
-
 $ouiRadioSize: $ouiSize !default;
 $ouiCheckBoxSize: $ouiSize !default;
 $ouiCheckboxBorderRadius: $ouiBorderRadius !default;
@@ -27,11 +26,9 @@ $ouiSwitchHeight: $ouiSize * 1.25 !default;
 $ouiSwitchWidth: ($ouiSize * 2.5) + $ouiSizeXS !default;
 $ouiSwitchThumbSize: $ouiSwitchHeight !default;
 $ouiSwitchIconHeight: $ouiSize !default;
-
 $ouiSwitchHeightCompressed: $ouiSize !default;
 $ouiSwitchWidthCompressed: $ouiSize * 1.75 !default;
 $ouiSwitchThumbSizeCompressed: $ouiSwitchHeightCompressed !default;
-
 $ouiSwitchHeightMini: $ouiSwitchHeight * .5 !default;
 $ouiSwitchWidthMini: $ouiSwitchWidth * .5 !default;
 $ouiSwitchThumbSizeMini: $ouiSwitchHeightMini !default;
@@ -59,20 +56,16 @@ $ouiFormControlLayoutGroupInputCompressedBorderRadius: $ouiFormControlCompressed
 
 // Range
 $ouiRangeTrackColor: $ouiColorDarkShade !default;
-
 $ouiRangeThumbRadius: 50% !default;
 $ouiRangeThumbHeight: $ouiSize !default;
 $ouiRangeThumbWidth: $ouiSize !default;
 $ouiRangeThumbBorderColor: $ouiRangeTrackColor !default;
-
 $ouiRangeTrackWidth: 100% !default;
 $ouiRangeTrackHeight: 2px !default;
 $ouiRangeTrackBorderWidth: 0 !default;
 $ouiRangeTrackBorderColor: $ouiRangeTrackColor !default;
 $ouiRangeTrackRadius: $ouiBorderRadius !default;
-
 $ouiRangeDisabledOpacity: .25 !default;
-
 $ouiRangeHighlightHeight: $ouiSizeXS !default;
 
 
@@ -126,4 +119,5 @@ $euiRangeTrackBorderColor: $ouiRangeTrackBorderColor;
 $euiRangeTrackRadius: $ouiRangeTrackRadius;
 $euiRangeDisabledOpacity: $ouiRangeDisabledOpacity;
 $euiRangeHighlightHeight: $ouiRangeHighlightHeight;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_header.scss b/src/global_styling/variables/_header.scss
index 065724c403..95090e1fd7 100644
--- a/src/global_styling/variables/_header.scss
+++ b/src/global_styling/variables/_header.scss
@@ -31,4 +31,5 @@ $euiHeaderBreadcrumbColor: $ouiHeaderBreadcrumbColor;
 $euiHeaderHeight: $ouiHeaderHeight;
 $euiHeaderChildSize: $ouiHeaderChildSize;
 $euiHeaderHeightCompensation: $ouiHeaderHeightCompensation;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_index.scss b/src/global_styling/variables/_index.scss
index ae6c1944be..cca22e58c5 100644
--- a/src/global_styling/variables/_index.scss
+++ b/src/global_styling/variables/_index.scss
@@ -27,7 +27,6 @@
 @import 'shadows';
 @import 'states';
 @import 'z_index';
-
 @import 'buttons';
 @import 'form';
 @import 'header';
diff --git a/src/global_styling/variables/_page.scss b/src/global_styling/variables/_page.scss
index 0b996c7199..4bf5ec0075 100644
--- a/src/global_styling/variables/_page.scss
+++ b/src/global_styling/variables/_page.scss
@@ -16,4 +16,5 @@ $ouiPageSidebarMinWidth: $ouiSizeL * 8 !default;
 /* OUI -> EUI Aliases */
 $euiPageDefaultMaxWidth: $ouiPageDefaultMaxWidth;
 $euiPageSidebarMinWidth: $ouiPageSidebarMinWidth;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_panel.scss b/src/global_styling/variables/_panel.scss
index 6edb023b3e..f683f25ac6 100644
--- a/src/global_styling/variables/_panel.scss
+++ b/src/global_styling/variables/_panel.scss
@@ -14,12 +14,10 @@ $ouiPanelPaddingModifiers: (
   'paddingMedium': $ouiSize,
   'paddingLarge':  $ouiSizeL
 ) !default;
-
 $ouiPanelBorderRadiusModifiers: (
   'borderRadiusNone': 0,
   'borderRadiusMedium': $ouiBorderRadius,
 ) !default;
-
 $ouiPanelBackgroundColorModifiers: (
   'transparent': transparent,
   'plain': $ouiColorEmptyShade,
@@ -36,4 +34,5 @@ $ouiPanelBackgroundColorModifiers: (
 $euiPanelPaddingModifiers: $ouiPanelPaddingModifiers;
 $euiPanelBorderRadiusModifiers: $ouiPanelBorderRadiusModifiers;
 $euiPanelBackgroundColorModifiers: $ouiPanelBackgroundColorModifiers;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_responsive.scss b/src/global_styling/variables/_responsive.scss
index f6f6a34139..24bdce19ed 100644
--- a/src/global_styling/variables/_responsive.scss
+++ b/src/global_styling/variables/_responsive.scss
@@ -16,11 +16,11 @@ $ouiBreakpoints: (
   'l':  992px,
   'xl': 1200px
 ) !default;
-
 $ouiBreakpointKeys: map-keys($ouiBreakpoints);
 
 
 /* OUI -> EUI Aliases */
 $euiBreakpoints: $ouiBreakpoints;
 $euiBreakpointKeys: $ouiBreakpointKeys;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_shadows.scss b/src/global_styling/variables/_shadows.scss
index 9dae493cef..61bcb4864c 100644
--- a/src/global_styling/variables/_shadows.scss
+++ b/src/global_styling/variables/_shadows.scss
@@ -18,4 +18,5 @@ $ouiShadowColorLarge: shade(saturate($ouiColorMediumShade, 25%), 50%) !default;
 /* OUI -> EUI Aliases */
 $euiShadowColor: $ouiShadowColor;
 $euiShadowColorLarge: $ouiShadowColorLarge;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_size.scss b/src/global_styling/variables/_size.scss
index 12cd4115fd..124233dd84 100644
--- a/src/global_styling/variables/_size.scss
+++ b/src/global_styling/variables/_size.scss
@@ -9,17 +9,14 @@
  * GitHub history for details.
  */
 
-$ouiSize:     16px !default;
-
-$ouiSizeXS:   $ouiSize * .25 !default;
-$ouiSizeS:    $ouiSize * .5 !default;
-$ouiSizeM:    $ouiSize * .75 !default;
-$ouiSizeL:    $ouiSize * 1.5 !default;
-$ouiSizeXL:   $ouiSize * 2 !default;
-$ouiSizeXXL:  $ouiSize * 2.5 !default;
-
+$ouiSize: 16px !default;
+$ouiSizeXS: $ouiSize * .25 !default;
+$ouiSizeS: $ouiSize * .5 !default;
+$ouiSizeM: $ouiSize * .75 !default;
+$ouiSizeL: $ouiSize * 1.5 !default;
+$ouiSizeXL: $ouiSize * 2 !default;
+$ouiSizeXXL: $ouiSize * 2.5 !default;
 $ouiButtonMinWidth: $ouiSize * 7 !default;
-
 $ouiScrollBar: $ouiSize !default;
 $ouiScrollBarCorner: $ouiSizeS * .75 !default;
 
@@ -35,4 +32,5 @@ $euiSizeXXL: $ouiSizeXXL;
 $euiButtonMinWidth: $ouiButtonMinWidth;
 $euiScrollBar: $ouiScrollBar;
 $euiScrollBarCorner: $ouiScrollBarCorner;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_states.scss b/src/global_styling/variables/_states.scss
index 7b6be093b7..23c6aa3831 100644
--- a/src/global_styling/variables/_states.scss
+++ b/src/global_styling/variables/_states.scss
@@ -33,4 +33,5 @@ $euiFocusRingSizeLarge: $ouiFocusRingSizeLarge;
 $euiFocusRingSize: $ouiFocusRingSize;
 $euiFocusChangePercent: $ouiFocusChangePercent;
 $euiFocusBackgroundColor: $ouiFocusBackgroundColor;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_tool_tip.scss b/src/global_styling/variables/_tool_tip.scss
index 2cee1abc45..663f062224 100644
--- a/src/global_styling/variables/_tool_tip.scss
+++ b/src/global_styling/variables/_tool_tip.scss
@@ -10,7 +10,6 @@
  */
 
 $ouiTooltipBackgroundColor: tintOrShade($ouiColorFullShade, 25%, 100%) !default;
-
 $ouiTooltipAnimations: (
   top: ouiToolTipTop,
   left: ouiToolTipBottom,
@@ -22,4 +21,5 @@ $ouiTooltipAnimations: (
 /* OUI -> EUI Aliases */
 $euiTooltipBackgroundColor: $ouiTooltipBackgroundColor;
 $euiTooltipAnimations: $ouiTooltipAnimations;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
index c4d3590333..f6407e2b24 100644
--- a/src/global_styling/variables/_typography.scss
+++ b/src/global_styling/variables/_typography.scss
@@ -30,44 +30,42 @@
 //     If our base font size (ouiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
 //     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
 @function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($ouiFontSize/2)*$multiplier);
+  @return convertToRem(($ouiFontSize / 2) * $multiplier);
 }
+
 @mixin lineHeightFromBaseline($multiplier: 3) {
   line-height: lineHeightFromBaseline($multiplier);
 }
 
 // Families
-// sass-lint:disable quotes
 $ouiFontFamily: #{"'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"} !default;
 $ouiCodeFontFamily: #{"'Roboto Mono', Consolas, Menlo, Courier, monospace"} !default;
-// sass-lint:enable quotes
 
 // Careful using ligatures. Code editors like ACE will often error because of width calculations
 $ouiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;
 
 // Font sizes -- scale is loosely based on Major Third (1.250)
-$ouiTextScale:      2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default;
-
-$ouiFontSize:       $ouiSize !default; // 5th position in scale
-$ouiFontSizeXS:     $ouiFontSize * nth($ouiTextScale, 7) !default; // 12px
-$ouiFontSizeS:      $ouiFontSize * nth($ouiTextScale, 6) !default; // 14px
-$ouiFontSizeM:      $ouiFontSize * nth($ouiTextScale, 4) !default; // 18px
-$ouiFontSizeL:      $ouiFontSize * nth($ouiTextScale, 3) !default; // 20px
-$ouiFontSizeXL:     $ouiFontSize * nth($ouiTextScale, 2) !default; // 28px
-$ouiFontSizeXXL:    $ouiFontSize * nth($ouiTextScale, 1) !default; // 36px
+$ouiTextScale: 2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default;
+$ouiFontSize: $ouiSize !default; // 5th position in scale
+$ouiFontSizeXS: $ouiFontSize * nth($ouiTextScale, 7) !default; // 12px
+$ouiFontSizeS: $ouiFontSize * nth($ouiTextScale, 6) !default; // 14px
+$ouiFontSizeM: $ouiFontSize * nth($ouiTextScale, 4) !default; // 18px
+$ouiFontSizeL: $ouiFontSize * nth($ouiTextScale, 3) !default; // 20px
+$ouiFontSizeXL: $ouiFontSize * nth($ouiTextScale, 2) !default; // 28px
+$ouiFontSizeXXL: $ouiFontSize * nth($ouiTextScale, 1) !default; // 36px
 
 // Line height
-$ouiLineHeight:     1.5 !default;
+$ouiLineHeight: 1.5 !default;
 $ouiBodyLineHeight: 1 !default;
 
 // Font weights
-$ouiFontWeightLight:        300 !default;
-$ouiFontWeightRegular:      400 !default;
-$ouiFontWeightMedium:       500 !default;
-$ouiFontWeightSemiBold:     600 !default;
-$ouiFontWeightBold:         700 !default;
-$ouiCodeFontWeightRegular:  400 !default;
-$ouiCodeFontWeightBold:     700 !default;
+$ouiFontWeightLight: 300 !default;
+$ouiFontWeightRegular: 400 !default;
+$ouiFontWeightMedium: 500 !default;
+$ouiFontWeightSemiBold: 600 !default;
+$ouiFontWeightBold: 700 !default;
+$ouiCodeFontWeightRegular: 400 !default;
+$ouiCodeFontWeightBold: 700 !default;
 
 // Titles map
 // Lists all the properties per OuiTitle size that then gets looped through to create the selectors.
@@ -132,4 +130,5 @@ $euiFontWeightBold: $ouiFontWeightBold;
 $euiCodeFontWeightRegular: $ouiCodeFontWeightRegular;
 $euiCodeFontWeightBold: $ouiCodeFontWeightBold;
 $euiTitles: $ouiTitles;
+
 /* End of Aliases */
diff --git a/src/global_styling/variables/_z_index.scss b/src/global_styling/variables/_z_index.scss
index b4c55856ef..8c7e04beae 100644
--- a/src/global_styling/variables/_z_index.scss
+++ b/src/global_styling/variables/_z_index.scss
@@ -33,7 +33,6 @@ $ouiZLevel6: 6000;
 $ouiZLevel7: 7000;
 $ouiZLevel8: 8000;
 $ouiZLevel9: 9000;
-
 $ouiZToastList: $ouiZLevel9;
 $ouiZModal: $ouiZLevel8;
 $ouiZMask: $ouiZLevel6;
@@ -65,4 +64,5 @@ $euiZHeader: $ouiZHeader;
 $euiZFlyout: $ouiZFlyout;
 $euiZMaskBelowHeader: $ouiZMaskBelowHeader;
 $euiZContent: $ouiZContent;
+
 /* End of Aliases */
diff --git a/src/theme_dark.scss b/src/theme_dark.scss
index b871811382..073a950eed 100644
--- a/src/theme_dark.scss
+++ b/src/theme_dark.scss
@@ -27,5 +27,5 @@
  */
 
 .ouiText blockquote {
-  font-family: Georgia, Times, Times New Roman, serif;
+  font-family: Georgia, Times, "Times New Roman", serif;
 }
diff --git a/src/theme_light.scss b/src/theme_light.scss
index 0063602990..921baba439 100644
--- a/src/theme_light.scss
+++ b/src/theme_light.scss
@@ -27,5 +27,5 @@
  */
 
 .ouiText blockquote {
-  font-family: Georgia, Times, Times New Roman, serif;
+  font-family: Georgia, Times, "Times New Roman", serif;
 }
diff --git a/src/themes/oui-next/global_styling/functions/_colors.scss b/src/themes/oui-next/global_styling/functions/_colors.scss
index 8cf997fb1d..9645399db5 100644
--- a/src/themes/oui-next/global_styling/functions/_colors.scss
+++ b/src/themes/oui-next/global_styling/functions/_colors.scss
@@ -27,7 +27,7 @@
 // For theming. Checks the text color and tells us whether it's light or dark.
 // Based on that we either tint (add white) or shade (add black).
 @function tintOrShade($color, $tint, $shade) {
-  @if (lightness($ouiTextColor) > 50) {
+  @if  lightness($ouiTextColor) > 50 {
     @return shade($color, $shade);
   } @else {
     @return tint($color, $tint);
@@ -36,7 +36,7 @@
 
 // The reverse of the above
 @function shadeOrTint($color, $shade, $tint) {
-  @if (lightness($ouiTextColor) < 50) {
+  @if  lightness($ouiTextColor) < 50 {
     @return shade($color, $shade);
   } @else {
     @return tint($color, $tint);
@@ -46,7 +46,7 @@
 // Similar to above, but uses the light or dark color based
 // on whether it's the light or dark theme
 @function lightOrDarkTheme($lightColor, $darkColor) {
-  @if (lightness($ouiTextColor) < 50) {
+  @if  lightness($ouiTextColor) < 50 {
     @return $lightColor;
   } @else {
     @return $darkColor;
@@ -63,9 +63,8 @@
   @for $i from 1 through 3 {
     $rgb: nth($rgba, $i);
     $rgb: $rgb / 255;
-
+    /* stylelint-disable-next-line number-max-precision */
     $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4));
-
     $rgba2: append($rgba2, $rgb);
   }
 
@@ -87,7 +86,7 @@
   $lightContrast: contrastRatio($background, $lightText);
   $darkContrast: contrastRatio($background, $darkText);
 
-  @if ($lightContrast > $darkContrast) {
+  @if  $lightContrast > $darkContrast {
     @return $lightText;
   } @else {
     @return $darkText;
@@ -101,17 +100,17 @@
 // ex: makeContrastColor($lightPink, #FFF) would continually shade the pink until
 //     it had higher than 4.5 contrast on a white background.
 $ouiContrastRatioText: 4.5;
+
 @function makeHighContrastColor($foreground, $background: $ouiPageBackgroundColor, $ratio: $ouiContrastRatioText) {
   $contrast: contrastRatio($foreground, $background);
 
   // Determine the lightness factor of the background color first to
   // determine whether to shade or tint the foreground.
   $brightness: lightness($background);
-
   $highContrastTextColor: $foreground;
 
-  @while ($contrast < $ratio) {
-    @if ($brightness > 50) {
+  @while  $contrast < $ratio {
+    @if  $brightness > 50 {
       $highContrastTextColor: shade($highContrastTextColor, 5%);
     } @else {
       $highContrastTextColor: tint($highContrastTextColor, 5%);
@@ -119,12 +118,12 @@ $ouiContrastRatioText: 4.5;
 
     $contrast: contrastRatio($highContrastTextColor, $background);
 
-    @if (lightness($highContrastTextColor) < 5) {
+    @if  lightness($highContrastTextColor) < 5 {
       @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for light mode.';
       @return $highContrastTextColor;
     }
 
-    @if (lightness($highContrastTextColor) > 95) {
+    @if  lightness($highContrastTextColor) > 95 {
       @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for dark mode.';
       @return $highContrastTextColor;
     }
@@ -138,12 +137,14 @@ $ouiContrastRatioText: 4.5;
 // It is still recommended to use `makeHighContrastColor()` to attain a 4.5:1 ratio if the graphic is small or thinly stroked.
 // https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum)
 $ouiContrastRatioGraphic: 3;
+
 @function makeGraphicContrastColor($color, $background: $ouiPageBackgroundColor) {
   @return makeHighContrastColor($color, $background, $ouiContrastRatioGraphic);
 }
 
 // Disabled content only needs a contrast of at least 2 because there is no interaction available
 $ouiContrastRatioDisabled: 2;
+
 @function makeDisabledContrastColor($color, $background: $ouiPageBackgroundColor) {
   @return makeHighContrastColor($color, $background, $ouiContrastRatioDisabled);
 }
@@ -153,4 +154,5 @@ $ouiContrastRatioDisabled: 2;
 $euiContrastRatioText: $ouiContrastRatioText;
 $euiContrastRatioGraphic: $ouiContrastRatioGraphic;
 $euiContrastRatioDisabled: $ouiContrastRatioDisabled;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/functions/_math.scss b/src/themes/oui-next/global_styling/functions/_math.scss
index 4d36cc020e..043753c6c5 100644
--- a/src/themes/oui-next/global_styling/functions/_math.scss
+++ b/src/themes/oui-next/global_styling/functions/_math.scss
@@ -9,60 +9,75 @@
  * GitHub history for details.
  */
 
-//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
 @function pow($number, $power) {
-  @if ($power != $power or ($power != 0 and $power == $power / 2)) {
+  @if  $power != $power or ($power != 0 and $power == $power / 2) {
     @return $power;
   }
-  @if ($power == 1) {
+
+  @if  $power == 1 {
     @return $number;
   }
-  @if ($power == 0) {
+
+  @if  $power == 0 {
     @return 1;
   }
-  @if ($power < 0) {
+
+  @if  $power < 0 {
     @return 1 / pow($number, -$power);
   }
-  @if (0 < $power and $power < 2) {
+
+  @if  0 < $power and $power < 2 {
     $hasLeadingOne: false;
-    @if (floor($power) == 1) {
+
+    @if  floor($power) == 1 {
       $power: $power - 1;
       $hasLeadingOne: true;
     } @else {
       $hasLeadingOne: false;
     }
+
     $doublePower: pow($number, $power * 2);
     $fullPower: nthRoot($doublePower, 2);
-    @if ($hasLeadingOne) {
+
+    @if  $hasLeadingOne {
       $fullPower: $fullPower * $number;
     }
+
     @return $fullPower;
-  } @else if (getDecimal($power) != 0) {
+  } @else if getDecimal($power) != 0 {
     $wholePower: floor($power);
     $decimalPower: getDecimal($power);
+
     @return pow($number, $wholePower) * pow($number, $decimalPower);
   } @else {
     $hasTrailingOne: $power % 2 == 1;
-    @if ($hasTrailingOne) {
+
+    @if  $hasTrailingOne {
       $power: $power - 1;
     }
+
     $halfPower: pow($number, floor($power / 2));
     $fullPower: $halfPower * $halfPower;
-    @if ($hasTrailingOne) {
+
+    @if  $hasTrailingOne {
       $fullPower: $fullPower * $number;
     }
+
     @return $fullPower;
   }
 }
 
 @function getDecimal($number) {
-  @if ($number < 0) {
+  @if  $number < 0 {
     $number: -$number;
   }
+
   @return $number % 1;
 }
 
 // From: http://rosettacode.org/wiki/Nth_root#JavaScript
+/* stylelint-disable scss/dollar-variable-pattern */
 @function nthRoot($num, $n: 2, $prec: 12) {
   $x: 1;
 
@@ -72,3 +87,4 @@
 
   @return $x;
 }
+/* stylelint-enable scss/dollar-variable-pattern */
diff --git a/src/themes/oui-next/global_styling/mixins/_beta_badge.scss b/src/themes/oui-next/global_styling/mixins/_beta_badge.scss
index 0e534c7b9a..ab6e186314 100644
--- a/src/themes/oui-next/global_styling/mixins/_beta_badge.scss
+++ b/src/themes/oui-next/global_styling/mixins/_beta_badge.scss
@@ -68,4 +68,5 @@
     }
   }
 }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_button.scss b/src/themes/oui-next/global_styling/mixins/_button.scss
index 4008fac5ad..529ebda4b9 100644
--- a/src/themes/oui-next/global_styling/mixins/_button.scss
+++ b/src/themes/oui-next/global_styling/mixins/_button.scss
@@ -53,7 +53,6 @@
   border: solid 1px transparent;
   font-weight: 600;
 
-  // sass-lint:disable mixins-before-declarations
   // focus states should come after all default styles
   @include ouiButtonFocus;
 
@@ -82,7 +81,7 @@
     flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size
   }
 
-  @if ($isReverse) {
+  @if  $isReverse {
     flex-direction: row-reverse;
 
     > * + * {
@@ -119,8 +118,11 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiButtonBase { @include ouiButtonBase; }
+
 @mixin euiButtonFocus { @include ouiButtonFocus; }
+
 @mixin euiButton { @include ouiButton; }
+
 @mixin euiButtonContent($isReverse: false) {
   @include ouiButtonContent($isReverse);
 
@@ -129,6 +131,7 @@
     flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size
   }
 }
+
 @mixin euiButtonContentDisabled {
   @include ouiButtonContentDisabled;
 
@@ -140,4 +143,5 @@
     border-color: ouiLoadingSpinnerBorderColors(currentColor);
   }
 }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_form.scss b/src/themes/oui-next/global_styling/mixins/_form.scss
index d5eabf33df..82d8318ffd 100644
--- a/src/themes/oui-next/global_styling/mixins/_form.scss
+++ b/src/themes/oui-next/global_styling/mixins/_form.scss
@@ -12,6 +12,7 @@
 // Labels
 @mixin ouiFormLabel {
   @include ouiFontSizeXS;
+
   color: $ouiTitleColor;
   font-weight: $ouiFontWeightSemiBold;
 }
@@ -20,7 +21,8 @@
   $iconSize: $ouiSize;
   $iconPadding: $ouiFormControlPadding;
   $marginBetweenIcons: $ouiFormControlPadding / 2;
-  @if ($compressed) {
+
+  @if  $compressed {
     $iconPadding: $ouiFormControlCompressedPadding;
   }
 
@@ -39,12 +41,13 @@
   $clearSize: $ouiSize;
   $clearIconStroke: 2px;
 
-  @if ($size == 's') {
+  @if  $size == 's' {
     $clearSize: $ouiSizeM;
     $clearIconStroke: $ouiSizeXS;
   }
 
   @include size($clearSize);
+
   pointer-events: all;
   background-color: lightOrDarkTheme($ouiColorMediumShade, $ouiColorDarkShade);
   border-radius: $clearSize;
@@ -56,7 +59,9 @@
 
   #{$iconClass} {
     @include size($clearSize / 2);
+
     fill: $ouiColorEmptyShade;
+
     // increase thickness of icon at such a small size
     stroke: $ouiColorEmptyShade;
     stroke-width: $clearIconStroke;
@@ -64,13 +69,14 @@
 }
 
 @mixin ouiPlaceholderPerBrowser {
-  // sass-lint:disable-block no-vendor-prefixes
+  /* stylelint-disable selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown, no-duplicate-selectors */
   // Each prefix must be its own content block
-  &::-webkit-input-placeholder { @content; opacity: 1; }
-  &::-moz-placeholder { @content; opacity: 1; }
-  &:-ms-input-placeholder { @content; opacity: 1; }
-  &:-moz-placeholder { @content; opacity: 1; }
+  &::input-placeholder { @content; opacity: 1; }
   &::placeholder { @content; opacity: 1; }
+  &:input-placeholder { @content; opacity: 1; }
+  &:placeholder { @content; opacity: 1; }
+  &::placeholder { @content; opacity: 1; }
+  /* stylelint-enable selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown, no-duplicate-selectors */
 }
 
 @function ouiFormControlGradient($color: $ouiColorPrimary) {
@@ -84,6 +90,7 @@
 
 @mixin ouiFormControlText {
   @include ouiFont;
+
   font-size: $ouiFontSizeS;
   color: $ouiTextColor;
 
@@ -91,7 +98,6 @@
     line-height: 1em; // fixes text alignment in IE
   }
 
-  // sass-lint:disable-block mixins-before-declarations
   @include ouiPlaceholderPerBrowser {
     color: $ouiFormControlPlaceholderText;
   }
@@ -106,7 +112,7 @@
   width: 100%;
   height: $height;
 
-  @if ($includeAlternates) {
+  @if  $includeAlternates {
     &--fullWidth {
       max-width: 100%;
     }
@@ -122,7 +128,7 @@
 }
 
 @mixin ouiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) {
-  @if ($isIconOptional) {
+  @if  $isIconOptional {
     @at-root {
       #{&}--withIcon {
         @include ouiFormControlLayoutPadding(1, $side, $compressed);
@@ -136,7 +142,7 @@
 @mixin ouiFormControlIsLoading($isNextToIcon: false) {
   @at-root {
     #{&}-isLoading {
-      @if ($isNextToIcon) {
+      @if  $isNextToIcon {
         @include ouiFormControlLayoutPadding(2);
       } @else {
         @include ouiFormControlLayoutPadding(1);
@@ -144,7 +150,7 @@
     }
 
     #{&}-isLoading#{&}--compressed {
-      @if ($isNextToIcon) {
+      @if  $isNextToIcon {
         @include ouiFormControlLayoutPadding(2, $compressed: true);
       } @else {
         @include ouiFormControlLayoutPadding(1, $compressed: true);
@@ -156,12 +162,11 @@
 // 1. Must supply both values to background-size or some browsers apply the single value to both directions
 
 @mixin ouiFormControlDefaultShadow($borderOnly: false) {
-  // sass-lint:disable-block indentation
   background-color: $ouiFormBackgroundColor;
   background-repeat: no-repeat;
   background-size: 0% 100%; // 1
 
-  @if ($borderOnly) {
+  @if  $borderOnly {
     box-shadow: inset 0 0 0 1px $ouiFormBorderColor;
   } @else {
     box-shadow:
@@ -177,19 +182,18 @@
 
   // Fixes bug in Firefox where adding a transition to the background-color
   // caused a flash of differently styled dropdown.
-  @supports (-moz-appearance: none) { // sass-lint:disable-line no-vendor-prefixes
+  @supports (-moz-appearance: none) {
     // List *must* be in the same order as the above.
     transition-property: box-shadow, background-image, background-size;
   }
 }
 
 @mixin ouiFormControlFocusStyle($borderOnly: false) {
-  // sass-lint:disable-block indentation, empty-args
   background-color: tintOrShade($ouiColorEmptyShade, 0%, 40%);
   background-image: ouiFormControlGradient();
   background-size: 100% 100%; // 1
 
-  @if ($borderOnly) {
+  @if  $borderOnly {
     box-shadow: inset 0 0 0 1px $ouiFormBorderColor;
   } @else {
     box-shadow:
@@ -205,18 +209,17 @@
 }
 
 @mixin ouiFormControlDisabledTextStyle {
-  // sass-lint:disable-block no-vendor-prefixes
   color: $ouiFormControlDisabledColor;
   -webkit-text-fill-color: $ouiFormControlDisabledColor; // Required for Safari
 }
 
 @mixin ouiFormControlDisabledStyle {
   @include ouiFormControlDisabledTextStyle;
+
   cursor: not-allowed;
   background: $ouiFormBackgroundDisabledColor;
   box-shadow: inset 0 0 0 1px $ouiFormBorderDisabledColor;
 
-  // sass-lint:disable-block mixins-before-declarations
   @include ouiPlaceholderPerBrowser {
     color: $ouiFormControlDisabledColor;
   }
@@ -224,6 +227,7 @@
 
 @mixin ouiFormControlReadOnlyStyle {
   cursor: default;
+
   // Use transparency since there is no border and in case form is on a non-white background
   background: $ouiFormBackgroundReadOnlyColor;
   border-color: transparent;
@@ -242,7 +246,7 @@
   border-radius: $ouiFormControlBorderRadius;
   padding: $ouiFormControlPadding;
 
-  @if ($includeStates) {
+  @if  $includeStates {
     &:invalid { // 2
       @include ouiFormControlInvalidStyle;
     }
@@ -260,7 +264,6 @@
     }
 
     // Needs to be set for autofill
-    // sass-lint:disable-block no-vendor-prefixes
     &:-webkit-autofill,
     &:autofill {
       /* Many browsers use `!important` in their built-in `:-webkit-autofill` style declarations,
@@ -277,18 +280,18 @@
       ~ .euiFormControlLayoutIcons {
         color: $ouiTextColor;
       }
+
       /* End of Aliases */
     }
 
   }
 
-  @if ($includeSizes) {
+  @if  $includeSizes {
     &--compressed {
       @include ouiFormControlStyleCompressed($borderOnly, $includeStates);
     }
 
     &--inGroup {
-      // sass-lint:disable-block no-important
       box-shadow: none !important;
       border-radius: 0;
     }
@@ -297,10 +300,11 @@
 
 @mixin ouiFormControlStyleCompressed($borderOnly: false, $includeStates: true) {
   @include ouiFormControlDefaultShadow($borderOnly: true);
+
   padding: $ouiFormControlCompressedPadding;
   border-radius: $ouiFormControlCompressedBorderRadius;
 
-  @if ($includeStates) {
+  @if  $includeStates {
     &:invalid { // 2
       @include ouiFormControlInvalidStyle;
     }
@@ -326,6 +330,7 @@
 
   @if $size {
     $size: $size - 2px; // subtract 2px from size to account for border size
+
     padding: $size / 2;
   }
 
@@ -337,7 +342,7 @@
   } @else if $type == 'square' {
     border-radius: $ouiCheckboxBorderRadius;
   }
-  // sass-lint:disable-block indentation
+
   transition: background-color $ouiAnimSpeedFast ease-in,
               border-color $ouiAnimSpeedFast ease-in;
 }
@@ -346,6 +351,7 @@
   border-color: $ouiColorPrimary;
   background-color: $ouiColorPrimary;
 
+  /* stylelint-disable-next-line scss/at-if-no-null */
   @if $type != null {
     @include ouiIconBackground($type, $ouiColorEmptyShade);
   }
@@ -355,6 +361,8 @@
   border-color: $ouiColorLightShade;
   background-color: $ouiColorLightShade;
   box-shadow: none;
+
+  /* stylelint-disable-next-line scss/at-if-no-null */
   @if $type != null {
     @include ouiIconBackground($type, $ouiFormCustomControlDisabledIconColor);
   }
@@ -362,12 +370,12 @@
 
 @mixin ouiCustomControlFocused {
   @include ouiFocusRing('small');
+
   border-color: $ouiColorPrimary;
 }
 
 @mixin ouiHiddenSelectableInput {
   position: absolute;
-  // sass-lint:disable no-important
   opacity: 0 !important; // Make sure it's still hidden when :disabled
   width: 100%;
   height: 100%;
@@ -378,15 +386,21 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiFormLabel { @include ouiFormLabel; }
+
 @mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) { @include ouiFormControlLayoutPadding($numOfIcons, $side, $compressed); }
+
 @mixin euiFormControlLayoutClearIcon($iconClass, $size: 'm') { @include ouiFormControlLayoutClearIcon($iconClass, $size); }
+
 @mixin euiPlaceholderPerBrowser {
   @include ouiPlaceholderPerBrowser {
     @content;
   }
 }
+
 @function euiFormControlGradient($color: $ouiColorPrimary) { @return ouiFormControlGradient($color); }
+
 @mixin euiFormControlText { @include ouiFormControlText; }
+
 @mixin euiFormControlSize(
   $height: $ouiFormControlHeight,
   $includeAlternates: false
@@ -396,19 +410,35 @@
     $includeAlternates
   );
 }
+
 @mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) { @include ouiFormControlWithIcon($isIconOptional, $side, $compressed); }
+
 @mixin euiFormControlIsLoading($isNextToIcon: false) { @include ouiFormControlIsLoading($isNextToIcon); }
+
 @mixin euiFormControlDefaultShadow($borderOnly: false) { @include ouiFormControlDefaultShadow($borderOnly); }
+
 @mixin euiFormControlFocusStyle($borderOnly: false) { @include ouiFormControlFocusStyle($borderOnly); }
+
 @mixin euiFormControlInvalidStyle { @include ouiFormControlInvalidStyle; }
+
 @mixin euiFormControlDisabledTextStyle { @include ouiFormControlDisabledTextStyle; }
+
 @mixin euiFormControlDisabledStyle { @include ouiFormControlDisabledStyle; }
+
 @mixin euiFormControlReadOnlyStyle { @include ouiFormControlReadOnlyStyle; }
+
 @mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) { @include ouiFormControlStyle($borderOnly, $includeStates, $includeSizes); }
+
 @mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) { @include ouiFormControlStyleCompressed($borderOnly, $includeStates); }
+
 @mixin euiCustomControl($type: null, $size: $ouiSize) { @include ouiCustomControl($type, $size); }
+
 @mixin euiCustomControlSelected($type: null) { @include ouiCustomControlSelected($type); }
+
 @mixin euiCustomControlDisabled($type: null) { @include ouiCustomControlDisabled($type); }
+
 @mixin euiCustomControlFocused { @include ouiCustomControlFocused; }
+
 @mixin euiHiddenSelectableInput { @include ouiHiddenSelectableInput; }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_header.scss b/src/themes/oui-next/global_styling/mixins/_header.scss
index 2dd794c2c8..65541be604 100644
--- a/src/themes/oui-next/global_styling/mixins/_header.scss
+++ b/src/themes/oui-next/global_styling/mixins/_header.scss
@@ -59,4 +59,5 @@
     }
   }
 }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_helpers.scss b/src/themes/oui-next/global_styling/mixins/_helpers.scss
index ce347c1819..53e1e4471b 100644
--- a/src/themes/oui-next/global_styling/mixins/_helpers.scss
+++ b/src/themes/oui-next/global_styling/mixins/_helpers.scss
@@ -21,12 +21,9 @@
 
   position: relative;
 
-  &:after {
+  &::after {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     border-radius: $borderRadius;
     content: '';
     pointer-events: none;
@@ -38,10 +35,8 @@
 @mixin ouiScrollBar($thumbColor: $ouiColorDarkShade, $trackBackgroundColor: transparent) {
   // Firefox's scrollbar coloring cascades, but the sizing does not,
   // so it's being added to this mixin for allowing support wherever custom scrollbars are
-  // sass-lint:disable-block no-misspelled-properties
   scrollbar-width: thin;
 
-  // sass-lint:disable-block no-vendor-prefixes
   &::-webkit-scrollbar {
     width: $ouiScrollBar;
     height: $ouiScrollBar;
@@ -69,6 +64,7 @@
 // Just overflow and scrollbars
 @mixin ouiYScroll {
   @include ouiScrollBar;
+
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
@@ -84,6 +80,7 @@
 
 @mixin ouiXScroll {
   @include ouiScrollBar;
+
   overflow-x: auto;
 
   &:focus {
@@ -118,7 +115,6 @@
 
 // Specifically target IE11, but not Edge.
 @mixin internetExplorerOnly {
-  // sass-lint:disable-block no-vendor-prefixes
   @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
     @content;
   }
@@ -141,19 +137,27 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiScrollBar($thumbColor: $ouiColorDarkShade, $trackBackgroundColor: transparent) { @include ouiScrollBar($thumbColor, $trackBackgroundColor); }
+
 @mixin euiYScroll { @include ouiYScroll; }
+
 @mixin euiXScroll { @include ouiXScroll; }
+
 @mixin euiYScrollWithShadows { @include ouiYScrollWithShadows; }
+
 @mixin euiXScrollWithShadows { @include ouiXScrollWithShadows; }
+
 @mixin euiScreenReaderOnly { @include ouiScreenReaderOnly; }
+
 @mixin euiCanAnimate {
   @include ouiCanAnimate {
     @content;
   }
 }
+
 @mixin euiCantAnimate {
   @include ouiCantAnimate {
     @content;
   }
 }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_icons.scss b/src/themes/oui-next/global_styling/mixins/_icons.scss
index 581e49218e..58ed1166a7 100644
--- a/src/themes/oui-next/global_styling/mixins/_icons.scss
+++ b/src/themes/oui-next/global_styling/mixins/_icons.scss
@@ -11,7 +11,6 @@
 
 // For using icons as background images (data-uri)
 @mixin ouiIconBackground($type, $color: $ouiColorEmptyShade) {
-  // sass-lint:disable-block quotes
   @if variable-exists(type) == false {
     @error 'A $type:string must be provided to @mixin ouiIconBackground().';
   } @else if type-of($color) != color {
@@ -30,4 +29,5 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiIconBackground($type, $color: $ouiColorEmptyShade) { @include ouiIconBackground($type, $color); }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_index.scss b/src/themes/oui-next/global_styling/mixins/_index.scss
index 66051f0728..8e86e799e2 100644
--- a/src/themes/oui-next/global_styling/mixins/_index.scss
+++ b/src/themes/oui-next/global_styling/mixins/_index.scss
@@ -16,7 +16,6 @@
 @import 'helpers';
 @import 'states';
 @import 'icons';
-
 @import 'beta_badge';
 @import 'button';
 @import 'form';
diff --git a/src/themes/oui-next/global_styling/mixins/_loading.scss b/src/themes/oui-next/global_styling/mixins/_loading.scss
index dccfe2993e..f1f18aacc6 100644
--- a/src/themes/oui-next/global_styling/mixins/_loading.scss
+++ b/src/themes/oui-next/global_styling/mixins/_loading.scss
@@ -24,4 +24,5 @@
 ) {
   @return ouiLoadingSpinnerBorderColors($main, $highlight);
 }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_panel.scss b/src/themes/oui-next/global_styling/mixins/_panel.scss
index b727d2b476..15b416a864 100644
--- a/src/themes/oui-next/global_styling/mixins/_panel.scss
+++ b/src/themes/oui-next/global_styling/mixins/_panel.scss
@@ -29,6 +29,7 @@
 
       &#{$selector}--hasShadow {
         @include ouiBottomShadowSmall;
+
         border: $ouiBorderThin;
       }
 
@@ -46,6 +47,7 @@
         &:hover,
         &:focus {
           @include ouiSlightShadowHover;
+
           transform: translateY(-2px);
           cursor: pointer;
         }
@@ -71,4 +73,5 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiPanel($selector) { @include ouiPanel($selector); }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_popover.scss b/src/themes/oui-next/global_styling/mixins/_popover.scss
index affcaa8950..b1e05de062 100644
--- a/src/themes/oui-next/global_styling/mixins/_popover.scss
+++ b/src/themes/oui-next/global_styling/mixins/_popover.scss
@@ -10,9 +10,9 @@
  */
 
 @mixin ouiPopoverTitle($size: 'm') {
-  @if ($size == 's') {
+  @if  $size == 's' {
     @include ouiTitle('xxxs');
-  } @else if ($size == 'm') {
+  } @else if $size == 'm' {
     @include ouiTitle('xxs');
   } @else {
     @warn 'ouiPopoverTitle only accepts "s" or "m" sizes';
@@ -25,6 +25,7 @@
 
 @mixin ouiPopoverFooter {
   @include ouiFontSizeS;
+
   padding: $ouiSizeM;
   border-top: $ouiBorderThin;
 }
@@ -32,5 +33,7 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiPopoverTitle($size: 'm') { @include ouiPopoverTitle($size); }
+
 @mixin euiPopoverFooter { @include ouiPopoverFooter; }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_range.scss b/src/themes/oui-next/global_styling/mixins/_range.scss
index c579a20b60..880fdba73d 100644
--- a/src/themes/oui-next/global_styling/mixins/_range.scss
+++ b/src/themes/oui-next/global_styling/mixins/_range.scss
@@ -10,7 +10,6 @@
  */
 
 // Prefixes are unique in this file
-// sass-lint:disable no-vendor-prefixes
 
 @mixin ouiRangeTrackSize {
   height: $ouiRangeTrackHeight;
@@ -42,15 +41,19 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiRangeTrackSize { @include ouiRangeTrackSize; }
+
 @mixin euiRangeTrackPerBrowser {
   @include ouiRangeTrackPerBrowser {
     @content;
   }
 }
+
 @mixin euiRangeThumbStyle { @include ouiRangeThumbStyle; }
+
 @mixin euiRangeThumbPerBrowser {
   @include ouiRangeThumbPerBrowser {
     @content;
   }
 }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_responsive.scss b/src/themes/oui-next/global_styling/mixins/_responsive.scss
index ea69a35e83..875b3c17b4 100644
--- a/src/themes/oui-next/global_styling/mixins/_responsive.scss
+++ b/src/themes/oui-next/global_styling/mixins/_responsive.scss
@@ -12,8 +12,6 @@
 // This file makes use of double quotes to format errors with nested single quotes
 // The indentation linting freaks out on comments above else statements and is disabled.
 
-// sass-lint:disable quotes, no-warn, indentation
-
 // A sem-complicated mixin for breakpoints, that takes any number of
 // named breakpoints that exists in $ouiBreakpoints.
 
@@ -24,27 +22,27 @@
     $index: index($ouiBreakpointKeys, $size);
 
     // Check to make sure it exists in the allowed breakpoint names
-    @if ( $index ) {
-
+    @if   $index  {
       // Set the min size to the value of the size
       $minSize: map-get($ouiBreakpoints, $size);
 
       // If it is the last item, don't give it a max-width
-      @if ( $index == length($ouiBreakpointKeys) ) {
+      @if   $index == length($ouiBreakpointKeys)  {
         @media only screen and (min-width: $minSize) {
           @content;
         }
+
       // If it's not the last item, add a max-width
       } @else {
-
         // Set the max size to the value of the next size (-1px as to not overlap)
         $maxSize: map-get($ouiBreakpoints, nth($ouiBreakpointKeys, $index + 1)) - 1px;
 
         // If it's the the first item, don't set a min-width
-        @if ( $index == 1 ) {
+        @if   $index == 1  {
           @media only screen and (max-width: $maxSize) {
             @content;
           }
+
         // Otherwise it should have a min and max width
         } @else {
           @media only screen and (min-width: $minSize) and (max-width: $maxSize) {
@@ -52,6 +50,7 @@
           }
         }
       }
+
     // If it's not a known breakpoint, throw a warning
     } @else {
       @warn "ouiBreakpoint(): '#{$size}' is not a valid size in $ouiBreakpoints. Accepted values are '#{$ouiBreakpointKeys}'";
@@ -66,4 +65,5 @@
     @content;
   }
 }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_shadow.scss b/src/themes/oui-next/global_styling/mixins/_shadow.scss
index e1b9d33dae..8bf2786409 100644
--- a/src/themes/oui-next/global_styling/mixins/_shadow.scss
+++ b/src/themes/oui-next/global_styling/mixins/_shadow.scss
@@ -12,8 +12,6 @@
 // This file uses RGBA literal values responsibly
 // This file uses off-pattern indentation to be more readable
 
-// sass-lint:disable no-color-literals, no-color-keywords, indentation, quotes
-
 @mixin ouiSlightShadow($color: $ouiShadowColor, $opacity: .3) {
   box-shadow: 0 2px 2px -1px rgba($color, $opacity);
 }
@@ -50,7 +48,7 @@
     0 2px 2px 0 rgba($color, $opacity);
 
   // Never adjust borders if the border color is already on the dark side (dark theme)
-  @if ($adjustBorders and not (lightness($ouiBorderColor) < 50)) {
+  @if  $adjustBorders and not (lightness($ouiBorderColor) < 50) {
     border-color: tint($color, 75%);
     border-top-color: tint($color, 80%);
     border-bottom-color: tint($color, 55%);
@@ -63,7 +61,7 @@
   $adjustBorders: false,
   $reverse: false
 ) {
-  @if ($reverse) {
+  @if  $reverse {
     box-shadow:
       0 -40px 64px 0 rgba($color, $opacity),
       0 -24px 32px 0 rgba($color, $opacity),
@@ -80,7 +78,7 @@
   }
 
   // Never adjust borders if the border color is already on the dark side (dark theme)
-  @if ($adjustBorders and not (lightness($ouiBorderColor) < 50)) {
+  @if  $adjustBorders and not (lightness($ouiBorderColor) < 50) {
     border-color: tint($color, 70%);
     border-top-color: tint($color, 85%);
     border-bottom-color: tint($color, 55%);
@@ -89,7 +87,7 @@
 
 @mixin ouiSlightShadowHover($color: $ouiShadowColor, $opacity: .3) {
   box-shadow:
-    0 4px 8px 0 rgba($color, $opacity/2),
+    0 4px 8px 0 rgba($color, $opacity / 2),
     0 2px 2px -1px rgba($color, $opacity);
 }
 
@@ -100,16 +98,15 @@
 @mixin ouiOverflowShadow($direction: 'y', $side: 'both') {
   $hideHeight: $ouiScrollBarCorner * 1.25;
   $gradient: null;
-  $gradientStart:
-  transparentize(red, .9) 0%,
+  $gradientStart: transparentize(red, .9) 0%,
   transparentize(red, 0) $hideHeight;
-  $gradientEnd:
-  transparentize(red, 0) calc(100% - #{$hideHeight}),
+  $gradientEnd: transparentize(red, 0) calc(100% - #{$hideHeight}),
   transparentize(red, .9) 100%;
-  @if ($side == 'both' or $side == 'start' or $side == 'end') {
-    @if ($side == 'both') {
+
+  @if  $side == 'both' or $side == 'start' or $side == 'end' {
+    @if  $side == 'both' {
       $gradient: $gradientStart, $gradientEnd;
-    } @else if ($side == 'start') {
+    } @else if $side == 'start' {
       $gradient: $gradientStart;
     } @else {
       $gradient: $gradientEnd;
@@ -118,9 +115,9 @@
     @warn "ouiOverflowShadow() expects side to be 'both', 'start' or 'end' but got '#{$side}'";
   }
 
-  @if ($direction == 'y') {
+  @if  $direction == 'y' {
     mask-image: linear-gradient(to bottom, #{$gradient});
-  } @else if ($direction == 'x') {
+  } @else if $direction == 'x' {
     mask-image: linear-gradient(to right, #{$gradient});
   } @else {
     @warn "ouiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'";
@@ -130,10 +127,15 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiSlightShadow($color: $ouiShadowColor, $opacity: .3) { @include ouiSlightShadow($color, $opacity); }
+
 @mixin euiBottomShadowSmall($color: $ouiShadowColor, $opacity: .3) { @include ouiBottomShadowSmall($color, $opacity); }
+
 @mixin euiBottomShadowMedium($color: $ouiShadowColor, $opacity: .2) { @include ouiBottomShadowMedium($color, $opacity); }
+
 @mixin euiBottomShadowFlat($color: $ouiShadowColor, $opacity: .2) { @include ouiBottomShadowFlat($color, $opacity); }
+
 @mixin euiBottomShadow($color: $ouiShadowColorLarge, $opacity: .1, $adjustBorders: false) { @include ouiBottomShadow($color, $opacity, $adjustBorders); }
+
 @mixin euiBottomShadowLarge(
   $color: $ouiShadowColorLarge,
   $opacity: .1,
@@ -147,7 +149,11 @@
     $reverse
   );
 }
+
 @mixin euiSlightShadowHover($color: $ouiShadowColor, $opacity: .3) { @include ouiSlightShadowHover($color, $opacity); }
+
 @mixin euiSlightShadowActive($color: $ouiShadowColor, $opacity: .3) { @include ouiSlightShadowActive($color, $opacity); }
+
 @mixin euiOverflowShadow($direction: 'y', $side: 'both') { @include ouiOverflowShadow($direction, $side); }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_states.scss b/src/themes/oui-next/global_styling/mixins/_states.scss
index e4c31a8626..fc0f1aebff 100644
--- a/src/themes/oui-next/global_styling/mixins/_states.scss
+++ b/src/themes/oui-next/global_styling/mixins/_states.scss
@@ -12,10 +12,8 @@
 @mixin ouiFocusRing($size: 'small') {
   @if $size == 'large' {
     // It's always OK to use the focus animation. This will take precedence over times we turn it off individually like OuiButtonEmpty
-    // sass-lint:disable-block no-important
     animation: $ouiAnimSpeedSlow $ouiAnimSlightResistance 1 normal forwards focusRingAnimateLarge !important;
   } @else {
-    // sass-lint:disable-block no-important
     animation: $ouiAnimSpeedSlow $ouiAnimSlightResistance 1 normal forwards focusRingAnimate !important;
   }
 }
@@ -41,7 +39,7 @@
   cursor: not-allowed;
   text-decoration: none;
 
-  @if ($color) {
+  @if  $color {
     color: $color;
   }
 }
@@ -63,9 +61,15 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiFocusRing($size: 'small') { @include ouiFocusRing($size); }
+
 @mixin euiFocusBackground($color: $ouiColorPrimary) { @include ouiFocusBackground($color); }
+
 @mixin euiHoverState { @include ouiHoverState; }
+
 @mixin euiFocusState($color: $ouiColorPrimary) { @include ouiFocusState($color); }
+
 @mixin euiDisabledState($color: $ouiButtonColorDisabledText) { @include ouiDisabledState($color); }
+
 @mixin euiInteractiveStates($focusColor: $ouiColorPrimary, $disabledColor: $ouiButtonColorDisabledText) { @include ouiInteractiveStates($focusColor, $disabledColor); }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_tool_tip.scss b/src/themes/oui-next/global_styling/mixins/_tool_tip.scss
index ea10762cfb..c8e5668fd4 100644
--- a/src/themes/oui-next/global_styling/mixins/_tool_tip.scss
+++ b/src/themes/oui-next/global_styling/mixins/_tool_tip.scss
@@ -11,6 +11,7 @@
 
 @mixin ouiToolTipStyle($size: null) {
   @include ouiBottomShadow($color: $ouiColorInk);
+
   border-radius: $ouiBorderRadius;
   background-color: $ouiTooltipBackgroundColor;
   color: $ouiColorGhost;
@@ -18,11 +19,13 @@
   max-width: 256px;
   overflow-wrap: break-word;
 
-  @if ($size == 's') {
+  @if  $size == 's' {
     @include ouiFontSizeXS;
+
     padding: $ouiSizeS;
   } @else {
     @include ouiFontSizeS;
+
     padding: $ouiSizeM;
   }
 }
@@ -41,6 +44,9 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiToolTipStyle($size: null) { @include ouiToolTipStyle($size); }
+
 @mixin euiToolTipTitle { @include ouiToolTipTitle; }
+
 @mixin euiToolTipAnimation($side: 'top') { @include ouiToolTipAnimation($side); }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_typography.scss b/src/themes/oui-next/global_styling/mixins/_typography.scss
index dceb39c6e7..b3aa35407c 100644
--- a/src/themes/oui-next/global_styling/mixins/_typography.scss
+++ b/src/themes/oui-next/global_styling/mixins/_typography.scss
@@ -9,16 +9,12 @@
  * GitHub history for details.
  */
 
-// sass-lint:disable no-vendor-prefixes
-// sass-lint:disable no-important
-
 // Our base fonts
 
 @mixin ouiFont {
   font-family: var(--oui-font-family);
   font-weight: $ouiFontWeightRegular;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
   font-kerning: normal;
 }
 
@@ -35,9 +31,9 @@
 @mixin ouiTitle($size: 'm') {
   color: $ouiTitleColor;
 
-  @if (map-has-key($ouiTitles, $size)) {
+  @if  map-has-key($ouiTitles, $size) {
     @each $property, $value in map-get($ouiTitles, $size) {
-      @if ($property == 'font-size') {
+      @if  $property == 'font-size' {
         @include fontSize($value);
       } @else {
         #{$property}: $value;
@@ -53,48 +49,55 @@
 
 @mixin ouiFontSizeXS {
   @include fontSize($ouiFontSizeXS);
+
   line-height: $ouiLineHeight;
 }
 
 @mixin ouiFontSizeS {
   @include fontSize($ouiFontSizeS);
+
   line-height: $ouiLineHeight;
 }
 
 @mixin ouiFontSize {
   @include fontSize($ouiFontSize);
+
   line-height: $ouiLineHeight;
 }
 
 @mixin ouiFontSizeM {
   @include fontSize($ouiFontSizeM);
+
   line-height: $ouiLineHeight;
 }
 
 @mixin ouiFontSizeL {
   @include fontSize($ouiFontSizeL);
+
   line-height: $ouiLineHeight;
 }
 
 @mixin ouiFontSizeXL {
   @each $property, $value in map-get($ouiTitles, 'm') {
-    @if ($property == 'font-size') {
+    @if  $property == 'font-size' {
       @include fontSize($value);
     } @else {
       #{$property}: $value;
     }
   }
+
   line-height: 1.25;
 }
 
 @mixin ouiFontSizeXXL {
   @each $property, $value in map-get($ouiTitles, 'l') {
-    @if ($property == 'font-size') {
+    @if  $property == 'font-size' {
       @include fontSize($value);
     } @else {
       #{$property}: $value;
     }
   }
+
   line-height: 1.25;
 }
 
@@ -106,17 +109,14 @@
 }
 
 // Text truncation
-//
 // Prevent text from wrapping onto multiple lines, and truncate with an
 // ellipsis.
-//
 // 1. Ensure that the node has a maximum width after which truncation can
 //    occur.
 // 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
 //    nodes.
 
 @mixin ouiTextTruncate {
-  // sass-lint:disable-block no-important
   max-width: 100%; // 1
   overflow: hidden !important;
   text-overflow: ellipsis !important;
@@ -130,7 +130,6 @@
 
 
 // Text weight shifting
-//
 // When changing the font-weight based the state of the component
 // this mixin will ensure that the sizing is dependent on the boldest
 // weight so it doesn't shifter sibling content.
@@ -150,18 +149,33 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiFont { @include ouiFont; }
+
 @mixin euiCodeFont { @include ouiCodeFont; }
+
 @mixin euiText { @include ouiText; }
+
 @mixin euiTitle($size: 'm') { @include ouiTitle($size); }
+
 @mixin euiFontSizeXS { @include ouiFontSizeXS; }
+
 @mixin euiFontSizeS { @include ouiFontSizeS; }
+
 @mixin euiFontSize { @include ouiFontSize; }
+
 @mixin euiFontSizeM { @include ouiFontSizeM; }
+
 @mixin euiFontSizeL { @include ouiFontSizeL; }
+
 @mixin euiFontSizeXL { @include ouiFontSizeXL; }
+
 @mixin euiFontSizeXXL { @include ouiFontSizeXXL; }
+
 @mixin euiTextBreakWord { @include ouiTextBreakWord; }
+
 @mixin euiTextTruncate { @include ouiTextTruncate; }
+
 @mixin euiNumberFormat { @include ouiNumberFormat; }
+
 @mixin euiTextShift($fontWeight: $ouiFontWeightBold, $attr: 'data-text') { @include ouiTextShift($fontWeight, $attr); }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/reset/_hacks.scss b/src/themes/oui-next/global_styling/reset/_hacks.scss
index cd76fab92f..21906205ea 100644
--- a/src/themes/oui-next/global_styling/reset/_hacks.scss
+++ b/src/themes/oui-next/global_styling/reset/_hacks.scss
@@ -12,5 +12,5 @@
 // Chrome has an issue around RTL languages in SVGs when letter-spacing is negative
 // https://bugs.chromium.org/p/chromium/issues/detail?id=966480
 svg text {
-  letter-spacing: normal !important; // sass-lint:disable-line no-important
+  letter-spacing: normal !important;
 }
diff --git a/src/themes/oui-next/global_styling/reset/_reset.scss b/src/themes/oui-next/global_styling/reset/_reset.scss
index fbf7164b32..3ba7ace335 100644
--- a/src/themes/oui-next/global_styling/reset/_reset.scss
+++ b/src/themes/oui-next/global_styling/reset/_reset.scss
@@ -10,14 +10,13 @@
  */
 
 // This file allows multi-line selectors to make it more readable
-// sass-lint:disable single-line-per-selector
 
 /**
  * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126).
  *
  */
 
-*, *:before, *:after {
+*, *::before, *::after {
   box-sizing: border-box;
 }
 
@@ -70,6 +69,7 @@ footer, header, hgroup, menu, nav, section {
 
 html {
   @include ouiFont;
+
   font-size: $ouiFontSize;
   color: $ouiTextColor;
   height: 100%;
@@ -83,7 +83,6 @@ body {
 *:focus {
   outline: none;
 
-  // sass-lint:disable no-vendor-prefixes
   // Disables border that shows up when tabbing in Firefox.
   &::-moz-focus-inner {
     border: none;
@@ -144,10 +143,10 @@ blockquote, q {
   quotes: none;
 }
 
-blockquote:before, blockquote:after,
-q:before, q:after {
+blockquote::before, blockquote::after,
+q::before, q::after {
   content: '';
-  content: none; // sass-lint:disable-line no-duplicate-properties
+  content: none;
 }
 
 table {
diff --git a/src/themes/oui-next/global_styling/reset/_scrollbar.scss b/src/themes/oui-next/global_styling/reset/_scrollbar.scss
index 6ebbbd28b0..c064e21876 100644
--- a/src/themes/oui-next/global_styling/reset/_scrollbar.scss
+++ b/src/themes/oui-next/global_styling/reset/_scrollbar.scss
@@ -13,7 +13,6 @@
 // However, the width sizing is not, but this has been added to the ouiScrollBar mixin as well
 
 html {
-  // sass-lint:disable-block no-misspelled-properties
   scrollbar-width: thin;
   scrollbar-color: transparentize($ouiColorDarkShade, .5) transparent; // Firefox support
 }
diff --git a/src/themes/oui-next/global_styling/utility/_utility.scss b/src/themes/oui-next/global_styling/utility/_utility.scss
index e522b1ea3e..eb0b89f6b8 100644
--- a/src/themes/oui-next/global_styling/utility/_utility.scss
+++ b/src/themes/oui-next/global_styling/utility/_utility.scss
@@ -10,7 +10,6 @@
  */
 
 // This file utilizes !importants on purpose
-// sass-lint:disable no-important
 
 // Vertical alignment
 .oui-alignBaseline { vertical-align: baseline !important; }
@@ -55,6 +54,7 @@
   @include internetExplorerOnly {
     word-break: break-all !important;
   }
+
   overflow-wrap: break-word !important;
 }
 
@@ -101,9 +101,7 @@
   */
 .ouiIEFlexWrapFix {
   @include internetExplorerOnly {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 0%;
+    flex: 1 1 0%;
   }
 }
 
@@ -157,4 +155,5 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiFullHeight { @include ouiFullHeight; }
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_animations.scss b/src/themes/oui-next/global_styling/variables/_animations.scss
index 0cf4acb967..2160e54913 100644
--- a/src/themes/oui-next/global_styling/variables/_animations.scss
+++ b/src/themes/oui-next/global_styling/variables/_animations.scss
@@ -13,7 +13,6 @@
 
 $ouiAnimSlightBounce: cubic-bezier(.34, 1.61, .7, 1) !default;
 $ouiAnimSlightResistance: cubic-bezier(.694, .0482, .335, 1) !default;
-
 $ouiAnimSpeedExtraFast: 90ms !default;
 $ouiAnimSpeedFast: 150ms !default;
 $ouiAnimSpeedNormal: 250ms !default;
@@ -32,4 +31,5 @@ $euiAnimSpeedFast: $ouiAnimSpeedFast;
 $euiAnimSpeedNormal: $ouiAnimSpeedNormal;
 $euiAnimSpeedSlow: $ouiAnimSpeedSlow;
 $euiAnimSpeedExtraSlow: $ouiAnimSpeedExtraSlow;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_borders.scss b/src/themes/oui-next/global_styling/variables/_borders.scss
index 4bed6701b9..021dc7f511 100644
--- a/src/themes/oui-next/global_styling/variables/_borders.scss
+++ b/src/themes/oui-next/global_styling/variables/_borders.scss
@@ -13,7 +13,6 @@
 
 $ouiBorderWidthThin: 1px !default;
 $ouiBorderWidthThick: 2px !default;
-
 $ouiBorderColor: $ouiColorLightShade !default;
 $ouiBorderRadius: 4px !default;
 $ouiBorderRadiusSmall: $ouiBorderRadius / 2 !default;
@@ -31,4 +30,5 @@ $euiBorderRadiusSmall: $ouiBorderRadiusSmall;
 $euiBorderThick: $ouiBorderThick;
 $euiBorderThin: $ouiBorderThin;
 $euiBorderEditable: $ouiBorderEditable;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_buttons.scss b/src/themes/oui-next/global_styling/variables/_buttons.scss
index 22cda2773b..1d2a660d30 100644
--- a/src/themes/oui-next/global_styling/variables/_buttons.scss
+++ b/src/themes/oui-next/global_styling/variables/_buttons.scss
@@ -12,8 +12,8 @@
 $ouiButtonHeight: $ouiSizeXXL !default;
 $ouiButtonHeightSmall: $ouiSizeXL !default;
 $ouiButtonHeightXSmall: $ouiSizeL !default;
-
 $ouiButtonColorDisabled: tintOrShade($ouiTextColor, 70%, 70%) !default;
+
 // Only increase the contrast of background color to text to 2.0 for disabled
 $ouiButtonColorDisabledText: makeDisabledContrastColor($ouiButtonColorDisabled) !default;
 $ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightShade) !default;
@@ -40,4 +40,5 @@ $euiButtonColorDisabled: $ouiButtonColorDisabled;
 $euiButtonColorDisabledText: $ouiButtonColorDisabledText;
 $euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled;
 $euiButtonTypes: $ouiButtonTypes;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss b/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss
index 81fe4f3f10..72059f7c8f 100644
--- a/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss
+++ b/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss
@@ -15,12 +15,10 @@ $ouiCollapsibleNavBackgroundColor: $ouiPageBackgroundColor !default;
 // No distinction between none and light backgrounds in this theme
 $ouiCollapsibleNavGroupNoneBackgroundColor: $ouiPageBackgroundColor !default;
 $ouiCollapsibleNavGroupLightBackgroundColor: $ouiPageBackgroundColor !default;
-
 $ouiCollapsibleNavGroupDarkBackgroundColor: lightOrDarkTheme(
   shade($ouiColorDarkestShade, 20%),
   shade($ouiColorLightestShade, 50%),
 ) !default;
-
 $ouiCollapsibleNavGroupDarkHighContrastColor: makeGraphicContrastColor(
   $ouiColorPrimary,
   $ouiCollapsibleNavGroupDarkBackgroundColor
@@ -33,4 +31,5 @@ $euiCollapsibleNavGroupNoneBackgroundColor: $ouiCollapsibleNavGroupNoneBackgroun
 $euiCollapsibleNavGroupLightBackgroundColor: $ouiCollapsibleNavGroupLightBackgroundColor;
 $euiCollapsibleNavGroupDarkBackgroundColor: $ouiCollapsibleNavGroupDarkBackgroundColor;
 $euiCollapsibleNavGroupDarkHighContrastColor: $ouiCollapsibleNavGroupDarkHighContrastColor;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_colors.scss b/src/themes/oui-next/global_styling/variables/_colors.scss
index 3b0574ed41..148601ef5a 100644
--- a/src/themes/oui-next/global_styling/variables/_colors.scss
+++ b/src/themes/oui-next/global_styling/variables/_colors.scss
@@ -102,9 +102,7 @@ $ouiPaletteColorBlind: (
     behindText: #FF7E62,
   )
 ) !default;
-
 $ouiPaletteColorBlindKeys: map-keys($ouiPaletteColorBlind);
-
 $ouiColorVis0: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis0'), 'graphic') !default;
 $ouiColorVis1: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis1'), 'graphic') !default;
 $ouiColorVis2: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis2'), 'graphic') !default;
@@ -115,8 +113,6 @@ $ouiColorVis6: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis6'), 'graphic'
 $ouiColorVis7: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis7'), 'graphic') !default;
 $ouiColorVis8: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis8'), 'graphic') !default;
 $ouiColorVis9: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis9'), 'graphic') !default;
-
-// sass-lint:disable-block variable-name-format
 $ouiColorVis0_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis0'), 'behindText') !default;
 $ouiColorVis1_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis1'), 'behindText') !default;
 $ouiColorVis2_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis2'), 'behindText') !default;
@@ -148,7 +144,7 @@ $ouiCodeBlockTypeColor: makeHighContrastColor($ouiColorVis1, $ouiCodeBlockBackgr
 $ouiCodeBlockAttributeColor: inherit !default;
 $ouiCodeBlockSymbolColor: makeHighContrastColor($ouiColorVis9, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockParamsColor: inherit !default;
-$ouiCodeBlockMetaColor:  makeHighContrastColor($ouiTextSubduedColor, $ouiCodeBlockBackgroundColor) !default;
+$ouiCodeBlockMetaColor: makeHighContrastColor($ouiTextSubduedColor, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockTitleColor: makeHighContrastColor($ouiColorVis7, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockSectionColor: makeHighContrastColor($ouiColorVis9, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockAdditionColor: makeHighContrastColor($ouiColorVis0, $ouiCodeBlockBackgroundColor) !default;
@@ -274,4 +270,5 @@ $euiCodeBlockAdditionColor: $ouiCodeBlockAdditionColor;
 $euiCodeBlockDeletionColor: $ouiCodeBlockDeletionColor;
 $euiCodeBlockSelectorClassColor: $ouiCodeBlockSelectorClassColor;
 $euiCodeBlockSelectorIdColor: $ouiCodeBlockSelectorIdColor;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_form.scss b/src/themes/oui-next/global_styling/variables/_form.scss
index 65c1159f0d..d083085802 100644
--- a/src/themes/oui-next/global_styling/variables/_form.scss
+++ b/src/themes/oui-next/global_styling/variables/_form.scss
@@ -17,7 +17,6 @@ $ouiFormControlPadding: $ouiSizeM !default;
 $ouiFormControlCompressedPadding: $ouiSizeS !default;
 $ouiFormControlBorderRadius: 0 !default;
 $ouiFormControlCompressedBorderRadius: $ouiBorderRadiusSmall !default;
-
 $ouiRadioSize: $ouiSize !default;
 $ouiCheckBoxSize: $ouiSize !default;
 $ouiCheckboxBorderRadius: $ouiBorderRadius !default;
@@ -27,11 +26,9 @@ $ouiSwitchHeight: $ouiSize * 1.25 !default;
 $ouiSwitchWidth: ($ouiSize * 2.5) + $ouiSizeXS !default;
 $ouiSwitchThumbSize: $ouiSwitchHeight !default;
 $ouiSwitchIconHeight: $ouiSize !default;
-
 $ouiSwitchHeightCompressed: $ouiSize !default;
 $ouiSwitchWidthCompressed: $ouiSize * 1.75 !default;
 $ouiSwitchThumbSizeCompressed: $ouiSwitchHeightCompressed !default;
-
 $ouiSwitchHeightMini: $ouiSwitchHeight * .5 !default;
 $ouiSwitchWidthMini: $ouiSwitchWidth * .5 !default;
 $ouiSwitchThumbSizeMini: $ouiSwitchHeightMini !default;
@@ -48,6 +45,7 @@ $ouiFormCustomControlBorderColor: shadeOrTint($ouiColorLightestShade, 18%, 30%)
 $ouiFormControlDisabledColor: $ouiColorMediumShade !default;
 $ouiFormControlBoxShadow: 0 1px 1px -1px transparentize($ouiShadowColor, .8), 0 3px 2px -2px transparentize($ouiShadowColor, .8) !default;
 $ouiFormControlPlaceholderText: makeHighContrastColor($ouiTextSubduedColor, $ouiFormBackgroundColor) !default;
+/* stylelint-disable-next-line scss/dollar-variable-pattern */
 $_ouiFormInputGroupLabelDarkBackgroundColor: #293847 !default;
 $ouiFormInputGroupLabelBackground: lightOrDarkTheme(tint($ouiColorLightShade, 50%), $_ouiFormInputGroupLabelDarkBackgroundColor) !default;
 $ouiFormInputGroupBorder: 1px solid shadeOrTint($ouiFormInputGroupLabelBackground, 2%, 4%) !default;
@@ -60,20 +58,16 @@ $ouiFormControlLayoutGroupInputCompressedBorderRadius: $ouiFormControlCompressed
 
 // Range
 $ouiRangeTrackColor: $ouiColorDarkShade !default;
-
 $ouiRangeThumbRadius: 50% !default;
 $ouiRangeThumbHeight: $ouiSize !default;
 $ouiRangeThumbWidth: $ouiSize !default;
 $ouiRangeThumbBorderColor: $ouiRangeTrackColor !default;
-
 $ouiRangeTrackWidth: 100% !default;
 $ouiRangeTrackHeight: 2px !default;
 $ouiRangeTrackBorderWidth: 0 !default;
 $ouiRangeTrackBorderColor: $ouiRangeTrackColor !default;
 $ouiRangeTrackRadius: $ouiBorderRadius !default;
-
 $ouiRangeDisabledOpacity: .25 !default;
-
 $ouiRangeHighlightHeight: $ouiSizeXS !default;
 
 
@@ -127,4 +121,5 @@ $euiRangeTrackBorderColor: $ouiRangeTrackBorderColor;
 $euiRangeTrackRadius: $ouiRangeTrackRadius;
 $euiRangeDisabledOpacity: $ouiRangeDisabledOpacity;
 $euiRangeHighlightHeight: $ouiRangeHighlightHeight;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_header.scss b/src/themes/oui-next/global_styling/variables/_header.scss
index e5f7abb3dd..d5b996dc49 100644
--- a/src/themes/oui-next/global_styling/variables/_header.scss
+++ b/src/themes/oui-next/global_styling/variables/_header.scss
@@ -11,6 +11,7 @@
 
 // Themeable colors
 $ouiHeaderBackgroundColor: $ouiPageBackgroundColor !default;
+
 // Always use the dark theme value of $ouiPageBackgroundColor for the dark header background
 $ouiHeaderDarkBackgroundColor: #172430 !default;
 $ouiHeaderBorderColor: $ouiBorderColor !default;
@@ -32,4 +33,5 @@ $euiHeaderBreadcrumbColor: $ouiHeaderBreadcrumbColor;
 $euiHeaderHeight: $ouiHeaderHeight;
 $euiHeaderChildSize: $ouiHeaderChildSize;
 $euiHeaderHeightCompensation: $ouiHeaderHeightCompensation;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_index.scss b/src/themes/oui-next/global_styling/variables/_index.scss
index ae6c1944be..cca22e58c5 100644
--- a/src/themes/oui-next/global_styling/variables/_index.scss
+++ b/src/themes/oui-next/global_styling/variables/_index.scss
@@ -27,7 +27,6 @@
 @import 'shadows';
 @import 'states';
 @import 'z_index';
-
 @import 'buttons';
 @import 'form';
 @import 'header';
diff --git a/src/themes/oui-next/global_styling/variables/_page.scss b/src/themes/oui-next/global_styling/variables/_page.scss
index 0b996c7199..4bf5ec0075 100644
--- a/src/themes/oui-next/global_styling/variables/_page.scss
+++ b/src/themes/oui-next/global_styling/variables/_page.scss
@@ -16,4 +16,5 @@ $ouiPageSidebarMinWidth: $ouiSizeL * 8 !default;
 /* OUI -> EUI Aliases */
 $euiPageDefaultMaxWidth: $ouiPageDefaultMaxWidth;
 $euiPageSidebarMinWidth: $ouiPageSidebarMinWidth;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_panel.scss b/src/themes/oui-next/global_styling/variables/_panel.scss
index 6edb023b3e..f683f25ac6 100644
--- a/src/themes/oui-next/global_styling/variables/_panel.scss
+++ b/src/themes/oui-next/global_styling/variables/_panel.scss
@@ -14,12 +14,10 @@ $ouiPanelPaddingModifiers: (
   'paddingMedium': $ouiSize,
   'paddingLarge':  $ouiSizeL
 ) !default;
-
 $ouiPanelBorderRadiusModifiers: (
   'borderRadiusNone': 0,
   'borderRadiusMedium': $ouiBorderRadius,
 ) !default;
-
 $ouiPanelBackgroundColorModifiers: (
   'transparent': transparent,
   'plain': $ouiColorEmptyShade,
@@ -36,4 +34,5 @@ $ouiPanelBackgroundColorModifiers: (
 $euiPanelPaddingModifiers: $ouiPanelPaddingModifiers;
 $euiPanelBorderRadiusModifiers: $ouiPanelBorderRadiusModifiers;
 $euiPanelBackgroundColorModifiers: $ouiPanelBackgroundColorModifiers;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_responsive.scss b/src/themes/oui-next/global_styling/variables/_responsive.scss
index f6f6a34139..24bdce19ed 100644
--- a/src/themes/oui-next/global_styling/variables/_responsive.scss
+++ b/src/themes/oui-next/global_styling/variables/_responsive.scss
@@ -16,11 +16,11 @@ $ouiBreakpoints: (
   'l':  992px,
   'xl': 1200px
 ) !default;
-
 $ouiBreakpointKeys: map-keys($ouiBreakpoints);
 
 
 /* OUI -> EUI Aliases */
 $euiBreakpoints: $ouiBreakpoints;
 $euiBreakpointKeys: $ouiBreakpointKeys;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_shadows.scss b/src/themes/oui-next/global_styling/variables/_shadows.scss
index 9dae493cef..61bcb4864c 100644
--- a/src/themes/oui-next/global_styling/variables/_shadows.scss
+++ b/src/themes/oui-next/global_styling/variables/_shadows.scss
@@ -18,4 +18,5 @@ $ouiShadowColorLarge: shade(saturate($ouiColorMediumShade, 25%), 50%) !default;
 /* OUI -> EUI Aliases */
 $euiShadowColor: $ouiShadowColor;
 $euiShadowColorLarge: $ouiShadowColorLarge;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_size.scss b/src/themes/oui-next/global_styling/variables/_size.scss
index 12cd4115fd..124233dd84 100644
--- a/src/themes/oui-next/global_styling/variables/_size.scss
+++ b/src/themes/oui-next/global_styling/variables/_size.scss
@@ -9,17 +9,14 @@
  * GitHub history for details.
  */
 
-$ouiSize:     16px !default;
-
-$ouiSizeXS:   $ouiSize * .25 !default;
-$ouiSizeS:    $ouiSize * .5 !default;
-$ouiSizeM:    $ouiSize * .75 !default;
-$ouiSizeL:    $ouiSize * 1.5 !default;
-$ouiSizeXL:   $ouiSize * 2 !default;
-$ouiSizeXXL:  $ouiSize * 2.5 !default;
-
+$ouiSize: 16px !default;
+$ouiSizeXS: $ouiSize * .25 !default;
+$ouiSizeS: $ouiSize * .5 !default;
+$ouiSizeM: $ouiSize * .75 !default;
+$ouiSizeL: $ouiSize * 1.5 !default;
+$ouiSizeXL: $ouiSize * 2 !default;
+$ouiSizeXXL: $ouiSize * 2.5 !default;
 $ouiButtonMinWidth: $ouiSize * 7 !default;
-
 $ouiScrollBar: $ouiSize !default;
 $ouiScrollBarCorner: $ouiSizeS * .75 !default;
 
@@ -35,4 +32,5 @@ $euiSizeXXL: $ouiSizeXXL;
 $euiButtonMinWidth: $ouiButtonMinWidth;
 $euiScrollBar: $ouiScrollBar;
 $euiScrollBarCorner: $ouiScrollBarCorner;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_states.scss b/src/themes/oui-next/global_styling/variables/_states.scss
index 7b6be093b7..23c6aa3831 100644
--- a/src/themes/oui-next/global_styling/variables/_states.scss
+++ b/src/themes/oui-next/global_styling/variables/_states.scss
@@ -33,4 +33,5 @@ $euiFocusRingSizeLarge: $ouiFocusRingSizeLarge;
 $euiFocusRingSize: $ouiFocusRingSize;
 $euiFocusChangePercent: $ouiFocusChangePercent;
 $euiFocusBackgroundColor: $ouiFocusBackgroundColor;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_tool_tip.scss b/src/themes/oui-next/global_styling/variables/_tool_tip.scss
index a1b41f7bae..c691d71e0b 100644
--- a/src/themes/oui-next/global_styling/variables/_tool_tip.scss
+++ b/src/themes/oui-next/global_styling/variables/_tool_tip.scss
@@ -10,7 +10,6 @@
  */
 
 $ouiTooltipBackgroundColor: #293847 !default;
-
 $ouiTooltipAnimations: (
   top: ouiToolTipTop,
   left: ouiToolTipBottom,
@@ -22,4 +21,5 @@ $ouiTooltipAnimations: (
 /* OUI -> EUI Aliases */
 $euiTooltipBackgroundColor: $ouiTooltipBackgroundColor;
 $euiTooltipAnimations: $ouiTooltipAnimations;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_typography.scss b/src/themes/oui-next/global_styling/variables/_typography.scss
index f2a1b81be5..99672e4929 100644
--- a/src/themes/oui-next/global_styling/variables/_typography.scss
+++ b/src/themes/oui-next/global_styling/variables/_typography.scss
@@ -30,43 +30,41 @@
 //     If our base font size (ouiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
 //     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
 @function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($ouiFontSize/2)*$multiplier);
+  @return convertToRem(($ouiFontSize / 2) * $multiplier);
 }
+
 @mixin lineHeightFromBaseline($multiplier: 3) {
   line-height: lineHeightFromBaseline($multiplier);
 }
 
-// sass-lint:disable quotes
 $ouiFontFamily: #{"'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"} !default;
 $ouiCodeFontFamily: #{"'Source Code Pro', Consolas, Menlo, Courier, monospace"} !default;
-// sass-lint:enable quotes
 
 // Careful using ligatures. Code editors like ACE will often error because of width calculations
 $ouiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;
 
 // Font sizes -- scale is loosely based on Major Third (1.250)
-$ouiTextScale:      2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default;
-
-$ouiFontSize:       $ouiSize !default; // 5th position in scale
-$ouiFontSizeXS:     $ouiFontSize * nth($ouiTextScale, 7) !default; // 12px
-$ouiFontSizeS:      $ouiFontSize * nth($ouiTextScale, 6) !default; // 14px
-$ouiFontSizeM:      $ouiFontSize * nth($ouiTextScale, 4) !default; // 18px
-$ouiFontSizeL:      $ouiFontSize * nth($ouiTextScale, 3) !default; // 20px
-$ouiFontSizeXL:     $ouiFontSize * nth($ouiTextScale, 2) !default; // 28px
-$ouiFontSizeXXL:    $ouiFontSize * nth($ouiTextScale, 1) !default; // 36px
+$ouiTextScale: 2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default;
+$ouiFontSize: $ouiSize !default; // 5th position in scale
+$ouiFontSizeXS: $ouiFontSize * nth($ouiTextScale, 7) !default; // 12px
+$ouiFontSizeS: $ouiFontSize * nth($ouiTextScale, 6) !default; // 14px
+$ouiFontSizeM: $ouiFontSize * nth($ouiTextScale, 4) !default; // 18px
+$ouiFontSizeL: $ouiFontSize * nth($ouiTextScale, 3) !default; // 20px
+$ouiFontSizeXL: $ouiFontSize * nth($ouiTextScale, 2) !default; // 28px
+$ouiFontSizeXXL: $ouiFontSize * nth($ouiTextScale, 1) !default; // 36px
 
 // Line height
-$ouiLineHeight:     1.5 !default;
+$ouiLineHeight: 1.5 !default;
 $ouiBodyLineHeight: 1 !default;
 
 // Font weights
-$ouiFontWeightLight:        300 !default;
-$ouiFontWeightRegular:      400 !default;
-$ouiFontWeightMedium:       500 !default;
-$ouiFontWeightSemiBold:     600 !default;
-$ouiFontWeightBold:         700 !default;
-$ouiCodeFontWeightRegular:  400 !default;
-$ouiCodeFontWeightBold:     700 !default;
+$ouiFontWeightLight: 300 !default;
+$ouiFontWeightRegular: 400 !default;
+$ouiFontWeightMedium: 500 !default;
+$ouiFontWeightSemiBold: 600 !default;
+$ouiFontWeightBold: 700 !default;
+$ouiCodeFontWeightRegular: 400 !default;
+$ouiCodeFontWeightBold: 700 !default;
 
 // Titles map
 // Lists all the properties per OuiTitle size that then gets looped through to create the selectors.
@@ -133,4 +131,5 @@ $euiFontWeightBold: $ouiFontWeightBold;
 $euiCodeFontWeightRegular: $ouiCodeFontWeightRegular;
 $euiCodeFontWeightBold: $ouiCodeFontWeightBold;
 $euiTitles: $ouiTitles;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_z_index.scss b/src/themes/oui-next/global_styling/variables/_z_index.scss
index b4c55856ef..8c7e04beae 100644
--- a/src/themes/oui-next/global_styling/variables/_z_index.scss
+++ b/src/themes/oui-next/global_styling/variables/_z_index.scss
@@ -33,7 +33,6 @@ $ouiZLevel6: 6000;
 $ouiZLevel7: 7000;
 $ouiZLevel8: 8000;
 $ouiZLevel9: 9000;
-
 $ouiZToastList: $ouiZLevel9;
 $ouiZModal: $ouiZLevel8;
 $ouiZMask: $ouiZLevel6;
@@ -65,4 +64,5 @@ $euiZHeader: $ouiZHeader;
 $euiZFlyout: $ouiZFlyout;
 $euiZMaskBelowHeader: $ouiZMaskBelowHeader;
 $euiZContent: $ouiZContent;
+
 /* End of Aliases */
diff --git a/src/themes/oui-next/oui_next_colors_dark.scss b/src/themes/oui-next/oui_next_colors_dark.scss
index b7d1db0849..0a827c0c64 100644
--- a/src/themes/oui-next/oui_next_colors_dark.scss
+++ b/src/themes/oui-next/oui_next_colors_dark.scss
@@ -41,6 +41,7 @@ $ouiColorHighlight: #2E2D25;
 // Variations from core
 $ouiTextColor: #DFE5EF;
 $ouiTitleColor: $ouiTextColor;
+
 // Ensure contrast between subdued text and the page background
 // Should not be shaded as much as $ouiColorDisabled
 $ouiTextSubduedColor: makeHighContrastColor(shade($ouiTextColor, 30%), $ouiPageBackgroundColor);
@@ -99,4 +100,5 @@ $euiColorChartLines: $ouiColorChartLines;
 $euiColorChartBand: $ouiColorChartBand;
 $euiShadowColor: $ouiShadowColor;
 $euiShadowColorLarge: $ouiShadowColorLarge;
+
 /* End of Aliases */
diff --git a/src/themes/oui/oui_colors_dark.scss b/src/themes/oui/oui_colors_dark.scss
index 4ea79a931c..12c0dd2e9f 100644
--- a/src/themes/oui/oui_colors_dark.scss
+++ b/src/themes/oui/oui_colors_dark.scss
@@ -97,4 +97,5 @@ $euiColorChartLines: $ouiColorChartLines;
 $euiColorChartBand: $ouiColorChartBand;
 $euiShadowColor: $ouiShadowColor;
 $euiShadowColorLarge: $ouiShadowColorLarge;
+
 /* End of Aliases */
diff --git a/yarn.lock b/yarn.lock
index 2865c81c77..85f2c064eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1278,6 +1278,26 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@csstools/css-parser-algorithms@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz#ec4fc764ba45d2bb7ee2774667e056aa95003f3a"
+  integrity sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==
+
+"@csstools/css-tokenizer@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz#9d70e6dcbe94e44c7400a2929928db35c4de32b5"
+  integrity sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==
+
+"@csstools/media-query-list-parser@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz#0017f99945f6c16dd81a7aacf6821770933c3a5c"
+  integrity sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==
+
+"@csstools/selector-specificity@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz#798622546b63847e82389e473fd67f2707d82247"
+  integrity sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==
+
 "@elastic/charts@^30.2.0":
   version "30.2.0"
   resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-30.2.0.tgz#95942317ac19a4b7cd81b78807059c82a565f3fb"
@@ -1326,9 +1346,9 @@
     strip-json-comments "^3.1.1"
 
 "@faker-js/faker@^8.0.1":
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-8.0.1.tgz#2157068931aaab555eda5ff87f50330aeeb6153a"
-  integrity sha512-kbh5MenpTN9U0B4QcOI1NoTPlZHniSYQ3BHbhAnPjJGAmmFqxoxTE4sGdpy7ZOO9038DPGCuhXyMkjOr05uVwA==
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-8.0.2.tgz#bab698c5d3da9c52744e966e0e3eedb6c8b05c37"
+  integrity sha512-Uo3pGspElQW91PCvKSIAXoEgAUlRnH29sX2/p89kg7sP1m2PzCufHINd0FhTXQf6DYGiUlVncdSPa2F9wxed2A==
 
 "@fisker/parse-srcset@1.0.2":
   version "1.0.2"
@@ -2033,74 +2053,6 @@
     unbzip2-stream "1.4.3"
     yargs "17.7.1"
 
-"@sentry/core@5.22.3":
-  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.22.3.tgz#030f435f2b518f282ba8bd954dac90cd70888bd7"
-  integrity sha512-eGL5uUarw3o4i9QUb9JoFHnhriPpWCaqeaIBB06HUpdcvhrjoowcKZj1+WPec5lFg5XusE35vez7z/FPzmJUDw==
-  dependencies:
-    "@sentry/hub" "5.22.3"
-    "@sentry/minimal" "5.22.3"
-    "@sentry/types" "5.22.3"
-    "@sentry/utils" "5.22.3"
-    tslib "^1.9.3"
-
-"@sentry/hub@5.22.3":
-  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.22.3.tgz#08309a70d2ea8d5e313d05840c1711f34f2fffe5"
-  integrity sha512-INo47m6N5HFEs/7GMP9cqxOIt7rmRxdERunA3H2L37owjcr77MwHVeeJ9yawRS6FMtbWXplgWTyTIWIYOuqVbw==
-  dependencies:
-    "@sentry/types" "5.22.3"
-    "@sentry/utils" "5.22.3"
-    tslib "^1.9.3"
-
-"@sentry/minimal@5.22.3":
-  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.22.3.tgz#706e4029ae5494123d3875c658ba8911aa5cc440"
-  integrity sha512-HoINpYnVYCpNjn2XIPIlqH5o4BAITpTljXjtAftOx6Hzj+Opjg8tR8PWliyKDvkXPpc4kXK9D6TpEDw8MO0wZA==
-  dependencies:
-    "@sentry/hub" "5.22.3"
-    "@sentry/types" "5.22.3"
-    tslib "^1.9.3"
-
-"@sentry/node@^5.7.0":
-  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-5.22.3.tgz#adea622eae6811e11edc8f34209c912caed91336"
-  integrity sha512-TCCKO7hJKiQi1nGmJcQfvbbqv98P08LULh7pb/NaO5pV20t1FtICfGx8UMpORRDehbcAiYq/f7rPOF6X/Xl5iw==
-  dependencies:
-    "@sentry/core" "5.22.3"
-    "@sentry/hub" "5.22.3"
-    "@sentry/tracing" "5.22.3"
-    "@sentry/types" "5.22.3"
-    "@sentry/utils" "5.22.3"
-    cookie "^0.4.1"
-    https-proxy-agent "^5.0.0"
-    lru_map "^0.3.3"
-    tslib "^1.9.3"
-
-"@sentry/tracing@5.22.3":
-  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-5.22.3.tgz#9b5a376e3164c007a22e8642ec094104468cac0c"
-  integrity sha512-Zp59kMCk5v56ZAyErqjv/QvGOWOQ5fRltzeVQVp8unIDTk6gEFXfhwPsYHOokJe1mfkmrgPDV6xAkYgtL3KCDQ==
-  dependencies:
-    "@sentry/hub" "5.22.3"
-    "@sentry/minimal" "5.22.3"
-    "@sentry/types" "5.22.3"
-    "@sentry/utils" "5.22.3"
-    tslib "^1.9.3"
-
-"@sentry/types@5.22.3":
-  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.22.3.tgz#d1d547b30ee8bd7771fa893af74c4f3d71f0fd18"
-  integrity sha512-cv+VWK0YFgCVDvD1/HrrBWOWYG3MLuCUJRBTkV/Opdy7nkdNjhCAJQrEyMM9zX0sac8FKWKOHT0sykNh8KgmYw==
-
-"@sentry/utils@5.22.3":
-  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.22.3.tgz#e3bda3e789239eb16d436f768daa12829f33d18f"
-  integrity sha512-AHNryXMBvIkIE+GQxTlmhBXD0Ksh+5w1SwM5qi6AttH+1qjWLvV6WB4+4pvVvEoS8t5F+WaVUZPQLmCCWp6zKw==
-  dependencies:
-    "@sentry/types" "5.22.3"
-    tslib "^1.9.3"
-
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -2435,7 +2387,7 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
-"@types/minimist@^1.2.0":
+"@types/minimist@^1.2.0", "@types/minimist@^1.2.2":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
@@ -3091,6 +3043,16 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4, ajv
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^8.0.1:
+  version "8.12.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
+  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
@@ -3155,16 +3117,11 @@ ansi-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
   integrity sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==
 
-ansi-regex@^3.0.0, ansi-regex@^4.0.0, ansi-regex@^5.0.0, ansi-regex@^5.0.1:
+ansi-regex@^3.0.0, ansi-regex@^4.0.0, ansi-regex@^4.1.0, ansi-regex@^5.0.0, ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
-ansi-regex@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.1.tgz#164daac87ab2d6f6db3a29875e2d1766582dabed"
-  integrity sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==
-
 ansi-regex@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
@@ -3468,6 +3425,11 @@ astral-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
   integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
 
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
 async-each@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
@@ -3747,6 +3709,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+balanced-match@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
+  integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
+
 base64-js@^1.0.2:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
@@ -4336,6 +4303,16 @@ camelcase-keys@^6.2.2:
     map-obj "^4.0.0"
     quick-lru "^4.0.1"
 
+camelcase-keys@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-7.0.2.tgz#d048d8c69448745bb0de6fc4c1c52a30dfbe7252"
+  integrity sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==
+  dependencies:
+    camelcase "^6.3.0"
+    map-obj "^4.1.0"
+    quick-lru "^5.1.1"
+    type-fest "^1.2.1"
+
 camelcase@4.1.0, camelcase@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
@@ -4351,7 +4328,7 @@ camelcase@^6.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
   integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
 
-camelcase@^6.2.0:
+camelcase@^6.2.0, camelcase@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
@@ -4422,14 +4399,6 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
-  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
@@ -4932,6 +4901,11 @@ color@^3.0.0:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
+colord@^2.9.3:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
+  integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
+
 colorette@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
@@ -4983,7 +4957,7 @@ commander@7.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.1.0.tgz#f2eaecf131f10e36e07d894698226e36ae0eb5ff"
   integrity sha512-pRxBna3MJe6HKnBGsDyMv8ETbptw3axEdYHoqNh7gu5oDcew8fs0xnivZGm06Ogk8zGAJ9VX+OPEr2GXEQK4dg==
 
-commander@^2.19.0, commander@^2.20.0, commander@^2.8.1, commander@^2.9.0:
+commander@^2.19.0, commander@^2.20.0, commander@^2.9.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -5141,11 +5115,6 @@ cookie@0.5.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
-cookie@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
-  integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
-
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -5245,6 +5214,16 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+cosmiconfig@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.2.0.tgz#f7d17c56a590856cd1e7cee98734dca272b0d8fd"
+  integrity sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==
+  dependencies:
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+
 create-ecdh@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
@@ -5372,6 +5351,11 @@ css-declaration-sorter@^4.0.1:
     postcss "^7.0.1"
     timsort "^0.3.0"
 
+css-functions-list@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.2.0.tgz#8290b7d064bf483f48d6559c10e98dc4d1ad19ee"
+  integrity sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg==
+
 css-loader@^4.2.2:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.3.0.tgz#c888af64b2a5b2e85462c72c0f4a85c7e2e0821e"
@@ -5454,7 +5438,7 @@ css-tree@1.0.0-alpha.33:
     mdn-data "2.0.4"
     source-map "^0.5.3"
 
-css-tree@^2.2.1:
+css-tree@^2.2.1, css-tree@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
   integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
@@ -5744,7 +5728,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@4.3.4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3:
+debug@4, debug@4.3.4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -5783,6 +5767,11 @@ decamelize@^2.0.0:
   dependencies:
     xregexp "4.0.0"
 
+decamelize@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-5.0.1.tgz#db11a92e58c741ef339fb0a2868d8a06a9a7b1e9"
+  integrity sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==
+
 decode-uri-component@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
@@ -6879,7 +6868,7 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
   integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
 
-eslint@^2.7.0, eslint@^7.10.0:
+eslint@^7.10.0:
   version "7.10.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.10.0.tgz#494edb3e4750fb791133ca379e786a8f648c72b9"
   integrity sha512-BDVffmqWl7JJXqCjAK6lWtcQThZB/aP1HXSH1JKwGwv0LQEdvpR7qzNrUT487RM39B5goWuboFad5ovMBmD8yA==
@@ -7269,6 +7258,17 @@ fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
+  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
@@ -7279,6 +7279,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fastest-levenshtein@^1.0.16:
+  version "1.0.16"
+  resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
+  integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
+
 fastq@^1.6.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.8.0.tgz#550e1f9f59bbc65fe185cb6a9b4d95357107f481"
@@ -7341,6 +7346,13 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
 file-loader@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.1.0.tgz#65b9fcfb0ea7f65a234a1f10cdd7f1ab9a33f253"
@@ -7549,11 +7561,24 @@ flat-cache@^2.0.1:
     rimraf "2.6.3"
     write "1.0.3"
 
+flat-cache@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
 flatted@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.0.tgz#55122b6536ea496b4b44893ee2608141d10d9916"
   integrity sha512-R+H8IZclI8AAkSBRQJLVOsxwAoHd6WC40b4QTNWIjzAa6BXOBfQcM587MXDTVPeYaopFNWHUFLx7eNmHDSxMWg==
 
+flatted@^3.1.0:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
+  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+
 flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
@@ -7684,13 +7709,6 @@ from@~0:
   resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
   integrity sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=
 
-front-matter@2.1.2, front-matter@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-4.0.2.tgz#b14e54dc745cfd7293484f3210d15ea4edd7f4d5"
-  integrity sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==
-  dependencies:
-    js-yaml "^3.13.1"
-
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
@@ -8266,6 +8284,11 @@ globby@^11.0.3, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+globjoin@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
+  integrity sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==
+
 globule@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
@@ -8275,12 +8298,6 @@ globule@^1.0.0:
     lodash "~4.17.4"
     minimatch "~3.0.2"
 
-gonzales-pe-sl@^4.2.3, "gonzales-pe-sl@github:srowhani/gonzales-pe#dev":
-  version "4.2.3"
-  resolved "https://codeload.github.com/srowhani/gonzales-pe/tar.gz/3b052416074edc280f7d04bbe40b2e410693c4a3"
-  dependencies:
-    minimist "1.1.x"
-
 gonzales-pe@^4.2.2:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/gonzales-pe/-/gonzales-pe-4.3.0.tgz#fe9dec5f3c557eead09ff868c65826be54d067b3"
@@ -8725,6 +8742,11 @@ html-tag-names@1.1.2:
   resolved "https://registry.yarnpkg.com/html-tag-names/-/html-tag-names-1.1.2.tgz#f65168964c5a9c82675efda882875dcb2a875c22"
   integrity sha1-9lFolkxanIJnXv2ogoddyyqHXCI=
 
+html-tags@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
+  integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
+
 html-void-elements@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483"
@@ -8967,6 +8989,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+ignore@^5.2.4:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
+  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
+
 image-size@0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.8.3.tgz#f0b568857e034f29baffd37013587f2c0cad8b46"
@@ -9009,6 +9036,11 @@ import-lazy@^2.1.0:
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
   integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
 
+import-lazy@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-4.0.0.tgz#e8eb627483a0a43da3c03f3e35548be5cb0cc153"
+  integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==
+
 import-local@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@@ -9027,6 +9059,11 @@ indent-string@^4.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
+indent-string@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-5.0.0.tgz#4fd2980fccaf8622d14c64d694f4cf33c81951a5"
+  integrity sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==
+
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
@@ -10297,7 +10334,7 @@ js-tokens@^3.0.2:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
   integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
 
-js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.5.4, js-yaml@~3.7.0:
+js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@~3.7.0:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -10379,6 +10416,11 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
 json-schema@0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
@@ -10535,10 +10577,10 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
 
-known-css-properties@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.3.0.tgz#a3d135bbfc60ee8c6eacf2f7e7e6f2d4755e49a4"
-  integrity sha512-QMQcnKAiQccfQTqtBh/qwquGZ2XK/DXND1jrcN9M8gMMy99Gwla7GQjndVUsEqIaRyP6bsFRuhwRj5poafBGJQ==
+known-css-properties@^0.28.0:
+  version "0.28.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.28.0.tgz#8a8be010f368b3036fe6ab0ef4bbbed972bd6274"
+  integrity sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==
 
 language-subtag-registry@~0.3.2:
   version "0.3.20"
@@ -10724,11 +10766,6 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
 
-lodash.capitalize@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/lodash.capitalize/-/lodash.capitalize-4.2.1.tgz#f826c9b4e2a8511d84e3aca29db05e1a4f3b72a9"
-  integrity sha1-+CbJtOKoUR2E46yinbBeGk87cqk=
-
 lodash.escape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
@@ -10769,11 +10806,6 @@ lodash.isplainobject@^4.0.6:
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
   integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
 
-lodash.kebabcase@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
-  integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
-
 lodash.mapkeys@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.mapkeys/-/lodash.mapkeys-4.6.0.tgz#df2cfa231d7c57c7a8ad003abdad5d73d3ea5195"
@@ -10809,6 +10841,11 @@ lodash.toarray@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
   integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
 
+lodash.truncate@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
+  integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
+
 lodash.unescape@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
@@ -10907,11 +10944,6 @@ lru-cache@^9.0.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-9.0.3.tgz#8a04f282df5320227bb7215c55df2660d3e4e25b"
   integrity sha512-cyjNRew29d4kbgnz1sjDqxg7qg8NW4s+HQzCGjeon7DV5T2yDije16W9HaUFV1dhVEMh+SjrOcK0TomBmf3Egg==
 
-lru_map@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/lru_map/-/lru_map-0.3.3.tgz#b5c8351b9464cbd750335a79650a0ec0e56118dd"
-  integrity sha1-tcg1G5Rky9dQM1p5ZQoOwOVhGN0=
-
 lz-string@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
@@ -11007,7 +11039,7 @@ map-obj@^1.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
   integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
 
-map-obj@^4.0.0:
+map-obj@^4.0.0, map-obj@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
@@ -11036,6 +11068,11 @@ matcher@^3.0.0:
   dependencies:
     escape-string-regexp "^4.0.0"
 
+mathml-tag-names@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
+  integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
+
 md5.js@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
@@ -11188,6 +11225,24 @@ memory-fs@^0.5.0:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
+meow@^10.1.5:
+  version "10.1.5"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-10.1.5.tgz#be52a1d87b5f5698602b0f32875ee5940904aa7f"
+  integrity sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==
+  dependencies:
+    "@types/minimist" "^1.2.2"
+    camelcase-keys "^7.0.0"
+    decamelize "^5.0.0"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "4.1.0"
+    normalize-package-data "^3.0.2"
+    read-pkg-up "^8.0.0"
+    redent "^4.0.0"
+    trim-newlines "^4.0.2"
+    type-fest "^1.2.2"
+    yargs-parser "^20.2.9"
+
 meow@^5.0.0, meow@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
@@ -11221,11 +11276,6 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-merge@^1.2.0, merge@^1.2.1, merge@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/merge/-/merge-2.1.1.tgz#59ef4bf7e0b3e879186436e8481c06a6c162ca98"
-  integrity sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==
-
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
@@ -11258,7 +11308,7 @@ micromatch@^4.0.2:
     braces "^3.0.1"
     picomatch "^2.0.5"
 
-micromatch@^4.0.4:
+micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -11333,7 +11383,7 @@ mimic-response@^3.1.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
   integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
 
-min-indent@^1.0.0:
+min-indent@^1.0.0, min-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
@@ -11397,7 +11447,7 @@ minimist-options@4.1.0:
     is-plain-obj "^1.1.0"
     kind-of "^6.0.3"
 
-minimist@1.1.x, minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.2.7:
+minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.2.7:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
@@ -11648,6 +11698,11 @@ nanoid@^2.1.0:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
   integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
 
+nanoid@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -11852,7 +11907,7 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-package-data@^3.0.0:
+normalize-package-data@^3.0.0, normalize-package-data@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-3.0.3.tgz#dbcc3e2da59509a0983422884cd172eefdfa525e"
   integrity sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==
@@ -12673,6 +12728,16 @@ parse-json@^5.0.0:
     json-parse-better-errors "^1.0.1"
     lines-and-columns "^1.1.6"
 
+parse-json@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
@@ -13028,7 +13093,7 @@ postcss-loader@^4.0.1:
     schema-utils "^2.7.1"
     semver "^7.3.2"
 
-postcss-media-query-parser@0.2.3:
+postcss-media-query-parser@0.2.3, postcss-media-query-parser@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
   integrity sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=
@@ -13248,6 +13313,21 @@ postcss-reporter@^6.0.0:
     log-symbols "^2.2.0"
     postcss "^7.0.7"
 
+postcss-resolve-nested-selector@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
+  integrity sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==
+
+postcss-safe-parser@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1"
+  integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
+
+postcss-scss@^4.0.6:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.7.tgz#cfe5507aaff81b3d8992039ad015da4bd3dccd2f"
+  integrity sha512-xPv2GseoyXPa58Nro7M73ZntttusuCmZdeOojUFR5PZDz2BR62vfYx1w9TyOnp1+nYFowgOMipsCBhxzVkAEPw==
+
 postcss-selector-parser@2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
@@ -13275,6 +13355,14 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-selector-parser@^6.0.13:
+  version "6.0.13"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
+  integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-svgo@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.3.tgz#343a2cdbac9505d416243d496f724f38894c941e"
@@ -13303,6 +13391,11 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
+postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss-values-parser@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-1.5.0.tgz#5d9fa63e2bcb0179ce48f3235303765eb89f3047"
@@ -13320,6 +13413,15 @@ postcss@^6.0.0, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
+postcss@^8.4.27, postcss@^8.4.28:
+  version "8.4.28"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.28.tgz#c6cc681ed00109072816e1557f889ef51cf950a5"
+  integrity sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 pre-commit@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.2.2.tgz#dbcee0ee9de7235e57f79c56d7ce94641a69eec6"
@@ -14079,6 +14181,15 @@ read-pkg-up@^7.0.1:
     read-pkg "^5.2.0"
     type-fest "^0.8.1"
 
+read-pkg-up@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-8.0.0.tgz#72f595b65e66110f43b052dd9af4de6b10534670"
+  integrity sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==
+  dependencies:
+    find-up "^5.0.0"
+    read-pkg "^6.0.0"
+    type-fest "^1.0.1"
+
 read-pkg@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
@@ -14107,6 +14218,16 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
+read-pkg@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-6.0.0.tgz#a67a7d6a1c2b0c3cd6aa2ea521f40c458a4a504c"
+  integrity sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==
+  dependencies:
+    "@types/normalize-package-data" "^2.4.0"
+    normalize-package-data "^3.0.2"
+    parse-json "^5.2.0"
+    type-fest "^1.0.1"
+
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
@@ -14184,6 +14305,14 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-4.0.0.tgz#0c0ba7caabb24257ab3bb7a4fd95dd1d5c5681f9"
+  integrity sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==
+  dependencies:
+    indent-string "^5.0.0"
+    strip-indent "^4.0.0"
+
 redux-thunk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
@@ -14506,6 +14635,11 @@ require-directory@^2.1.1:
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
   integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
 require-main-filename@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
@@ -14564,6 +14698,11 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
 resolve-pathname@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
@@ -14838,40 +14977,6 @@ sass-graph@^4.0.1:
     scss-tokenizer "^0.4.3"
     yargs "^17.2.1"
 
-sass-lint-auto-fix@^0.21.2:
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/sass-lint-auto-fix/-/sass-lint-auto-fix-0.21.2.tgz#17af939fc76c65be9bb4dbf8411db514bef2f0ab"
-  integrity sha512-dT+RYAHVZcDQTMvPSHbwvm8JzXNrsGOzg7lKHM90ibUoBeMPvSsKGGfPJMZJzRmT87ehM2tKiWrYUnjFk4GMoA==
-  dependencies:
-    "@sentry/node" "^5.7.0"
-    chalk "^3.0.0"
-    commander "^4.0.1"
-    cosmiconfig "^6.0.0"
-    glob "^7.1.4"
-    gonzales-pe-sl "github:srowhani/gonzales-pe#dev"
-    merge "^1.2.1"
-    sass-lint "^1.13.1"
-
-sass-lint@^1.13.1:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/sass-lint/-/sass-lint-1.13.1.tgz#5fd2b2792e9215272335eb0f0dc607f61e8acc8f"
-  integrity sha512-DSyah8/MyjzW2BWYmQWekYEKir44BpLqrCFsgs9iaWiVTcwZfwXHF586hh3D1n+/9ihUNMfd8iHAyb9KkGgs7Q==
-  dependencies:
-    commander "^2.8.1"
-    eslint "^2.7.0"
-    front-matter "2.1.2"
-    fs-extra "^3.0.1"
-    glob "^7.0.0"
-    globule "^1.0.0"
-    gonzales-pe-sl "^4.2.3"
-    js-yaml "^3.5.4"
-    known-css-properties "^0.3.0"
-    lodash.capitalize "^4.1.0"
-    lodash.kebabcase "^4.0.0"
-    merge "^1.2.0"
-    path-is-absolute "^1.0.0"
-    util "^0.10.3"
-
 "sass-loader@npm:@bsfishy/sass-loader@node-sass-9":
   version "10.4.1-node-sass-9.1"
   resolved "https://registry.yarnpkg.com/@bsfishy/sass-loader/-/sass-loader-10.4.1-node-sass-9.1.tgz#08b1a2106ebee373a3ce87933c010542c84a8f2e"
@@ -15237,6 +15342,15 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
 smart-buffer@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
@@ -15346,7 +15460,7 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
   integrity sha512-I2UmuJSRr/T8jisiROLU3A3ltr+swpniSmNPI4Ml3ZCX6tVnDsuZzK7F2hl5jTqbZBWCEKlj5HRQiPExXLgE8A==
 
-source-map-js@^1.0.1:
+source-map-js@^1.0.1, source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -15874,6 +15988,13 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
+strip-indent@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-4.0.0.tgz#b41379433dd06f5eae805e21d631e07ee670d853"
+  integrity sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==
+  dependencies:
+    min-indent "^1.0.1"
+
 strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
@@ -15892,6 +16013,11 @@ style-loader@^1.2.1:
     loader-utils "^2.0.0"
     schema-utils "^2.6.6"
 
+style-search@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
+  integrity sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==
+
 style-to-object@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
@@ -15908,6 +16034,91 @@ stylehacks@^4.0.0:
     postcss "^6.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylelint-config-recommended-scss@^12.0.0:
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-12.0.0.tgz#9d9e82c46012649f11bfebcbc788f58e61860f33"
+  integrity sha512-5Bb2mlGy6WLa30oNeKpZvavv2lowJUsUJO25+OA68GFTemlwd1zbFsL7q0bReKipOSU3sG47hKneZ6Nd+ctrFA==
+  dependencies:
+    postcss-scss "^4.0.6"
+    stylelint-config-recommended "^12.0.0"
+    stylelint-scss "^5.0.0"
+
+stylelint-config-recommended@^12.0.0:
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-12.0.0.tgz#d0993232fca017065fd5acfcb52dd8a188784ef4"
+  integrity sha512-x6x8QNARrGO2sG6iURkzqL+Dp+4bJorPMMRNPScdvaUK8PsynriOcMW7AFDKqkWAS5wbue/u8fUT/4ynzcmqdQ==
+
+stylelint-config-standard-scss@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-10.0.0.tgz#159a54a01b80649bf0143fa7ba086b676a1a749e"
+  integrity sha512-bChBEo1p3xUVWh/wenJI+josoMk21f2yuLDGzGjmKYcALfl2u3DFltY+n4UHswYiXghqXaA8mRh+bFy/q1hQlg==
+  dependencies:
+    stylelint-config-recommended-scss "^12.0.0"
+    stylelint-config-standard "^33.0.0"
+
+stylelint-config-standard@^33.0.0:
+  version "33.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-33.0.0.tgz#1f7bb299153a53874073e93829e37a475842f0f9"
+  integrity sha512-eyxnLWoXImUn77+ODIuW9qXBDNM+ALN68L3wT1lN2oNspZ7D9NVGlNHb2QCUn4xDug6VZLsh0tF8NyoYzkgTzg==
+  dependencies:
+    stylelint-config-recommended "^12.0.0"
+
+stylelint-scss@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-5.1.0.tgz#dd318bc5c65f7a11f3ecacc7b6e8b67e7f2f1df1"
+  integrity sha512-E+KlQFXv1Euha43qw3q+wKBSli557wxbbo6/39DWhRNXlUa9Cz+FYrcgz+PT6ag0l6UisCYjAGCNhoSl4FcwlA==
+  dependencies:
+    postcss-media-query-parser "^0.2.3"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-selector-parser "^6.0.13"
+    postcss-value-parser "^4.2.0"
+
+stylelint@^15.10.3:
+  version "15.10.3"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-15.10.3.tgz#995e4512fdad450fb83e13f3472001f6edb6469c"
+  integrity sha512-aBQMMxYvFzJJwkmg+BUUg3YfPyeuCuKo2f+LOw7yYbU8AZMblibwzp9OV4srHVeQldxvSFdz0/Xu8blq2AesiA==
+  dependencies:
+    "@csstools/css-parser-algorithms" "^2.3.1"
+    "@csstools/css-tokenizer" "^2.2.0"
+    "@csstools/media-query-list-parser" "^2.1.4"
+    "@csstools/selector-specificity" "^3.0.0"
+    balanced-match "^2.0.0"
+    colord "^2.9.3"
+    cosmiconfig "^8.2.0"
+    css-functions-list "^3.2.0"
+    css-tree "^2.3.1"
+    debug "^4.3.4"
+    fast-glob "^3.3.1"
+    fastest-levenshtein "^1.0.16"
+    file-entry-cache "^6.0.1"
+    global-modules "^2.0.0"
+    globby "^11.1.0"
+    globjoin "^0.1.4"
+    html-tags "^3.3.1"
+    ignore "^5.2.4"
+    import-lazy "^4.0.0"
+    imurmurhash "^0.1.4"
+    is-plain-object "^5.0.0"
+    known-css-properties "^0.28.0"
+    mathml-tag-names "^2.1.3"
+    meow "^10.1.5"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.27"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-safe-parser "^6.0.0"
+    postcss-selector-parser "^6.0.13"
+    postcss-value-parser "^4.2.0"
+    resolve-from "^5.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+    style-search "^0.1.0"
+    supports-hyperlinks "^3.0.0"
+    svg-tags "^1.0.0"
+    table "^6.8.1"
+    write-file-atomic "^5.0.1"
+
 sudo-block@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/sudo-block/-/sudo-block-1.2.0.tgz#cc539bf8191624d4f507d83eeb45b4cea27f3463"
@@ -15957,6 +16168,14 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-hyperlinks@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz#c711352a5c89070779b4dad54c05a2f14b15c94b"
+  integrity sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
@@ -15967,6 +16186,11 @@ svg-parser@^2.0.4:
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
 
+svg-tags@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
+  integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
+
 svgo@^0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
@@ -16036,6 +16260,17 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
+table@^6.8.1:
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
+  integrity sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==
+  dependencies:
+    ajv "^8.0.1"
+    lodash.truncate "^4.4.2"
+    slice-ansi "^4.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
+
 tabtab@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/tabtab/-/tabtab-1.3.2.tgz#bb9c2ca6324f659fde7634c2caf3c096e1187ca7"
@@ -16344,6 +16579,11 @@ trim-newlines@^3.0.0:
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
   integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
 
+trim-newlines@^4.0.2:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-4.1.1.tgz#28c88deb50ed10c7ba6dc2474421904a00139125"
+  integrity sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==
+
 trim-trailing-lines@^1.0.0, trim-trailing-lines@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.3.tgz#7f0739881ff76657b7776e10874128004b625a94"
@@ -16494,6 +16734,11 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
+type-fest@^1.0.1, type-fest@^1.2.1, type-fest@^1.2.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-1.4.0.tgz#e9fb813fe3bf1744ec359d55d1affefa76f14be1"
+  integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==
+
 type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -16920,7 +17165,7 @@ user-home@^2.0.0:
   dependencies:
     os-homedir "^1.0.0"
 
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -16954,7 +17199,7 @@ util.promisify@~1.0.0:
     has-symbols "^1.0.1"
     object.getownpropertydescriptors "^2.1.0"
 
-util@0.10.3, util@^0.10.3:
+util@0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
   integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
@@ -17566,6 +17811,14 @@ write-file-atomic@^4.0.0:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
+write-file-atomic@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-5.0.1.tgz#68df4717c55c6fa4281a7860b4c2ba0a6d2b11e7"
+  integrity sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==
+  dependencies:
+    imurmurhash "^0.1.4"
+    signal-exit "^4.0.1"
+
 write@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
@@ -17681,7 +17934,7 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^20.2.3:
+yargs-parser@^20.2.3, yargs-parser@^20.2.9:
   version "20.2.9"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==