efficient-web-builder 6.1.0 → 7.1.1

package/dist/components/storefront-editor.css

@@ -101,7 +101,7 @@
   margin: 0;
   min-width: 0;
   overflow: hidden;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 500;
   color: var(--sf-muted);
   white-space: nowrap;
@@ -138,7 +138,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: var(--text-sm);
 }
 .sf-x:hover {
   background: var(--sf-hover);
@@ -222,7 +222,7 @@
    round said it plainly — 「右边那一行不能先删」 — get the order backwards and a
    merchant loses a route.
    `.sf-plus` is untouched; both of its rules are scoped to other buttons
-   (`.sf-add-card .sf-plus`) and `PagesPanel` / `AddChildRow` still render it. */
+   (`.sf-add-card .sf-plus`) and `AddChildRow` still renders it. */
 
 /* ── "Add section" seam between two tree rows ──────────────────────────────
    A slim hover target sitting in the gap between rows; on hover (or keyboard
@@ -268,7 +268,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: var(--text-sm);
   line-height: 1;
   box-shadow: 0 0 0 2px var(--sf-panel);
   opacity: 0;
@@ -356,7 +356,7 @@
   padding: 0;
   border: 0;
   background: none;
-  font: 600 12px/1.3 var(--sf-font);
+  font: 600 var(--text-xs)/1.3 var(--sf-font);
   color: var(--sf-text);
   text-align: left;
   cursor: pointer;
@@ -366,7 +366,7 @@
 }
 .sf-addside-sitewide-desc {
   font-weight: 400;
-  font-size: 12px;
+  font-size: var(--text-xs);
   color: var(--sf-muted);
 }
 
@@ -385,7 +385,7 @@
 }
 .sf-box-footer-switch-text {
   margin: 0;
-  font-size: 12px;
+  font-size: var(--text-xs);
   line-height: 1.45;
   color: var(--sf-muted);
 }
@@ -502,12 +502,12 @@
   color: var(--sf-on-accent);
   border-radius: var(--radius-lg);
   padding: 8px 14px;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 600;
   box-shadow: 0 4px 12px var(--sf-accent-shadow);
 }
 .sf-addcard-plus {
-  font-size: 16px;
+  font-size: var(--text-base);
   line-height: 1;
   margin-top: -1px;
 }
@@ -518,12 +518,12 @@
   padding: 0 2px 2px;
 }
 .sf-addcard-name {
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 600;
   color: var(--sf-text);
 }
 .sf-addcard-desc {
-  font-size: 11px;
+  font-size: var(--text-2xs);
   line-height: 1.35;
   color: var(--sf-muted);
 }
@@ -548,13 +548,10 @@
   height: 30px;
 }
 .sf-addempty-title {
-  font-size: 14px;
+  font-size: var(--text-sm);
   font-weight: 600;
   color: var(--sf-text);
 }
-.sf-addempty-sub {
-  font-size: 12px;
-}
 
 /* ── Center: device-framed preview (wraps Puck.Preview) ──────────────── */
 .sf-frame--tablet,
@@ -925,7 +922,7 @@
      came to hang 6px OUTSIDE the panel at every width under 280 (measured: gap
      -6.0px at 260 and at 220, against 0.0 at the default 320). One name, read
      by the padding, by the narrow override, and by anything that undoes it. */
-  --sf-insp-pad-x: 16px;
+  --sf-insp-pad-x: var(--space-16);
   padding: 4px var(--sf-insp-pad-x) 18px;
 
   /* THE DROPDOWN ARROW, WRITTEN ONCE — card 66399.c.
@@ -995,7 +992,7 @@
   .sf-insp-body {
     /* The TOKEN, not `padding-inline` — so everything that reads the padding
        narrows with it, instead of only the padding itself. */
-    --sf-insp-pad-x: 8px;
+    --sf-insp-pad-x: var(--space-8);
   }
 }
 
@@ -1009,7 +1006,7 @@
   background: var(--sf-field-bg);
   border-radius: var(--sf-field-radius);
   padding: 8px 11px;
-  font-size: 14px;
+  font-size: var(--text-sm);
   color: var(--sf-field-text);
   font-family: var(--sf-font);
 }
