@vsn-ux/gaia-styles 0.6.6 → 0.6.8

package/dist/all.css

@@ -500,8 +500,8 @@
 @layer components {
   .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;
@@ -512,8 +512,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)
   );
@@ -523,8 +523,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)
   );
@@ -541,8 +541,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)
@@ -551,8 +551,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;
@@ -610,8 +610,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);
       }
@@ -650,13 +650,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);
@@ -685,7 +685,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);
       }
@@ -694,7 +694,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)
@@ -714,7 +714,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;
@@ -767,9 +767,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)
   );
@@ -783,7 +783,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;
@@ -792,7 +792,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;
@@ -843,13 +843,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)
   );
@@ -868,7 +868,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;
@@ -896,7 +896,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(
@@ -929,13 +929,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)
@@ -946,8 +946,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;
@@ -1060,8 +1060,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 {
@@ -1071,7 +1071,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)
   );
@@ -1120,7 +1120,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;
@@ -1131,19 +1131,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)
   );
@@ -1163,7 +1163,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;
@@ -1181,33 +1181,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;
@@ -1220,8 +1220,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);
@@ -1256,7 +1256,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;
@@ -1283,10 +1283,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,);
@@ -1297,10 +1297,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,);
@@ -1376,9 +1376,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;
@@ -1400,14 +1400,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;
@@ -1423,8 +1423,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%;
@@ -1477,7 +1477,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)
   );
@@ -1487,29 +1487,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 {
@@ -1518,11 +1518,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 {
@@ -1540,7 +1540,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;
@@ -1570,8 +1570,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;
@@ -1591,15 +1591,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)
@@ -1651,8 +1651,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);
@@ -1665,9 +1665,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)
   );
@@ -1680,9 +1680,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)
@@ -1696,13 +1696,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;
@@ -1719,24 +1719,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);
@@ -1746,7 +1963,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;
@@ -1799,8 +2016,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)
   );
@@ -1817,18 +2034,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)
   );
@@ -1886,35 +2103,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)
   );
@@ -1965,24 +2308,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 {
@@ -1994,23 +2337,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;
@@ -2038,7 +2381,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;
@@ -2062,13 +2405,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;
@@ -2152,22 +2495,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;
@@ -2192,7 +2535,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)
   );
@@ -2219,15 +2562,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)
   );
@@ -2241,19 +2584,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 {
@@ -2268,8 +2611,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)
   );
@@ -2281,13 +2624,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);
@@ -2303,30 +2646,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 {
@@ -2343,33 +2686,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 {
@@ -2377,8 +2720,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%;
@@ -2386,21 +2729,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 {
@@ -2409,24 +2752,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;
@@ -2456,19 +2799,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)
   );
@@ -2482,7 +2825,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);
@@ -2533,16 +2876,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;
@@ -2568,25 +2911,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;
@@ -2655,10 +2998,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);
     }
@@ -2672,7 +3015,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);
       }
@@ -2686,7 +3029,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);
       }
@@ -2713,10 +3056,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 {
@@ -2724,9 +3067,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);
         }
       }
     }
@@ -2740,16 +3083,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%;
@@ -2770,8 +3113,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);
@@ -2815,10 +3158,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;
@@ -2831,7 +3174,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)
   );
@@ -2841,8 +3184,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;
       }
@@ -2852,12 +3195,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)
@@ -2870,19 +3213,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;
@@ -2907,7 +3250,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);
         }
@@ -2928,16 +3271,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)
   );
@@ -2954,26 +3297,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)
@@ -3025,7 +3368,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;
@@ -3033,11 +3376,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 {
@@ -3050,18 +3393,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;
@@ -3069,34 +3412,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 {
@@ -3117,25 +3460,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;
@@ -3149,8 +3492,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;
@@ -3162,11 +3505,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;
@@ -3181,8 +3524,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);
@@ -3198,7 +3541,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);
           }
@@ -3242,17 +3585,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)
@@ -3263,8 +3606,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);
@@ -3301,7 +3644,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;
@@ -3322,11 +3665,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);
         }
       }
     }
@@ -3339,11 +3682,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);
         }
       }
     }
@@ -3351,16 +3694,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)
   );
@@ -3468,7 +3811,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);
       }
@@ -3526,10 +3869,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);
     }
@@ -3537,14 +3880,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)
   );
@@ -3554,8 +3897,8 @@
     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);
@@ -3663,10 +4006,10 @@
   }
   .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)
   );
@@ -3688,19 +4031,19 @@
       }
     }
     &.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);
@@ -3709,7 +4052,7 @@
       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);
@@ -3718,7 +4061,7 @@
       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%);
@@ -3726,10 +4069,10 @@
       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);
@@ -3738,7 +4081,7 @@
       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);
@@ -3747,7 +4090,7 @@
       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%);
@@ -3755,23 +4098,23 @@
       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)
@@ -3799,7 +4142,7 @@
       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)
   );
@@ -3809,7 +4152,7 @@
       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)
   );
@@ -3853,15 +4196,76 @@
       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)
@@ -3872,8 +4276,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;
@@ -3945,11 +4349,11 @@
   .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 {
@@ -3965,9 +4369,9 @@
       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 {
@@ -4000,7 +4404,7 @@
       }
     }
     .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;
@@ -4024,7 +4428,7 @@
       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);
@@ -4033,25 +4437,25 @@
     .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)
   );
@@ -4069,9 +4473,9 @@
       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);
@@ -4103,7 +4507,7 @@
       }
     }
     .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;
@@ -4123,15 +4527,15 @@
       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) {
@@ -4151,7 +4555,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);
       padding-block: 1px;
       font-family: Inter, ui-sans-serif, system-ui, sans-serif;
       font-feature-settings: 'liga' 1, 'calt' 1;
@@ -4171,8 +4575,8 @@
       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;
@@ -4180,10 +4584,10 @@
       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)
@@ -4217,9 +4621,9 @@
         &::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);
@@ -4253,23 +4657,23 @@
       }
     }
     .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;
     }
@@ -4304,15 +4708,15 @@
       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)
   );
@@ -4331,10 +4735,10 @@
       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);
@@ -4355,7 +4759,7 @@
     }
     .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 {
@@ -4371,8 +4775,8 @@
       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);
@@ -4393,7 +4797,7 @@
       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)
   );
@@ -4401,23 +4805,23 @@
     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);
@@ -4444,7 +4848,7 @@
     }
     .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;
     }
@@ -4461,8 +4865,8 @@
       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);
@@ -4483,8 +4887,8 @@
       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);
@@ -4496,17 +4900,17 @@
       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 {
@@ -4529,8 +4933,8 @@
       }
     }
     .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);
     }
@@ -4564,17 +4968,17 @@
     }
     .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);
     }
@@ -4583,11 +4987,11 @@
       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);
@@ -4631,13 +5035,13 @@
       }
     }
     .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;