@sc-360-v2/storefront-cms-library 0.5.31 → 0.5.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/amount-estimator.scss +1083 -1083
  2. package/dist/animation-control.scss +23 -23
  3. package/dist/badge.scss +388 -388
  4. package/dist/builder.js +1 -1
  5. package/dist/bulk-variant-picker copy.scss +1121 -1121
  6. package/dist/bundleDetails copy.scss +1431 -1431
  7. package/dist/button copy.scss +271 -271
  8. package/dist/buy-for-tabs-container-item.scss +80 -80
  9. package/dist/cart-products-sidebar.scss +211 -211
  10. package/dist/cart-wrapper.scss +127 -127
  11. package/dist/cartGrouping.scss +89 -89
  12. package/dist/category-groups-quota-details.scss +451 -451
  13. package/dist/categoryDetails.scss +61 -61
  14. package/dist/categoryWidget.scss +34 -34
  15. package/dist/checkbox-radio.scss +124 -124
  16. package/dist/common-element.scss +35 -35
  17. package/dist/confirmationModal.scss +139 -139
  18. package/dist/custom-fonts.scss +100 -100
  19. package/dist/embroider-preview-element.scss +94 -94
  20. package/dist/embroider-template-1.scss +482 -482
  21. package/dist/emtpy-templates.scss +165 -165
  22. package/dist/fb-dropdown.scss +125 -125
  23. package/dist/filter-results.scss +323 -323
  24. package/dist/flex-text-editor.scss +271 -271
  25. package/dist/form-zindex-module.scss +24 -24
  26. package/dist/icon-library.scss +74 -74
  27. package/dist/image-for-product.scss +21 -21
  28. package/dist/lightbox.scss +78 -78
  29. package/dist/line.scss +99 -25
  30. package/dist/loader.scss +37 -37
  31. package/dist/menu-item.scss +19 -19
  32. package/dist/my-wishlist.scss +17 -17
  33. package/dist/order-processing.scss +61 -61
  34. package/dist/overflow-module.scss +63 -63
  35. package/dist/past-orders.scss +975 -975
  36. package/dist/payment-methods.scss +289 -289
  37. package/dist/pickup-locations.scss +1167 -1167
  38. package/dist/position-module.scss +95 -95
  39. package/dist/prefix-list.scss +86 -86
  40. package/dist/product-actions copy.scss +2765 -2765
  41. package/dist/product-customizations.scss +149 -149
  42. package/dist/product-image copy.scss +787 -787
  43. package/dist/product-inventory.scss +1378 -1378
  44. package/dist/product-promotions.scss +2759 -2759
  45. package/dist/quotes.scss +737 -737
  46. package/dist/repeater copy.scss +635 -635
  47. package/dist/responsive-behaviour.scss +29 -29
  48. package/dist/rfqs.scss +736 -736
  49. package/dist/scroll.scss +4 -3
  50. package/dist/shareCartSideBar.scss +254 -254
  51. package/dist/shipping-estimator.scss +41 -41
  52. package/dist/sort.scss +89 -89
  53. package/dist/static-text.scss +52 -52
  54. package/dist/stockStatus.scss +64 -64
  55. package/dist/store-locations.scss +1398 -1398
  56. package/dist/sub-category.scss +74 -74
  57. package/dist/submit-quote.scss +275 -275
  58. package/dist/tab-container-item.scss +80 -80
  59. package/dist/tab-v2.scss +583 -583
  60. package/dist/table-common.scss +506 -506
  61. package/dist/table.scss +685 -685
  62. package/dist/tabs.scss +395 -395
  63. package/dist/text-temp.scss +109 -109
  64. package/dist/toaster.scss +350 -350
  65. package/dist/toggle-button.scss +32 -32
  66. package/dist/transform-properties-module.scss +20 -20
  67. package/dist/types/builder/tools/element-edit/icon-list.d.ts +6 -0
  68. package/dist/types/builder/tools/element-edit/line.d.ts +21 -0
  69. package/dist/types/builder/tools/element-edit/scroll.d.ts +0 -1
  70. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +1 -145
  71. package/dist/user-elements copy.scss +1437 -1437
  72. package/dist/variant-picker.scss +404 -117
  73. package/dist/video.scss +476 -476
  74. package/dist/wishlist-overlay.scss +48 -48
  75. package/package.json +1 -1
