npm - @vsn-ux/gaia-styles - Versions diffs - 0.6.6 → 0.6.8 - Mend

@vsn-ux/gaia-styles 0.6.6 → 0.6.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/dist/all-10pt.css +807 -403
package/dist/all-no-reset-10pt.css +807 -403
package/dist/all-no-reset.css +807 -403
package/dist/all.css +807 -403
package/dist/components/avatar.css +6 -6
package/dist/components/badge.css +6 -6
package/dist/components/breadcrumbs.css +13 -13
package/dist/components/button.css +7 -7
package/dist/components/calendar.css +27 -27
package/dist/components/card.css +1 -1
package/dist/components/checkbox.css +10 -10
package/dist/components/container.css +4 -4
package/dist/components/datepicker.css +2 -2
package/dist/components/dropdown.css +18 -18
package/dist/components/file-uploader.css +247 -0
package/dist/components/form-field.css +10 -10
package/dist/components/input.css +9 -9
package/dist/components/link.css +5 -5
package/dist/components/loader.css +127 -0
package/dist/components/menu.css +14 -14
package/dist/components/modal.css +27 -27
package/dist/components/notification.css +19 -19
package/dist/components/page-header.css +12 -12
package/dist/components/progress-bar.css +4 -4
package/dist/components/progress-indicator.css +21 -21
package/dist/components/quantity-selector.css +80 -0
package/dist/components/quick-filter-button.css +5 -5
package/dist/components/radio.css +13 -13
package/dist/components/segmented-control.css +8 -8
package/dist/components/select.css +31 -31
package/dist/components/side-navigation.css +76 -76
package/dist/components/switch.css +14 -14
package/dist/components/tabs.css +14 -14
package/dist/components/tag.css +7 -7
package/dist/components/text-area.css +5 -5
package/dist/components/tooltip.css +15 -15
package/dist/components.css +807 -403
package/dist/docs/FileUploader.md +67 -0
package/dist/docs/Loader.md +77 -0
package/dist/docs/QuantitySelector.md +96 -0
package/package.json +3 -1
package/src/images/loader.svg +4 -0
package/src/styles/all-10pt.css +0 -5
package/src/styles/all-no-reset-10pt.css +0 -5
package/src/styles/components/file-uploader.css +95 -0
package/src/styles/components/loader.css +108 -0
package/src/styles/components/quantity-selector.css +45 -0
package/src/styles/components.css +3 -0
package/src/styles/theme.css +1 -1

package/dist/components.css CHANGED Viewed

@@ -2,8 +2,8 @@
 @layer properties;
 .ga-avatar {
   display: inline-flex;
-  height: calc(0.25rem * 10);
-  width: calc(0.25rem * 10);
+  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
+  width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
   align-items: center;
   justify-content: center;
   overflow: hidden;
@@ -14,8 +14,8 @@
   --tw-font-weight: 700;
   font-weight: 700;
   &.ga-avatar--small {
-    height: calc(0.25rem * 6);
-    width: calc(0.25rem * 6);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -25,8 +25,8 @@
     letter-spacing: var(--tw-tracking, 0);
   }
   &.ga-avatar--large {
-    height: calc(0.25rem * 16);
-    width: calc(0.25rem * 16);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
     font-size: calc(
     var(--ga-text-2xl-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -43,8 +43,8 @@
   border-radius: calc(infinity * 1px);
   vertical-align: baseline;
   &.ga-badge--text {
-    min-width: calc(0.25rem * 6);
-    padding: calc(0.25rem * 1);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     text-align: center;
     font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
@@ -53,8 +53,8 @@
     var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
   ));
     letter-spacing: var(--tw-tracking, 0);
-    --tw-leading: calc(0.25rem * 4);
-    line-height: calc(0.25rem * 4);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     --tw-font-weight: 500;
     font-weight: 500;
     white-space: nowrap;
@@ -112,8 +112,8 @@
     }
   }
   &.ga-badge--dot {
-    height: calc(0.25rem * 2);
-    width: calc(0.25rem * 2);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     &.ga-badge--default {
       background-color: var(--ga-color-surface-action);
     }
@@ -152,13 +152,13 @@
   flex-wrap: wrap;
   align-content: flex-start;
   align-items: flex-start;
-  gap: calc(0.25rem * 6);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
 }
 .ga-breadcrumb-item {
   position: relative;
   display: inline-flex;
   align-items: center;
-  gap: calc(0.25rem * 6);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
   .ga-breadcrumb-item__explorer {
     cursor: pointer;
     border-radius: var(--ga-radius);
@@ -187,7 +187,7 @@
   }
   &.ga-breadcrumb-item--overflow {
     align-items: center;
-    gap: calc(0.25rem * 3);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     .ga-breadcrumb-item__menu {
       left: calc(var(--ga-size-spacing-02) * -1);
     }
@@ -196,7 +196,7 @@
       cursor: pointer;
       align-items: center;
       justify-content: center;
-      gap: calc(0.25rem * 2);
+      gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
       border-radius: var(--ga-radius);
       font-size: calc(
     var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
@@ -216,7 +216,7 @@
       transition-duration: var(--ga-duration-instant);
       transition-timing-function: var(--ga-easing-standard);
       .ga-breadcrumb-item__label {
-        max-width: calc(0.25rem * 80);
+        max-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 80);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -269,9 +269,9 @@
     }
   }
   &.ga-breadcrumb-item--current-page {
-    gap: calc(0.25rem * 3);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     .ga-breadcrumb-item__trigger {
-      padding-right: calc(0.25rem * 1);
+      padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
       font-size: calc(
     var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -285,7 +285,7 @@
       font-weight: 600;
       color: var(--ga-color-text-body);
       .ga-breadcrumb-item__label {
-        max-width: calc(0.25rem * 80);
+        max-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 80);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -294,7 +294,7 @@
   }
   &.ga-breadcrumb-item--back {
     align-items: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     .ga-breadcrumb-item__trigger {
       display: inline-flex;
       cursor: pointer;
@@ -345,13 +345,13 @@
     }
   }
   &.ga-breadcrumb-item--link {
-    gap: calc(0.25rem * 3);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     .ga-breadcrumb-item__trigger {
       display: inline-flex;
       cursor: pointer;
       align-items: center;
       border-radius: var(--ga-radius);
-      padding-right: calc(0.25rem * 1);
+      padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
       font-size: calc(
     var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -370,7 +370,7 @@
       transition-duration: var(--ga-duration-instant);
       transition-timing-function: var(--ga-easing-standard);
       .ga-breadcrumb-item__label {
-        max-width: calc(0.25rem * 80);
+        max-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 80);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -398,7 +398,7 @@
       }
     }
     .ga-breadcrumb-item__explorer {
-      padding-right: calc(0.25rem * 1);
+      padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     }
     .ga-breadcrumb-item__separator {
       font-size: calc(
@@ -431,13 +431,13 @@
 }
 .ga-button {
   display: inline-flex;
-  height: calc(0.25rem * 10);
+  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   border-radius: var(--ga-radius);
-  padding-inline: calc(0.25rem * 4);
+  padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   vertical-align: middle;
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -448,8 +448,8 @@
   letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
   ));
-  --tw-leading: calc(0.25rem * 1);
-  line-height: calc(0.25rem * 1);
+  --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+  line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   --tw-font-weight: 500;
   font-weight: 500;
   white-space: nowrap;
@@ -562,8 +562,8 @@
     }
   }
   &.ga-button--icon-only {
-    width: calc(0.25rem * 10);
-    padding-inline: calc(0.25rem * 0);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
   }
 }
 .ga-card {
@@ -573,7 +573,7 @@
   border-width: 1px;
   border-color: var(--ga-color-border-tertiary);
   background-color: #fff;
-  padding: calc(0.25rem * 4);
+  padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -622,7 +622,7 @@
   }
 }
 .ga-calendar {
-  width: calc(0.25rem * 70);
+  width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 70);
   background-color: #fff;
   --tw-numeric-figure: lining-nums;
   --tw-slashed-zero: slashed-zero;
@@ -633,19 +633,19 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    gap: calc(0.25rem * 1);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   }
   .ga-calendar__month-year {
     display: flex;
     flex-direction: row;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   .ga-calendar__month-year-button {
     display: flex;
     cursor: pointer;
     flex-direction: row;
     align-items: center;
-    gap: calc(0.25rem * 1);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     font-size: calc(
     var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -665,7 +665,7 @@
   .ga-calendar__navigation {
     display: flex;
     flex-direction: row;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   .ga-calendar__navigation-button {
     cursor: pointer;
@@ -683,33 +683,33 @@
   .ga-calendar__week-row {
     display: flex;
     flex-direction: row;
-    gap: calc(0.25rem * 4);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   }
   .ga-calendar__week-day {
-    width: calc(0.25rem * 6);
-    height: calc(0.25rem * 6);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
   }
   .ga-calendar__selection {
     display: grid;
     &.ga-calendar__selection--year {
-      margin-top: calc(0.25rem * 4);
+      margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
       grid-template-columns: repeat(5, minmax(0, 1fr));
-      column-gap: calc(0.25rem * 3);
-      row-gap: calc(0.25rem * 2);
+      column-gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+      row-gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     }
     &.ga-calendar__selection--month {
-      margin-top: calc(0.25rem * 4);
+      margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
       grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: calc(0.25rem * 3);
+      gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     }
     &.ga-calendar__selection--day {
-      margin-top: calc(0.25rem * 2);
+      margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
       grid-template-columns: repeat(7, minmax(0, 1fr));
-      row-gap: calc(0.25rem * 1);
+      row-gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     }
   }
   .ga-calendar__year, .ga-calendar__month {
-    height: calc(0.25rem * 10);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
     cursor: pointer;
     border-radius: var(--ga-radius);
     text-align: center;
@@ -722,8 +722,8 @@
     letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-lg-letter-spacing) * var(--ga-base-scaling-factor, 1)
   ));
-    --tw-leading: calc(0.25rem * 10);
-    line-height: calc(0.25rem * 10);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
     --tw-font-weight: 500;
     font-weight: 500;
     color: var(--ga-color-text-action);
@@ -758,7 +758,7 @@
   .ga-calendar__day {
     position: relative;
     display: flex;
-    height: calc(0.25rem * 10);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
     cursor: pointer;
     align-items: center;
     justify-content: center;
@@ -785,10 +785,10 @@
     }
     &.ga-calendar__day--current::after {
       position: absolute;
-      bottom: calc(0.25rem * 2);
+      bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
       left: calc(1 / 2 * 100%);
-      height: calc(0.25rem * 0.5);
-      width: calc(0.25rem * 5);
+      height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.5);
+      width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
       --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
       transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
@@ -799,10 +799,10 @@
     }
     &.ga-calendar__day--special::after {
       position: absolute;
-      bottom: calc(0.25rem * 2);
+      bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
       left: calc(1 / 2 * 100%);
-      height: calc(0.25rem * 1);
-      width: calc(0.25rem * 1);
+      height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+      width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
       --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
       transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
@@ -878,9 +878,9 @@
     }
   }
   .ga-calendar__weekdays {
-    margin-top: calc(0.25rem * 2);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     display: grid;
-    height: calc(0.25rem * 6);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     grid-template-columns: repeat(7, minmax(0, 1fr));
     align-items: center;
     justify-items: center;
@@ -902,14 +902,14 @@
 .ga-checkbox {
   position: relative;
   display: inline-flex;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   .ga-checkbox__marker {
     pointer-events: none;
     position: absolute;
-    top: calc(0.25rem * 0);
-    left: calc(0.25rem * 0);
-    height: calc(0.25rem * 4);
-    width: calc(0.25rem * 4);
+    top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     border-radius: var(--ga-radius);
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -925,8 +925,8 @@
     }
   }
   .ga-checkbox__native {
-    height: calc(0.25rem * 4);
-    width: calc(0.25rem * 4);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     flex-shrink: 0;
     cursor: pointer;
     opacity: 0%;
@@ -979,7 +979,7 @@
     }
   }
   .ga-checkbox__label {
-    min-height: calc(0.25rem * 4);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -989,29 +989,29 @@
     letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
   ));
