diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss
index 207ae3ee97e7..7f85d64b0b7d 100644
--- a/packages/components/src/components/checkbox/checkbox.scss
+++ b/packages/components/src/components/checkbox/checkbox.scss
@@ -24,10 +24,75 @@
 	}
 }
 
+@mixin get-validity-color-check($key: "valid") {
+	$variant: successful;
+
+	@if ($key != "valid") {
+		$variant: critical;
+	}
+
+	--db-check-element-border-color: var(
+		--db-#{$variant}-on-bg-basic-emphasis-70-default
+	);
+	--db-adaptive-on-bg-basic-emphasis-100-default: var(
+		--db-#{$variant}-on-bg-basic-emphasis-80-default
+	);
+	--db-adaptive-on-bg-basic-emphasis-100-hovered: var(
+		--db-#{$variant}-on-bg-basic-emphasis-80-hovered
+	);
+	--db-adaptive-on-bg-basic-emphasis-100-pressed: var(
+		--db-#{$variant}-on-bg-basic-emphasis-80-pressed
+	);
+
+	@include form-components.get-validity-message($key);
+
+	input {
+		&:not(:checked) {
+			--db-adaptive-bg-basic-transparent-default: var(
+				--db-#{$variant}-bg-basic-transparent-default
+			);
+			--db-adaptive-bg-basic-transparent-hovered: var(
+				--db-#{$variant}-bg-basic-transparent-hovered
+			);
+			--db-adaptive-bg-basic-transparent-pressed: var(
+				--db-#{$variant}-bg-basic-transparent-pressed
+			);
+		}
+
+		&:checked {
+			--db-icon-color: var(--db-#{$variant}-on-bg-inverted-default);
+			--db-adaptive-bg-basic-transparent-full-default: var(
+				--db-#{$variant}-bg-inverted-contrast-high-default
+			);
+			--db-adaptive-bg-basic-transparent-hovered: var(
+				--db-#{$variant}-bg-inverted-contrast-high-hovered
+			);
+			--db-adaptive-bg-basic-transparent-pressed: var(
+				--db-#{$variant}-bg-inverted-contrast-high-pressed
+			);
+		}
+	}
+}
+
 .db-checkbox {
 	@extend %helper-message;
 
-	@include form-components.set-default-check-element(check);
+	@include form-components.set-default-check-element();
+
+	&:not(:has(input:disabled)) {
+		@include form-components.get-state();
+		@include form-components.get-state("active");
+	}
+
+	@include form-components.get-validity(check) {
+		&:has(.db-infotext[data-semantic="successful"]) {
+			@include get-validity-color-check("valid");
+		}
+	}
+
+	@include form-components.get-validity(check, "invalid") {
+		@include get-validity-color-check("invalid");
+	}
 
 	input {
 		display: flex;
@@ -37,17 +102,21 @@
 
 		&:checked {
 			--db-check-element-border-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
+			--db-icon-color: var(--db-adaptive-on-bg-inverted-default);
+			--db-adaptive-bg-basic-transparent-full-default: var(
+				--db-adaptive-bg-inverted-contrast-max-default
+			);
+			--db-adaptive-bg-basic-transparent-hovered: var(
+				--db-adaptive-bg-inverted-contrast-max-hovered
+			);
+			--db-adaptive-bg-basic-transparent-pressed: var(
+				--db-adaptive-bg-inverted-contrast-max-pressed
+			);
 
 			@extend %center-icon;
 
 			// Check icon
 			@include icons.set-icon("check");
-			@include colors.set-current-colors(
-				colors.$db-adaptive-bg-inverted-contrast-max-default,
-				colors.$db-adaptive-on-bg-inverted-default,
-				colors.$db-adaptive-bg-inverted-contrast-max-hovered,
-				colors.$db-adaptive-bg-inverted-contrast-max-pressed
-			);
 
 			// The icon within the checkbox has the same dimensions as the checkbox itself and that for there can't be any border
 			border-width: 0;
diff --git a/packages/components/src/components/radio/radio.scss b/packages/components/src/components/radio/radio.scss
index b27d462ab678..2901f7880bb7 100644
--- a/packages/components/src/components/radio/radio.scss
+++ b/packages/components/src/components/radio/radio.scss
@@ -1,12 +1,49 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/form-components";
 
+@mixin get-radio-validity-colors($variant: "successful") {
+	--db-check-element-border-color: var(
+		--db-#{$variant}-on-bg-basic-emphasis-70-default
+	);
+	--db-adaptive-on-bg-basic-emphasis-100-default: var(
+		--db-#{$variant}-on-bg-basic-emphasis-80-default
+	);
+	--db-adaptive-on-bg-basic-emphasis-100-hovered: var(
+		--db-#{$variant}-on-bg-basic-emphasis-80-hovered
+	);
+	--db-adaptive-on-bg-basic-emphasis-100-pressed: var(
+		--db-#{$variant}-on-bg-basic-emphasis-80-pressed
+	);
+	--db-adaptive-bg-basic-transparent-default: var(
+		--db-#{$variant}-bg-basic-transparent-default
+	);
+	--db-adaptive-bg-basic-transparent-hovered: var(
+		--db-#{$variant}-bg-basic-transparent-hovered
+	);
+	--db-adaptive-bg-basic-transparent-pressed: var(
+		--db-#{$variant}-bg-basic-transparent-pressed
+	);
+}
+
 .db-radio {
-	@include form-components.set-default-check-element(radio);
+	@include form-components.set-default-check-element();
+
+	&:not(:has(input:checked, input:disabled)) {
+		@include form-components.get-state();
+		@include form-components.get-state("active");
+	}
+
+	@include form-components.get-validity(radio) {
+		@include get-radio-validity-colors();
+	}
+
+	@include form-components.get-validity(radio, "invalid") {
+		@include get-radio-validity-colors("critical");
+	}
 
 	input {
-		border-color: currentcolor;
 		border-radius: variables.$db-border-radius-full;
 
 		@media screen and (prefers-reduced-motion: no-preference) {
@@ -15,11 +52,6 @@
 		}
 
 		&:checked {
-			// The radio element still has the default background for the dot on :hover when in checked state
-			&:not(:disabled):is(:hover, :focus) {
-				background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
-			}
-
 			&:not([data-size="small"]) {
 				border-width: calc(
 					(
diff --git a/packages/components/src/components/switch/switch.scss b/packages/components/src/components/switch/switch.scss
index fad67847dabb..c22e5d250711 100644
--- a/packages/components/src/components/switch/switch.scss
+++ b/packages/components/src/components/switch/switch.scss
@@ -38,11 +38,12 @@ $checked-active-transition-size: calc(
 .db-switch {
 	user-select: none;
 
-	@include form-components.set-default-check-element(switch);
+	@include form-components.set-default-check-element();
 
-	// This is needed when clicking on the label instead of the input
-	@include helpers.active {
-		> input {
+	&:not(:has(input:disabled)) {
+		@include form-components.get-state();
+
+		@include form-components.get-state("active") {
 			@extend %active-transition;
 		}
 	}
@@ -63,12 +64,13 @@ $checked-active-transition-size: calc(
 		align-items: center;
 		/* stylelint-disable-next-line db-ux/use-spacings */
 		gap: $switch-fixed-padding;
-		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
 		border-radius: variables.$db-border-radius-full;
 
 		@include icons.set-icon("cross", "after");
 
 		&::after {
+			--db-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default};
+
 			visibility: hidden;
 			align-self: center;
 			aspect-ratio: 1;
@@ -81,8 +83,8 @@ $checked-active-transition-size: calc(
 			align-content: center;
 			aspect-ratio: 1;
 			block-size: $switch-inactive-thumb-size;
-			background-color: colors.$db-adaptive-bg-inverted-contrast-max-default;
-			color: colors.$db-adaptive-bg-inverted-contrast-max-default;
+			background-color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
+			color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
 			border-radius: variables.$db-border-radius-full;
 			transform: translateX(var(--thumb-offset-x));
 			margin-inline-end: calc(
@@ -123,6 +125,10 @@ $checked-active-transition-size: calc(
 				border-color: colors.$db-adaptive-on-bg-basic-emphasis-100-pressed;
 			}
 
+			&::after {
+				--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
+			}
+
 			&::before {
 				block-size: $switch-active-thumb-size;
 				background-color: colors.$db-adaptive-on-bg-inverted-default;
@@ -197,6 +203,14 @@ $checked-active-transition-size: calc(
 					background-color: colors.$db-adaptive-on-bg-inverted-default;
 					color: colors.$db-adaptive-on-bg-inverted-default;
 				}
+
+				&::after {
+					--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
+				}
+			}
+
+			&::after {
+				--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
 			}
 
 			&::before {
diff --git a/packages/components/src/styles/internal/_form-components.scss b/packages/components/src/styles/internal/_form-components.scss
index fddc8d6d655b..95e7f946b01b 100644
--- a/packages/components/src/styles/internal/_form-components.scss
+++ b/packages/components/src/styles/internal/_form-components.scss
@@ -428,73 +428,55 @@ $input-valid-types:
 	}
 }
 
-// CHECKBOX & RADIO
-
-@mixin get-validity-color-check($key: "valid") {
+@mixin get-validity-color-check-label-color($state, $key: "valid") {
 	$variant: successful;
 
 	@if ($key != "valid") {
 		$variant: critical;
 	}
 
-	@include get-validity-message($key);
+	&:has(input:not([role="switch"])) {
+		&:is(label),
+		> label {
+			color: var(--db-#{$variant}-on-bg-basic-emphasis-100-#{$state});
+		}
+	}
+}
 
-	input:not([role="switch"]) {
-		--db-adaptive-bg-basic-transparent-semi: var(
-			--db-#{$variant}-bg-basic-transparent-semi-default
-		);
-		--db-adaptive-bg-basic-transparent-hovered: var(
-			--db-#{$variant}-bg-basic-transparent-hovered
-		);
-		--db-adaptive-bg-basic-transparent-pressed: var(
-			--db-#{$variant}-bg-basic-transparent-pressed
-		);
+// CHECKBOX & RADIO
 
-		&:not(:checked),
-		&:is([type="radio"]) {
-			--db-check-element-border-color: var(
-				--db-#{$variant}-on-bg-basic-emphasis-70-default
-			);
-		}
+@mixin get-state($state: "hover") {
+	$variant: "hovered";
 
-		&:not([type="radio"]):checked {
-			@include colors.set-current-colors(
-				colors.$db-successful-bg-inverted-contrast-high-default,
-				colors.$db-successful-on-bg-inverted-default,
-				colors.$db-successful-bg-inverted-contrast-high-hovered,
-				colors.$db-successful-bg-inverted-contrast-high-pressed
-			);
-		}
+	@if ($state != "hover") {
+		$variant: "pressed";
 	}
 
-	&:has(input:not([role="switch"])) {
+	&:has(input:#{$state}, > label:#{$state}, :is(label):#{$state}) {
+		--db-check-element-label-color: var(
+			--db-adaptive-on-bg-basic-emphasis-100-#{$variant}
+		);
+
 		&:is(label),
 		> label {
-			color: var(--db-#{$variant}-on-bg-basic-emphasis-80-default);
+			cursor: helpers.$cursor-pointer;
+		}
+
+		input {
+			cursor: helpers.$cursor-pointer;
+			background-color: var(
+				--db-adaptive-bg-basic-transparent-#{$variant}
+			);
+			@content;
 		}
 	}
 }
 
-@mixin set-default-check-element($selector) {
+@mixin set-default-check-element() {
 	@extend %db-overwrite-font-size-md;
 
 	@include set-required-label(input);
 
-	@include get-validity($selector) {
-		@if ($selector == check) {
-			&:has(.db-infotext[data-semantic="successful"]) {
-				@include get-validity-color-check("valid");
-			}
-			/* stylelint-disable-next-line at-rule-empty-line-before */
-		} @else {
-			@include get-validity-color-check("valid");
-		}
-	}
-
-	@include get-validity($selector, "invalid") {
-		@include get-validity-color-check("invalid");
-	}
-
 	&:has(input:disabled) {
 		opacity: component.$default-disabled;
 	}
@@ -505,11 +487,10 @@ $input-valid-types:
 		align-items: flex-start;
 		position: relative;
 		gap: variables.$db-spacing-fixed-xs;
-
-		&:not(:has(input:disabled)) {
-			@include helpers.hover;
-			@include helpers.active;
-		}
+		color: var(
+			--db-check-element-label-color,
+			#{colors.$db-adaptive-on-bg-basic-emphasis-100-default}
+		);
 	}
 
 	input {
@@ -526,14 +507,6 @@ $input-valid-types:
 		block-size: $font-size-height;
 		inline-size: $font-size-height;
 		padding: 0;
-
-		@include helpers.hover {
-			background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
-		}
-
-		@include helpers.active {
-			background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
-		}
 	}
 
 	&[data-size="small"] {
diff --git a/packages/foundations/dev/icons.html b/packages/foundations/dev/icons.html
index 18611363cba1..ca86a55a698c 100644
--- a/packages/foundations/dev/icons.html
+++ b/packages/foundations/dev/icons.html
@@ -1,370 +1,329 @@
 <!--This file was generated-->
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Icon Overview</title>
-		<link rel="stylesheet" href="/dev/index.css" />
-		<link rel="stylesheet" href="/build/styles/icons/absolute.css" />
-		<style>
-			.db-infotext {
-				display: none !important;
-			}
-		</style>
-	</head>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Icon Overview</title>
+    <link rel="stylesheet" href="/dev/index.css" />
+    <link rel="stylesheet" href="/build/styles/icons/absolute.css" />
+    <style>
+      .db-infotext {
+        display: none !important;
+      }
+    </style>
+  </head>
 
-	<body>
-		<div class="icons-overview-container">
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="arrow_down"
-					>arrow_down</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>arrow_down</span
-				>
-			</div>
+  <body>
+    <div class="icons-overview-container">
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="arrow_down"
+          >arrow_down</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >arrow_down</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="arrow_left"
-					>arrow_left</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>arrow_left</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="arrow_left"
+          >arrow_left</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >arrow_left</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="arrow_right"
-					>arrow_right</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>arrow_right</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="arrow_right"
+          >arrow_right</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >arrow_right</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="arrow_up"
-					>arrow_up</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>arrow_up</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="arrow_up"
+          >arrow_up</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >arrow_up</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="arrow_up_right"
-					>arrow_up_right</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>arrow_up_right</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="arrow_up_right"
+          >arrow_up_right</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >arrow_up_right</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="brand"
-					>brand</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>brand</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="brand">brand</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >brand</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="calendar"
-					>calendar</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>calendar</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="calendar"
+          >calendar</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >calendar</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="check-circle"
-					>check-circle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>check-circle</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="check-circle"
+          >check-circle</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >check-circle</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="check"
-					>check</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>check</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="check">check</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >check</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="check_circle"
-					>check_circle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>check_circle</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="check_circle"
+          >check_circle</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >check_circle</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="chevron_down"
-					>chevron_down</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>chevron_down</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="chevron_down"
+          >chevron_down</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >chevron_down</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="chevron_left"
-					>chevron_left</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>chevron_left</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="chevron_left"
+          >chevron_left</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >chevron_left</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="chevron_right"
-					>chevron_right</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>chevron_right</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="chevron_right"
+          >chevron_right</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >chevron_right</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="chevron_up"
-					>chevron_up</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>chevron_up</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="chevron_up"
+          >chevron_up</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >chevron_up</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="circle"
-					>circle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>circle</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="circle">circle</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >circle</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="circular_arrows"
-					>circular_arrows</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>circular_arrows</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="circular_arrows"
+          >circular_arrows</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >circular_arrows</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="clock"
-					>clock</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>clock</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="clock">clock</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >clock</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="cross"
-					>cross</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>cross</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="cross">cross</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >cross</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="cross_circle"
-					>cross_circle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>cross_circle</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="cross_circle"
+          >cross_circle</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >cross_circle</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="exclamation_mark_circle"
-					>exclamation_mark_circle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>exclamation_mark_circle</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span
+          aria-hidden="true"
+          class="db-icon"
+          data-icon="exclamation_mark_circle"
+          >exclamation_mark_circle</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >exclamation_mark_circle</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="exclamation_mark_triangle"
-					>exclamation_mark_triangle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>exclamation_mark_triangle</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span
+          aria-hidden="true"
+          class="db-icon"
+          data-icon="exclamation_mark_triangle"
+          >exclamation_mark_triangle</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >exclamation_mark_triangle</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="information_circle"
-					>information_circle</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>information_circle</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="information_circle"
+          >information_circle</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >information_circle</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="magnifying_glass"
-					>magnifying_glass</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>magnifying_glass</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="magnifying_glass"
+          >magnifying_glass</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >magnifying_glass</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="menu"
-					>menu</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>menu</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="menu">menu</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >menu</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="minus"
-					>minus</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>minus</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="minus">minus</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >minus</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span aria-hidden="true" class="db-icon" data-icon="plus"
-					>plus</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>plus</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="plus">plus</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >plus</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="resize_handle_corner"
-					>resize_handle_corner</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>resize_handle_corner</span
-				>
-			</div>
+      <div data-spacing="small" class="db-card">
+        <span
+          aria-hidden="true"
+          class="db-icon"
+          data-icon="resize_handle_corner"
+          >resize_handle_corner</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >resize_handle_corner</span
+        >
+      </div>
 
-			<div data-spacing="small" class="db-card">
-				<span
-					aria-hidden="true"
-					class="db-icon"
-					data-icon="x_placeholder"
-					>x_placeholder</span
-				><span
-					class="db-infotext"
-					data-icon="none"
-					data-semantic="informational"
-					>x_placeholder</span
-				>
-			</div>
-		</div>
-	</body>
+      <div data-spacing="small" class="db-card">
+        <span aria-hidden="true" class="db-icon" data-icon="x_placeholder"
+          >x_placeholder</span
+        ><span
+          class="db-infotext"
+          data-icon="none"
+          data-semantic="informational"
+          >x_placeholder</span
+        >
+      </div>
+    </div>
+  </body>
 </html>
diff --git a/packages/foundations/scss/helpers/_functions.scss b/packages/foundations/scss/helpers/_functions.scss
index 975a79783035..88042863cf50 100644
--- a/packages/foundations/scss/helpers/_functions.scss
+++ b/packages/foundations/scss/helpers/_functions.scss
@@ -10,8 +10,10 @@
 	@return #{$pxValue * 0.0625}em;
 }
 
+$cursor-pointer: var(--db-overwrite-cursor, pointer);
+
 @mixin cursor-pointer() {
-	cursor: var(--db-overwrite-cursor, pointer);
+	cursor: $cursor-pointer;
 	@content;
 
 	&:is(textarea),