@@ -598,6 +598,72 @@ $minWidth: 70px;
598
598
  &.has-open-popover {
599
599
  z-index: 50;
600
600
  }
601
+
602
+ .grouped__group__image {
603
+ width: var(
604
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-wh,
605
+ var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-wh, var(--_ctm-dn-on-ve-gp-gp-hr-ie-wh, 24px))
606
+ );
607
+ height: var(
608
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-ht,
609
+ var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-ht, var(--_ctm-dn-on-ve-gp-gp-hr-ie-ht, 24px))
610
+ );
611
+ padding: var(
612
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-pg,
613
+ var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-pg, var(--_ctm-dn-on-ve-gp-gp-hr-ie-pg, 0))
614
+ );
615
+ object-fit: var(
616
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-ob-ft,
617
+ var(
618
+ --_ctm-tab-dn-on-ve-gp-gp-hr-ie-ob-ft,
619
+ var(--_ctm-dn-on-ve-gp-gp-hr-ie-ob-ft, cover)
620
+ )
621
+ );
622
+ object-position: var(
623
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-ob-pn,
624
+ var(
625
+ --_ctm-tab-dn-on-ve-gp-gp-hr-ie-ob-pn,
626
+ var(--_ctm-dn-on-ve-gp-gp-hr-ie-ob-pn, center)
627
+ )
628
+ );
629
+ background-color: var(
630
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-bd-cr,
631
+ var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-bd-cr, var(--_ctm-dn-on-ve-gp-gp-hr-ie-bd-cr))
632
+ );
633
+ border-color: var(
634
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-br-cr,
635
+ var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-br-cr, var(--_ctm-dn-on-ve-gp-gp-hr-ie-br-cr))
636
+ );
637
+ border-style: var(
638
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-br-se,
639
+ var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-br-se, var(--_ctm-dn-on-ve-gp-gp-hr-ie-br-se))
640
+ );
641
+ border-width: var(
642
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-br-wh,
643
+ var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-br-wh, var(--_ctm-dn-on-ve-gp-gp-hr-ie-br-wh))
644
+ );
645
+ border-radius: var(
646
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-br-rs,
647
+ var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-br-rs, var(--_ctm-dn-on-ve-gp-gp-hr-ie-br-rs))
648
+ );
649
+ box-shadow: var(
650
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-sw-ae,
651
+ var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-sw-ae, var(--_ctm-dn-on-ve-gp-gp-hr-ie-sw-ae))
652
+ )
653
+ var(
654
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-sw-br,
655
+ var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-sw-br, var(--_ctm-dn-on-ve-gp-gp-hr-ie-sw-br))
656
+ )
657
+ var(
658
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-sw-sd,
659
+ var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-sw-sd, var(--_ctm-dn-on-ve-gp-gp-hr-ie-sw-sd))
660
+ )
661
+ var(
662
+ --_ctm-mob-dn-on-ve-gp-gp-hr-ie-sw-cr,
663
+ var(--_ctm-tab-dn-on-ve-gp-gp-hr-ie-sw-cr, var(--_ctm-dn-on-ve-gp-gp-hr-ie-sw-cr))
664
+ );
665
+ flex-shrink: 0;
666
+ }
601
667
  // Card view: every group renders as its own detailsCard inside an
602
668
  // Embla carousel instead of one active group behind a tab strip. The
603
669
  // cards reuse the `.grouped__content` (detailsCard) styles via the
@@ -900,6 +966,7 @@ $minWidth: 70px;
900
966
  // border-bottom: 1px solid #e0e0e0;
901
967
  overflow-x: auto;
902
968
  overflow-y: hidden;
969
+ padding-bottom: 3px;
903
970
  padding: var(
904
971
  --_ctm-mob-dn-on-ve-gp-gs-cr-pg,
905
972
  var(--_ctm-tab-dn-on-ve-gp-gs-cr-pg, var(--_ctm-dn-on-ve-gp-gs-cr-pg))
@@ -962,150 +1029,212 @@ $minWidth: 70px;
962
1029
  )
963
1030
  );
964
1031
  cursor: pointer;
1032
+ margin-bottom: -1px;
1033
+ white-space: nowrap;
1034
+ flex-shrink: 0;
1035
+
1036
+ // Stateful properties — read --_sf-tb-* which hover/active override
965
1037
  border-style: var(
966
- --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-br-se,
1038
+ --_sf-tb-br-se,
967
1039
  var(
968
- --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-br-se,
969
- var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-br-se, solid)
1040
+ --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-br-se,
1041
+ var(
1042
+ --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-br-se,
1043
+ var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-br-se, solid)
1044
+ )
970
1045
  )