-    --tw-leading: calc(0.25rem * 4);
-    line-height: calc(0.25rem * 4);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     &:empty {
       display: none;
     }
   }
 }
 .ga-container {
-  margin-inline: calc(0.25rem * 4);
+  margin-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
 }
 @media (min-width: 840px) {
   .ga-container {
-    margin-inline: calc(0.25rem * 6);
+    margin-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
   }
 }
 @media (min-width: 1440px) {
   .ga-container {
-    margin-inline: calc(0.25rem * 8);
+    margin-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
   }
 }
 @media (min-width: 1920px) {
   .ga-container {
-    margin-inline: calc(0.25rem * 10);
+    margin-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
   }
 }
 .ga-datepicker {
@@ -1020,11 +1020,11 @@
   border-width: 1px;
   border-color: var(--ga-color-border-primary);
   background-color: var(--ga-color-surface-primary);
-  padding: calc(0.25rem * 4);
+  padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   --tw-shadow: var(--ga-shadow-north);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   .ga-datepicker__footer {
-    margin-top: calc(0.25rem * 2);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
 }
 .ga-datepicker-toggle {
@@ -1042,7 +1042,7 @@
 }
 .ga-dropdown {
   display: flex;
-  max-height: calc(0.25rem * 81);
+  max-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 81);
   max-width: 80ch;
   flex-direction: column;
   align-items: stretch;
@@ -1072,8 +1072,8 @@
     &::after {
       pointer-events: none;
       position: sticky;
-      bottom: calc(0.25rem * 0);
-      left: calc(0.25rem * 0);
+      bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+      left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
       margin-top: calc(25px * -1);
       display: block;
       min-height: 25px;
@@ -1093,15 +1093,15 @@
   .ga-dropdown__item {
     position: relative;
     display: flex;
-    height: calc(0.25rem * 9);
-    min-width: calc(0.25rem * 0);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 9);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex-shrink: 0;
     cursor: pointer;
     flex-direction: row;
     align-items: center;
-    gap: calc(0.25rem * 2);
-    padding-inline: calc(0.25rem * 3);
-    padding-block: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     text-align: left;
     font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -1153,8 +1153,8 @@
   &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
     &::after {
       position: absolute;
-      top: calc(0.25rem * 0);
-      left: calc(0.25rem * 0);
+      top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+      left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
       height: 100%;
       width: 100%;
       border-radius: var(--ga-radius);
@@ -1167,9 +1167,9 @@
   }
   .ga-dropdown__caption {
     flex-shrink: 0;
-    padding-inline: calc(0.25rem * 3);
-    padding-top: calc(0.25rem * 3);
-    padding-bottom: calc(0.25rem * 2);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+    padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+    padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -1182,9 +1182,9 @@
   }
   .ga-dropdown__empty {
     margin-inline: auto;
-    margin-block: calc(0.25rem * 5);
+    margin-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
     display: inline-flex;
-    min-width: calc(0.25rem * 30);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 30);
     justify-content: center;
     font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
@@ -1198,13 +1198,13 @@
   }
   .ga-dropdown__spinner {
     margin-inline: auto;
-    margin-block: calc(0.25rem * 5);
+    margin-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
     display: inline-flex;
-    min-width: calc(0.25rem * 30);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 30);
     justify-content: center;
   }
   .ga-dropdown__item-label {
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1221,24 +1221,241 @@
     opacity: 0;
   }
 }