@@ -1110,7 +1107,7 @@
   background-position: calc(100% - 12px) calc(50% + 3px);
   border-radius: var(--sf-field-radius);
   padding: 8px 11px;
-  font-size: 14px;
+  font-size: var(--text-sm);
   color: var(--sf-field-text);
   cursor: pointer;
 }
@@ -1182,7 +1179,7 @@
   background: var(--sf-field-bg);
   border-radius: var(--sf-field-radius);
   padding: 8px 11px;
-  font-size: 14px;
+  font-size: var(--text-sm);
   font-family: var(--sf-font);
   color: var(--sf-field-text);
   text-align: left;
@@ -1194,7 +1191,7 @@
   box-shadow: 0 0 0 3px var(--sf-accent-ring);
 }
 .sf-multi-caret {
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-text-secondary);
   flex: none;
 }
@@ -1282,7 +1279,7 @@
 .sf-secttheme-oncard {
   margin: 0;
   padding: 5px 4px 7px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   line-height: 1.4;
   color: var(--sf-text-secondary);
 }
@@ -1396,7 +1393,7 @@
   border: 0;
   background: transparent;
   border-radius: max(calc(var(--sf-field-radius) - 2px), 2px);
-  font-size: 14px;
+  font-size: var(--text-sm);
   font-family: var(--sf-font);
   color: var(--sf-field-text);
   text-align: left;
@@ -1438,7 +1435,7 @@
   padding: 6px 9px;
   background: var(--sf-field-bg);
   border-bottom: 1px solid var(--sf-input-border);
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 600;
   color: var(--sf-field-text);
 }
@@ -1448,7 +1445,7 @@
   border: 0;
   background: transparent;
   color: var(--sf-text-secondary);
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-family: var(--sf-font);
   cursor: pointer;
 }
@@ -1473,7 +1470,7 @@
   padding: 7px 9px;
   border-top: 1px solid var(--sf-input-border);
   background: var(--sf-accent-ring);
-  font-size: 11px;
+  font-size: var(--text-2xs);
   line-height: 1.4;
   color: var(--sf-text-secondary);
 }
@@ -1546,7 +1543,7 @@
   border: none;
   background: transparent;
   font-family: var(--sf-font);
-  font-size: 14px;
+  font-size: var(--text-sm);
   color: var(--sf-text);
   outline: none;
 }
@@ -1589,23 +1586,26 @@
 .sf-pgroup-label {
   flex: 1;
   text-align: left;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 700;
   letter-spacing: 0.4px;
   text-transform: uppercase;
 }
 .sf-pgroup-count {
   flex: none;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   color: var(--sf-muted);
   background: var(--sf-track-bg);
   border-radius: 999px;
   padding: 1px 7px;
 }