971
1046
  );
972
1047
  border-width: var(
973
- --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-br-wh,
1048
+ --_sf-tb-br-wh,
974
1049
  var(
975
- --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-br-wh,
976
- var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-br-wh, 0 0 2px 0)
1050
+ --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-br-wh,
1051
+ var(
1052
+ --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-br-wh,
1053
+ var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-br-wh, 0 0 2px 0)
1054
+ )
977
1055
  )
978
1056
  );
979
1057
  border-color: var(
980
- --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-br-cr,
1058
+ --_sf-tb-br-cr,
981
1059
  var(
982
- --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-br-cr,
983
- var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-br-cr, transparent)
1060
+ --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-br-cr,
1061
+ var(
1062
+ --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-br-cr,
1063
+ var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-br-cr, transparent)
1064
+ )
984
1065
  )
985
1066
  );
986
- margin-bottom: -1px;
987
- white-space: nowrap;
988
- flex-shrink: 0;
989
1067
  background-color: var(
990
- --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-bd-cr,
1068
+ --_sf-tb-bd-cr,
991
1069
  var(
992
- --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-bd-cr,
993
- var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-bd-cr)
1070
+ --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-bd-cr,
1071
+ var(
1072
+ --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-bd-cr,
1073
+ var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-bd-cr)
1074
+ )
994
1075
  )
995
1076
  );
996
1077
  border-radius: var(
997
- --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-br-rs,
1078
+ --_sf-tb-br-rs,
998
1079
  var(
999
- --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-br-rs,
1000
- var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-br-rs)
1080
+ --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-br-rs,
1081
+ var(
1082
+ --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-br-rs,
1083
+ var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-br-rs)
1084
+ )
1001
1085
  )
1002
1086
  );
1003
1087
  box-shadow: var(
1004
- --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-sw-ae,
1088
+ --_sf-tb-sw-ae,
1005
1089
  var(
1006
- --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-sw-ae,
1007
- var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-sw-ae)
1090
+ --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-sw-ae,
1091
+ var(
1092
+ --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-sw-ae,
1093
+ var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-sw-ae)
1094
+ )
1008
1095
  )
1009
1096
  )
1010
1097
  var(
1011
- --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-sw-br,
1098
+ --_sf-tb-sw-br,
1012
1099
  var(
1013
- --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-sw-br,
1014
- var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-sw-br)
1100
+ --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-sw-br,
1101
+ var(
1102
+ --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-sw-br,
1103
+ var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-sw-br)
1104
+ )
1015
1105
  )
1016
1106
  )
1017
1107
  var(
1018
- --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-sw-sd,
1108
+ --_sf-tb-sw-sd,
1019
1109
  var(
1020
- --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-sw-sd,
1021
- var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-sw-sd)
1110
+ --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-sw-sd,
1111
+ var(
1112
+ --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-sw-sd,
1113
+ var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-sw-sd)
1114
+ )
1022
1115
  )
1023
1116
  )
1024
1117
  var(
1025
- --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-sw-cr,
1118
+ --_sf-tb-sw-cr,
1026
1119
  var(
1027
- --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-sw-cr,
1028
- var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-sw-cr)
1120
+ --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-sw-cr,
1121
+ var(
1122
+ --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-sw-cr,
1123
+ var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-sw-cr)
1124
+ )
1029
1125
  )
1030
1126
  );
1031
1127
 