+.ga-file-uploader {
+  display: flex;
+  flex-direction: column;
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+  .ga-file-uploader__heading {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+    .ga-file-uploader__heading-label {
+      vertical-align: middle;
+      font-size: calc(
+    var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+      line-height: var(--tw-leading, calc(
+    var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+      letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
+  ));
+      --tw-font-weight: 500;
+      font-weight: 500;
+    }
+    .ga-file-uploader__heading-description {
+      font-size: calc(
+    var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+      line-height: var(--tw-leading, calc(
+    var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+      letter-spacing: var(--tw-tracking, 0);
+      --tw-font-weight: 400;
+      font-weight: 400;
+    }
+  }
+  .ga-button {
+    width: fit-content;
+  }
+  .ga-file-uploader__heading {
+    color: var(--ga-color-text-body);
+  }
+  &.ga-file-uploader--disabled .ga-file-uploader__heading {
+    color: var(--ga-color-text-disable-selected);
+  }
+  .ga-file-uploader__file-list {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    .ga-file-uploader__file-item {
+      display: flex;
+      height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
+      max-width: 58rem;
+      min-width: 22rem;
+      align-items: center;
+      justify-content: space-between;
+      border-radius: var(--ga-radius);
+      background-color: var(--ga-color-surface-disabled);
+      padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+      padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+      font-size: calc(
+    var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+      line-height: var(--tw-leading, calc(
+    var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+      letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
+  ));
+      --tw-font-weight: 400;
+      font-weight: 400;
+      color: var(--ga-color-text-body);
+      .ga-file-uploader__file-action {
+        display: flex;
+        height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+        width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--ga-radius);
+        --tw-border-style: none;
+        border-style: none;
+        background-color: transparent;
+        padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+        color: var(--ga-color-icon-action);
+        &:focus-visible {
+          outline-style: var(--tw-outline-style);
+          outline-width: 2px;
+          outline-offset: 2px;
+          outline-color: var(--ga-color-border-focus);
+        }
+      }
+      .ga-file-uploader__file-icon {
+        height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+        width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+      }
+      &.ga-file-uploader__file-item--success {
+        .ga-file-uploader__file-icon {
+          color: var(--ga-color-icon-success);
+        }
+      }
+      &.ga-file-uploader__file-item--error {
+        height: auto;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+        border-color: var(--ga-color-border-error);
+        background-color: var(--ga-color-surface-error);
+        outline-style: var(--tw-outline-style);
+        outline-width: 1px;
+        outline-color: var(--ga-color-border-error);
+        .ga-file-uploader__error-file {
+          display: flex;
+          width: 100%;
+          align-items: center;
+          justify-content: space-between;
+          --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+          line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+        }
+        .ga-file-uploader__error-callout {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+          vertical-align: middle;
+          font-size: calc(
+    var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+          line-height: var(--tw-leading, calc(
+    var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+          letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1)
+  ));
+          --tw-font-weight: 400;
+          font-weight: 400;
+          .ga-file-uploader__error-callout-icon {
+            height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+            width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+            color: var(--ga-color-icon-error);
+          }
+        }
+      }
+    }
+  }
+  .ga-file-uploader__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .ga-file-uploader__dropzone {
+    display: flex;
+    min-height: 6.25rem;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    --tw-border-style: dashed;
+    border-style: dashed;
+    border-color: var(--ga-color-border-action);
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
+    text-align: center;
+    font-size: calc(
+    var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+    line-height: var(--tw-leading, calc(
+    var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+    letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
+  ));
+    --tw-font-weight: 400;
+    font-weight: 400;
+    color: var(--ga-color-text-action);
+    &:hover {
+      border-color: var(--ga-color-border-action-hover);
+      background-color: var(--ga-color-surface-action-hover-2);
+      color: var(--ga-color-text-action-hover);
+    }
+    &:focus-visible, &:focus-within {
+      --tw-border-style: none;
+      border-style: none;
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-color: var(--ga-color-border-focus);
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
+    &.ga-file-uploader__dropzone--drag-hover {
+      --tw-border-style: none;
+      border-style: none;
+      background-color: var(--ga-color-surface-page);
+      color: var(--ga-color-text-action-hover);
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-color: var(--ga-color-border-focus);
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
+  }
+  .ga-file-uploader__dropzone[aria-disabled='true'], &.ga-file-uploader--disabled .ga-file-uploader__dropzone {
+    cursor: not-allowed;
+    border-color: var(--ga-color-border-disabled);
+    background-color: var(--ga-color-surface-primary);
+    color: var(--ga-color-text-disabled);
+  }
+}
 .ga-form-field {
   display: flex;
   flex-direction: column;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   > .ga-select, > .ga-input {
     width: 100%;
     flex-shrink: 0;
   }
   .ga-form-field__label {
     display: inline-flex;
-    height: calc(0.25rem * 5);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
     width: fit-content;
     max-width: 100%;
-    min-width: calc(0.25rem * 0);
-    gap: calc(0.25rem * 1);
-    padding-inline: calc(0.25rem * 1);
-    --tw-leading: calc(0.25rem * 5);
-    line-height: calc(0.25rem * 5);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
     &:focus-visible {
       border-radius: var(--ga-radius);
       outline-style: var(--tw-outline-style);
@@ -1248,7 +1465,7 @@
     }
   }
   .ga-form-field__label-text {
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1301,8 +1518,8 @@
   .ga-form-field__info {
     display: flex;
     align-items: flex-start;
-    gap: calc(0.25rem * 1);
-    padding-inline: calc(0.25rem * 1);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     font-size: calc(
     var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -1319,18 +1536,18 @@
 }
 .ga-input {
   display: flex;
-  height: calc(0.25rem * 10);
-  width: calc(0.25rem * 50);
+  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
+  width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 50);
   flex-direction: row;
   align-items: center;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   border-radius: var(--ga-radius);
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--ga-color-border-primary);
   background-color: var(--ga-color-surface-primary);
-  padding-inline: calc(0.25rem * 3);
-  padding-block: calc(0.25rem * 2);
+  padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+  padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -1388,35 +1605,161 @@
     }
   }
   input, &:is(input) {
-    min-width: calc(0.25rem * 0);
-    --tw-leading: calc(0.25rem * 6);
-    line-height: calc(0.25rem * 6);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     &::placeholder {
       color: var(--ga-color-text-disabled);
     }
   }
   input {
-    height: calc(0.25rem * 6);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     width: 100%;
     --tw-outline-style: none;
     outline-style: none;
   }
 }
+.ga-loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+  &.ga-loader--small {
+    font-size: calc(
+    var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+    line-height: var(--tw-leading, calc(
+    var(--ga-text-xs-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+    letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-xs-letter-spacing) * var(--ga-base-scaling-factor, 1)
+  ));
+    .ga-loader__icon {
+      height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+      width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    }
+  }
+  &.ga-loader--medium {
+    font-size: calc(
+    var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+    line-height: var(--tw-leading, calc(
+    var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+    letter-spacing: var(--tw-tracking, 0);
+    .ga-loader__icon {
+      height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
+      width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
+    }
+  }
+  &.ga-loader--large {
+    font-size: calc(
+    var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+    line-height: var(--tw-leading, calc(
+    var(--ga-text-md-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+    letter-spacing: var(--tw-tracking, calc(
+    var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
+  ));
+    .ga-loader__icon {
+      height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
+      width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
+    }
+  }
+  .ga-loader__icon--animated {
+    animation: ga-loader-animation 1100ms linear infinite;
+  }
+  .ga-loader__icon--reduced-motion {
+    display: none;
+    color: var(--ga-color-icon-primary);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ga-loader__icon--animated {
+      display: none;
+    }
+    .ga-loader__icon--reduced-motion {
+      display: block;
+    }
+  }
+  .ga-loader__label {
+    color: var(--ga-color-text-body);
+    &:empty {
+      display: none;
+    }
+  }
+}
+.ga-inline-loading {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+  font-size: calc(
+    var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
+  );
+  line-height: var(--tw-leading, calc(
+    var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
+  ));
+  letter-spacing: var(--tw-tracking, 0);
+  color: var(--ga-color-text-body);
+  &.ga-inline-loading--active {
+    .ga-inline-loading__icon {
+      height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+      width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+      animation: ga-loader-animation 1100ms linear infinite;
+    }
+  }
+  &.ga-inline-loading--completed {
+    .ga-inline-loading__icon {
+      color: var(--ga-color-icon-success);
+    }
+  }
+  &.ga-inline-loading--error {
+    .ga-inline-loading__icon {
+      color: var(--ga-color-icon-error);
+    }
+  }
+  &.ga-inline-loading--inactive {
+    color: var(--ga-color-text-disable-selected);
+  }
+  .ga-inline-loading__icon {
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+  }
+}
+@keyframes ga-loader-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  31.82% {
+    transform: rotate(90deg);
+  }
+  63.64% {
+    transform: rotate(180deg);
+  }
+  81.82% {
+    transform: rotate(270deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 .ga-notification {
   position: relative;
   display: inline-flex;
   flex-direction: row;
   align-items: flex-start;
-  gap: calc(0.25rem * 4);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   border-radius: var(--ga-radius);
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--ga-color-border-primary);
   background-color: var(--ga-color-surface-primary);
-  padding-top: calc(0.25rem * 2);
-  padding-right: calc(0.25rem * 2);
-  padding-bottom: calc(0.25rem * 2);
-  padding-left: calc(0.25rem * 4);
+  padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+  padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+  padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+  padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -1467,24 +1810,24 @@
     }
   }
   .ga-notification__icon {
-    margin-top: calc(0.25rem * 2);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     flex-shrink: 0;
     color: var(--ga-color-icon-action);
   }
   .ga-notification__description {
-    margin-top: calc(0.25rem * 2.5);
-    padding-right: calc(0.25rem * 2);
-    padding-bottom: calc(0.25rem * 2.5);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2.5);
+    padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2.5);
   }
   .ga-notification__heading {
     display: flex;
-    min-height: calc(0.25rem * 10);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
     flex-direction: row;
     align-items: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     ~ .ga-notification__description {
-      margin-top: calc(0.25rem * 0);
-      padding-bottom: calc(0.25rem * 0);
+      margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+      padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     }
   }
   .ga-notification__title {
@@ -1496,23 +1839,23 @@
     display: flex;
     flex-shrink: 0;
     flex-direction: row;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   .ga-notification__content {
     flex: 1;
     &:not(:has(.ga-notification__heading)) {
-      min-height: calc(0.25rem * 8);
+      min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
     }
     &:has(.ga-notification__heading) {
-      padding-bottom: calc(0.25rem * 2);
+      padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     }
   }
   .ga-notification__progress {
     position: absolute;
-    right: calc(0.25rem * 0);
+    right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     bottom: 1px;
-    left: calc(0.25rem * 0);
-    height: calc(0.25rem * 1);
+    left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     overflow: hidden;
     border-bottom-right-radius: 2px;
     border-bottom-left-radius: 2px;
@@ -1540,7 +1883,7 @@
 }
 .ga-menu {
   display: flex;
-  max-height: calc(0.25rem * 81);
+  max-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 81);
   max-width: 80ch;
   flex-direction: column;
   align-items: stretch;
@@ -1564,13 +1907,13 @@
   .ga-menu__item {
     position: relative;
     display: flex;
-    min-height: calc(0.25rem * 9);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 9);
     flex-shrink: 0;
     cursor: pointer;
     flex-direction: row;
-    gap: calc(0.25rem * 2);
-    padding-inline: calc(0.25rem * 3);
-    padding-block: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     text-align: left;
     --tw-leading: 1;
     line-height: 1;
@@ -1654,22 +1997,22 @@
     }
   }
   .ga-menu__item-icon {
-    margin-top: calc(0.25rem * 0.5);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.5);
     flex-shrink: 0;
     color: var(--ga-color-icon-primary);
   }
   .ga-menu__item-content {
     display: flex;
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex-direction: column;
   }
   .ga-menu__item-title {
     display: flex;
     align-items: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   .ga-menu__item-label {
-    height: calc(0.25rem * 5);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1694,7 +2037,7 @@
     border-width: 1px;
     border-color: var(--ga-color-border-disabled);
     background-color: #fff;
-    padding-inline: calc(0.25rem * 1);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     font-size: calc(
     var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -1721,15 +2064,15 @@
     color: var(--ga-color-text-disable-selected);
   }
   .ga-menu__separator {
-    margin-left: calc(0.25rem * 3);
+    margin-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
     border-color: var(--ga-color-border-primary);
   }
   .ga-menu__title {
-    padding-inline: calc(0.25rem * 3);
-    padding-top: calc(0.25rem * 3);
-    padding-bottom: calc(0.25rem * 2);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+    padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+    padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -1743,19 +2086,19 @@
 }
 .ga-modal__backdrop {
   position: fixed;
-  inset: calc(0.25rem * 0);
+  inset: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
   z-index: 50;
   background-color: var(--ga-color-miscellaneous-overlay);
 }
 .ga-modal__container {
   position: fixed;
-  inset: calc(0.25rem * 0);
+  inset: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
   z-index: 50;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   .ga-modal {
-    margin-top: calc(0.25rem * 16);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
   }
 }
 .ga-modal {
@@ -1770,8 +2113,8 @@
   border-width: 1px;
   border-color: var(--ga-color-border-focus);
   background-color: #fff;
-  padding-inline: calc(0.25rem * 2);
-  padding-block: calc(0.25rem * 4);
+  padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+  padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -1783,13 +2126,13 @@
   ));
   scrollbar-width: thin;
   &.ga-modal--small {
-    width: calc(0.25rem * 85);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 85);
   }
   &.ga-modal--medium {
-    width: calc(0.25rem * 174);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 174);
   }
   &.ga-modal--large {
-    width: calc(0.25rem * 307.5);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 307.5);
   }
   &.ga-modal--danger .ga-modal__icon {
     color: var(--ga-color-icon-error);
@@ -1805,30 +2148,30 @@
   }
   .ga-modal__top-section {
     display: flex;
-    min-height: calc(0.25rem * 8);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
     flex-shrink: 0;
     align-items: flex-start;
-    gap: calc(0.25rem * 4);
-    padding-inline: calc(0.25rem * 2);
-    padding-bottom: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     &.ga-modal__top-section--scrollable {
       flex-shrink: 1;
     }
   }
   .ga-modal__heading {
     display: flex;
-    min-height: calc(0.25rem * 0);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex: 1;
     flex-direction: column;
     align-self: stretch;
   }
   .ga-modal__icon {
-    padding: calc(0.25rem * 2);
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   .ga-modal__label {
-    margin-bottom: calc(0.25rem * 1);
+    margin-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     display: flex;
-    min-height: calc(0.25rem * 6);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     align-items: center;
   }
   .ga-modal__title {
@@ -1845,33 +2188,33 @@
     font-weight: 600;
   }
   .ga-modal__content {
-    margin-top: calc(0.25rem * 4);
-    min-height: calc(0.25rem * 0);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     overflow-y: auto;
-    padding: calc(0.25rem * 2);
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     &:empty {
-      margin-top: calc(0.25rem * 0);
+      margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     }
     scrollbar-width: thin;
   }
   .ga-modal__description {
-    margin-top: calc(0.25rem * 4);
-    min-height: calc(0.25rem * 0);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     overflow-y: auto;
     scrollbar-width: thin;
   }
   .ga-modal__actions {
-    margin-top: calc(0.25rem * 6);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: flex-end;
-    gap: calc(0.25rem * 2);
-    padding-inline: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   .ga-modal__close-icon {
-    margin-top: calc(0.25rem * -2);
-    margin-right: calc(0.25rem * -2);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
+    margin-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
   }
 }
 .ga-page-header {
@@ -1879,8 +2222,8 @@
   width: 100%;
   flex-direction: column;
   align-items: flex-start;
-  gap: calc(0.25rem * 1);
-  padding: calc(0.25rem * 0);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+  padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
   .ga-page-header__global-navigation {
     display: flex;
     width: 100%;
@@ -1888,21 +2231,21 @@
     justify-content: space-between;
     border-radius: var(--ga-radius);
     background-color: var(--ga-color-surface-primary);
-    padding-inline: calc(0.25rem * 4);
-    padding-block: calc(0.25rem * 3);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
   }
   .ga-page-header__menu-breadcrumbs {
     display: flex;
     flex-shrink: 0;
     flex-grow: 1;
-    flex-basis: calc(0.25rem * 0);
+    flex-basis: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     align-items: center;
-    gap: calc(0.25rem * 4);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   }
   .ga-page-header__header-actions {
     display: flex;
     align-items: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     background-color: var(--ga-color-surface-primary);
   }
   .ga-page-header__page-navigation {
@@ -1911,24 +2254,24 @@
     align-items: center;
     justify-content: space-between;
     align-self: stretch;
-    padding-inline: calc(0.25rem * 4);
-    padding-bottom: calc(0.25rem * 3);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
   }
   .ga-page-header__page-nav-start {
     display: flex;
     align-items: center;
-    gap: calc(0.25rem * 3);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
   }
   .ga-page-header__page-nav-end {
     display: flex;
     align-items: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
 }
 @media (max-width: 767px) {
   .ga-page-header .ga-page-header__global-navigation {
     flex-wrap: wrap;
-    row-gap: calc(0.25rem * 2);
+    row-gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   .ga-page-header .ga-page-header__header-actions {
     margin-left: auto;
@@ -1958,19 +2301,19 @@
 .ga-progress {
   display: flex;
   flex-direction: column;
-  gap: calc(0.25rem * 1);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   .ga-progress__label {
     font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
   );
-    line-height: calc(0.25rem * 5);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
     color: var(--ga-color-text-action);
   }
   .ga-progress__helper {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: calc(0.25rem * 1);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     font-size: calc(
     var(--ga-text-xs-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -1984,7 +2327,7 @@
   }
   .ga-progress__buffer {
     position: relative;
-    height: calc(0.25rem * 1);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     width: 100%;
     overflow: hidden;
     border-radius: var(--ga-radius);
@@ -2035,16 +2378,16 @@
     position: relative;
     display: flex;
     cursor: pointer;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     border-style: var(--tw-border-style);
     border-width: 0px;
     border-top-style: var(--tw-border-style);
     border-top-width: 2px;
     border-color: var(--ga-color-surface-disabled);
     background-color: transparent;
-    padding: calc(0.25rem * 0);
-    padding-top: calc(0.25rem * 1.5);
-    padding-right: calc(0.25rem * 0.5);
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1.5);
+    padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.5);
     text-align: left;
     &:focus-visible {
       --tw-outline-style: none;
@@ -2070,25 +2413,25 @@
     flex-shrink: 0;
     align-items: flex-start;
     justify-content: center;
-    padding-left: calc(0.25rem * 2);
+    padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     .ga-icon {
       margin: 1px;
     }
   }
   .ga-progress-indicator__content {
     display: flex;
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex-direction: column;
   }
   .ga-progress-indicator__label {
     display: inline-flex;
-    height: calc(0.25rem * 6);
-    min-width: calc(0.25rem * 0);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     align-items: center;
-    gap: calc(0.25rem * 1);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   }
   .ga-progress-indicator__label-text {
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -2157,10 +2500,10 @@
   }
   .ga-progress-indicator__current-dot {
     position: absolute;
-    top: calc(0.25rem * 2);
-    right: calc(0.25rem * 2);
-    height: calc(0.25rem * 2);
-    width: calc(0.25rem * 2);
+    top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     border-radius: calc(infinity * 1px);
     background-color: var(--ga-color-icon-action);
   }
@@ -2174,7 +2517,7 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 4px;
     border-color: var(--ga-color-border-action);
-    padding-top: calc(0.25rem * 1);
+    padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     .ga-progress-indicator__indicator .ga-icon {
       color: var(--ga-color-icon-action);
     }
@@ -2188,7 +2531,7 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 4px;
     border-color: var(--ga-color-border-error);
-    padding-top: calc(0.25rem * 1);
+    padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     .ga-progress-indicator__indicator .ga-icon {
       color: var(--ga-color-icon-error);
     }
@@ -2215,10 +2558,10 @@
       border-top-width: 0px;
       border-left-style: var(--tw-border-style);
       border-left-width: 2px;
-      padding-top: calc(0.25rem * 0);
-      padding-bottom: calc(0.25rem * 6);
+      padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+      padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
       .ga-progress-indicator__indicator {
-        padding-left: calc(0.25rem * 1.5);
+        padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1.5);
       }
     }
     .ga-progress-indicator__item--current, .ga-progress-indicator__item--error {
@@ -2226,9 +2569,9 @@
       border-top-width: 0px;
       border-left-style: var(--tw-border-style);
       border-left-width: 4px;
-      padding-top: calc(0.25rem * 0);
+      padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
       .ga-progress-indicator__indicator {
-        padding-left: calc(0.25rem * 1);
+        padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
       }
     }
   }
@@ -2242,16 +2585,16 @@
 .ga-radio-group {
   display: inline-flex;
   flex-direction: column;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
 }
 .ga-radio-button {
   position: relative;
   display: inline-flex;
   cursor: pointer;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   .ga-radio-button__native {
-    height: calc(0.25rem * 4);
-    width: calc(0.25rem * 4);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     flex-shrink: 0;
     cursor: pointer;
     opacity: 0%;
@@ -2272,8 +2615,8 @@
         top: calc(1 / 2 * 100%);
         left: calc(1 / 2 * 100%);
         display: block;
-        height: calc(0.25rem * 1);
-        width: calc(0.25rem * 1);
+        height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+        width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
         --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
         --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
         translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2317,10 +2660,10 @@
   .ga-radio-button__marker {
     pointer-events: none;
     position: absolute;
-    top: calc(0.25rem * 0);
-    left: calc(0.25rem * 0);
-    height: calc(0.25rem * 4);
-    width: calc(0.25rem * 4);
+    top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     border-radius: calc(infinity * 1px);
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -2333,7 +2676,7 @@
     transition-timing-function: var(--ga-easing-standard);
   }
   .ga-radio-button__label {
-    min-height: calc(0.25rem * 4);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -2343,8 +2686,8 @@
     letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
   ));
-    --tw-leading: calc(0.25rem * 4);
-    line-height: calc(0.25rem * 4);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     &:empty {
       display: none;
     }
@@ -2354,12 +2697,12 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: calc(0.25rem * 0.5);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.5);
   border-radius: var(--ga-radius);
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--ga-color-border-tertiary);
-  padding: calc(0.25rem * 0.5);
+  padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.5);
   vertical-align: middle;
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -2372,19 +2715,19 @@
   ));
   .ga-segmented-control__button {
     display: inline-flex;
-    height: calc(0.25rem * 8.5);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8.5);
     cursor: pointer;
     align-items: center;
     justify-content: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     border-radius: var(--ga-radius);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: transparent;
-    padding-inline: calc(0.25rem * 4);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     vertical-align: middle;
-    --tw-leading: calc(0.25rem * 1);
-    line-height: calc(0.25rem * 1);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     white-space: nowrap;
     color: var(--ga-color-text-action);
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
@@ -2409,7 +2752,7 @@
       outline-color: var(--ga-color-border-focus);
     }
     &.ga-segmented-control__button--icon-only {
-      padding-inline: calc(0.25rem * 2.25);
+      padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2.25);
       &:hover:not(.ga-segmented-control__button--selected) {
         color: var(--ga-color-icon-action-hover);
       }
@@ -2430,16 +2773,16 @@
 .ga-native-select {
   position: relative;
   select {
-    height: calc(0.25rem * 10);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
     appearance: none;
     border-radius: var(--ga-radius);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--ga-color-border-primary);
     background-color: var(--ga-color-surface-primary);
-    padding-block: calc(0.25rem * 2);
-    padding-right: calc(0.25rem * 9);
-    padding-left: calc(0.25rem * 3);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 9);
+    padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -2456,26 +2799,26 @@
     pointer-events: none;
     position: absolute;
     top: calc(1 / 2 * 100%);
-    right: calc(0.25rem * 2);
+    right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 }
 .ga-select {
   display: inline-flex;
-  height: calc(0.25rem * 10);
-  width: calc(0.25rem * 50);
+  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
+  width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 50);
   cursor: pointer;
   appearance: none;
   align-items: flex-start;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   border-radius: var(--ga-radius);
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--ga-color-border-primary);
   background-color: var(--ga-color-surface-primary);
-  padding-inline: calc(0.25rem * 2.5);
-  padding-block: calc(0.25rem * 1.5);
+  padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2.5);
+  padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1.5);
   text-align: left;
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -2527,7 +2870,7 @@
     }
   }
   .ga-select__placeholder {
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -2535,11 +2878,11 @@
     color: var(--ga-color-text-disabled);
   }
   .ga-select__input {
-    height: calc(0.25rem * 6);
-    min-width: calc(0.25rem * 0);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex: 1;
-    --tw-leading: calc(0.25rem * 6);
-    line-height: calc(0.25rem * 6);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     --tw-outline-style: none;
     outline-style: none;
     &:is(input)::placeholder {
@@ -2552,18 +2895,18 @@
   .ga-select__main-area {
     position: relative;
     display: flex;
-    min-height: calc(0.25rem * 6.5);
-    min-width: calc(0.25rem * 0);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6.5);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex: 1;
-    --tw-leading: calc(0.25rem * 6.5);
-    line-height: calc(0.25rem * 6.5);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6.5);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6.5);
   }
   .ga-select__input:not(:placeholder-shown) ~ .ga-select__value {
     display: none;
   }
   &:not(.ga-select--multi) {
     .ga-select__value {
-      min-width: calc(0.25rem * 0);
+      min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -2571,34 +2914,34 @@
     }
     .ga-select__input {
       position: absolute;
-      top: calc(0.25rem * 0);
-      left: calc(0.25rem * 0);
+      top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+      left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
       height: 100%;
       width: 100%;
     }
   }
   &.ga-select--multi {
     height: auto;
-    min-height: calc(0.25rem * 10);
+    min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
     .ga-select__main-area {
       display: flex;
-      max-height: calc(0.25rem * 23.5);
-      min-height: calc(0.25rem * 0);
+      max-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 23.5);
+      min-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
       flex: 1;
       flex-wrap: wrap;
-      gap: calc(0.25rem * 2);
+      gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
       overflow-y: auto;
       scrollbar-width: thin;
     }
     .ga-select__value {
       display: contents;
       .ga-tag {
-        min-width: calc(0.25rem * 0);
+        min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
       }
     }
     .ga-select__input {
-      height: calc(0.25rem * 6.5);
-      min-width: calc(0.25rem * 3);
+      height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6.5);
+      min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     }
     &.ga-select--label-hidden {
       .ga-select__placeholder {
@@ -2619,25 +2962,25 @@
   }
   .ga-select__suffix {
     display: flex;
-    height: calc(0.25rem * 6.5);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6.5);
     flex-shrink: 0;
     align-items: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
 }
 .ga-switch {
   position: relative;
   display: inline-flex;
   align-items: center;
-  gap: calc(0.25rem * 3);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
   .ga-switch__marker {
     pointer-events: none;
     position: absolute;
-    top: calc(0.25rem * 0);
-    left: calc(0.25rem * 0);
+    top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     display: inline-block;
-    height: calc(0.25rem * 6);
-    width: calc(0.25rem * 12);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 12);
     border-radius: calc(infinity * 1px);
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -2651,8 +2994,8 @@
   }
   .ga-switch__check-icon {
     position: absolute;
-    top: calc(0.25rem * 0.75);
-    left: calc(0.25rem * 1.5);
+    top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.75);
+    left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1.5);
     color: var(--ga-color-icon-on-primary);
     opacity: 0%;
     transition-property: opacity;
