From d4237039c3afdd7d1f74a092df59d775f94cb0c2 Mon Sep 17 00:00:00 2001
From: -l <anderslangseth@gmail.com>
Date: Wed, 15 Mar 2023 13:37:06 +0100
Subject: [PATCH] chore: move :root vars into their component itself

---
 .../src/shared/tags/CodeBlock.module.scss     |   2 +-
 .../__snapshots__/Accordion.test.js.snap      |   5 +-
 .../accordion/style/dnb-accordion.scss        |   5 +-
 .../__snapshots__/Autocomplete.test.js.snap   |  70 ++++-------
 .../autocomplete/style/dnb-autocomplete.scss  |  10 +-
 .../__snapshots__/Avatar.test.tsx.snap        |   7 +-
 .../components/avatar/style/dnb-avatar.scss   |   6 +-
 .../__snapshots__/Badge.test.tsx.snap         |   5 +-
 .../src/components/badge/style/dnb-badge.scss |   4 +-
 .../__snapshots__/Breadcrumb.test.tsx.snap    |  17 ++-
 .../__snapshots__/Button.test.js.snap         |  17 ++-
 .../components/button/style/dnb-button.scss   |  11 +-
 .../__snapshots__/Checkbox.test.js.snap       |  11 +-
 .../checkbox/style/dnb-checkbox.scss          |   5 +-
 .../__snapshots__/DatePicker.test.tsx.snap    | 113 +++++++-----------
 .../date-picker/style/dnb-date-picker.scss    |  16 ++-
 .../__snapshots__/Dialog.test.tsx.snap        |  22 ++--
 .../components/dialog/style/dnb-dialog.scss   |   4 +-
 .../__snapshots__/Drawer.test.tsx.snap        |  22 ++--
 .../components/drawer/style/dnb-drawer.scss   |  16 ++-
 .../__snapshots__/Dropdown.test.js.snap       |  27 ++---
 .../dropdown/style/dnb-dropdown.scss          |   4 +-
 .../__snapshots__/FormRow.test.js.snap        |   8 --
 .../form-row/style/dnb-form-row.scss          |   8 --
 .../form-set/style/dnb-form-set.scss          |   3 -
 .../__snapshots__/FormStatus.test.tsx.snap    |   5 +-
 .../form-status/style/dnb-form-status.scss    |   4 +-
 .../__snapshots__/GlobalError.test.js.snap    |  17 ++-
 .../__snapshots__/GlobalStatus.test.js.snap   |  20 ++--
 .../style/dnb-global-status.scss              |   4 +-
 .../__snapshots__/HelpButton.test.tsx.snap    |  17 ++-
 .../__snapshots__/InputMasked.test.js.snap    |  27 ++---
 .../__snapshots__/Input.test.js.snap          |  27 ++---
 .../src/components/input/style/dnb-input.scss |   4 +-
 .../__snapshots__/Modal.test.tsx.snap         |  17 ++-
 .../style/themes/dnb-modal-theme-ui.scss      |   5 +-
 .../__snapshots__/Pagination.test.js.snap     |  22 ++--
 .../ProgressIndicator.test.js.snap            |   5 +-
 .../style/dnb-progress-indicator.scss         |   4 +-
 .../dnb-progress-indicator-theme-ui.scss      |  14 +--
 .../__snapshots__/Radio.test.js.snap          |  11 +-
 .../src/components/radio/style/dnb-radio.scss |   5 +-
 .../style/themes/dnb-skeleton-theme-ui.scss   |   3 +-
 .../__snapshots__/SkipContent.test.tsx.snap   |  17 ++-
 .../__snapshots__/Slider.test.tsx.snap        |  27 ++---
 .../components/slider/style/dnb-slider.scss   |   4 +-
 .../__snapshots__/StepIndicator.test.js.snap  |  17 ++-
 .../__snapshots__/Switch.test.js.snap         |  10 +-
 .../components/switch/style/dnb-switch.scss   |   4 +-
 .../__snapshots__/Tabs.test.tsx.snap          |   5 +
 .../__tests__/__snapshots__/Tag.test.tsx.snap |  17 ++-
 .../__snapshots__/Textarea.test.js.snap       |  18 ++-
 .../textarea/style/dnb-textarea.scss          |   6 +-
 .../style/themes/dnb-textarea-theme-ui.scss   |   4 +-
 .../__snapshots__/Timeline.test.tsx.snap      |   8 +-
 .../style/themes/dnb-timeline-theme-ui.scss   |   8 +-
 .../__snapshots__/ToggleButton.test.js.snap   |  53 +++-----
 .../style/dnb-toggle-button.scss              |   8 +-
 .../__snapshots__/Upload.test.tsx.snap        |  22 ++--
 .../__snapshots__/PaymentCard.test.js.snap    |   5 +-
 .../payment-card/style/dnb-payment-card.scss  |   7 +-
 .../__snapshots__/DrawerList.test.js.snap     |  16 +--
 .../drawer-list/style/dnb-drawer-list.scss    |  14 +--
 .../themes/dnb-drawer-list-theme-ui.scss      |   4 +-
 .../themes/dnb-scroll-view-theme-ui.scss      |   8 --
 .../dnb-eufemia/src/style/core/utilities.scss |   6 +
 66 files changed, 334 insertions(+), 583 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.module.scss b/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.module.scss
index 8b59922e6eb..31be3b7dcc8 100644
--- a/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.module.scss
+++ b/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.module.scss
@@ -79,7 +79,7 @@
       max-width: 40rem;
       height: auto;
       white-space: normal;