1032
1128
  &:hover {
1033
- border-color: var(
1129
+ --_sf-tb-br-cr: var(
1034
1130
  --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-br-cr,
1035
1131
  var(
1036
1132
  --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-br-cr,
1037
1133
  var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-br-cr)
1038
1134
  )
1039
1135
  );
1040
- border-style: var(
1136
+ --_sf-tb-br-se: var(
1041
1137
  --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-br-se,
1042
1138
  var(
1043
1139
  --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-br-se,
1044
1140
  var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-br-se)
1045
1141
  )
1046
1142
  );
1047
- border-width: var(
1143
+ --_sf-tb-br-wh: var(
1048
1144
  --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-br-wh,
1049
1145
  var(
1050
1146
  --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-br-wh,
1051
1147
  var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-br-wh)
1052
1148
  )
1053
1149
  );
1054
- background-color: var(
1150
+ --_sf-tb-bd-cr: var(
1055
1151
  --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-bd-cr,
1056
1152
  var(
1057
1153
  --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-bd-cr,
1058
1154
  var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-bd-cr)
1059
1155
  )
1060
1156
  );
1061
- border-radius: var(
1157
+ --_sf-tb-br-rs: var(
1062
1158
  --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-br-rs,
1063
1159
  var(
1064
1160
  --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-br-rs,
1065
1161
  var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-br-rs)
1066
1162
  )
1067
1163
  );
1164
+ --_sf-tb-cr: var(
1165
+ --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-cr,
1166
+ var(--_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-cr, var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-cr))
1167
+ );
1168
+ --_sf-tb-ft-se: var(
1169
+ --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-ft-se,
1170
+ var(
1171
+ --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-ft-se,
1172
+ var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-ft-se)
1173
+ )
1174
+ );
1175
+ --_sf-tb-ft-wt: var(
1176
+ --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-ft-wt,
1177
+ var(
1178
+ --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-ft-wt,
1179
+ var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-ft-wt)
1180
+ )
1181
+ );
1068
1182
  }
1069
1183
 
1070
1184
  &.active {
1071
- border-color: var(
1185
+ --_sf-tb-br-cr: var(
1072
1186
  --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-br-cr,
1073
1187
  var(
1074
1188
  --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-br-cr,
1075
- var(
1076
- --_ctm-dn-on-ve-gp-gp-tb-sd-se-br-cr,
1077
- transparent transparent #f59e0b transparent
1078
- )
1189
+ var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-br-cr)
1079
1190
  )
1080
1191
  );
1081
- border-style: var(
1192
+ --_sf-tb-br-se: var(
1082
1193
  --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-br-se,
1083
1194
  var(
1084
1195
  --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-br-se,
1085
1196
  var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-br-se)
1086
1197
  )
1087
1198
  );
1088
- border-width: var(
1199
+ --_sf-tb-br-wh: var(
1089
1200
  --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-br-wh,
1090
1201
  var(
1091
1202
  --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-br-wh,
1092
1203
  var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-br-wh)
1093
1204
  )
1094
1205
  );
1095
- background-color: var(
1206
+ --_sf-tb-bd-cr: var(
1096
1207
  --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-bd-cr,
1097
1208
  var(
1098
1209
  --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-bd-cr,
1099
1210
  var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-bd-cr)
1100
1211
  )
1101
1212
  );
1102
- border-radius: var(
1213
+ --_sf-tb-br-rs: var(
1103
1214
  --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-br-rs,
1104
1215
  var(
1105
1216
  --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-br-rs,
1106
1217
  var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-br-rs)
1107
1218
  )
1108
1219
  );
1220
+ --_sf-tb-cr: var(
1221
+ --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-cr,
1222
+ var(--_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-cr, var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-cr))
1223
+ );
1224
+ --_sf-tb-ft-se: var(
1225
+ --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-ft-se,
1226
+ var(
1227
+ --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-ft-se,
1228
+ var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-ft-se)
1229
+ )
1230
+ );
1231
+ --_sf-tb-ft-wt: var(
1232
+ --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-ft-wt,
1233
+ var(
1234
+ --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-ft-wt,
1235
+ var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-ft-wt, 700)
1236
+ )
1237
+ );
1109
1238
  }
1110
1239
 
1111
1240
  .grouped__tab__dots {
@@ -1122,24 +1251,33 @@ $minWidth: 70px;
1122
1251
 
1123
1252
  .grouped__tab__name {
1124
1253
  font-size: var(
1125
- --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-ft-se,
1254
+ --_sf-tb-ft-se,
1126
1255
  var(
1127
- --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-ft-se,
1128
- var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-ft-se, 13px)
1256
+ --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-ft-se,
1257
+ var(
1258
+ --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-ft-se,
1259
+ var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-ft-se, 13px)
1260
+ )
1129
1261
  )
1130
1262
  );
1131
1263
  font-weight: var(
1132
- --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-ft-wt,
1264
+ --_sf-tb-ft-wt,
1133
1265
  var(
1134
- --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-ft-wt,
1135
- var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-ft-wt, 500)
1266
+ --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-ft-wt,
1267
+ var(
1268
+ --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-ft-wt,
1269
+ var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-ft-wt, 500)
1270
+ )
1136
1271
  )
1137
1272
  );
