diff --git a/frontend/src/components/misc/ProgressBar.vue b/frontend/src/components/misc/ProgressBar.vue
index b8fbc362a..5c261f5fe 100644
--- a/frontend/src/components/misc/ProgressBar.vue
+++ b/frontend/src/components/misc/ProgressBar.vue
@@ -24,6 +24,8 @@ withDefaults(defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@use 'sass:list';
+
 .progress-bar {
 	--progress-height: #{$size-normal};
 	--progress-bar-background-color: var(--border-light, #{$border-light});
@@ -73,7 +75,7 @@ withDefaults(defineProps<{
 
 	// Colors
 	@each $name, $pair in $colors {
-		$color: nth($pair, 1);
+		$color: list.nth($pair, 1);
 		&.is-#{$name} {
 			--progress-value-background-color: var(--#{$name}, #{$color});
 
diff --git a/frontend/src/styles/theme/form.scss b/frontend/src/styles/theme/form.scss
index 0a2e5780a..dfc093277 100644
--- a/frontend/src/styles/theme/form.scss
+++ b/frontend/src/styles/theme/form.scss
@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 .field.has-addons .button {
   height: 2.5rem;
   margin-left: 0 !important;
@@ -20,8 +22,8 @@
   }
 
   @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-    $color-invert: nth($pair, 2);
+    $color: list.nth($pair, 1);
+    $color-invert: list.nth($pair, 2);
 
     &.is-#{$name} {
       &.is-active,