@@ -2664,11 +3007,11 @@
   .ga-switch__slider {
     pointer-events: none;
     position: absolute;
-    top: calc(0.25rem * 0.75);
-    left: calc(0.25rem * 0.75);
+    top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.75);
+    left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.75);
     display: inline-block;
-    height: calc(0.25rem * 4);
-    width: calc(0.25rem * 4);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     border-radius: calc(infinity * 1px);
     background-color: var(--ga-color-surface-action);
     transition-property: transform, translate, scale, rotate;
@@ -2683,8 +3026,8 @@
   }
   input {
     display: inline-block;
-    height: calc(0.25rem * 6);
-    width: calc(0.25rem * 12);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 12);
     flex-shrink: 0;
     cursor: pointer;
     border-radius: calc(infinity * 1px);
@@ -2700,7 +3043,7 @@
         border-color: var(--ga-color-border-action);
         background-color: var(--ga-color-surface-action);
         .ga-switch__slider {
-          --tw-translate-x: calc(0.25rem * 6);
+          --tw-translate-x: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
           translate: var(--tw-translate-x) var(--tw-translate-y);
           background-color: var(--ga-color-surface-primary);
         }
@@ -2744,17 +3087,17 @@
 }
 .ga-tabs {
   display: flex;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   &.ga-tabs--keyline {
     border-color: var(--ga-color-border-tertiary);
   }
   .ga-tabs__tab {
     position: relative;
     display: flex;
-    height: calc(0.25rem * 8);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
     cursor: pointer;
     align-items: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     border-color: transparent;
     font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -2765,8 +3108,8 @@
     letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
   ));