+/* 4 between rows, the shell Tree's own row gap, so a hovered row next to the
+   selected one is two rounded shapes, never one block (Lewis, 2026-10-14). */
 .sf-pgroup-body {
   display: flex;
   flex-direction: column;
+  gap: var(--space-4);
 }
 /* Page rows reuse .sf-row; anchors (Cart/Checkout) reset link chrome. */
 .sf-prow {
@@ -1614,7 +1614,7 @@
 }
 .sf-page-draft {
   flex: none;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   color: var(--sf-muted);
   text-transform: uppercase;
@@ -1626,7 +1626,7 @@
 .sf-badge-dynamic,
 .sf-badge-lightbox {
   flex: none;
-  font-size: 9px;
+  font-size: var(--text-3xs);
   font-weight: 700;
   letter-spacing: 0.3px;
   text-transform: uppercase;
@@ -1675,7 +1675,7 @@
 /* "Preview" pill on Cart / Checkout — signals "opens the live page, view-only". */
 .sf-badge-preview {
   flex: none;
-  font-size: 9px;
+  font-size: var(--text-3xs);
   font-weight: 700;
   letter-spacing: 0.3px;
   text-transform: uppercase;
@@ -1684,26 +1684,6 @@
   color: var(--sf-warning);
   background: var(--sf-preview-tint);
 }
-.sf-pages-new {
-  flex: none;
-  margin: 6px 10px 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 9px;
-  border: 1px dashed var(--sf-line);
-  border-radius: var(--sf-row-radius);
-  background: transparent;
-  color: var(--sf-accent-text);
-  font-family: var(--sf-font);
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-}
-.sf-pages-new:hover {
-  background: var(--sf-hover);
-}
 
 /* ── Layers rows (redesign 2b) ──────────────────────────────────────────
    The Layers tree's rows are editor-shell's `TreeRow` (efficient-easel/tree.css):
@@ -1749,14 +1729,6 @@
   gap: 2px;
 }
 
-/* The relocated heading-outline tool sits muted at the bottom of the tree. */
-.sf-tree-tool {
-  margin-top: 14px;
-  /* The left inset is the tree's 11px column, not `.sf-tree`'s padding — that
-     is 0 on this side now so the bars can bleed. */
-  padding: 10px 0 0 11px;
-}
-
 /* `.sf-field-section` AND `.sf-field-group` WERE HERE, and they are gone on
    purpose (card 66300). They were the panel's two heading tiers — a 12px label
    over a 1.5px rule, and a 10.5px label over a 1px one — and the rules are what
@@ -2016,7 +1988,7 @@
 }
 .sf-field-label {
   display: block;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 500;
   color: var(--sf-text-secondary);
   /* WITHIN one setting: its label to its own control. This gap is the only
@@ -2151,7 +2123,7 @@
   background: var(--sf-chip-bg);
   border-radius: var(--sf-field-radius);
   padding: 8px 11px;
-  font-size: 14px;
+  font-size: var(--text-sm);
   color: var(--sf-text-secondary);
   font-family: var(--sf-font);
   cursor: default;
@@ -2275,7 +2247,7 @@
   /* The style's NAME — Highlight / Bold / Quiet. Padded so two of them do not
      read as one word, and never wrapped mid-name. */
   padding: 0 6px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   line-height: 1;
   white-space: nowrap;
 }
@@ -2424,7 +2396,7 @@
   box-shadow: 0 0 0 2px var(--sf-panel), 0 0 0 4px var(--sf-accent);
 }
 .sf-swatch-hex {
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-muted);
   font-variant-numeric: tabular-nums;
   margin-left: 2px;
@@ -2459,7 +2431,7 @@
   width: 4.75rem;
 }
 .sf-colour-caption {
-  font-size: 12px;
+  font-size: var(--text-xs);
   color: var(--sf-muted);
   white-space: nowrap;
 }
@@ -2522,7 +2494,7 @@
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
   color: var(--sf-field-text);
-  font-size: 14px;
+  font-size: var(--text-sm);
   text-align: left;
   cursor: pointer;
 }
@@ -2542,7 +2514,7 @@
    so it reads quieter than everything else on the row. */
 .sf-chooser-meta {
   flex: none;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--sf-disabled);
@@ -2578,7 +2550,7 @@
   border: 0;
   background: none;
   text-align: left;
-  font-size: 14px;
+  font-size: var(--text-sm);
   color: var(--sf-text-secondary);
   cursor: pointer;
 }
@@ -2624,7 +2596,7 @@
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
   color: var(--sf-text-secondary);
-  font-size: 12px;
+  font-size: var(--text-xs);
   cursor: pointer;
 }
 .sf-rung:hover:not(.is-active) {
@@ -2694,12 +2666,12 @@
 /* The small and large A flanking a size slider. */
 .sf-scale-a {
   flex: none;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   line-height: 1;
   color: var(--sf-disabled);
 }
 .sf-scale-a--lg {
-  font-size: 16px;
+  font-size: var(--text-base);
   color: var(--sf-muted);
 }
 /* The "Auto" button that clears an optional number back to the built-in. */
@@ -2708,7 +2680,7 @@
   border: 1px solid var(--sf-input-border);
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-text-secondary);
   cursor: pointer;
 }
@@ -2798,7 +2770,7 @@
    between tabs does not have to learn how to read a second kind of row. */
 .sf-style-name {
   flex: none;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   color: var(--sf-muted);
 }
@@ -2876,7 +2848,7 @@
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
   color: var(--sf-text);
-  font-size: 12px;
+  font-size: var(--text-xs);
   cursor: pointer;
 }
 /* A rung showing a LETTERFORM rather than a word -- the B and the I. It is the
@@ -2884,7 +2856,7 @@
    glyph and it keeps its accessible name in `aria-label`. */
 .sf-rung--glyph {
   flex: 0 0 34px;
-  font-size: 14px;
+  font-size: var(--text-sm);
   line-height: 18px;
   text-align: center;
 }