1138
1273
  color: var(
1139
- --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-cr,
1274
+ --_sf-tb-cr,
1140
1275
  var(
1141
- --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-cr,
1142
- var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-cr, #1a1a2e)
1276
+ --_ctm-mob-dn-on-ve-gp-gp-tb-dt-se-cr,
1277
+ var(
1278
+ --_ctm-tab-dn-on-ve-gp-gp-tb-dt-se-cr,
1279
+ var(--_ctm-dn-on-ve-gp-gp-tb-dt-se-cr, #1a1a2e)
1280
+ )
1143
1281
  )
1144
1282
  );
1145
1283
  font-family: var(
@@ -1151,48 +1289,6 @@ $minWidth: 70px;
1151
1289
  );
1152
1290
  }
1153
1291
 
1154
- &:hover .grouped__tab__name {
1155
- color: var(
1156
- --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-cr,
1157
- var(--_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-cr, var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-cr))
1158
- );
1159
- font-size: var(
1160
- --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-ft-se,
1161
- var(
1162
- --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-ft-se,
1163
- var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-ft-se)
1164
- )
1165
- );
1166
- font-weight: var(
1167
- --_ctm-mob-dn-on-ve-gp-gp-tb-hr-se-ft-wt,
1168
- var(
1169
- --_ctm-tab-dn-on-ve-gp-gp-tb-hr-se-ft-wt,
1170
- var(--_ctm-dn-on-ve-gp-gp-tb-hr-se-ft-wt)
1171
- )
1172
- );
1173
- }
1174
-
1175
- &.active .grouped__tab__name {
1176
- font-weight: var(
1177
- --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-ft-wt,
1178
- var(
1179
- --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-ft-wt,
1180
- var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-ft-wt, 700)
1181
- )
1182
- );
1183
- color: var(
1184
- --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-cr,
1185
- var(--_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-cr, var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-cr))
1186
- );
1187
- font-size: var(
1188
- --_ctm-mob-dn-on-ve-gp-gp-tb-sd-se-ft-se,
1189
- var(
1190
- --_ctm-tab-dn-on-ve-gp-gp-tb-sd-se-ft-se,
1191
- var(--_ctm-dn-on-ve-gp-gp-tb-sd-se-ft-se)
1192
- )
1193
- );
1194
- }
1195
-
1196
1292
  .grouped__tab__info-trigger {
1197
1293
  display: inline-flex;
1198
1294
  cursor: pointer;
@@ -1235,49 +1331,240 @@ $minWidth: 70px;
1235
1331
  display: flex;
1236
1332
  flex-direction: column;
1237
1333
  gap: var(
1238
- --_ctm-mob-dn-on-ve-gp-ds-cd-im-gp,
1239
- var(--_ctm-tab-dn-on-ve-gp-ds-cd-im-gp, var(--_ctm-dn-on-ve-gp-ds-cd-im-gp, 8px))
1334
+ --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-im-gp,
1335
+ var(
1336
+ --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-im-gp,
1337
+ var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-im-gp, 8px)
1338
+ )
1240
1339
  );
1241
1340
  padding: var(
1242
- --_ctm-mob-dn-on-ve-gp-ds-cd-pg,
1243
- var(--_ctm-tab-dn-on-ve-gp-ds-cd-pg, var(--_ctm-dn-on-ve-gp-ds-cd-pg))
1341
+ --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-pg,
1342
+ var(--_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-pg, var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-pg))
1244
1343
  );
1344
+
1345
+ // Stateful properties — read --_sf-cd-* which hover/active override
1245
1346
  background-color: var(
1246
- --_ctm-mob-dn-on-ve-gp-ds-cd-bd-cr,
1247
- var(--_ctm-tab-dn-on-ve-gp-ds-cd-bd-cr, var(--_ctm-dn-on-ve-gp-ds-cd-bd-cr))
1347
+ --_sf-cd-bd-cr,
1348
+ var(
1349
+ --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-bd-cr,
1350
+ var(
1351
+ --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-bd-cr,
1352
+ var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-bd-cr)
1353
+ )
1354
+ )
1248
1355
  );
1249
1356
  border-color: var(
1250
- --_ctm-mob-dn-on-ve-gp-ds-cd-br-cr,
1251
- var(--_ctm-tab-dn-on-ve-gp-ds-cd-br-cr, var(--_ctm-dn-on-ve-gp-ds-cd-br-cr))
1357
+ --_sf-cd-br-cr,
1358
+ var(
1359
+ --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-br-cr,
1360
+ var(
1361
+ --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-br-cr,
1362
+ var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-br-cr)
1363
+ )
1364
+ )
1252
1365
  );