-    --tw-leading: calc(0.25rem * 4);
-    line-height: calc(0.25rem * 4);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     --tw-font-weight: 500;
     font-weight: 500;
     color: var(--ga-color-text-action);
@@ -2803,7 +3146,7 @@
     }
     &:focus-visible::after, &.ga-tabs__tab--focused::after {
       position: absolute;
-      inset: calc(0.25rem * -1);
+      inset: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -1);
       border-radius: var(--ga-radius);
       border-style: var(--tw-border-style);
       border-width: 2px;
@@ -2824,11 +3167,11 @@
     .ga-tabs__tab {
       border-bottom-style: var(--tw-border-style);
       border-bottom-width: 4px;
-      padding-inline: calc(0.25rem * 4);
-      padding-top: calc(0.25rem * 2);
-      padding-bottom: calc(0.25rem * 1);
+      padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+      padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+      padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
       &:focus-visible::after, &.ga-tabs__tab--focused::after {
-        bottom: calc(0.25rem * -2);
+        bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
       }
     }
   }
@@ -2841,11 +3184,11 @@
     .ga-tabs__tab {
       border-left-style: var(--tw-border-style);
       border-left-width: 4px;
-      padding-block: calc(0.25rem * 2);
-      padding-right: calc(0.25rem * 4);
-      padding-left: calc(0.25rem * 3);
+      padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+      padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+      padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
       &:focus-visible::after, &.ga-tabs__tab--focused::after {
-        left: calc(0.25rem * -2);
+        left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
       }
     }
   }