@@ -2994,7 +2966,7 @@
   line-height: 1;
 }
 .sf-theme-headline {
-  font-size: 14px;
+  font-size: var(--text-sm);
   font-weight: 750;
   letter-spacing: -0.01em;
   line-height: 1.1;
@@ -3049,7 +3021,7 @@
 }
 .sf-theme-card.is-selected .sf-theme-foot { color: var(--sf-accent-text); }
 .sf-theme-name {
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 700;
   min-width: 0;
   overflow: hidden;
@@ -3063,7 +3035,7 @@
 .sf-theme-warn {
   flex: none;
   margin-left: auto;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 700;
   color: var(--status-warning-soft-ink);
   white-space: nowrap;
@@ -3099,7 +3071,7 @@
   border: 0;
   background: none;
   font: inherit;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 600;
   color: var(--sf-accent-text);
   padding: 4px 0;
@@ -3149,14 +3121,14 @@
    INSIDE one setting, and reading as a quieter copy of the row above them is
    what said they were the same thing. */
 .sf-colour-mode {
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 500;
   color: var(--sf-text-secondary);
 }
 .sf-colour-mode small {
   display: block;
   margin-top: 1px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 400;
   color: var(--sf-muted);
 }
@@ -3167,20 +3139,12 @@
   border: 1px solid var(--sf-divider);
   border-radius: var(--sf-row-radius);
 }
-.sf-readability-head {
-  margin-bottom: 7px;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--sf-muted);
-}
 .sf-readability-row {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 4px 0;
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 .sf-readability-who {
   flex: 1;
@@ -3218,7 +3182,7 @@
 
 .sf-readability-advice {
   margin-top: 7px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   line-height: 1.6;
   color: var(--sf-muted);
 }
@@ -3238,7 +3202,7 @@
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
   color: var(--sf-btn-text);
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-variant-numeric: tabular-nums;
   cursor: pointer;
 }
@@ -3353,12 +3317,12 @@
   min-width: 0;
 }
 .sf-preview-pin-label {
-  font-size: 14px;
+  font-size: var(--text-sm);
   font-weight: 500;
   color: var(--sf-text);
 }
 .sf-preview-pin-hint {
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-muted);
 }
 
@@ -3374,7 +3338,7 @@
 .sf-colstep-value {
   min-width: 14px;
   text-align: center;
-  font-size: 14px;
+  font-size: var(--text-sm);
   font-weight: 500;
   color: var(--sf-text);
 }
@@ -3438,7 +3402,7 @@
   background: transparent;
   border-radius: var(--radius-md);
   padding: 6px 8px;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 500;
   color: var(--sf-icon);
   cursor: pointer;