1253
1366
  border-style: var(
1254
- --_ctm-mob-dn-on-ve-gp-ds-cd-br-se,
1255
- var(--_ctm-tab-dn-on-ve-gp-ds-cd-br-se, var(--_ctm-dn-on-ve-gp-ds-cd-br-se))
1367
+ --_sf-cd-br-se,
1368
+ var(
1369
+ --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-br-se,
1370
+ var(
1371
+ --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-br-se,
1372
+ var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-br-se)
1373
+ )
1374
+ )
1256
1375
  );
1257
1376
  border-width: var(
1258
- --_ctm-mob-dn-on-ve-gp-ds-cd-br-wh,
1259
- var(--_ctm-tab-dn-on-ve-gp-ds-cd-br-wh, var(--_ctm-dn-on-ve-gp-ds-cd-br-wh))
1377
+ --_sf-cd-br-wh,
1378
+ var(
1379
+ --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-br-wh,
1380
+ var(
1381
+ --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-br-wh,
1382
+ var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-br-wh)
1383
+ )
1384
+ )
1260
1385
  );
1261
1386
  border-radius: var(
1262
- --_ctm-mob-dn-on-ve-gp-ds-cd-br-rs,
1263
- var(--_ctm-tab-dn-on-ve-gp-ds-cd-br-rs, var(--_ctm-dn-on-ve-gp-ds-cd-br-rs))
1387
+ --_sf-cd-br-rs,
1388
+ var(
1389
+ --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-br-rs,
1390
+ var(
1391
+ --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-br-rs,
1392
+ var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-br-rs)
1393
+ )
1394
+ )
1264
1395
  );
1265
1396
  box-shadow: var(
1266
- --_ctm-mob-dn-on-ve-gp-ds-cd-sw-ae,
1267
- var(--_ctm-tab-dn-on-ve-gp-ds-cd-sw-ae, var(--_ctm-dn-on-ve-gp-ds-cd-sw-ae))
1397
+ --_sf-cd-sw-ae,
1398
+ var(
1399
+ --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-sw-ae,
1400
+ var(
1401
+ --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-sw-ae,
1402
+ var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-sw-ae)
1403
+ )
1404
+ )
1268
1405
  )
1269
1406
  var(
1270
- --_ctm-mob-dn-on-ve-gp-ds-cd-sw-br,
1271
- var(--_ctm-tab-dn-on-ve-gp-ds-cd-sw-br, var(--_ctm-dn-on-ve-gp-ds-cd-sw-br))
1407
+ --_sf-cd-sw-br,
1408
+ var(
1409
+ --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-sw-br,
1410
+ var(
1411
+ --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-sw-br,
1412
+ var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-sw-br)
1413
+ )
1414
+ )
1272
1415
  )
1273
1416
  var(
1274
- --_ctm-mob-dn-on-ve-gp-ds-cd-sw-sd,
1275
- var(--_ctm-tab-dn-on-ve-gp-ds-cd-sw-sd, var(--_ctm-dn-on-ve-gp-ds-cd-sw-sd))
1417
+ --_sf-cd-sw-sd,
1418
+ var(
1419
+ --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-sw-sd,
1420
+ var(
1421
+ --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-sw-sd,
1422
+ var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-sw-sd)
1423
+ )
1424
+ )
1276
1425
  )