@@ -2853,16 +3196,16 @@
 .ga-tag {
   box-sizing: content-box;
   display: inline-flex;
-  height: calc(0.25rem * 6);
+  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
   flex-direction: row;
   align-items: center;
-  gap: calc(0.25rem * 1);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   border-radius: calc(infinity * 1px);
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--ga-color-border-action);
-  padding-right: calc(0.25rem * 1);
-  padding-left: calc(0.25rem * 2);
+  padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+  padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -2970,7 +3313,7 @@
   }
   &.ga-tag--utility-grey, &.ga-tag--utility-indigo, &.ga-tag--utility-teal, &.ga-tag--utility-lime, &.ga-tag--utility-purple, &.ga-tag--utility-pink, &.ga-tag--utility-rose, &.ga-tag--utility-blue, &.ga-tag--utility-green, &.ga-tag--utility-orange, &.ga-tag--utility-disabled {
     border-radius: var(--ga-radius);
-    padding-left: calc(0.25rem * 1.5);
+    padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1.5);
     .ga-tag__icon {
       color: var(--ga-color-text-body);
     }
@@ -3028,10 +3371,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    padding-right: calc(0.25rem * 1);
+    padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   }
   .ga-tag__separator {
-    height: calc(0.25rem * 5);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
     width: 1px;
     background-color: var(--ga-color-border-disabled);
   }
@@ -3039,14 +3382,14 @@
 textarea.ga-text-area {
   display: inline-flex;
   width: 100%;
-  min-width: calc(0.25rem * 0);
+  min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
   border-radius: var(--ga-radius);
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--ga-color-border-primary);
   background-color: var(--ga-color-surface-primary);
-  padding-inline: calc(0.25rem * 3);
-  padding-block: calc(0.25rem * 2);
+  padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+  padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -3056,8 +3399,8 @@ textarea.ga-text-area {
   letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
   ));
-  --tw-leading: calc(0.25rem * 6);
-  line-height: calc(0.25rem * 6);
+  --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+  line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
   transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
   transition-timing-function: var(--tw-ease, ease);
   transition-duration: var(--tw-duration, 0s);
@@ -3165,10 +3508,10 @@ textarea.ga-text-area {
 }
 .ga-tooltip {
   position: relative;
-  max-width: calc(0.25rem * 100);
+  max-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 100);
   border-radius: var(--ga-radius);
   background-color: var(--ga-color-surface-action-hover);