-      line-height: var(--input-height);
+      line-height: 2rem; // --input-height
     }
 
     .prism-code {
diff --git a/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap b/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap
index ef0cafa4d69..f3897b16cff 100644
--- a/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap
+++ b/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap
@@ -411,13 +411,10 @@ h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-ic
 /*
  * Utilities
  */
-:root {
+.dnb-accordion {
   --accordion-border-width: 0.0625rem;
   --accordion-border-radius: 0.25rem;
   --accordion-easing: var(--easing-default);
-}
-
-.dnb-accordion {
   position: relative;
   display: flex;
   flex-direction: column;
diff --git a/packages/dnb-eufemia/src/components/accordion/style/dnb-accordion.scss b/packages/dnb-eufemia/src/components/accordion/style/dnb-accordion.scss
index 884412fccf1..4451daeb60d 100644
--- a/packages/dnb-eufemia/src/components/accordion/style/dnb-accordion.scss
+++ b/packages/dnb-eufemia/src/components/accordion/style/dnb-accordion.scss
@@ -5,14 +5,11 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
-  // Props
+.dnb-accordion {
   --accordion-border-width: 0.0625rem;
   --accordion-border-radius: 0.25rem;
   --accordion-easing: var(--easing-default);
-}
 
-.dnb-accordion {
   position: relative;
 
   display: flex;
diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
index f078b700953..faf107677a6 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
+++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
@@ -1776,11 +1776,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -1861,26 +1858,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -2357,11 +2354,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -2441,7 +2435,7 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
+.dnb-input {
   --input-font-size: var(--font-size-basis);
   --input-font-size--small: var(--font-size-basis);
   --input-font-size--medium: var(--font-size-basis);
@@ -2456,9 +2450,6 @@ button .dnb-form-status__text {
   --input-height--large: 3rem;
   --input-border-width: 0.0625rem;
   --input-border-radius: 0.25rem;
-}
-
-.dnb-input {
   display: inline-flex;
   align-items: center;
   font-size: var(--input-font-small);
@@ -3095,11 +3086,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -3180,26 +3168,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -3469,11 +3457,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -3553,7 +3538,7 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
+.dnb-dropdown {
   --dropdown-width: 16rem;
   --dropdown-height: 2rem;
   --dropdown-height--small: 1.5rem;
@@ -3563,9 +3548,6 @@ button .dnb-form-status__text {
   --dropdown-focus-border-width: 0.125rem;
   --dropdown-text-padding: 0.5rem;
   --dropdown-border-radius: 0.25rem;
-}
-
-.dnb-dropdown {
   display: inline-flex;
   align-items: center;
   font-size: var(--font-size-small);
@@ -3816,14 +3798,11 @@ label + .dnb-dropdown[class*=__form-status] .dnb-dropdown__shell {
 /*
  * Utilities
  */
-:root {
+.dnb-progress-indicator {
   --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99);
   --progress-indicator-circular-circle: 88;
   --progress-indicator-circular-circle-offset--min: 88;
   --progress-indicator-circular-circle-offset--max: 1;
-}
-
-.dnb-progress-indicator {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -4031,7 +4010,7 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
 /*
  * Utilities
  */
-:root {
+.dnb-autocomplete {
   --autocomplete-width: 16rem;
   --autocomplete-height: 2rem;
   --autocomplete-height--small: 1.5rem;
@@ -4041,9 +4020,6 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   --autocomplete-focus-border-width: 0.125rem;
   --autocomplete-text-padding: 0.5rem;
   --autocomplete-border-radius: 0.25rem;
-}
-
-.dnb-autocomplete {
   display: inline-flex;
   align-items: center;
   font-size: var(--font-size-small);
@@ -4115,19 +4091,19 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
 }
 .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
   --border-color: var(--color-black-55);
-  box-shadow: inset 0 0 0 var(--input-border-width) var(--border-color);
+  box-shadow: inset 0 0 0 0.0625rem var(--border-color);
   /* iOS fix - because "inset" works not fine with border-radius */
   /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
   border-color: transparent;
 }
 @supports (-webkit-touch-callout: none) {
   .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
-    box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
+    box-shadow: 0 0 0 0.0625rem var(--border-color);
   }
 }
 @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
   .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
-    box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
+    box-shadow: 0 0 0 0.0625rem var(--border-color);
   }
 }
 .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
diff --git a/packages/dnb-eufemia/src/components/autocomplete/style/dnb-autocomplete.scss b/packages/dnb-eufemia/src/components/autocomplete/style/dnb-autocomplete.scss
index 30708fa77b9..09d28f8aea6 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/style/dnb-autocomplete.scss
+++ b/packages/dnb-eufemia/src/components/autocomplete/style/dnb-autocomplete.scss
@@ -5,7 +5,7 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-autocomplete {
   --autocomplete-width: 16rem;
   --autocomplete-height: 2rem;
   --autocomplete-height--small: 1.5rem;
@@ -15,9 +15,7 @@
   --autocomplete-focus-border-width: 0.125rem;
   --autocomplete-text-padding: 0.5rem;
   --autocomplete-border-radius: 0.25rem;
-}
 
-.dnb-autocomplete {
   display: inline-flex;
   align-items: center;
 
@@ -111,11 +109,7 @@
     transform-origin: 50% 50%;
   }
   .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
-    @include fakeBorder(
-      var(--color-black-55),
-      var(--input-border-width),
-      inset
-    );
+    @include fakeBorder(var(--color-black-55), 0.0625rem, inset);
   }
   .dnb-input__submit-button__button .dnb-icon {
     transition: transform 400ms ease-out;
diff --git a/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
index 81c419a8f2f..bf5a51bfc1d 100644
--- a/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`Avatar scss have to match snapshot 1`] = `
 /*
  * Utilities
  */
-:root {
+.dnb-avatar {
   --avatar-font-size--small: var(--font-size-x-small);
   --avatar-font-size--medium: var(--font-size-basis);
   --avatar-font-size--large: var(--font-size-x-large);
@@ -55,9 +55,6 @@ exports[`Avatar scss have to match snapshot 1`] = `
   --avatar-height--large: 4rem;
   --avatar-width--x-large: 5rem;
   --avatar-height--x-large: 5rem;
-}
-
-.dnb-avatar {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -71,7 +68,7 @@ exports[`Avatar scss have to match snapshot 1`] = `
   line-height: 1;
 }
 .dnb-avatar, .dnb-core-style .dnb-avatar {
-  line-height: var(--button-height);
+  line-height: var(--line-height-large);
 }
 .dnb-avatar--size-small {
   width: var(--avatar-width--small);
diff --git a/packages/dnb-eufemia/src/components/avatar/style/dnb-avatar.scss b/packages/dnb-eufemia/src/components/avatar/style/dnb-avatar.scss
index fc16da6e52d..5e34329c8c6 100644
--- a/packages/dnb-eufemia/src/components/avatar/style/dnb-avatar.scss
+++ b/packages/dnb-eufemia/src/components/avatar/style/dnb-avatar.scss
@@ -5,7 +5,7 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-avatar {
   --avatar-font-size--small: var(--font-size-x-small);
   --avatar-font-size--medium: var(--font-size-basis);
   --avatar-font-size--large: var(--font-size-x-large);
@@ -22,9 +22,7 @@
   --avatar-height--large: 4rem;
   --avatar-width--x-large: 5rem;
   --avatar-height--x-large: 5rem;
-}
 
-.dnb-avatar {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -42,7 +40,7 @@
   // Safari needs a correct CSS specificity
   &,
   .dnb-core-style & {
-    line-height: var(--button-height);
+    line-height: var(--line-height-large);
   }
 
   &--size-small {
diff --git a/packages/dnb-eufemia/src/components/badge/__tests__/__snapshots__/Badge.test.tsx.snap b/packages/dnb-eufemia/src/components/badge/__tests__/__snapshots__/Badge.test.tsx.snap
index 3d5c92e29d1..9540f5c9e28 100644
--- a/packages/dnb-eufemia/src/components/badge/__tests__/__snapshots__/Badge.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/badge/__tests__/__snapshots__/Badge.test.tsx.snap
@@ -34,16 +34,13 @@ exports[`Badge scss have to match snapshot 1`] = `
 /*
  * Utilities
  */
-:root {
+.dnb-badge {
   --badge-font-size: var(--font-size-x-small);
   --badge-width: 1.5rem;
   --badge-height: 1.5rem;
   --badge-border-radius-information: calc(var(--badge-height) / 4);
   --badge-border-radius-notification: calc(var(--badge-height) / 2);
   --badge-line-height: var(--line-height-x-small);
-}
-
-.dnb-badge {
   display: inline-flex;
   font-weight: var(--font-weight-medium);
   flex-flow: row wrap;
diff --git a/packages/dnb-eufemia/src/components/badge/style/dnb-badge.scss b/packages/dnb-eufemia/src/components/badge/style/dnb-badge.scss
index 3db851596f2..123aafdccce 100644
--- a/packages/dnb-eufemia/src/components/badge/style/dnb-badge.scss
+++ b/packages/dnb-eufemia/src/components/badge/style/dnb-badge.scss
@@ -5,16 +5,14 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-badge {
   --badge-font-size: var(--font-size-x-small);
   --badge-width: 1.5rem;
   --badge-height: 1.5rem;
   --badge-border-radius-information: calc(var(--badge-height) / 4);
   --badge-border-radius-notification: calc(var(--badge-height) / 2);
   --badge-line-height: var(--line-height-x-small);
-}
 
-.dnb-badge {
   // Safari needs a correct CSS specificity
   &,
   .dnb-core-style & {
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
index 3066a66e03b..e074140a8b0 100644
--- a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
@@ -236,11 +236,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -321,26 +318,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap
index c307ab37ccf..19de168f291 100644
--- a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap
+++ b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -1663,11 +1663,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -1748,26 +1745,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
diff --git a/packages/dnb-eufemia/src/components/button/style/dnb-button.scss b/packages/dnb-eufemia/src/components/button/style/dnb-button.scss
index b37c85d0915..f04a15e8807 100644
--- a/packages/dnb-eufemia/src/components/button/style/dnb-button.scss
+++ b/packages/dnb-eufemia/src/components/button/style/dnb-button.scss
@@ -6,26 +6,27 @@
 @import '../../../style/core/utilities.scss';
 
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
 
-.dnb-button {
   position: relative;
 
   user-select: none;
diff --git a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
index 734f1c591f0..162efc55ca5 100644
--- a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
+++ b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -339,11 +339,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -426,12 +423,12 @@ button .dnb-form-status__text {
 :root {
   --checkbox-width--medium: 1.5rem;
   --checkbox-height--medium: 1.5rem;
-  --checkbox-width--large: 2rem;
-  --checkbox-height--large: 2rem;
-  --checkbox-border-width: 0.125rem;
 }
 
 .dnb-checkbox {
+  --checkbox-width--large: 2rem;
+  --checkbox-height--large: 2rem;
+  --checkbox-border-width: 0.125rem;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
diff --git a/packages/dnb-eufemia/src/components/checkbox/style/dnb-checkbox.scss b/packages/dnb-eufemia/src/components/checkbox/style/dnb-checkbox.scss
index 0ce2d3269e1..8caee7c7b8c 100644
--- a/packages/dnb-eufemia/src/components/checkbox/style/dnb-checkbox.scss
+++ b/packages/dnb-eufemia/src/components/checkbox/style/dnb-checkbox.scss
@@ -8,12 +8,13 @@
 :root {
   --checkbox-width--medium: 1.5rem;
   --checkbox-height--medium: 1.5rem;
+}
+
+.dnb-checkbox {
   --checkbox-width--large: 2rem;
   --checkbox-height--large: 2rem;
   --checkbox-border-width: 0.125rem;
-}
 
-.dnb-checkbox {
   display: inline-flex;
   flex-direction: column;
 
diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap
index cac8a3cef4d..ab3319f29b7 100644
--- a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -2038,11 +2038,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -2123,26 +2120,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -2619,11 +2616,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -2703,7 +2697,7 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
+.dnb-input {
   --input-font-size: var(--font-size-basis);
   --input-font-size--small: var(--font-size-basis);
   --input-font-size--medium: var(--font-size-basis);
@@ -2718,9 +2712,6 @@ button .dnb-form-status__text {
   --input-height--large: 3rem;
   --input-border-width: 0.0625rem;
   --input-border-radius: 0.25rem;
-}
-
-.dnb-input {
   display: inline-flex;
   align-items: center;
   font-size: var(--input-font-small);
@@ -3268,11 +3259,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -3353,26 +3341,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -3863,11 +3851,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -3948,26 +3933,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -4244,11 +4229,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -4331,12 +4313,12 @@ button .dnb-form-status__text {
 :root {
   --checkbox-width--medium: 1.5rem;
   --checkbox-height--medium: 1.5rem;
-  --checkbox-width--large: 2rem;
-  --checkbox-height--large: 2rem;
-  --checkbox-border-width: 0.125rem;
 }
 
 .dnb-checkbox {
+  --checkbox-width--large: 2rem;
+  --checkbox-height--large: 2rem;
+  --checkbox-border-width: 0.125rem;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -4526,11 +4508,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -4613,14 +4592,14 @@ button .dnb-form-status__text {
 :root {
   --radio-width--medium: 1.5rem;
   --radio-height--medium: 1.5rem;
+}
+
+.dnb-radio {
   --radio-width--large: 2rem;
   --radio-height--large: 2rem;
   --radio-border-width: 0.125rem;
   --radio-margin-right: 1rem;
   --radio-margin-bottom: 0.5rem;
-}
-
-.dnb-radio {
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -4804,11 +4783,8 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -4888,12 +4864,9 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
+.dnb-toggle-button {
   --toggle-button-margin-right: 1rem;
   --toggle-button-margin-bottom: 1rem;
-}
-
-.dnb-toggle-button {
   display: inline-flex;
   align-items: center;
   font-size: var(--font-size-small);
@@ -5011,10 +4984,10 @@ button .dnb-form-status__text {
   font-size: var(--font-size-basis);
 }
 .dnb-toggle-button-group--no-label > .dnb-alignment-helper {
-  line-height: var(--button-height);
+  line-height: 2.5rem;
 }
 .dnb-toggle-button-group--row.dnb-toggle-button-group:not(.dnb-form-row--vertical-label) > .dnb-alignment-helper {
-  line-height: var(--button-height);
+  line-height: 2.5rem;
 }
 @media screen and (min-width: 40em) {
   .dnb-form-label + .dnb-toggle-button {
@@ -5079,11 +5052,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -5163,13 +5133,10 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
+.dnb-date-picker {
   --date-picker-input-height: 2rem;
   --date-picker-day-width: 2rem;
   --date-picker-day-horizontal-spacing: 4px;
-}
-
-.dnb-date-picker {
   display: inline-flex;
   align-items: center;
   font-size: var(--font-size-small);
@@ -5202,13 +5169,13 @@ button .dnb-form-status__text {
   top: var(--date-picker-input-height);
 }
 .dnb-date-picker--small .dnb-date-picker__container {
-  top: var(--input-height--small);
+  top: 1.5rem;
 }
 .dnb-date-picker--medium .dnb-date-picker__container {
-  top: var(--input-height--medium);
+  top: 2.5rem;
 }
 .dnb-date-picker--large .dnb-date-picker__container {
-  top: var(--input-height--large);
+  top: 3rem;
 }
 .dnb-date-picker--show-input .dnb-date-picker__container {
   left: 0;
diff --git a/packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss b/packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss
index d758cb83374..f4983df4a86 100644
--- a/packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss
+++ b/packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss
@@ -5,12 +5,6 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
-  --date-picker-input-height: 2rem;
-  --date-picker-day-width: 2rem;
-  --date-picker-day-horizontal-spacing: 4px;
-}
-
 @mixin openDatePicker($state: 'animation') {
   z-index: 100; // make sure we are over e.g. switch
 
@@ -37,6 +31,10 @@
 }
 
 .dnb-date-picker {
+  --date-picker-input-height: 2rem;
+  --date-picker-day-width: 2rem;
+  --date-picker-day-horizontal-spacing: 4px;
+
   display: inline-flex;
   align-items: center;
 
@@ -77,13 +75,13 @@
   }
 
   &--small &__container {
-    top: var(--input-height--small);
+    top: 1.5rem; // --input-height--small;
   }
   &--medium &__container {
-    top: var(--input-height--medium);
+    top: 2.5rem; // --input-height--medium;
   }
   &--large &__container {
-    top: var(--input-height--large);
+    top: 3rem; // --input-height--large;
   }
 
   &--show-input &__container {
diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
index 5bfb20daffd..dcdce19b25f 100644
--- a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -1574,11 +1574,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -1659,26 +1656,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -2189,16 +2186,13 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     opacity: 0;
   }
 }
-:root {
+.dnb-dialog {
   --dialog-min-width: 320px;
   --dialog-avg-width: 60vw;
   --dialog-max-width: 49rem;
   --dialog-confirm-max-width: 40rem;
   --dialog-spacing: 2rem;
   --dialog-spacing-minus: -2rem;
-}
-
-.dnb-dialog {
   position: relative;
   border-radius: 0.5rem;
   box-shadow: var(--shadow-default);
diff --git a/packages/dnb-eufemia/src/components/dialog/style/dnb-dialog.scss b/packages/dnb-eufemia/src/components/dialog/style/dnb-dialog.scss
index 7e57281a2ba..ff9165f375f 100644
--- a/packages/dnb-eufemia/src/components/dialog/style/dnb-dialog.scss
+++ b/packages/dnb-eufemia/src/components/dialog/style/dnb-dialog.scss
@@ -6,7 +6,7 @@
 @import '../../../style/core/utilities.scss';
 @import '../../modal/style/modal-mixins.scss';
 
-:root {
+.dnb-dialog {
   // we do this because SCSS fails by using min(100vw, 50rem) = "Incompatible units: 'rem' and 'vw'"
   --dialog-min-width: 320px; // use px, so larger font-size don't enlarge the min, has to be under 20rem, because of spacing and later mobile fullscreen
   --dialog-avg-width: 60vw; // content defines the size
@@ -14,9 +14,7 @@
   --dialog-confirm-max-width: 40rem;
   --dialog-spacing: 2rem; // should reflect --spacing-large
   --dialog-spacing-minus: -2rem; // should reflect --spacing-large
-}
 
-.dnb-dialog {
   position: relative;
   border-radius: 0.5rem;
 
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
index 235b188f6d4..c0c97f1d3ca 100644
--- a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -1591,11 +1591,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -1676,26 +1673,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -2206,15 +2203,12 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
     opacity: 0;
   }
 }
-:root {
+.dnb-drawer {
   --drawer-width: 40vw;
   --drawer-min-width: 25rem;
   --drawer-max-width: 40rem;
   --drawer-spacing: 2rem;
   --drawer-spacing-minus: -2rem;
-}
-
-.dnb-drawer {
   position: relative;
   max-height: 100vh;
   width: 100%;
diff --git a/packages/dnb-eufemia/src/components/drawer/style/dnb-drawer.scss b/packages/dnb-eufemia/src/components/drawer/style/dnb-drawer.scss
index 00a9ba60113..5b9a9bb537a 100644
--- a/packages/dnb-eufemia/src/components/drawer/style/dnb-drawer.scss
+++ b/packages/dnb-eufemia/src/components/drawer/style/dnb-drawer.scss
@@ -6,14 +6,6 @@
 @import '../../../style/core/utilities.scss';
 @import '../../modal/style/modal-mixins.scss';
 
-:root {
-  --drawer-width: 40vw;
-  --drawer-min-width: 25rem;
-  --drawer-max-width: 40rem;
-  --drawer-spacing: 2rem; // should reflect --spacing-large
-  --drawer-spacing-minus: -2rem; // should reflect --spacing-large
-}
-
 @mixin drawerSpacing {
   padding: 0 var(--drawer-spacing); // should be 56px – but then the whole width should be larger
 
@@ -31,6 +23,12 @@
 }
 
 .dnb-drawer {
+  --drawer-width: 40vw;
+  --drawer-min-width: 25rem;
+  --drawer-max-width: 40rem;
+  --drawer-spacing: 2rem; // should reflect --spacing-large
+  --drawer-spacing-minus: -2rem; // should reflect --spacing-large
+
   position: relative;
   max-height: 100vh;
 
@@ -216,7 +214,7 @@
     padding-bottom: calc(var(--drawer-spacing) * 2);
     margin-bottom: calc(var(--drawer-spacing-minus) * 2);
 
-    @include IS_SAFARI_MOBILE () {
+    @include IS_SAFARI_MOBILE() {
       padding-bottom: calc(var(--drawer-spacing-minus) * 8);
     }
   }
diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
index 1366bcdef18..d3157f5d76c 100644
--- a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
+++ b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -1695,11 +1695,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -1780,26 +1777,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -2069,11 +2066,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -2153,7 +2147,7 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
+.dnb-dropdown {
   --dropdown-width: 16rem;
   --dropdown-height: 2rem;
   --dropdown-height--small: 1.5rem;
@@ -2163,9 +2157,6 @@ button .dnb-form-status__text {
   --dropdown-focus-border-width: 0.125rem;
   --dropdown-text-padding: 0.5rem;
   --dropdown-border-radius: 0.25rem;
-}
-
-.dnb-dropdown {
   display: inline-flex;
   align-items: center;
   font-size: var(--font-size-small);
diff --git a/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss b/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss
index dfeb039d478..8fac4ea15f5 100644
--- a/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss
+++ b/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss
@@ -5,7 +5,7 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-dropdown {
   --dropdown-width: 16rem;
   --dropdown-height: 2rem;
   --dropdown-height--small: 1.5rem;
@@ -15,9 +15,7 @@
   --dropdown-focus-border-width: 0.125rem;
   --dropdown-text-padding: 0.5rem;
   --dropdown-border-radius: 0.25rem;
-}
 
-.dnb-dropdown {
   display: inline-flex;
   align-items: center;
 
diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
index 0c0254fb37b..667e64148e8 100644
--- a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
+++ b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
@@ -106,14 +106,6 @@ exports[`FormRow scss have to match snapshot 1`] = `
 /*
  * Utilities
  */
-:root {
-  --form-row-column1-start: auto;
-  --form-row-column2-start: 1fr;
-  --form-row-row1-start: auto;
-  --form-row-row2-start: auto;
-  --form-bounding-height: 0.25rem;
-}
-
 .dnb-form-row {
   align-items: baseline;
 }
diff --git a/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss b/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss
index f580f2a0b6b..f6569d42b08 100644
--- a/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss
+++ b/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss
@@ -5,14 +5,6 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
-  --form-row-column1-start: auto;
-  --form-row-column2-start: 1fr;
-  --form-row-row1-start: auto;
-  --form-row-row2-start: auto;
-  --form-bounding-height: 0.25rem;
-}
-
 .dnb-form-row {
   &,
   &.dnb-section {
diff --git a/packages/dnb-eufemia/src/components/form-set/style/dnb-form-set.scss b/packages/dnb-eufemia/src/components/form-set/style/dnb-form-set.scss
index d8db9d794da..37cfe0fbf5c 100644
--- a/packages/dnb-eufemia/src/components/form-set/style/dnb-form-set.scss
+++ b/packages/dnb-eufemia/src/components/form-set/style/dnb-form-set.scss
@@ -3,8 +3,5 @@
  *
  */
 
-// :root {
-// }
-
 // .dnb-form-set {
 // }
diff --git a/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.tsx.snap b/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.tsx.snap
index 16eb622414f..e9f544a0450 100644
--- a/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.tsx.snap
@@ -248,11 +248,8 @@ exports[`FormStatus scss have to match snapshot 1`] = `
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
diff --git a/packages/dnb-eufemia/src/components/form-status/style/dnb-form-status.scss b/packages/dnb-eufemia/src/components/form-status/style/dnb-form-status.scss
index 74e7e40f3be..f0af39b0944 100644
--- a/packages/dnb-eufemia/src/components/form-status/style/dnb-form-status.scss
+++ b/packages/dnb-eufemia/src/components/form-status/style/dnb-form-status.scss
@@ -5,11 +5,9 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-form-status {
   --form-status-radius: 0.25rem;
-}
 
-.dnb-form-status {
   display: flex;
 
   opacity: 1;
diff --git a/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap b/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap
index 263e03a7507..3935bd7e35a 100644
--- a/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap
+++ b/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap
@@ -243,11 +243,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -328,26 +325,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
diff --git a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
index 71eae0d50c7..f49beb27e8d 100644
--- a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
+++ b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
@@ -264,11 +264,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -349,26 +346,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -661,10 +658,9 @@ button.dnb-button::-moz-focus-inner {
 /*
  * Utilities
  */
-:root {
+.dnb-global-status {
   --global-status-easing: var(--easing-default);
 }
-
 .dnb-global-status.dnb-section {
   display: block;
 }
diff --git a/packages/dnb-eufemia/src/components/global-status/style/dnb-global-status.scss b/packages/dnb-eufemia/src/components/global-status/style/dnb-global-status.scss
index 9e61058b2f2..541c2c652a8 100644
--- a/packages/dnb-eufemia/src/components/global-status/style/dnb-global-status.scss
+++ b/packages/dnb-eufemia/src/components/global-status/style/dnb-global-status.scss
@@ -5,11 +5,9 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-global-status {
   --global-status-easing: var(--easing-default);
-}
 
-.dnb-global-status {
   &.dnb-section {
     display: block;
   }
diff --git a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap
index 53fbd986f95..6c7e8906eae 100644
--- a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap
@@ -243,11 +243,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -328,26 +325,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
diff --git a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
index dd41c3d77b8..842681db352 100644
--- a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
+++ b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -480,11 +480,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -565,26 +562,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -1061,11 +1058,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -1145,7 +1139,7 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
+.dnb-input {
   --input-font-size: var(--font-size-basis);
   --input-font-size--small: var(--font-size-basis);
   --input-font-size--medium: var(--font-size-basis);
@@ -1160,9 +1154,6 @@ button .dnb-form-status__text {
   --input-height--large: 3rem;
   --input-border-width: 0.0625rem;
   --input-border-radius: 0.25rem;
-}
-
-.dnb-input {
   display: inline-flex;
   align-items: center;
   font-size: var(--input-font-small);
diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap
index 03c3525e76f..39064f3e5fd 100644
--- a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap
+++ b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -1052,11 +1052,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -1137,26 +1134,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -1633,11 +1630,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -1717,7 +1711,7 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
+.dnb-input {
   --input-font-size: var(--font-size-basis);
   --input-font-size--small: var(--font-size-basis);
   --input-font-size--medium: var(--font-size-basis);
@@ -1732,9 +1726,6 @@ button .dnb-form-status__text {
   --input-height--large: 3rem;
   --input-border-width: 0.0625rem;
   --input-border-radius: 0.25rem;
-}
-
-.dnb-input {
   display: inline-flex;
   align-items: center;
   font-size: var(--input-font-small);
diff --git a/packages/dnb-eufemia/src/components/input/style/dnb-input.scss b/packages/dnb-eufemia/src/components/input/style/dnb-input.scss
index eecf5fff30c..c4120a7d615 100644
--- a/packages/dnb-eufemia/src/components/input/style/dnb-input.scss
+++ b/packages/dnb-eufemia/src/components/input/style/dnb-input.scss
@@ -5,7 +5,7 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-input {
   --input-font-size: var(--font-size-basis);
   --input-font-size--small: var(--font-size-basis);
   --input-font-size--medium: var(--font-size-basis);
@@ -20,9 +20,7 @@
   --input-height--large: 3rem;
   --input-border-width: 0.0625rem;
   --input-border-radius: 0.25rem;
-}
 
-.dnb-input {
   display: inline-flex;
   align-items: center;
 
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
index 33543d84d43..1df461825e1 100644
--- a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
@@ -1153,11 +1153,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -1238,26 +1235,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
diff --git a/packages/dnb-eufemia/src/components/modal/style/themes/dnb-modal-theme-ui.scss b/packages/dnb-eufemia/src/components/modal/style/themes/dnb-modal-theme-ui.scss
index 35012d21e6f..a25c8435ba3 100644
--- a/packages/dnb-eufemia/src/components/modal/style/themes/dnb-modal-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/modal/style/themes/dnb-modal-theme-ui.scss
@@ -5,12 +5,9 @@
 
 @import '../../../../style/core/utilities.scss';
 
-:root {
-  --modal-overlay-bg: rgb(0 0 0 / 32%);
-}
-
 .dnb-modal {
   &__overlay {
+    --modal-overlay-bg: rgb(0 0 0 / 32%);
     background-color: var(--modal-overlay-bg);
   }
 }
diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap
index 9e5656d6db5..f038d7d7f16 100644
--- a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap
+++ b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap
@@ -1849,11 +1849,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -1934,26 +1931,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -2180,14 +2177,11 @@ button.dnb-button::-moz-focus-inner {
 /*
  * Utilities
  */
-:root {
+.dnb-progress-indicator {
   --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99);
   --progress-indicator-circular-circle: 88;
   --progress-indicator-circular-circle-offset--min: 88;
   --progress-indicator-circular-circle-offset--max: 1;
-}
-
-.dnb-progress-indicator {
   position: relative;
   display: inline-flex;
   align-items: center;
diff --git a/packages/dnb-eufemia/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap b/packages/dnb-eufemia/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap
index 942ac301db3..af1a47de753 100644
--- a/packages/dnb-eufemia/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap
+++ b/packages/dnb-eufemia/src/components/progress-indicator/__tests__/__snapshots__/ProgressIndicator.test.js.snap
@@ -272,14 +272,11 @@ exports[`ProgressIndicator scss have to match snapshot 1`] = `
 /*
  * Utilities
  */
-:root {
+.dnb-progress-indicator {
   --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99);
   --progress-indicator-circular-circle: 88;
   --progress-indicator-circular-circle-offset--min: 88;
   --progress-indicator-circular-circle-offset--max: 1;
-}
-
-.dnb-progress-indicator {
   position: relative;
   display: inline-flex;
   align-items: center;
diff --git a/packages/dnb-eufemia/src/components/progress-indicator/style/dnb-progress-indicator.scss b/packages/dnb-eufemia/src/components/progress-indicator/style/dnb-progress-indicator.scss
index df611308a0c..a2876ca6105 100644
--- a/packages/dnb-eufemia/src/components/progress-indicator/style/dnb-progress-indicator.scss
+++ b/packages/dnb-eufemia/src/components/progress-indicator/style/dnb-progress-indicator.scss
@@ -5,14 +5,12 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-progress-indicator {
   --progress-indicator-timing: cubic-bezier(0.5, 0, 0.5, 0.99);
   --progress-indicator-circular-circle: 88;
   --progress-indicator-circular-circle-offset--min: 88;
   --progress-indicator-circular-circle-offset--max: 1;
-}
 
-.dnb-progress-indicator {
   position: relative;
   display: inline-flex;
   align-items: center;
diff --git a/packages/dnb-eufemia/src/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss b/packages/dnb-eufemia/src/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss
index 5c1a7ca1693..4e9e6aa71e3 100644
--- a/packages/dnb-eufemia/src/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss
@@ -5,15 +5,13 @@
 
 @import '../../../../style/core/utilities.scss';
 
-// to get a reverse #v3 - use the following setup, strokeDashoffset has also to be:
-// const strokeDashoffset = -((maxOffset / 100) * progress-indicator)
-// :root {
-//   --progress-indicator-circular-circle: 88;
-//   --progress-indicator-circular-circle-offset--min: -1;
-//   --progress-indicator-circular-circle-offset--max: -88;
-// }
-
 .dnb-progress-indicator {
+  // to get a reverse #v3 - use the following setup, strokeDashoffset has also to be:
+  // const strokeDashoffset = -((maxOffset / 100) * progress-indicator)
+  // --progress-indicator-circular-circle: 88;
+  // --progress-indicator-circular-circle-offset--min: -1;
+  // --progress-indicator-circular-circle-offset--max: -88;
+
   // circular variant
   &__circular {
     &--small {
diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
index a310bda6b3e..643a90483c8 100644
--- a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
+++ b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
@@ -762,11 +762,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -849,14 +846,14 @@ button .dnb-form-status__text {
 :root {
   --radio-width--medium: 1.5rem;
   --radio-height--medium: 1.5rem;
+}
+
+.dnb-radio {
   --radio-width--large: 2rem;
   --radio-height--large: 2rem;
   --radio-border-width: 0.125rem;
   --radio-margin-right: 1rem;
   --radio-margin-bottom: 0.5rem;
-}
-
-.dnb-radio {
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
diff --git a/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss b/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss
index 9f261469a52..30d67a6ad79 100644
--- a/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss
+++ b/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss
@@ -8,14 +8,15 @@
 :root {
   --radio-width--medium: 1.5rem;
   --radio-height--medium: 1.5rem;
+}
+
+.dnb-radio {
   --radio-width--large: 2rem;
   --radio-height--large: 2rem;
   --radio-border-width: 0.125rem;
   --radio-margin-right: 1rem;
   --radio-margin-bottom: 0.5rem;
-}
 
-.dnb-radio {
   display: inline-flex;
   flex-direction: column;
 
diff --git a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss b/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss
index 92521812db8..c53170fe04a 100644
--- a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss
@@ -4,12 +4,13 @@
  */
 
 :root {
-  --skeleton-delay: 5s;
   --skeleton-color: var(--color-black-8);
   --skeleton-color--contrast: var(--color-white);
 }
 
 .dnb-skeleton {
+  --skeleton-delay: 5s;
+
   img,
   video {
     filter: brightness(0%) contrast(0%) opacity(0.5);
diff --git a/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap b/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap
index 1a65a1ace16..92ff1828496 100644
--- a/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap
@@ -236,11 +236,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -321,26 +318,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
index 2ef1b4a973e..084306fdb6b 100644
--- a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
@@ -236,11 +236,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -321,26 +318,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -735,11 +732,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -819,14 +813,11 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
+.dnb-slider {
   --slider-track-height: 0.25rem;
   --slider-thumb-size: 2rem;
   --slider-button-size: 1.5rem;
   --slider-space: 1rem;
-}
-
-.dnb-slider {
   user-select: none;
   -webkit-touch-callout: none;
   display: flex;
diff --git a/packages/dnb-eufemia/src/components/slider/style/dnb-slider.scss b/packages/dnb-eufemia/src/components/slider/style/dnb-slider.scss
index d9d3499d963..a92019bd66d 100644
--- a/packages/dnb-eufemia/src/components/slider/style/dnb-slider.scss
+++ b/packages/dnb-eufemia/src/components/slider/style/dnb-slider.scss
@@ -5,14 +5,12 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-slider {
   --slider-track-height: 0.25rem;
   --slider-thumb-size: 2rem;
   --slider-button-size: 1.5rem;
   --slider-space: 1rem;
-}
 
-.dnb-slider {
   user-select: none; // Safari / Touch fix
   -webkit-touch-callout: none; // Safari / Touch fix
 
diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
index 6cf58649ce0..c292662b4b7 100644
--- a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
+++ b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap
@@ -8322,11 +8322,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -8407,26 +8404,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
diff --git a/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
index 196ac3c133c..2db744ab49c 100644
--- a/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
+++ b/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
@@ -414,11 +414,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -498,16 +495,13 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
+.dnb-switch {
   --switch-width--medium: 2.5rem;
   --switch-height--medium: 1.5rem;
   --switch-width--large: 3.25rem;
   --switch-height--large: 2rem;
   --switch-border-width--medium: 0.0625rem;
   --switch-border-width--large: 0.125rem;
-}
-
-.dnb-switch {
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
diff --git a/packages/dnb-eufemia/src/components/switch/style/dnb-switch.scss b/packages/dnb-eufemia/src/components/switch/style/dnb-switch.scss
index 12ee01e785f..b2c396bebd6 100644
--- a/packages/dnb-eufemia/src/components/switch/style/dnb-switch.scss
+++ b/packages/dnb-eufemia/src/components/switch/style/dnb-switch.scss
@@ -5,16 +5,14 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-switch {
   --switch-width--medium: 2.5rem;
   --switch-height--medium: 1.5rem;
   --switch-width--large: 3.25rem;
   --switch-height--large: 2rem;
   --switch-border-width--medium: 0.0625rem;
   --switch-border-width--large: 0.125rem;
-}
 
-.dnb-switch {
   display: inline-flex;
   flex-direction: column;
 
diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
index b33bf4e69cd..bf3171a9771 100644
--- a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
@@ -1396,6 +1396,11 @@ exports[`Tabs scss have to match snapshot 1`] = `
   flex: 0 1 auto;
   overflow-x: auto;
   overscroll-behavior: contain;
+  --scrollbar-track-width: 0.5rem;
+  --scrollbar-thumb-width: 0.5rem;
+  --scrollbar-track-color: var(--color-black-8);
+  --scrollbar-thumb-color: var(--color-sea-green);
+  --scrollbar-thumb-hover-color: var(--color-emerald-green);
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
   scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
diff --git a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap
index 371e2d58705..c67ada76903 100644
--- a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap
@@ -236,11 +236,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -321,26 +318,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
diff --git a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap
index 29865f3b67e..44357f5fa5a 100644
--- a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap
+++ b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap
@@ -150,15 +150,19 @@ exports[`Textarea scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
-:root {
+.dnb-textarea {
   --textarea-rows: 2;
 }
-
 .dnb-textarea__textarea {
   color: var(--color-black);
   background-color: var(--color-white);
   overflow-y: auto;
   overscroll-behavior: contain;
+  --scrollbar-track-width: 0.5rem;
+  --scrollbar-thumb-width: 0.5rem;
+  --scrollbar-track-color: var(--color-black-8);
+  --scrollbar-thumb-color: var(--color-sea-green);
+  --scrollbar-thumb-hover-color: var(--color-emerald-green);
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
   scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
@@ -294,11 +298,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -378,11 +379,8 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
-  --textarea-padding-width: 0.5rem;
-}
-
 .dnb-textarea {
+  --textarea-padding-width: 0.5rem;
   display: inline-flex;
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
diff --git a/packages/dnb-eufemia/src/components/textarea/style/dnb-textarea.scss b/packages/dnb-eufemia/src/components/textarea/style/dnb-textarea.scss
index 64f640ea331..135e3c0999f 100644
--- a/packages/dnb-eufemia/src/components/textarea/style/dnb-textarea.scss
+++ b/packages/dnb-eufemia/src/components/textarea/style/dnb-textarea.scss
@@ -5,10 +5,6 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
-  --textarea-padding-width: 0.5rem;
-}
-
 @mixin textareaStyleCommon() {
   cursor: auto;
   border: none;
@@ -22,6 +18,8 @@
 }
 
 .dnb-textarea {
+  --textarea-padding-width: 0.5rem;
+
   display: inline-flex;
 
   font-size: var(--font-size-small);
diff --git a/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss b/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss
index 9a6eaa2533e..2da483b079a 100644
--- a/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss
@@ -5,11 +5,9 @@
 
 @import '../../../../style/core/utilities.scss';
 
-:root {
+.dnb-textarea {
   --textarea-rows: 2;
-}
 
-.dnb-textarea {
   &__textarea {
     color: var(--color-black);
     background-color: var(--color-white);
diff --git a/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap b/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
index df588849fbb..0034a648c1f 100644
--- a/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
@@ -13,13 +13,13 @@ exports[`Timeline scss have to match default theme snapshot 1`] = `
 *
 */
 .dnb-timeline {
-  --timeline-icon-height--small: var(--button-height--small);
-  --timeline-icon-width--small: var(--button-width--small);
+  --timeline-icon-height--small: 1.5rem;
+  --timeline-icon-width--small: 1.5rem;
   --timeline-icon-border-radius--small: calc(
     var(--timeline-icon-height--small) / 2
   );
-  --timeline-icon-height--medium: var(--button-height--medium);
-  --timeline-icon-width--medium: var(--button-width--medium);
+  --timeline-icon-height--medium: 2rem;
+  --timeline-icon-width--medium: 2rem;
   --timeline-icon-border-radius--medium: calc(
     var(--timeline-icon-height--medium) / 2
   );
diff --git a/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss b/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss
index f79d7819c32..651d8cebf97 100644
--- a/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss
@@ -15,13 +15,13 @@
 }
 
 .dnb-timeline {
-  --timeline-icon-height--small: var(--button-height--small);
-  --timeline-icon-width--small: var(--button-width--small);
+  --timeline-icon-height--small: 1.5rem;
+  --timeline-icon-width--small: 1.5rem;
   --timeline-icon-border-radius--small: calc(
     var(--timeline-icon-height--small) / 2
   );
-  --timeline-icon-height--medium: var(--button-height--medium);
-  --timeline-icon-width--medium: var(--button-width--medium);
+  --timeline-icon-height--medium: 2rem;
+  --timeline-icon-width--medium: 2rem;
   --timeline-icon-border-radius--medium: calc(
     var(--timeline-icon-height--medium) / 2
   );
diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
index 5df188e6df7..2d84d6556b6 100644
--- a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
+++ b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
@@ -1881,11 +1881,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -1966,26 +1963,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -2262,11 +2259,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -2349,12 +2343,12 @@ button .dnb-form-status__text {
 :root {
   --checkbox-width--medium: 1.5rem;
   --checkbox-height--medium: 1.5rem;
-  --checkbox-width--large: 2rem;
-  --checkbox-height--large: 2rem;
-  --checkbox-border-width: 0.125rem;
 }
 
 .dnb-checkbox {
+  --checkbox-width--large: 2rem;
+  --checkbox-height--large: 2rem;
+  --checkbox-border-width: 0.125rem;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -2544,11 +2538,8 @@ legend.dnb-form-label {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -2631,14 +2622,14 @@ button .dnb-form-status__text {
 :root {
   --radio-width--medium: 1.5rem;
   --radio-height--medium: 1.5rem;
+}
+
+.dnb-radio {
   --radio-width--large: 2rem;
   --radio-height--large: 2rem;
   --radio-border-width: 0.125rem;
   --radio-margin-right: 1rem;
   --radio-margin-bottom: 0.5rem;
-}
-
-.dnb-radio {
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -2822,11 +2813,8 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -2906,12 +2894,9 @@ button .dnb-form-status__text {
 /*
  * Utilities
  */
-:root {
+.dnb-toggle-button {
   --toggle-button-margin-right: 1rem;
   --toggle-button-margin-bottom: 1rem;
-}
-
-.dnb-toggle-button {
   display: inline-flex;
   align-items: center;
   font-size: var(--font-size-small);
@@ -3029,10 +3014,10 @@ button .dnb-form-status__text {
   font-size: var(--font-size-basis);
 }
 .dnb-toggle-button-group--no-label > .dnb-alignment-helper {
-  line-height: var(--button-height);
+  line-height: 2.5rem;
 }
 .dnb-toggle-button-group--row.dnb-toggle-button-group:not(.dnb-form-row--vertical-label) > .dnb-alignment-helper {
-  line-height: var(--button-height);
+  line-height: 2.5rem;
 }
 @media screen and (min-width: 40em) {
   .dnb-form-label + .dnb-toggle-button {
diff --git a/packages/dnb-eufemia/src/components/toggle-button/style/dnb-toggle-button.scss b/packages/dnb-eufemia/src/components/toggle-button/style/dnb-toggle-button.scss
index 15fa09a5361..5c7d1fad33a 100644
--- a/packages/dnb-eufemia/src/components/toggle-button/style/dnb-toggle-button.scss
+++ b/packages/dnb-eufemia/src/components/toggle-button/style/dnb-toggle-button.scss
@@ -5,12 +5,10 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-toggle-button {
   --toggle-button-margin-right: 1rem;
   --toggle-button-margin-bottom: 1rem;
-}
 
-.dnb-toggle-button {
   display: inline-flex;
   align-items: center; // because, with this we v align it to the label
 
@@ -184,12 +182,12 @@
 
     // vertical alignment - if no label is given
     &--no-label > .dnb-alignment-helper {
-      line-height: var(--button-height);
+      line-height: 2.5rem;
     }
 
     // correct for horizontal form-row direction
     &--row#{&}:not(.dnb-form-row--vertical-label) > .dnb-alignment-helper {
-      line-height: var(--button-height);
+      line-height: 2.5rem;
     }
   }
 
diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap b/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap
index 840218cb085..653415ccdce 100644
--- a/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap
@@ -365,11 +365,8 @@ html[data-visual-test] .dnb-tooltip--hide {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
@@ -450,26 +447,26 @@ button .dnb-form-status__text {
  * Utilities
  */
 :root {
+  --button-icon-size: 1rem;
+  --button-height: 2.5rem;
+  --button-border-radius: calc(var(--button-height) / 2);
+}
+
+.dnb-button {
   --button-font-size: var(--font-size-basis);
   --button-font-size-small: var(--font-size-small);
   --button-width: 2.5rem;
-  --button-height: 2.5rem;
   --button-width--small: 1.5rem;
   --button-height--small: 1.5rem;
   --button-width--medium: 2rem;
   --button-height--medium: 2rem;
   --button-width--large: 3rem;
   --button-height--large: 3rem;
-  --button-icon-size: 1rem;
   --button-border-width: 0.0625rem;
   --button-border-width--hover: 0.1875rem;
-  --button-border-radius: calc(var(--button-height) / 2);
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
-}
-
-.dnb-button {
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -696,11 +693,8 @@ button.dnb-button::-moz-focus-inner {
 /*
  * Utilities
  */
-:root {
-  --form-status-radius: 0.25rem;
-}
-
 .dnb-form-status {
+  --form-status-radius: 0.25rem;
   display: flex;
   opacity: 1;
   transition: height 400ms var(--easing-default), opacity 400ms var(--easing-default), margin 400ms var(--easing-default), padding 400ms var(--easing-default);
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.js.snap b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.js.snap
index 341f23e58f6..d34d863fcca 100644
--- a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.js.snap
+++ b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.js.snap
@@ -360,7 +360,7 @@ exports[`PaymentCard scss have to match snapshot 1`] = `
 /*
  * Utilities
  */
-:root {
+.dnb-payment-card {
   --dnb-payment-bg-default: linear-gradient(
     184.55deg,
     var(--color-sea-green) 6.31%,
@@ -402,9 +402,6 @@ exports[`PaymentCard scss have to match snapshot 1`] = `
     #2cc48e 6.31%,
     var(--color-summer-green) 82.66%
   );
-}
-
-.dnb-payment-card {
   margin: 0;
 }
 .dnb-payment-card__card {
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/style/dnb-payment-card.scss b/packages/dnb-eufemia/src/extensions/payment-card/style/dnb-payment-card.scss
index f0bd68a1af2..b67bd7c3333 100644
--- a/packages/dnb-eufemia/src/extensions/payment-card/style/dnb-payment-card.scss
+++ b/packages/dnb-eufemia/src/extensions/payment-card/style/dnb-payment-card.scss
@@ -5,7 +5,7 @@
 
 @import '../../../style/core/utilities.scss';
 
-:root {
+.dnb-payment-card {
   --dnb-payment-bg-default: linear-gradient(
     184.55deg,
     var(--color-sea-green) 6.31%,
@@ -47,9 +47,7 @@
     #2cc48e 6.31%,
     var(--color-summer-green) 82.66%
   );
-}
 
-.dnb-payment-card {
   margin: 0;
 
   &__card {
@@ -61,7 +59,8 @@
     border-radius: 3.48mm;
 
     border: 1px solid;
-    border-color: rgb(255 255 255 / 10%) transparent rgb(0 0 0 / 20%) transparent;
+    border-color: rgb(255 255 255 / 10%) transparent rgb(0 0 0 / 20%)
+      transparent;
 
     color: var(--color-white);
     box-shadow: var(--shadow-default);
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap
index 1c4e6932248..cdc9552885d 100644
--- a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap
+++ b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap
@@ -808,12 +808,9 @@ exports[`DrawerList scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
-:root {
+.dnb-drawer-list {
   --drawer-list-options-border-radius: 0.25rem;
   --drawer-list-option-border-width: 0.0625rem;
-}
-
-.dnb-drawer-list {
   color: var(--color-emerald-green);
 }
 .dnb-drawer-list__list {
@@ -1022,15 +1019,15 @@ exports[`DrawerList scss have to match snapshot 1`] = `
 :root {
   --drawer-list-width: 16rem;
   --drawer-list-height: 2rem;
+}
+
+.dnb-drawer-list {
   --drawer-list-padding-horizontal: 1rem;
   --drawer-list-focus-border-width: 0.125rem;
   --drawer-list-text-padding: 0.5rem;
   --drawer-list-height--small: 1.5rem;
   --drawer-list-height--medium: 2.5rem;
   --drawer-list-height--large: 3rem;
-}
-
-.dnb-drawer-list {
   display: block;
   position: relative;
   width: inherit;
@@ -1099,6 +1096,11 @@ html[data-visual-test] .dnb-drawer-list__portal__style {
   transition: max-height 300ms var(--easing-default);
   overflow-y: auto;
   overscroll-behavior: contain;
+  --scrollbar-track-width: 0.5rem;
+  --scrollbar-thumb-width: 0.5rem;
+  --scrollbar-track-color: var(--color-black-8);
+  --scrollbar-thumb-color: var(--color-sea-green);
+  --scrollbar-thumb-hover-color: var(--color-emerald-green);
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: auto;
   scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss
index 52bfe626719..90066293c70 100644
--- a/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss
+++ b/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss
@@ -8,14 +8,7 @@
 :root {
   --drawer-list-width: 16rem;
   --drawer-list-height: 2rem;
-  --drawer-list-padding-horizontal: 1rem;
-  --drawer-list-focus-border-width: 0.125rem;
-  --drawer-list-text-padding: 0.5rem;
-  --drawer-list-height--small: 1.5rem;
-  --drawer-list-height--medium: 2.5rem;
-  --drawer-list-height--large: 3rem;
 }
-
 @mixin openDrawerList($type: 'slide') {
   z-index: 100; // make sure we are over e.g. switch
   display: flex;
@@ -55,6 +48,13 @@
 }
 
 .dnb-drawer-list {
+  --drawer-list-padding-horizontal: 1rem;
+  --drawer-list-focus-border-width: 0.125rem;
+  --drawer-list-text-padding: 0.5rem;
+  --drawer-list-height--small: 1.5rem;
+  --drawer-list-height--medium: 2.5rem;
+  --drawer-list-height--large: 3rem;
+
   display: block; // has to be block element so we can se the content
   position: relative;
 
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss
index bc20329bbcb..cfb6a8b1c24 100644
--- a/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss
+++ b/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss
@@ -5,12 +5,10 @@
 
 @import '../../../../style/core/utilities.scss';
 
-:root {
+.dnb-drawer-list {
   --drawer-list-options-border-radius: 0.25rem;
   --drawer-list-option-border-width: 0.0625rem;
-}
 
-.dnb-drawer-list {
   color: var(--color-emerald-green);
 
   &__list {
diff --git a/packages/dnb-eufemia/src/fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss b/packages/dnb-eufemia/src/fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss
index 2426970dc4f..51f0155676d 100644
--- a/packages/dnb-eufemia/src/fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss
+++ b/packages/dnb-eufemia/src/fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss
@@ -4,11 +4,3 @@
 */
 
 @import '../../../../style/core/utilities.scss';
-
-:root {
-  --scrollbar-track-width: 0.5rem;
-  --scrollbar-thumb-width: 0.5rem;
-  --scrollbar-track-color: var(--color-black-8);
-  --scrollbar-thumb-color: var(--color-sea-green);
-  --scrollbar-thumb-hover-color: var(--color-emerald-green);
-}
diff --git a/packages/dnb-eufemia/src/style/core/utilities.scss b/packages/dnb-eufemia/src/style/core/utilities.scss
index 92f42c6be9e..615c0c1db1b 100644
--- a/packages/dnb-eufemia/src/style/core/utilities.scss
+++ b/packages/dnb-eufemia/src/style/core/utilities.scss
@@ -147,6 +147,12 @@ $focusRingColor: var(--color-emerald-green);
 }
 
 @mixin scrollbarAppearance() {
+  --scrollbar-track-width: 0.5rem;
+  --scrollbar-thumb-width: 0.5rem;
+  --scrollbar-track-color: var(--color-black-8);
+  --scrollbar-thumb-color: var(--color-sea-green);
+  --scrollbar-thumb-hover-color: var(--color-emerald-green);
+
   // older iOS safari
   -webkit-overflow-scrolling: touch;