diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
index 95738f4244..4ebd98030e 100644
--- a/src/assets/NcAppNavigationItem.scss
+++ b/src/assets/NcAppNavigationItem.scss
@@ -10,7 +10,7 @@
 	flex-wrap: wrap;
 	box-sizing: border-box;
 	width: 100%;
-	min-height: $clickable-area;
+	min-height: var(--default-clickable-area);
 	transition: background-color var(--animation-quick) ease-in-out;
 	transition: background-color 200ms ease-in-out;
 	border-radius: var(--border-radius-element, var(--border-radius-pill));
@@ -86,22 +86,22 @@
 		overflow: hidden;
 		flex: 1 1 0;
 		box-sizing: border-box;
-		min-height: $clickable-area;
+		min-height: var(--default-clickable-area);
 		padding: 0;
 		white-space: nowrap;
 		color: var(--color-main-text);
 		background-repeat: no-repeat;
 		background-position: $icon-margin center;
 		background-size: $icon-size $icon-size;
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 
 		.app-navigation-entry-icon {
 			display: flex;
 			align-items: center;
-			flex: 0 0 $clickable-area;
+			flex: 0 0 var(--default-clickable-area);
 			justify-content: center;
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			background-size: $icon-size $icon-size;
 			background-repeat: no-repeat;
 			background-position: $icon-margin center;
@@ -115,7 +115,7 @@
 		}
 
 		.editingContainer {
-			width: calc(100% - #{$clickable-area});
+			width: calc(100% - var(--default-clickable-area));
 			margin: auto;
 		}
 
@@ -146,21 +146,21 @@
 .app-navigation-entry__deleted {
 	display: inline-flex;
 	flex: 1 1 0;
-	padding-left: $clickable-area - $icon-margin !important;
+	padding-left: calc(var(--default-clickable-area) - $icon-margin) !important;
 	.app-navigation-entry__deleted-description {
 		position: relative;
 		overflow: hidden;
 		flex: 1 1 0;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 	}
 }
 
 /* counter and actions */
 .app-navigation-entry__utils {
 	display: flex;
-	min-width: $clickable-area;
+	min-width: var(--default-clickable-area);
 	align-items: center;
 	flex: 0 1 auto;
 	justify-content: flex-end;
diff --git a/src/assets/action.scss b/src/assets/action.scss
index 0722d03889..a74b187883 100644
--- a/src/assets/action.scss
+++ b/src/assets/action.scss
@@ -51,7 +51,7 @@
 
 		font-weight: normal;
 		font-size: var(--default-font-size);
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 
 		& > span {
 			cursor: pointer;
@@ -59,8 +59,8 @@
 		}
 
 		&__icon {
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			opacity: $opacity_full;
 			background-position: $icon-margin center;
 			background-size: $icon-size;
@@ -68,8 +68,8 @@
 		}
 
 		&:deep(.material-design-icon) {
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			opacity: $opacity_full;
 
 			.material-design-icon__svg {
@@ -113,7 +113,7 @@
 			margin-left: auto;
 			// Align with right end of the button
 			// This is the padding-right
-			margin-right: -$icon-margin;
+			margin-right: calc($icon-margin * -1);
 		}
 	}
 }
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index 9a062520ea..5d978245df 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -2,19 +2,13 @@
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-
-// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
-// recommended is 48px
-// 34px is what we choose and have very good visual-to-usability ratio
-$clickable-area: 34px;
-
 // background icon size
 // also used for the scss icon font
 $icon-size: 16px;
 
-// icon padding for a $clickable-area width and a $icon-size icon
+// icon padding for a var(--default-clickable-area) width and a $icon-size icon
 // ( 34px - 16px ) / 2
-$icon-margin: math.div($clickable-area - $icon-size, 2);
+$icon-margin: calc(calc(var(--default-clickable-area) - $icon-size) / 2);
 
 // transparency background for icons
 $icon-focus-bg: rgba(127, 127, 127, .25);
diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
index 124c52f86a..f638495651 100644
--- a/src/components/NcActionButton/NcActionButton.vue
+++ b/src/components/NcActionButton/NcActionButton.vue
@@ -548,6 +548,6 @@ export default {
 
 .action-button__pressed-icon {
 	margin-left: auto;
-	margin-right: -$icon-margin;
+	margin-right: calc($icon-margin * -1);
 }
 </style>
diff --git a/src/components/NcActionCaption/NcActionCaption.vue b/src/components/NcActionCaption/NcActionCaption.vue
index 964847eac0..a7931c0987 100644
--- a/src/components/NcActionCaption/NcActionCaption.vue
+++ b/src/components/NcActionCaption/NcActionCaption.vue
@@ -46,7 +46,7 @@ export default {
 <style lang="scss" scoped>
 	.app-navigation-caption {
 		color: var(--color-text-maxcontrast);
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		box-shadow: none !important;
@@ -54,7 +54,7 @@ export default {
 		pointer-events: none;
 		margin-left: 12px;
 		padding-right: 14px;
-		height: $clickable-area;
+		height: var(--default-clickable-area);
 		display: flex;
 		align-items: center;
 	}
diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue
index 7691f8c32e..2abf584fa1 100644
--- a/src/components/NcActionCheckbox/NcActionCheckbox.vue
+++ b/src/components/NcActionCheckbox/NcActionCheckbox.vue
@@ -182,7 +182,7 @@ export default {
 	box-shadow: none;
 
 	font-weight: normal;
-	line-height: $clickable-area;
+	line-height: var(--default-clickable-area);
 
 	/* checkbox/radio fixes */
 	&__checkbox {
diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
index 43f21555dc..dad754ee38 100644
--- a/src/components/NcActionInput/NcActionInput.vue
+++ b/src/components/NcActionInput/NcActionInput.vue
@@ -520,8 +520,8 @@ $input-margin: 4px;
 		justify-content: center;
 
 		&:deep(.material-design-icon) {
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			opacity: $opacity_full;
 
 			.material-design-icon__svg {
@@ -540,7 +540,7 @@ $input-margin: 4px;
 		min-height: 0;
 		/* Keep padding to define the width to
 			assure correct position of a possible text */
-		padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;
+		padding: calc(var(--default-clickable-area)/ 2) 0 calc(var(--default-clickable-area)/ 2) var(--default-clickable-area);
 
 		background-position: #{$icon-margin} center;
 		background-size: $icon-size;
@@ -610,12 +610,12 @@ $input-margin: 4px;
 // add the same bottomMargin as the right padding
 // for visual balance
 li:last-child > .action-input {
-	padding-bottom: $icon-margin - $input-margin;
+	padding-bottom: calc($icon-margin - $input-margin);
 }
 
 // same for first item
 li:first-child > .action-input:not(.action-input--visible-label) {
-	padding-top: $icon-margin - $input-margin;
+	padding-top: calc($icon-margin - $input-margin);
 }
 
 </style>
diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
index c637aa3133..7b655260c0 100644
--- a/src/components/NcActionRadio/NcActionRadio.vue
+++ b/src/components/NcActionRadio/NcActionRadio.vue
@@ -177,7 +177,7 @@ export default {
 	box-shadow: none;
 
 	font-weight: normal;
-	line-height: $clickable-area;
+	line-height: var(--default-clickable-area);
 
 	/* checkbox/radio fixes */
 	&__radio {
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
index edf6e0f9dc..29d91bb237 100644
--- a/src/components/NcActionTextEditable/NcActionTextEditable.vue
+++ b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -203,7 +203,7 @@ $input-margin: 4px;
 	box-shadow: none;
 
 	font-weight: normal;
-	line-height: $clickable-area;
+	line-height: var(--default-clickable-area);
 
 	& > span {
 		cursor: pointer;
@@ -215,15 +215,15 @@ $input-margin: 4px;
 		min-height: 0;
 		/* Keep padding to define the width to
 			assure correct position of a possible text */
-		padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;
+		padding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);
 
 		background-position: #{$icon-margin} center;
 		background-size: $icon-size;
 	}
 
 	&:deep(.material-design-icon) {
-		width: $clickable-area;
-		height: $clickable-area;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		opacity: $opacity_full;
 
 		.material-design-icon__svg {
@@ -258,10 +258,10 @@ $input-margin: 4px;
 
 		// bottom-right corner
 		position: absolute;
-		right: $icon-margin + 1;
+		right: calc($icon-margin + 1);
 		bottom: 1px;
-		width: #{$clickable-area - $input-margin * 2};
-		height: #{$clickable-area - $input-margin * 2};
+		width: calc(var(--default-clickable-area) - $input-margin * 2);
+		height: calc(var(--default-clickable-area) - $input-margin * 2);
 		box-sizing: border-box;
 		margin: 0;
 		padding: 7px 6px;
@@ -283,10 +283,10 @@ $input-margin: 4px;
 		color: inherit;
 		border-color: var(--color-border-maxcontrast);
 
-		min-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */
-		max-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */
+		min-height: calc(var(--default-clickable-area) * 2 - $input-margin * 2); /* twice the element margin-y */
+		max-height: calc(var(--default-clickable-area) * 3 - $input-margin * 2); /* twice the element margin-y */
 		// block width widening
-		min-width: $clickable-area * 4;
+		min-width: calc(var(--default-clickable-area) * 4);
 		width: 100% !important;
 		margin: 0;
 
@@ -329,11 +329,11 @@ $input-margin: 4px;
 // add the same bottomMargin as the right padding
 // for visual balance
 li:last-child > .action-text-editable {
-	margin-bottom: $icon-margin - $input-margin;
+	margin-bottom: calc($icon-margin - $input-margin);
 }
 
 // same for first item
 li:first-child > .action-text-editable {
-	margin-top: $icon-margin - $input-margin;
+	margin-top: calc($icon-margin - $input-margin);
 }
 </style>
diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index 5e8a202499..08f6f3f8c1 100644
--- a/src/components/NcActions/NcActions.vue
+++ b/src/components/NcActions/NcActions.vue
@@ -2009,7 +2009,7 @@ export default {
 
 	// Spacing between buttons
 	& > button {
-		margin-right: math.div($icon-margin, 2);
+		margin-right: calc($icon-margin / 2);
 	}
 }
 
diff --git a/src/components/NcAppContent/NcAppDetailsToggle.vue b/src/components/NcAppContent/NcAppDetailsToggle.vue
index eaa384dba0..b056683ae3 100644
--- a/src/components/NcAppContent/NcAppDetailsToggle.vue
+++ b/src/components/NcAppContent/NcAppDetailsToggle.vue
@@ -81,8 +81,8 @@ export default {
 <style lang="scss" scoped>
 .app-details-toggle {
 	position: sticky;
-	width: $clickable-area;
-	height: $clickable-area;
+	width: var(--default-clickable-area);
+	height: var(--default-clickable-area);
 	padding: $icon-margin;
 	cursor: pointer;
 	opacity: .6;
diff --git a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
index 690779f93a..2585b9e104 100644
--- a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
+++ b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
@@ -233,7 +233,7 @@ export default {
 		font-weight: bold;
 		color: var(--color-main-text);
 		font-size: var(--default-font-size);
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -246,12 +246,12 @@ export default {
 	}
 
 	&__actions {
-		flex: 0 0 $clickable-area;
+		flex: 0 0 var(--default-clickable-area);
 	}
 }
 
 // extra top space if it's not the first item on the list
 .app-navigation-caption:not(:first-child) {
-	margin-top: math.div($clickable-area, 2);
+	margin-top: calc(var(--default-clickable-area) / 2);
 }
 </style>
diff --git a/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue b/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue
index 51ad8c172e..57e53a5f13 100644
--- a/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue
+++ b/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue
@@ -72,7 +72,7 @@ export default {
 .app-navigation-entry__icon-bullet {
 	display: block;
 	// there is 2 margins
-	padding: $icon-margin + 1px;
+	padding: calc($icon-margin + 1px);
 	div {
 		width: $icon-size - 2px;
 		height: $icon-size - 2px;
diff --git a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
index 981225f664..6b3f455dda 100644
--- a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
+++ b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
@@ -171,7 +171,7 @@ export default {
 }
 
 .newItemContainer {
-	width: calc(100% - #{$clickable-area});
+	width: calc(100% - var(--default-clickable-area));
 	margin: auto;
 }
 </style>
diff --git a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
index 3abbbd66dc..5803ed5954 100644
--- a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
+++ b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
@@ -85,7 +85,7 @@ export default {
 		.settings-button {
 			display: flex;
 			flex: 1 1 0;
-			height: $clickable-area;
+			height: var(--default-clickable-area);
 			width: 100%;
 			padding: 0;
 			margin: 0;
@@ -98,7 +98,7 @@ export default {
 			font-size: 100%;
 			color: var(--color-main-text);
 			padding-right: 14px;
-			line-height: $clickable-area;
+			line-height: var(--default-clickable-area);
 
 			&:hover,
 			&:focus {
@@ -106,9 +106,9 @@ export default {
 			}
 
 			&__icon {
-				width: $clickable-area;
-				height: $clickable-area;
-				min-width: $clickable-area;
+				width: var(--default-clickable-area);
+				height: var(--default-clickable-area);
+				min-width: var(--default-clickable-area);
 			}
 			&__label {
 				overflow: hidden;
diff --git a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
index 17dad1b1da..e632ded9a5 100644
--- a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
+++ b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
@@ -72,7 +72,7 @@ export default {
 	position: absolute;
 	top: var(--app-navigation-padding);
 	right: calc(0px - var(--app-navigation-padding));
-	margin-right: - $clickable-area;
+	margin-right: - var(--default-clickable-area);
 }
 
 button.app-navigation-toggle {
diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
index 8edd3fd7e8..735b789692 100644
--- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
+++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -408,9 +408,9 @@ export default {
 		display: flex;
 		align-content: center;
 		font-size: 16px;
-		height: $clickable-area;
+		height: var(--default-clickable-area);
 		margin: 4px 0;
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 		border-radius: var(--border-radius-pill);
 		font-weight: bold;
 		padding: 0 20px;
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index f259441acf..21169da8f0 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -1189,10 +1189,10 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 			z-index: 100;
 			top: $top-buttons-spacing;
 			right: $top-buttons-spacing;
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			opacity: $opacity_normal;
-			border-radius: math.div($clickable-area, 2);
+			border-radius: calc(var(--default-clickable-area) / 2);
 			&:hover,
 			&:active,
 			&:focus {
@@ -1219,23 +1219,23 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 					padding-left: 0;
 					flex: 1 1 auto;
 					min-width: 0;
-					padding-right: calc(2 * $clickable-area + $top-buttons-spacing);
+					padding-right: calc(2 * var(--default-clickable-area) + $top-buttons-spacing);
 					padding-top: var(--app-sidebar-padding);
 
 					&.app-sidebar-header__desc--without-actions {
-						padding-right: calc($clickable-area + $top-buttons-spacing);
+						padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing);
 					}
 
 					.app-sidebar-header__tertiary-actions {
 						z-index: 3; // above star
 						position: absolute;
 						top: calc(var(--app-sidebar-padding) / 2);
-						left: -1 * $clickable-area;
+						left: calc(-1 * var(--default-clickable-area));
 						gap: 0; // override gap
 					}
 					.app-sidebar-header__menu {
 						top: $top-buttons-spacing;
-						right: calc($clickable-area + $top-buttons-spacing); // left of the close button
+						right: calc(var(--default-clickable-area) + $top-buttons-spacing); // left of the close button
 						position: absolute;
 					}
 				}
@@ -1248,14 +1248,14 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 			.app-sidebar-header__menu {
 				position: absolute;
 				top: $top-buttons-spacing;
-				right: calc($top-buttons-spacing + $clickable-area);
+				right: calc($top-buttons-spacing + var(--default-clickable-area));
 			}
 			// increase the padding to not overlap the menu
 			.app-sidebar-header__desc {
-				padding-right: calc($clickable-area * 2 + $top-buttons-spacing);
+				padding-right: calc(var(--default-clickable-area) * 2 + $top-buttons-spacing);
 
 				&.app-sidebar-header__desc--without-actions {
-					padding-right: calc($clickable-area + $top-buttons-spacing);
+					padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing);
 				}
 			}
 		}
@@ -1307,8 +1307,8 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 
 			.app-sidebar-header__tertiary-actions {
 				display: flex;
-				height: $clickable-area;
-				width: $clickable-area;
+				height: var(--default-clickable-area);
+				width: var(--default-clickable-area);
 				justify-content: center;
 				flex: 0 0 auto;
 
@@ -1333,7 +1333,7 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 				.app-sidebar-header__mainname-container {
 					display: flex;
 					align-items: center;
-					min-height: $clickable-area;
+					min-height: var(--default-clickable-area);
 
 					// main name
 					.app-sidebar-header__mainname {
diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue
index 49ee53bf98..50e6dd2229 100644
--- a/src/components/NcBreadcrumb/NcBreadcrumb.vue
+++ b/src/components/NcBreadcrumb/NcBreadcrumb.vue
@@ -274,7 +274,7 @@ export default {
 .vue-crumb {
 	background-image: none;
 	display: inline-flex;
-	height: $clickable-area;
+	height: var(--default-clickable-area);
 	padding: 0;
 
 	&:last-child {
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
index 290debd243..446bb3449f 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
+++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
@@ -197,9 +197,9 @@ export default {
 	flex-direction: row;
 	gap: 4px;
 	user-select: none;
-	min-height: $clickable-area;
-	border-radius: $clickable-area;
-	padding: 4px calc(($clickable-area - var(--icon-height)) / 2);
+	min-height: var(--default-clickable-area);
+	border-radius: var(--default-clickable-area);
+	padding: 4px calc((var(--default-clickable-area) - var(--icon-height)) / 2);
 	// Set to 100% to make text overflow work on button style
 	width: 100%;
 	// but restrict to content so plain checkboxes / radio switches do not expand
diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
index ee950e2eb0..ddeb00892c 100644
--- a/src/components/NcColorPicker/NcColorPicker.vue
+++ b/src/components/NcColorPicker/NcColorPicker.vue
@@ -426,8 +426,8 @@ export default {
 
 	&__simple {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, $clickable-area);
-		grid-auto-rows: $clickable-area;
+		grid-template-columns: repeat(auto-fit, var(--default-clickable-area));
+		grid-auto-rows: var(--default-clickable-area);
 
 		&-color-circle {
 			display: flex;
diff --git a/src/components/NcCounterBubble/NcCounterBubble.vue b/src/components/NcCounterBubble/NcCounterBubble.vue
index 614dbd0aa7..483734d70c 100644
--- a/src/components/NcCounterBubble/NcCounterBubble.vue
+++ b/src/components/NcCounterBubble/NcCounterBubble.vue
@@ -75,7 +75,7 @@ export default {
 	font-size: calc(var(--default-font-size) * .8);
 	overflow: hidden;
 	width: fit-content;
-	max-width: $clickable-area;
+	max-width: var(--default-clickable-area);
 	text-align: center;
 	text-overflow: ellipsis;
 	line-height: 1em;
diff --git a/src/components/NcDateTimePicker/index.scss b/src/components/NcDateTimePicker/index.scss
index d21f20ef35..a68e3d204f 100644
--- a/src/components/NcDateTimePicker/index.scss
+++ b/src/components/NcDateTimePicker/index.scss
@@ -281,7 +281,7 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
-		height: $clickable-area;
+		height: var(--default-clickable-area);
 		margin-bottom: 4px;
 
 		button {
diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue
index ce3185ae97..3b74401baf 100644
--- a/src/components/NcHeaderMenu/NcHeaderMenu.vue
+++ b/src/components/NcHeaderMenu/NcHeaderMenu.vue
@@ -394,7 +394,7 @@ $externalMargin: 8px;
 
 @media only screen and (max-width: $breakpoint-small-mobile) {
 	.header-menu {
-		width: $clickable-area;
+		width: var(--default-clickable-area);
 	}
 }
 </style>
diff --git a/src/components/NcListItemIcon/NcListItemIcon.vue b/src/components/NcListItemIcon/NcListItemIcon.vue
index dab94d69cc..6b37e6c892 100644
--- a/src/components/NcListItemIcon/NcListItemIcon.vue
+++ b/src/components/NcListItemIcon/NcListItemIcon.vue
@@ -364,11 +364,11 @@ export default {
 	}
 
 	&__icon {
-		width: $clickable-area;
-		height: $clickable-area;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		color: var(--color-text-maxcontrast);
 		&.icon {
-			flex: 0 0 $clickable-area;
+			flex: 0 0 var(--default-clickable-area);
 			opacity: $opacity_normal;
 			background-position: center;
 			background-size: 16px;
diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
index 4106cd84cf..3c4e630688 100644
--- a/src/components/NcModal/NcModal.vue
+++ b/src/components/NcModal/NcModal.vue
@@ -830,7 +830,7 @@ export default {
 		overflow-x: hidden;
 		box-sizing: border-box;
 		width: 100%;
-		padding: 0 #{$clickable-area * 3} 0 12px; // maximum actions is 3
+		padding: 0 calc(var(--default-clickable-area) * 3) 0 12px; // maximum actions is 3
 		transition: padding ease 100ms;
 		white-space: nowrap;
 		text-overflow: ellipsis;
@@ -841,7 +841,7 @@ export default {
 	// On wider screens the name can be centered
 	@media only screen and (min-width: $breakpoint-mobile) {
 		&__name {
-			padding-left: #{$clickable-area * 3}; // maximum actions is 3
+			padding-left: calc(var(--default-clickable-area) * 3); // maximum actions is 3
 			text-align: center;
 		}
 	}
@@ -858,7 +858,7 @@ export default {
 			align-items: center;
 			justify-content: center;
 			box-sizing: border-box;
-			margin: math.div($header-height - $clickable-area, 2);
+			margin: calc(calc($header-height - var(--default-clickable-area)) / 2);
 			padding: 0;
 		}
 
@@ -876,28 +876,28 @@ export default {
 				.play-pause-icons__play,
 				.play-pause-icons__pause {
 					opacity: $opacity_full;
-					border-radius: math.div($clickable-area, 2);
+					border-radius: calc(var(--default-clickable-area) / 2);
 					background-color: $icon-focus-bg;
 				}
 			}
 			&__play,
 			&__pause {
 				box-sizing: border-box;
-				width: $clickable-area;
-				height: $clickable-area;
-				margin: math.div($header-height - $clickable-area, 2);
+				width: var(--default-clickable-area);
+				height: var(--default-clickable-area);
+				margin: calc(calc($header-height - var(--default-clickable-area)) / 2);
 				cursor: pointer;
 				opacity: $opacity_normal;
 			}
 		}
 
 		&:deep() .action-item {
-			margin: math.div($header-height - $clickable-area, 2);
+			margin: calc(calc($header-height - var(--default-clickable-area)) / 2);
 
 			&--single {
 				box-sizing: border-box;
-				width: $clickable-area;
-				height: $clickable-area;
+				width: var(--default-clickable-area);
+				height: var(--default-clickable-area);
 				cursor: pointer;
 				background-position: center;
 				background-size: 22px;
diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
index e4740a5688..1a72e92f7a 100644
--- a/src/components/NcRichContenteditable/NcRichContenteditable.vue
+++ b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -1108,8 +1108,8 @@ export default {
 		background-color: var(--color-main-background);
 		font-family: var(--font-face);
 		font-size: inherit;
-		min-height: $clickable-area;
-		max-height: $clickable-area * 5.5;
+		min-height: var(--default-clickable-area);
+		max-height: calc(var(--default-clickable-area) * 5.5);
 
 		&--has-label {
 			margin-top: 10px;
@@ -1133,7 +1133,7 @@ export default {
 		}
 
 		&--multiline {
-			min-height: $clickable-area * 3;
+			min-height: calc(var(--default-clickable-area) * 3);
 			// No max for mutiline
 			max-height: none;
 		}
diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
index ea7e12cbd6..76bd11cb3f 100644
--- a/src/components/NcSelect/NcSelect.vue
+++ b/src/components/NcSelect/NcSelect.vue
@@ -1175,7 +1175,7 @@ body {
 
 .v-select.select {
 	/* Override default vue-select styles */
-	min-height: $clickable-area;
+	min-height: var(--default-clickable-area);
 	min-width: 260px;
 	margin: 0;
 
diff --git a/src/components/NcSettingsSection/NcSettingsSection.vue b/src/components/NcSettingsSection/NcSettingsSection.vue
index f04cf29fec..7b0832ccc8 100644
--- a/src/components/NcSettingsSection/NcSettingsSection.vue
+++ b/src/components/NcSettingsSection/NcSettingsSection.vue
@@ -140,10 +140,10 @@ $maxWidth: 900px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: $clickable-area;
-		height: $clickable-area;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		// make sure to properly align the icon with the text
-		margin: -$icon-margin;
+		margin: calc($icon-margin * -1);
 		margin-left: 0;
 		color: var(--color-text-maxcontrast);