-  padding: calc(0.25rem * 2);
+  padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -3190,19 +3533,19 @@ textarea.ga-text-area {
     }
   }
   &.ga-tooltip--top-start, &.ga-tooltip--top-center, &.ga-tooltip--top-end {
-    margin-bottom: calc(0.25rem * 2);
+    margin-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   &.ga-tooltip--bottom-start, &.ga-tooltip--bottom-center, &.ga-tooltip--bottom-end {
-    margin-top: calc(0.25rem * 2);
+    margin-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   &.ga-tooltip--left-start, &.ga-tooltip--left-center, &.ga-tooltip--left-end {
-    margin-right: calc(0.25rem * 2);
+    margin-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   &.ga-tooltip--right-start, &.ga-tooltip--right-center, &.ga-tooltip--right-end {
-    margin-left: calc(0.25rem * 2);
+    margin-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   &.ga-tooltip--top-start::before, &.ga-tooltip--top-center::before, &.ga-tooltip--top-end::before {
-    bottom: calc(0.25rem * -2);
+    bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
     border-inline-style: var(--tw-border-style);
     border-inline-width: 8px;
     border-top-style: var(--tw-border-style);
@@ -3211,7 +3554,7 @@ textarea.ga-text-area {
     border-top-color: var(--ga-color-surface-action-hover);
   }
   &.ga-tooltip--bottom-start::before, &.ga-tooltip--bottom-center::before, &.ga-tooltip--bottom-end::before {
-    top: calc(0.25rem * -2);
+    top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
     border-inline-style: var(--tw-border-style);
     border-inline-width: 8px;
     border-bottom-style: var(--tw-border-style);
@@ -3220,7 +3563,7 @@ textarea.ga-text-area {
     border-bottom-color: var(--ga-color-surface-action-hover);
   }
   &.ga-tooltip--top-start::before, &.ga-tooltip--bottom-start::before {
-    left: calc(0.25rem * 4);
+    left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   }
   &.ga-tooltip--top-center::before, &.ga-tooltip--bottom-center::before {
     left: calc(1 / 2 * 100%);
@@ -3228,10 +3571,10 @@ textarea.ga-text-area {
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   &.ga-tooltip--top-end::before, &.ga-tooltip--bottom-end::before {
-    right: calc(0.25rem * 4);
+    right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   }
   &.ga-tooltip--left-start::before, &.ga-tooltip--left-center::before, &.ga-tooltip--left-end::before {
-    right: calc(0.25rem * -2);
+    right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
     border-block-style: var(--tw-border-style);
     border-block-width: 8px;
     border-left-style: var(--tw-border-style);
@@ -3240,7 +3583,7 @@ textarea.ga-text-area {
     border-left-color: var(--ga-color-surface-action-hover);
   }
   &.ga-tooltip--right-start::before, &.ga-tooltip--right-center::before, &.ga-tooltip--right-end::before {
-    left: calc(0.25rem * -2);
+    left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * -2);
     border-block-style: var(--tw-border-style);
     border-block-width: 8px;
     border-right-style: var(--tw-border-style);
@@ -3249,7 +3592,7 @@ textarea.ga-text-area {
     border-right-color: var(--ga-color-surface-action-hover);
   }
   &.ga-tooltip--left-start::before, &.ga-tooltip--right-start::before {
-    top: calc(0.25rem * 4);
+    top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   }
   &.ga-tooltip--left-center::before, &.ga-tooltip--right-center::before {
     top: calc(1 / 2 * 100%);
@@ -3257,23 +3600,23 @@ textarea.ga-text-area {
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   &.ga-tooltip--left-end::before, &.ga-tooltip--right-end::before {
-    bottom: calc(0.25rem * 4);
+    bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   }
   .ga-tooltip__title {
-    margin-bottom: calc(0.25rem * 1);
+    margin-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     --tw-font-weight: 600;
     font-weight: 600;
   }
 }
 .ga-link {
   display: inline-flex;
-  height: calc(0.25rem * 5);
+  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 5);
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: calc(0.25rem * 1);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   border-radius: var(--ga-radius);
-  padding-inline: calc(0.25rem * 0.5);
+  padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0.5);
   vertical-align: middle;
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -3301,7 +3644,7 @@ textarea.ga-text-area {
     text-decoration-thickness: 1px;
   }
   &.ga-link--small {
-    height: calc(0.25rem * 4);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -3311,7 +3654,7 @@ textarea.ga-text-area {
     letter-spacing: var(--tw-tracking, 0);
   }
   &.ga-link--large {
-    height: calc(0.25rem * 6);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     font-size: calc(
     var(--ga-text-lg-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -3355,15 +3698,76 @@ textarea.ga-text-area {
     color: var(--ga-color-icon-primary);
   }
 }
+.ga-input--quantity-selector {
+  width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 40);
+  padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+  &:has(input:disabled):has(input:not(:placeholder-shown)) {
+    .ga-input__quantity-separator {
+      background-color: var(--ga-color-text-on-action);
+    }
+    .ga-input__quantity-button {
+      color: var(--ga-color-text-on-action);
+    }
+  }
+  input {
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    flex: 1;
+    background-color: transparent;
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    --tw-outline-style: none;
+    outline-style: none;
+    appearance: textfield;
+    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+  .ga-input__quantity-separator {
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    width: 1px;
+    background-color: var(--ga-color-border-disabled);
+  }
+  .ga-input__quantity-button {
+    display: flex;
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    flex-shrink: 0;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+    &:hover:not(:disabled) {
+      border-radius: var(--ga-radius);
+      background-color: var(--ga-color-surface-action-hover-2);
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+      outline-color: var(--ga-color-border-action-hover);
+    }
+    &:focus-visible {
+      border-radius: var(--ga-radius);
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--ga-color-border-focus);
+    }
+    &:disabled {
+      cursor: not-allowed;
+      background-color: transparent;
+      color: var(--ga-color-text-disabled);
+    }
+  }
+}
 .ga-quick-filter-button {
   display: inline-flex;
-  height: calc(0.25rem * 10);
+  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: calc(0.25rem * 2);
+  gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   border-radius: calc(infinity * 1px);
-  padding-inline: calc(0.25rem * 4);
+  padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
   vertical-align: middle;
   font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -3374,8 +3778,8 @@ textarea.ga-text-area {
   letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
   ));
-  --tw-leading: calc(0.25rem * 1);
-  line-height: calc(0.25rem * 1);
+  --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+  line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   --tw-font-weight: 500;
   font-weight: 500;
   white-space: nowrap;
@@ -3447,11 +3851,11 @@ textarea.ga-text-area {
 .ga-side-navigation {
   display: flex;
   height: 100%;
-  width: calc(0.25rem * 80);
+  width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 80);
   flex-direction: column;
   border-radius: var(--ga-radius);
   background-color: var(--ga-color-surface-primary);
-  padding: calc(0.25rem * 1);
+  padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   --tw-shadow: var(--ga-shadow-north);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   .ga-side-navigation__header {
@@ -3467,9 +3871,9 @@ textarea.ga-text-area {
     cursor: pointer;
     align-items: center;
     justify-content: space-between;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     border-radius: var(--ga-radius);
-    padding: calc(0.25rem * 3);
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     --tw-outline-style: none;
     outline-style: none;
     &:hover {
@@ -3502,7 +3906,7 @@ textarea.ga-text-area {
     }
   }
   .ga-side-navigation__switcher-title {
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -3526,7 +3930,7 @@ textarea.ga-text-area {
     flex-shrink: 0;
     cursor: pointer;
     align-items: center;
-    padding-block: calc(0.25rem * 2);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     color: var(--ga-color-icon-secondary);
     &:hover {
       color: var(--ga-color-icon-action);
@@ -3535,25 +3939,25 @@ textarea.ga-text-area {
   .ga-side-navigation__switcher-dropdown {
     position: absolute;
     top: 100%;
-    right: calc(0.25rem * 0);
-    left: calc(0.25rem * 0);
+    right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+    left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     z-index: 10;
     display: flex;
-    max-height: calc(0.25rem * 80);
+    max-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 80);
     flex-direction: column;
     overflow-y: auto;
     border-radius: var(--ga-radius);
     background-color: var(--ga-color-surface-primary);
-    padding-inline: calc(0.25rem * 2);
-    padding-top: calc(0.25rem * 4);
-    padding-bottom: calc(0.25rem * 2);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     --tw-shadow: var(--ga-shadow-north);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .ga-side-navigation__switcher-dropdown-header {
-    padding-inline: calc(0.25rem * 4);
-    padding-top: calc(0.25rem * 1);
-    padding-bottom: calc(0.25rem * 1);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
+    padding-bottom: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -3571,9 +3975,9 @@ textarea.ga-text-area {
     display: flex;
     cursor: pointer;
     align-items: center;
-    gap: calc(0.25rem * 2);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     border-radius: var(--ga-radius);
-    padding: calc(0.25rem * 4);
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     text-align: left;
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, ease);
@@ -3605,7 +4009,7 @@ textarea.ga-text-area {
     }
   }
   .ga-side-navigation__switcher-dropdown-title {
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -3625,15 +4029,15 @@ textarea.ga-text-area {
     color: var(--ga-color-text-action);
   }
   .ga-side-navigation__switcher-dropdown-external {
-    height: calc(0.25rem * 4);
-    width: calc(0.25rem * 4);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     flex-shrink: 0;
     align-self: center;
     color: var(--ga-color-icon-secondary);
   }
   .ga-side-navigation__search {
-    margin-inline: calc(0.25rem * 3);
-    margin-block: calc(0.25rem * 2);
+    margin-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+    margin-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     &.ga-input {
       width: auto;
       &:not(:hover) {
@@ -3653,7 +4057,7 @@ textarea.ga-text-area {
     border-width: 1px;
     border-color: var(--ga-color-border-disabled);
     background-color: #fff;
-    padding-inline: calc(0.25rem * 1);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
     padding-block: 1px;
     font-family: Inter, ui-sans-serif, system-ui, sans-serif;
     font-feature-settings: 'liga' 1, 'calt' 1;
@@ -3673,8 +4077,8 @@ textarea.ga-text-area {
     flex: 1;
     flex-direction: column;
     overflow-y: auto;
-    padding-inline: calc(0.25rem * 3);
-    padding-block: calc(0.25rem * 2);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
   }
   .ga-side-navigation__item {
     position: relative;
@@ -3682,10 +4086,10 @@ textarea.ga-text-area {
     cursor: pointer;
     flex-direction: row;
     align-items: center;
-    gap: calc(0.25rem * 3);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     border-radius: var(--ga-radius);
-    padding-inline: calc(0.25rem * 4);
-    padding-block: calc(0.25rem * 3);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     text-align: left;
     font-size: calc(
     var(--ga-text-md-font-size) * var(--ga-base-scaling-factor, 1)
@@ -3719,9 +4123,9 @@ textarea.ga-text-area {
       &::before {
         position: absolute;
         top: calc(1 / 2 * 100%);
-        left: calc(0.25rem * 0);
-        height: calc(0.25rem * 8);
-        width: calc(0.25rem * 1);
+        left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
+        height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
+        width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
         --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
         translate: var(--tw-translate-x) var(--tw-translate-y);
         border-top-right-radius: var(--ga-radius);
@@ -3755,23 +4159,23 @@ textarea.ga-text-area {
     }
   }
   .ga-side-navigation__item--level-2 {
-    padding-left: calc(0.25rem * 8);
+    padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
   }
   .ga-side-navigation__item--level-3 {
-    padding-left: calc(0.25rem * 14);
+    padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
   }
   .ga-side-navigation__item--level-4 {
-    padding-left: calc(0.25rem * 20);
+    padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
   }
   .ga-side-navigation__item-icon {
-    height: calc(0.25rem * 4);
-    width: calc(0.25rem * 4);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     flex-shrink: 0;
     color: var(--ga-color-icon-primary);
   }
   .ga-side-navigation__item-content {
     display: flex;
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex: 1;
     flex-direction: column;
   }
@@ -3806,15 +4210,15 @@ textarea.ga-text-area {
     color: var(--ga-color-text-secondary);
   }
   .ga-side-navigation__item-external {
-    height: calc(0.25rem * 4);
-    width: calc(0.25rem * 4);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     flex-shrink: 0;
     align-self: center;
     color: var(--ga-color-icon-secondary);
   }
   .ga-side-navigation__recent-title {
-    padding-inline: calc(0.25rem * 4);
-    padding-block: calc(0.25rem * 3);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -3833,10 +4237,10 @@ textarea.ga-text-area {
     cursor: pointer;
     flex-direction: row;
     align-items: center;
-    gap: calc(0.25rem * 3);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     border-radius: var(--ga-radius);
-    padding-block: calc(0.25rem * 2);
-    padding-left: calc(0.25rem * 4);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     text-align: left;
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, ease);
@@ -3857,7 +4261,7 @@ textarea.ga-text-area {
   }
   .ga-side-navigation__recent-item-content {
     display: flex;
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex-direction: column;
   }
   .ga-side-navigation__recent-item-label {
@@ -3873,8 +4277,8 @@ textarea.ga-text-area {
     letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
   ));
-    --tw-leading: calc(0.25rem * 6);
-    line-height: calc(0.25rem * 6);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     --tw-font-weight: 500;
     font-weight: 500;
     color: var(--ga-color-text-action);
@@ -3895,7 +4299,7 @@ textarea.ga-text-area {
     color: var(--ga-color-text-on-disabled);
   }
   .ga-side-navigation__search-results-title {
-    padding-inline: calc(0.25rem * 6);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     font-size: calc(
     var(--ga-text-sm-font-size) * var(--ga-base-scaling-factor, 1)
   );
@@ -3903,23 +4307,23 @@ textarea.ga-text-area {
     var(--ga-text-sm-line-height) * var(--ga-base-scaling-factor, 1)
   ));
     letter-spacing: var(--tw-tracking, 0);
-    --tw-leading: calc(0.25rem * 6);
-    line-height: calc(0.25rem * 6);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     --tw-font-weight: 500;
     font-weight: 500;
     color: var(--ga-color-text-disable-selected);
   }
   .ga-side-navigation__search-results-item {
     position: relative;
-    margin-inline: calc(0.25rem * 3);
+    margin-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     display: flex;
     cursor: pointer;
     flex-direction: row;
     align-items: center;
-    gap: calc(0.25rem * 3);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     border-radius: var(--ga-radius);
-    padding-inline: calc(0.25rem * 3);
-    padding-block: calc(0.25rem * 2);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
     text-align: left;
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, ease);
@@ -3946,7 +4350,7 @@ textarea.ga-text-area {
   }
   .ga-side-navigation__search-results-item-content {
     display: flex;
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex: 1;
     flex-direction: column;
   }
@@ -3963,8 +4367,8 @@ textarea.ga-text-area {
     letter-spacing: var(--tw-tracking, calc(
     var(--ga-text-md-letter-spacing) * var(--ga-base-scaling-factor, 1)
   ));
-    --tw-leading: calc(0.25rem * 6);
-    line-height: calc(0.25rem * 6);
+    --tw-leading: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
+    line-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 6);
     --tw-font-weight: 500;
     font-weight: 500;
     color: var(--ga-color-text-action);
@@ -3985,8 +4389,8 @@ textarea.ga-text-area {
     color: var(--ga-color-text-on-disabled);
   }
   .ga-side-navigation__search-results-item-external {
-    height: calc(0.25rem * 4);
-    width: calc(0.25rem * 4);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     flex-shrink: 0;
     align-self: center;
     color: var(--ga-color-icon-secondary);
@@ -3998,17 +4402,17 @@ textarea.ga-text-area {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
     border-color: var(--ga-color-border-tertiary);
-    padding-top: calc(0.25rem * 1);
+    padding-top: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 1);
   }
   .ga-side-navigation__user {
     position: relative;
     display: flex;
     cursor: pointer;
     align-items: center;
-    gap: calc(0.25rem * 3);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     border-radius: var(--ga-radius);
-    padding-inline: calc(0.25rem * 4);
-    padding-block: calc(0.25rem * 3);
+    padding-inline: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     --tw-outline-style: none;
     outline-style: none;
     &:hover {
@@ -4031,8 +4435,8 @@ textarea.ga-text-area {
     }
   }
   .ga-side-navigation__user-avatar {
-    height: calc(0.25rem * 10);
-    width: calc(0.25rem * 10);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
     flex-shrink: 0;
     border-radius: calc(infinity * 1px);
   }
@@ -4066,17 +4470,17 @@ textarea.ga-text-area {
   }
   .ga-side-navigation__footer-dropdown {
     position: absolute;
-    right: calc(0.25rem * 0);
+    right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     bottom: 100%;
-    left: calc(0.25rem * 0);
+    left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     z-index: 10;
     display: flex;
-    max-height: calc(0.25rem * 80);
+    max-height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 80);
     flex-direction: column;
     overflow-y: auto;
     border-radius: var(--ga-radius);
     background-color: var(--ga-color-surface-primary);
-    padding: calc(0.25rem * 3);
+    padding: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     --tw-shadow: var(--ga-shadow-south);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
@@ -4085,11 +4489,11 @@ textarea.ga-text-area {
     display: flex;
     cursor: pointer;
     align-items: center;
-    gap: calc(0.25rem * 3);
+    gap: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
     border-radius: var(--ga-radius);
-    padding-block: calc(0.25rem * 3);
-    padding-right: calc(0.25rem * 2);
-    padding-left: calc(0.25rem * 4);
+    padding-block: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 3);
+    padding-right: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 2);
+    padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     text-align: left;
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, ease);
@@ -4133,13 +4537,13 @@ textarea.ga-text-area {
     }
   }
   .ga-side-navigation__footer-dropdown-icon {
-    height: calc(0.25rem * 4);
-    width: calc(0.25rem * 4);
+    height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
+    width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
     flex-shrink: 0;
     color: var(--ga-color-icon-primary);
   }
   .ga-side-navigation__footer-dropdown-title {
-    min-width: calc(0.25rem * 0);
+    min-width: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 0);
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;