@@ -3603,7 +3567,7 @@ input.sf-list-marking {
 }
 .sf-blogsource-status {
   margin: 0;
-  font-size: 12px;
+  font-size: var(--text-xs);
   color: var(--sf-text-secondary);
 }
 .sf-blogsource-status[data-state="error"] {
@@ -3649,7 +3613,7 @@ input.sf-list-marking {
 }
 .sf-formsummary-caption {
   margin-bottom: 4px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   letter-spacing: 0.02em;
   color: var(--sf-text-secondary);
@@ -3657,13 +3621,13 @@ input.sf-list-marking {
 .sf-formsummary-fields {
   margin: 0;
   padding-left: 18px;
-  font-size: 12px;
+  font-size: var(--text-xs);
   line-height: 1.55;
   color: var(--sf-text-secondary);
 }
 .sf-formsummary-warn {
   margin: 0;
-  font-size: 12px;
+  font-size: var(--text-xs);
   line-height: 1.45;
   color: var(--sf-danger);
 }
@@ -3681,7 +3645,7 @@ input.sf-list-marking {
    visible instead of nothing happening. */
 .sf-image-status {
   margin-top: 6px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-muted);
 }
 .sf-image-status--error {
@@ -3707,7 +3671,7 @@ ul.sf-image-status {
   border: 1.5px dashed var(--sf-input-border);
   border-radius: var(--radius-lg);
   padding: 12px 14px;
-  font-size: 12px;
+  font-size: var(--text-xs);
   line-height: 1.5;
   color: var(--sf-muted);
   background-image: repeating-linear-gradient(45deg, var(--sf-hatch) 0 1px, transparent 1px 12px);
@@ -3763,7 +3727,7 @@ ul.sf-image-status {
    same six classes wearing one name. */
 .sf-note {
   padding: 14px 16px;
-  font-size: 14px;
+  font-size: var(--text-sm);
   line-height: 1.5;
   color: var(--sf-muted);
 }
@@ -3783,7 +3747,7 @@ ul.sf-image-status {
    sentence above it, so it reads as a footnote and not as an instruction. */
 .sf-note-detail {
   margin-top: 10px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-muted);
   opacity: 0.75;
   word-break: break-all;
@@ -3851,7 +3815,7 @@ ul.sf-image-status {
    heading for the name below rather than as another name. */
 .sf-part-style-caption {
   margin-bottom: 2px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
@@ -3859,13 +3823,13 @@ ul.sf-image-status {
 }
 .sf-part-style-count {
   margin-bottom: 3px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   color: var(--sf-muted);
 }
 .sf-part-style-name {
   min-width: 0;
-  font-size: 20px;
+  font-size: var(--text-xl);
   line-height: 1.15;
   letter-spacing: -0.01em;
   color: var(--sf-text-strong);
@@ -3914,7 +3878,7 @@ ul.sf-image-status {
   flex: none;
   text-align: center;
   color: var(--sf-muted);
-  font-size: 14px;
+  font-size: var(--text-sm);
   line-height: 1;
 }
 .sf-part-style-trigger[aria-expanded="false"] .sf-part-style-sign::before {
@@ -3948,7 +3912,7 @@ ul.sf-image-status {
   background: none;
   text-align: left;
   /* E6 — a field label is never smaller than 12px, and an option is a label. */
-  font-size: 14px;
+  font-size: var(--text-sm);
   color: var(--sf-field-text);
   border-radius: max(calc(var(--sf-field-radius) - 2px), 2px);
   cursor: pointer;
@@ -3992,13 +3956,13 @@ ul.sf-image-status {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 400;
   color: var(--es-muted);
 }
 .sf-part-style-meta {
   margin-top: 1px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-muted);
   font-variant-numeric: tabular-nums;
 }
@@ -4025,7 +3989,7 @@ ul.sf-image-status {
    it read at 13px and wrapped, taking "Edit style" over two lines with it. So
    it keeps its look exactly and takes an honest name. */
 .sf-part-style-state {
-  font-size: 12px;
+  font-size: var(--text-xs);
   color: var(--sf-text-secondary);
 }
 /* The override count. A chip rather than plain text because it is a NUMBER a
@@ -4037,7 +4001,7 @@ ul.sf-image-status {
   padding: 2px 9px;
   background: var(--sf-accent-tint);
   color: var(--sf-accent-text);
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
 }
@@ -4049,7 +4013,7 @@ ul.sf-image-status {
   background: none;
   padding: 0;
   font: inherit;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 500;
   color: var(--sf-accent-text);
   cursor: pointer;
@@ -4141,13 +4105,13 @@ ul.sf-image-status {
   gap: 8px;
 }
 .sf-part-ink-label {
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   color: var(--sf-muted);
 }
 .sf-part-ink-read {
   margin-left: auto;
-  font-size: 12px;
+  font-size: var(--text-xs);
   color: var(--sf-text-secondary);
   font-variant-numeric: tabular-nums;
 }
@@ -4231,7 +4195,7 @@ ul.sf-image-status {
    reads like the buckets above it. A real <h3>, so it joins the panel outline. */
 .sf-entries-head {
   margin: 14px 0 4px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
@@ -4311,7 +4275,7 @@ ul.sf-image-status {
   background: var(--sf-field-bg);
   border-radius: 999px;
   padding: 4px 11px;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 600;
   color: var(--sf-icon);
   cursor: pointer;
@@ -4434,7 +4398,7 @@ ul.sf-image-status {
 
 /* How many the filter left. Without it an empty-looking strip is a mystery. */
 .sf-gallery-count {
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-disabled);
   margin-top: 7px;
 }