1277
1426
  var(
1278
- --_ctm-mob-dn-on-ve-gp-ds-cd-sw-cr,
1279
- var(--_ctm-tab-dn-on-ve-gp-ds-cd-sw-cr, var(--_ctm-dn-on-ve-gp-ds-cd-sw-cr))
1427
+ --_sf-cd-sw-cr,
1428
+ var(
1429
+ --_ctm-mob-dn-on-ve-gp-ds-cd-dt-se-sw-cr,
1430
+ var(
1431
+ --_ctm-tab-dn-on-ve-gp-ds-cd-dt-se-sw-cr,
1432
+ var(--_ctm-dn-on-ve-gp-ds-cd-dt-se-sw-cr)
1433
+ )
1434
+ )
1435
+ );
1436
+
1437
+ &:hover {
1438
+ --_sf-cd-bd-cr: var(
1439
+ --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-bd-cr,
1440
+ var(
1441
+ --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-bd-cr,
1442
+ var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-bd-cr)
1443
+ )
1444
+ );
1445
+ --_sf-cd-br-cr: var(
1446
+ --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-br-cr,
1447
+ var(
1448
+ --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-br-cr,
1449
+ var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-br-cr)
1450
+ )
1451
+ );
1452
+ --_sf-cd-br-se: var(
1453
+ --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-br-se,
1454
+ var(
1455
+ --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-br-se,
1456
+ var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-br-se)
1457
+ )
1458
+ );
1459
+ --_sf-cd-br-wh: var(
1460
+ --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-br-wh,
1461
+ var(
1462
+ --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-br-wh,
1463
+ var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-br-wh)
1464
+ )
1465
+ );
1466
+ --_sf-cd-br-rs: var(
1467
+ --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-br-rs,
1468
+ var(
1469
+ --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-br-rs,
1470
+ var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-br-rs)
1471
+ )
1472
+ );
1473
+ --_sf-cd-sw-ae: var(
1474
+ --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-sw-ae,
1475
+ var(
1476
+ --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-sw-ae,
1477
+ var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-sw-ae)
1478
+ )
1479
+ );
1480
+ --_sf-cd-sw-br: var(
1481
+ --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-sw-br,
1482
+ var(
1483
+ --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-sw-br,
1484
+ var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-sw-br)
1485
+ )
1486
+ );
1487
+ --_sf-cd-sw-sd: var(
1488
+ --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-sw-sd,
1489
+ var(
1490
+ --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-sw-sd,
1491
+ var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-sw-sd)
1492
+ )
1493
+ );
1494
+ --_sf-cd-sw-cr: var(
1495
+ --_ctm-mob-dn-on-ve-gp-ds-cd-hr-se-sw-cr,
1496
+ var(
1497
+ --_ctm-tab-dn-on-ve-gp-ds-cd-hr-se-sw-cr,
1498
+ var(--_ctm-dn-on-ve-gp-ds-cd-hr-se-sw-cr)
1499
+ )
1280
1500
  );
1501
+ }
1502
+
1503
+ &.active {
1504
+ --_sf-cd-bd-cr: var(
1505
+ --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-bd-cr,
1506
+ var(
1507
+ --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-bd-cr,
1508
+ var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-bd-cr)
1509
+ )
1510
+ );
1511
+ --_sf-cd-br-cr: var(
1512
+ --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-br-cr,
1513
+ var(
1514
+ --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-br-cr,
1515
+ var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-br-cr)
1516
+ )
1517
+ );
1518
+ --_sf-cd-br-se: var(
1519
+ --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-br-se,
1520
+ var(
1521
+ --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-br-se,
1522
+ var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-br-se)
1523
+ )
1524
+ );
1525
+ --_sf-cd-br-wh: var(
1526
+ --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-br-wh,
1527
+ var(
1528
+ --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-br-wh,
1529
+ var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-br-wh)
1530
+ )
1531
+ );
1532
+ --_sf-cd-br-rs: var(
1533
+ --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-br-rs,
1534
+ var(
1535
+ --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-br-rs,
1536
+ var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-br-rs)
1537
+ )
1538
+ );
1539
+ --_sf-cd-sw-ae: var(
1540
+ --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-sw-ae,
1541
+ var(
1542
+ --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-sw-ae,
1543
+ var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-sw-ae)
1544
+ )
1545
+ );
1546
+ --_sf-cd-sw-br: var(
1547
+ --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-sw-br,
1548
+ var(
1549
+ --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-sw-br,
1550
+ var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-sw-br)
1551
+ )
1552
+ );
1553
+ --_sf-cd-sw-sd: var(
1554
+ --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-sw-sd,
1555
+ var(
1556
+ --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-sw-sd,
1557
+ var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-sw-sd)
1558
+ )
1559
+ );
1560
+ --_sf-cd-sw-cr: var(
1561
+ --_ctm-mob-dn-on-ve-gp-ds-cd-sd-se-sw-cr,
1562
+ var(
1563
+ --_ctm-tab-dn-on-ve-gp-ds-cd-sd-se-sw-cr,
1564
+ var(--_ctm-dn-on-ve-gp-ds-cd-sd-se-sw-cr)
1565
+ )
1566
+ );
1567
+ }
1281
1568
 
1282
1569
  .grouped__group__header {
1283
1570
  display: flex;