@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.74

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 (135) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2143 -1661
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/builderLite.js +1 -1
  16. package/dist/bulk-variant-picker.scss +2027 -1128
  17. package/dist/bundle.scss +1477 -841
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +103 -79
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1012 -481
  23. package/dist/cart-summary.scss +1149 -557
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +735 -416
  27. package/dist/category-groups-element.scss +108 -127
  28. package/dist/category-groups-product-grid.scss +147 -120
  29. package/dist/category-groups-product-image.scss +1457 -1162
  30. package/dist/category-groups-product-options.scss +680 -613
  31. package/dist/category-groups-product-price.scss +3244 -1966
  32. package/dist/category-groups-quota-details.scss +464 -210
  33. package/dist/category.scss +50 -26
  34. package/dist/checkout.scss +16 -24
  35. package/dist/confirm-modal.scss +2 -22
  36. package/dist/container.scss +54 -32
  37. package/dist/countdown.scss +443 -255
  38. package/dist/coupon.scss +710 -351
  39. package/dist/default-dropdown.scss +1 -12
  40. package/dist/embroider-template-1-v2.scss +172 -123
  41. package/dist/embroider-template-1.scss +104 -68
  42. package/dist/embroidery.scss +31 -30
  43. package/dist/employee-bulk-order.scss +142 -418
  44. package/dist/faq.scss +408 -228
  45. package/dist/filter-results.scss +265 -125
  46. package/dist/filters.scss +1797 -900
  47. package/dist/gallery-slider-temp.scss +750 -432
  48. package/dist/global-styles.scss +7 -23
  49. package/dist/grid.scss +33 -25
  50. package/dist/hotspot.scss +115 -68
  51. package/dist/image-temp.scss +20 -21
  52. package/dist/item-stock.scss +16 -9
  53. package/dist/kitDetails.scss +4301 -2721
  54. package/dist/kits.scss +19 -24
  55. package/dist/language-selector.scss +361 -211
  56. package/dist/last-x-orders.scss +174 -95
  57. package/dist/layouter-item.scss +103 -75
  58. package/dist/layouter-pro-item.scss +95 -89
  59. package/dist/layouter-pro.scss +92 -87
  60. package/dist/layouter.scss +445 -383
  61. package/dist/light-box-v2.scss +104 -89
  62. package/dist/login.scss +566 -287
  63. package/dist/map.scss +368 -221
  64. package/dist/marchandiserSets.scss +104 -95
  65. package/dist/mega-menu-container.scss +109 -96
  66. package/dist/mega-menu.scss +731 -624
  67. package/dist/menu-item.scss +2 -2
  68. package/dist/menu-v2.scss +619 -507
  69. package/dist/multi-select-dropdown.scss +3 -27
  70. package/dist/my-templates.scss +9 -38
  71. package/dist/option-bar.scss +375 -215
  72. package/dist/option-families.scss +252 -0
  73. package/dist/order-status.scss +1117 -646
  74. package/dist/overflow-module.scss +7 -6
  75. package/dist/past-orders.scss +149 -118
  76. package/dist/payment-methods.scss +30 -46
  77. package/dist/pickup-locations.scss +1118 -558
  78. package/dist/position-module.scss +17 -20
  79. package/dist/prefix-list.scss +10 -21
  80. package/dist/product-actions.scss +2316 -1610
  81. package/dist/product-basic-elements.scss +169 -108
  82. package/dist/product-highlights.scss +152 -107
  83. package/dist/product-image-bundles.scss +642 -337
  84. package/dist/product-inventory.scss +1357 -673
  85. package/dist/product-labels.scss +105 -84
  86. package/dist/product-options.scss +1274 -1117
  87. package/dist/product-price.scss +2561 -1283
  88. package/dist/product-promotions.scss +2830 -1388
  89. package/dist/product-sizechart.scss +905 -516
  90. package/dist/product.scss +61 -28
  91. package/dist/productDetails.scss +39 -19
  92. package/dist/profile.scss +447 -207
  93. package/dist/quantity-selector.scss +550 -313
  94. package/dist/quick-inventory-check.scss +174 -95
  95. package/dist/quick-links.scss +133 -55
  96. package/dist/quick-order-pad.scss +271 -218
  97. package/dist/quota-details.scss +282 -152
  98. package/dist/quotes.scss +122 -89
  99. package/dist/repeater-embla-controls.scss +15 -35
  100. package/dist/repeater-grid-toggle.scss +166 -156
  101. package/dist/repeater-item.scss +64 -41
  102. package/dist/repeater.scss +814 -671
  103. package/dist/request-for-quotes.scss +16 -66
  104. package/dist/responsive-behaviour.scss +1 -3
  105. package/dist/rfqs.scss +181 -118
  106. package/dist/scroll.scss +172 -93
  107. package/dist/search.scss +326 -179
  108. package/dist/section.scss +51 -27
  109. package/dist/shipping-payments.scss +58 -198
  110. package/dist/simple-list.scss +164 -74
  111. package/dist/social.scss +145 -80
  112. package/dist/sort.scss +19 -11
  113. package/dist/stack.scss +34 -23
  114. package/dist/static-global.scss +26 -44
  115. package/dist/stockStatus.scss +19 -11
  116. package/dist/store-locations.scss +1105 -577
  117. package/dist/tab-container.scss +108 -81
  118. package/dist/table-common.scss +408 -217
  119. package/dist/table.scss +502 -271
  120. package/dist/text-temp.scss +7 -8
  121. package/dist/theme-classes.scss +13 -17
  122. package/dist/types/builder/enums/data-connectors.d.ts +3 -1
  123. package/dist/types/builder/enums/index.d.ts +3 -1
  124. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  125. package/dist/types/builder/tools/element-edit/optionFamilies.d.ts +20 -0
  126. package/dist/types/website/constants/data-connector-souces.d.ts +40 -8
  127. package/dist/types/website/constants/data-connectors.d.ts +12 -1
  128. package/dist/types/website/helper/ssr-functions.d.ts +8 -0
  129. package/dist/uom-selector.scss +949 -489
  130. package/dist/user-elements.scss +837 -529
  131. package/dist/variant-picker.scss +2555 -1281
  132. package/dist/volume-pricing.scss +1037 -541
  133. package/dist/website.js +1 -1
  134. package/dist/widget.scss +1 -0
  135. package/package.json +1 -1
package/dist/filters.scss CHANGED
@@ -4,15 +4,21 @@
4
4
 
5
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
6
6
  $resizeActive: '[data-cms-element-resizer="true"]';
7
-
8
7
  [data-div-type="element"] {
9
8
  &[data-element-type="filters"] {
10
- width: var(--_sf-el-wh-st-mx,
11
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
12
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% *
13
+ var(
14
+ --_ctm-mob-ele-nw-wh-vl,
15
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
+ )
17
+ )
18
+ );
13
19
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
14
20
 
15
- &>div {
21
+ & > div {
16
22
  &.wrapper {
17
23
  width: 100%;
18
24
  }
@@ -20,12 +26,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
20
26
 
21
27
  &[data-widget-border="true"] {
22
28
  .filter_container {
23
- border-color: var(--_ctm-mob-dn-fs-wt-br-cr,
24
- var(--_ctm-tab-dn-fs-wt-br-cr, var(--_ctm-dn-fs-wt-br-cr)));
25
- border-style: var(--_ctm-mob-dn-fs-wt-br-se,
26
- var(--_ctm-tab-dn-fs-wt-br-se, var(--_ctm-dn-fs-wt-br-se)));
27
- border-width: var(--_ctm-mob-dn-fs-wt-br-wh,
28
- var(--_ctm-tab-dn-fs-wt-br-wh, var(--_ctm-dn-fs-wt-br-wh)));
29
+ border-color: var(
30
+ --_ctm-mob-dn-fs-wt-br-cr,
31
+ var(--_ctm-tab-dn-fs-wt-br-cr, var(--_ctm-dn-fs-wt-br-cr))
32
+ );
33
+ border-style: var(
34
+ --_ctm-mob-dn-fs-wt-br-se,
35
+ var(--_ctm-tab-dn-fs-wt-br-se, var(--_ctm-dn-fs-wt-br-se))
36
+ );
37
+ border-width: var(
38
+ --_ctm-mob-dn-fs-wt-br-wh,
39
+ var(--_ctm-tab-dn-fs-wt-br-wh, var(--_ctm-dn-fs-wt-br-wh))
40
+ );
29
41
  }
30
42
  }
31
43
 
@@ -39,14 +51,20 @@ $resizeActive: '[data-cms-element-resizer="true"]';
39
51
 
40
52
  &[data-clear-all-text-border="true"] {
41
53
  .filter_container .filter__inline .filter__Header {
42
- border-color: var(--_ctm-mob-dn-cr-al-tt-dt-se-br-cr,
43
- var(--_ctm-tab-dn-cr-al-tt-dt-se-br-cr, var(--_ctm-dn-cr-al-tt-dt-se-br-cr)));
44
-
45
- border-style: var(--_ctm-mob-dn-cr-al-tt-dt-se-br-se,
46
- var(--_ctm-tab-dn-cr-al-tt-dt-se-br-se, var(--_ctm-dn-cr-al-tt-dt-se-br-se)));
47
-
48
- border-width: var(--_ctm-mob-dn-cr-al-tt-dt-se-br-wh,
49
- var(--_ctm-tab-dn-cr-al-tt-dt-se-br-wh, var(--_ctm-dn-cr-al-tt-dt-se-br-wh)));
54
+ border-color: var(
55
+ --_ctm-mob-dn-cr-al-tt-dt-se-br-cr,
56
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-br-cr, var(--_ctm-dn-cr-al-tt-dt-se-br-cr))
57
+ );
58
+
59
+ border-style: var(
60
+ --_ctm-mob-dn-cr-al-tt-dt-se-br-se,
61
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-br-se, var(--_ctm-dn-cr-al-tt-dt-se-br-se))
62
+ );
63
+
64
+ border-width: var(
65
+ --_ctm-mob-dn-cr-al-tt-dt-se-br-wh,
66
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-br-wh, var(--_ctm-dn-cr-al-tt-dt-se-br-wh))
67
+ );
50
68
  }
51
69
  }
52
70
 
@@ -54,14 +72,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
54
72
  width: 100%;
55
73
  //Filter Features Starts
56
74
  // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
57
- background-color: var(--_ctm-mob-dn-fs-wt-bd-cr,
58
- var(--_ctm-tab-dn-fs-wt-bd-cr, var(--_ctm-dn-fs-wt-bd-cr)));
59
- box-shadow: var(--_show-shadow,
60
- var(--_ctm-mob-dn-fs-wt-sw-ae, var(--_ctm-tab-dn-fs-wt-sw-ae, var(--_ctm-dn-fs-wt-sw-ae))) var(--_ctm-mob-dn-fs-wt-sw-br, var(--_ctm-tab-dn-fs-wt-sw-br, var(--_ctm-dn-fs-wt-sw-br))) var(--_ctm-mob-dn-fs-wt-sw-sd, var(--_ctm-tab-dn-fs-wt-sw-sd, var(--_ctm-dn-fs-wt-sw-sd))) var(--_ctm-mob-dn-fs-wt-sw-cr, var(--_ctm-tab-dn-fs-wt-sw-cr, var(--_ctm-dn-fs-wt-sw-cr))));
61
- border-radius: var(--_ctm-mob-dn-fs-wt-br-rs,
62
- var(--_ctm-tab-dn-fs-wt-br-rs, var(--_ctm-dn-fs-wt-br-rs)));
75
+ background-color: var(
76
+ --_ctm-mob-dn-fs-wt-bd-cr,
77
+ var(--_ctm-tab-dn-fs-wt-bd-cr, var(--_ctm-dn-fs-wt-bd-cr))
78
+ );
79
+ box-shadow: var(
80
+ --_show-shadow,
81
+ var(--_ctm-mob-dn-fs-wt-sw-ae, var(--_ctm-tab-dn-fs-wt-sw-ae, var(--_ctm-dn-fs-wt-sw-ae)))
82
+ var(--_ctm-mob-dn-fs-wt-sw-br, var(--_ctm-tab-dn-fs-wt-sw-br, var(--_ctm-dn-fs-wt-sw-br)))
83
+ var(--_ctm-mob-dn-fs-wt-sw-sd, var(--_ctm-tab-dn-fs-wt-sw-sd, var(--_ctm-dn-fs-wt-sw-sd)))
84
+ var(--_ctm-mob-dn-fs-wt-sw-cr, var(--_ctm-tab-dn-fs-wt-sw-cr, var(--_ctm-dn-fs-wt-sw-cr)))
85
+ );
86
+ border-radius: var(
87
+ --_ctm-mob-dn-fs-wt-br-rs,
88
+ var(--_ctm-tab-dn-fs-wt-br-rs, var(--_ctm-dn-fs-wt-br-rs))
89
+ );
63
90
  overflow: clip;
64
-
65
91
  // max-height: prepareMediaVariable(--_ctm-lt-ht, auto);
66
92
  // overflow-y: auto;
67
93
  @mixin flex($justifyItems: flex-start, $alignItems: center) {
@@ -83,16 +109,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
83
109
  display: flex;
84
110
  flex-direction: column;
85
111
  padding-block: 12px;
86
-
87
112
  // padding-right: 10px;
88
113
  &.divider_filter {
89
114
  border-bottom: 1px solid var(--_thm-cs-be-se-3);
90
115
  }
91
-
92
116
  &:last-child {
93
117
  border-bottom: none !important;
94
118
  }
95
-
96
119
  .filter__Header {
97
120
  display: flex;
98
121
  justify-content: space-between;
@@ -104,39 +127,70 @@ $resizeActive: '[data-cms-element-resizer="true"]';
104
127
  font-weight: var(--_fw-600);
105
128
  text-transform: uppercase;
106
129
  }
107
-
108
130
  h3 {
109
131
  // font-size: 14px;
110
132
  // text-transform: uppercase;
111
133
 
112
- color: var(--_ctm-mob-dn-fs-wt-cr,
113
- var(--_ctm-tab-dn-fs-wt-cr, var(--_ctm-dn-fs-wt-cr)));
114
- font-family: var(--_sf-hr-ff,
115
- var(--_ctm-mob-dn-fs-wt-ft-fy,
116
- var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy))));
117
- text-transform: var(--_sf-hr-tt-tm,
118
- var(--_ctm-mob-dn-fs-wt-tt-tm,
119
- var(--_ctm-tab-dn-fs-wt-tt-tm, var(--_ctm-dn-fs-wt-tt-tm))));
120
- word-wrap: var(--_sf-hr-wd-wp,
121
- var(--_ctm-mob-dn-fs-wt-wd-wp,
122
- var(--_ctm-tab-dn-fs-wt-wd-wp, var(--_ctm-dn-fs-wt-wd-wp))));
123
- word-break: var(--_sf-hr-wd-bk,
124
- var(--_ctm-mob-dn-fs-wt-wd-bk,
125
- var(--_ctm-tab-dn-fs-wt-wd-bk, var(--_ctm-dn-fs-wt-wd-bk))));
126
- font-size: var(--_ctm-mob-dn-fs-wt-ft-se,
127
- var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se)));
128
- font-weight: var(--_ctm-mob-dn-fs-wt-ft-wt,
129
- var(--_ctm-tab-dn-fs-wt-ft-wt, var(--_ctm-dn-fs-wt-ft-wt)));
130
- font-style: var(--_ctm-mob-dn-fs-wt-ft-se-ic,
131
- var(--_ctm-tab-dn-fs-wt-ft-se-ic, var(--_ctm-dn-fs-wt-ft-se-ic)));
132
- text-align: var(--_ctm-mob-dn-fs-wt-tt-an,
133
- var(--_ctm-tab-dn-fs-wt-tt-an, var(--_ctm-dn-fs-wt-tt-an)));
134
- letter-spacing: var(--_ctm-mob-dn-fs-wt-lr-sg,
135
- var(--_ctm-tab-dn-fs-wt-lr-sg, var(--_ctm-dn-fs-wt-lr-sg)));
136
- line-height: var(--_ctm-mob-dn-fs-wt-le-ht,
137
- var(--_ctm-tab-dn-fs-wt-le-ht, var(--_ctm-dn-fs-wt-le-ht)));
138
- text-decoration: var(--_ctm-mob-dn-fs-wt-ue,
139
- var(--_ctm-tab-dn-fs-wt-ue, var(--_ctm-dn-fs-wt-ue)));
134
+ color: var(
135
+ --_ctm-mob-dn-fs-wt-cr,
136
+ var(--_ctm-tab-dn-fs-wt-cr, var(--_ctm-dn-fs-wt-cr))
137
+ );
138
+ font-family: var(
139
+ --_sf-hr-ff,
140
+ var(
141
+ --_ctm-mob-dn-fs-wt-ft-fy,
142
+ var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy))
143
+ )
144
+ );
145
+ text-transform: var(
146
+ --_sf-hr-tt-tm,
147
+ var(
148
+ --_ctm-mob-dn-fs-wt-tt-tm,
149
+ var(--_ctm-tab-dn-fs-wt-tt-tm, var(--_ctm-dn-fs-wt-tt-tm))
150
+ )
151
+ );
152
+ word-wrap: var(
153
+ --_sf-hr-wd-wp,
154
+ var(
155
+ --_ctm-mob-dn-fs-wt-wd-wp,
156
+ var(--_ctm-tab-dn-fs-wt-wd-wp, var(--_ctm-dn-fs-wt-wd-wp))
157
+ )
158
+ );
159
+ word-break: var(
160
+ --_sf-hr-wd-bk,
161
+ var(
162
+ --_ctm-mob-dn-fs-wt-wd-bk,
163
+ var(--_ctm-tab-dn-fs-wt-wd-bk, var(--_ctm-dn-fs-wt-wd-bk))
164
+ )
165
+ );
166
+ font-size: var(
167
+ --_ctm-mob-dn-fs-wt-ft-se,
168
+ var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se))
169
+ );
170
+ font-weight: var(
171
+ --_ctm-mob-dn-fs-wt-ft-wt,
172
+ var(--_ctm-tab-dn-fs-wt-ft-wt, var(--_ctm-dn-fs-wt-ft-wt))
173
+ );
174
+ font-style: var(
175
+ --_ctm-mob-dn-fs-wt-ft-se-ic,
176
+ var(--_ctm-tab-dn-fs-wt-ft-se-ic, var(--_ctm-dn-fs-wt-ft-se-ic))
177
+ );
178
+ text-align: var(
179
+ --_ctm-mob-dn-fs-wt-tt-an,
180
+ var(--_ctm-tab-dn-fs-wt-tt-an, var(--_ctm-dn-fs-wt-tt-an))
181
+ );
182
+ letter-spacing: var(
183
+ --_ctm-mob-dn-fs-wt-lr-sg,
184
+ var(--_ctm-tab-dn-fs-wt-lr-sg, var(--_ctm-dn-fs-wt-lr-sg))
185
+ );
186
+ line-height: var(
187
+ --_ctm-mob-dn-fs-wt-le-ht,
188
+ var(--_ctm-tab-dn-fs-wt-le-ht, var(--_ctm-dn-fs-wt-le-ht))
189
+ );
190
+ text-decoration: var(
191
+ --_ctm-mob-dn-fs-wt-ue,
192
+ var(--_ctm-tab-dn-fs-wt-ue, var(--_ctm-dn-fs-wt-ue))
193
+ );
140
194
  }
141
195
 
142
196
  .reset__btn {
@@ -147,97 +201,176 @@ $resizeActive: '[data-cms-element-resizer="true"]';
147
201
  // &:hover {
148
202
  // color: var(--_primary-700);
149
203
  // }
150
- background-color: var(--_ctm-mob-dn-cr-al-tt-dt-se-bd-cr,
151
- var(--_ctm-tab-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-dn-cr-al-tt-dt-se-bd-cr)));
204
+ background-color: var(
205
+ --_ctm-mob-dn-cr-al-tt-dt-se-bd-cr,
206
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-dn-cr-al-tt-dt-se-bd-cr))
207
+ );
152
208
  // Border of the Clear All button. The section has carried border colour,
153
209
  // style, width and the Show Border toggle all along, but this rule read
154
210
  // none of them, so the whole Border tab did nothing.
155
211
  border-color: prepareMediaVariable(--_ctm-dn-cr-al-tt-dt-se-br-cr, transparent);
156
212
  border-style: prepareMediaVariable(--_ctm-dn-cr-al-tt-dt-se-br-se, solid);
157
213
  border-width: prepareMediaVariable(--_ctm-dn-cr-al-tt-dt-se-br-wh, 0);
158
-
159
214
  &[data-clear-all-text-border="false"] {
160
215
  border: none;
161
216
  }
162
-
163
217
  // Text Overflow clamps to N lines; the renderer adds the class and
164
218
  // publishes the count as --_sf-line-clamp.
165
219
  &.flex__overflow {
166
220
  white-space: normal;
167
221
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
168
222
  }
169
-
170
- border-radius: var(--_ctm-mob-dn-cr-al-tt-dt-se-br-rs,
171
- var(--_ctm-tab-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-dn-cr-al-tt-dt-se-br-rs)));
172
- padding: var(--_ctm-mob-dn-cr-al-tt-dt-se-pg,
173
- var(--_ctm-tab-dn-cr-al-tt-dt-se-pg, var(--_ctm-dn-cr-al-tt-dt-se-pg)));
174
- box-shadow: var(--_show-shadow-clear-all,
175
- var(--_ctm-mob-dn-cr-al-tt-dt-se-sw-ae,
176
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-dn-cr-al-tt-dt-se-sw-ae))) var(--_ctm-mob-dn-cr-al-tt-dt-se-sw-br,
177
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-dn-cr-al-tt-dt-se-sw-br))) var(--_ctm-mob-dn-cr-al-tt-dt-se-sw-sd,
178
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-dn-cr-al-tt-dt-se-sw-sd))) var(--_ctm-mob-dn-cr-al-tt-dt-se-sw-cr,
179
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-dn-cr-al-tt-dt-se-sw-cr))));
180
-
181
- color: var(--_ctm-mob-dn-cr-al-tt-dt-se-cr,
182
- var(--_ctm-tab-dn-cr-al-tt-dt-se-cr, var(--_ctm-dn-cr-al-tt-dt-se-cr)));
183
- font-family: var(--_sf-hr-ff,
184
- var(--_ctm-mob-dn-cr-al-tt-dt-se-ft-fy,
185
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy))));
186
- text-transform: var(--_sf-hr-tt-tm,
187
- var(--_ctm-mob-dn-cr-al-tt-dt-se-tt-tm,
188
- var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-tm, var(--_ctm-dn-cr-al-tt-dt-se-tt-tm))));
189
- word-wrap: var(--_sf-hr-wd-wp,
190
- var(--_ctm-mob-dn-cr-al-tt-dt-se-wd-wp,
191
- var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-wp, var(--_ctm-dn-cr-al-tt-dt-se-wd-wp))));
192
- word-break: var(--_sf-hr-wd-bk,
193
- var(--_ctm-mob-dn-cr-al-tt-dt-se-wd-bk,
194
- var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-bk, var(--_ctm-dn-cr-al-tt-dt-se-wd-bk))));
195
- font-size: var(--_ctm-mob-dn-cr-al-tt-dt-se-ft-se,
196
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se)));
197
- font-weight: var(--_ctm-mob-dn-cr-al-tt-dt-se-ft-wt,
198
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-dn-cr-al-tt-dt-se-ft-wt)));
199
- font-style: var(--_ctm-mob-dn-cr-al-tt-dt-se-ft-se-ic,
200
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-dn-cr-al-tt-dt-se-ft-se-ic)));
201
- text-align: var(--_ctm-mob-dn-cr-al-tt-dt-se-tt-an,
202
- var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-dn-cr-al-tt-dt-se-tt-an)));
203
- letter-spacing: var(--_ctm-mob-dn-cr-al-tt-dt-se-lr-sg,
204
- var(--_ctm-tab-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-dn-cr-al-tt-dt-se-lr-sg)));
205
- line-height: var(--_ctm-mob-dn-cr-al-tt-dt-se-le-ht,
206
- var(--_ctm-tab-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-dn-cr-al-tt-dt-se-le-ht)));
207
- text-decoration: var(--_ctm-mob-dn-cr-al-tt-dt-se-ue,
208
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ue, var(--_ctm-dn-cr-al-tt-dt-se-ue)));
223
+ border-radius: var(
224
+ --_ctm-mob-dn-cr-al-tt-dt-se-br-rs,
225
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-dn-cr-al-tt-dt-se-br-rs))
226
+ );
227
+ padding: var(
228
+ --_ctm-mob-dn-cr-al-tt-dt-se-pg,
229
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-pg, var(--_ctm-dn-cr-al-tt-dt-se-pg))
230
+ );
231
+ box-shadow: var(
232
+ --_show-shadow-clear-all,
233
+ var(
234
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-ae,
235
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-dn-cr-al-tt-dt-se-sw-ae))
236
+ )
237
+ var(
238
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-br,
239
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-dn-cr-al-tt-dt-se-sw-br))
240
+ )
241
+ var(
242
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-sd,
243
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-dn-cr-al-tt-dt-se-sw-sd))
244
+ )
245
+ var(
246
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-cr,
247
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-dn-cr-al-tt-dt-se-sw-cr))
248
+ )
249
+ );
250
+
251
+ color: var(
252
+ --_ctm-mob-dn-cr-al-tt-dt-se-cr,
253
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-cr, var(--_ctm-dn-cr-al-tt-dt-se-cr))
254
+ );
255
+ font-family: var(
256
+ --_sf-hr-ff,
257
+ var(
258
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-fy,
259
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy))
260
+ )
261
+ );
262
+ text-transform: var(
263
+ --_sf-hr-tt-tm,
264
+ var(
265
+ --_ctm-mob-dn-cr-al-tt-dt-se-tt-tm,
266
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-tm, var(--_ctm-dn-cr-al-tt-dt-se-tt-tm))
267
+ )
268
+ );
269
+ word-wrap: var(
270
+ --_sf-hr-wd-wp,
271
+ var(
272
+ --_ctm-mob-dn-cr-al-tt-dt-se-wd-wp,
273
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-wp, var(--_ctm-dn-cr-al-tt-dt-se-wd-wp))
274
+ )
275
+ );
276
+ word-break: var(
277
+ --_sf-hr-wd-bk,
278
+ var(
279
+ --_ctm-mob-dn-cr-al-tt-dt-se-wd-bk,
280
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-bk, var(--_ctm-dn-cr-al-tt-dt-se-wd-bk))
281
+ )
282
+ );
283
+ font-size: var(
284
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-se,
285
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se))
286
+ );
287
+ font-weight: var(
288
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-wt,
289
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-dn-cr-al-tt-dt-se-ft-wt))
290
+ );
291
+ font-style: var(
292
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-se-ic,
293
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-dn-cr-al-tt-dt-se-ft-se-ic))
294
+ );
295
+ text-align: var(
296
+ --_ctm-mob-dn-cr-al-tt-dt-se-tt-an,
297
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-dn-cr-al-tt-dt-se-tt-an))
298
+ );
299
+ letter-spacing: var(
300
+ --_ctm-mob-dn-cr-al-tt-dt-se-lr-sg,
301
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-dn-cr-al-tt-dt-se-lr-sg))
302
+ );
303
+ line-height: var(
304
+ --_ctm-mob-dn-cr-al-tt-dt-se-le-ht,
305
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-dn-cr-al-tt-dt-se-le-ht))
306
+ );
307
+ text-decoration: var(
308
+ --_ctm-mob-dn-cr-al-tt-dt-se-ue,
309
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ue, var(--_ctm-dn-cr-al-tt-dt-se-ue))
310
+ );
209
311
  }
210
312
  }
211
-
212
313
  p {
213
- color: var(--_ctm-mob-dn-fs-wt-cr-dc,
214
- var(--_ctm-tab-dn-fs-wt-cr-dc, var(--_ctm-dn-fs-wt-cr-dc)));
215
- font-family: var(--_sf-hr-ff,
216
- var(--_ctm-mob-dn-fs-wt-ft-fy-dc,
217
- var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc))));
218
- text-transform: var(--_sf-hr-tt-tm,
219
- var(--_ctm-mob-dn-fs-wt-tt-tm-dc,
220
- var(--_ctm-tab-dn-fs-wt-tt-tm-dc, var(--_ctm-dn-fs-wt-tt-tm-dc))));
221
- word-wrap: var(--_sf-hr-wd-wp,
222
- var(--_ctm-mob-dn-fs-wt-wd-wp-dc,
223
- var(--_ctm-tab-dn-fs-wt-wd-wp-dc, var(--_ctm-dn-fs-wt-wd-wp-dc))));
224
- word-break: var(--_sf-hr-wd-bk,
225
- var(--_ctm-mob-dn-fs-wt-wd-bk-dc,
226
- var(--_ctm-tab-dn-fs-wt-wd-bk-dc, var(--_ctm-dn-fs-wt-wd-bk-dc))));
227
- font-size: var(--_ctm-mob-dn-fs-wt-ft-se-dc,
228
- var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc)));
229
- font-weight: var(--_ctm-mob-dn-fs-wt-ft-wt-dc,
230
- var(--_ctm-tab-dn-fs-wt-ft-wt-dc, var(--_ctm-dn-fs-wt-ft-wt-dc)));
231
- font-style: var(--_ctm-mob-dn-fs-wt-ft-se-ic-dc,
232
- var(--_ctm-tab-dn-fs-wt-ft-se-ic-dc, var(--_ctm-dn-fs-wt-ft-se-ic-dc)));
233
- text-align: var(--_ctm-mob-dn-fs-wt-tt-an-dc,
234
- var(--_ctm-tab-dn-fs-wt-tt-an-dc, var(--_ctm-dn-fs-wt-tt-an-dc)));
235
- letter-spacing: var(--_ctm-mob-dn-fs-wt-lr-sg-dc,
236
- var(--_ctm-tab-dn-fs-wt-lr-sg-dc, var(--_ctm-dn-fs-wt-lr-sg-dc)));
237
- line-height: var(--_ctm-mob-dn-fs-wt-le-ht-dc,
238
- var(--_ctm-tab-dn-fs-wt-le-ht-dc, var(--_ctm-dn-fs-wt-le-ht-dc)));
239
- text-decoration: var(--_ctm-mob-dn-fs-wt-ue-dc,
240
- var(--_ctm-tab-dn-fs-wt-ue-dc, var(--_ctm-dn-fs-wt-ue-dc)));
314
+ color: var(
315
+ --_ctm-mob-dn-fs-wt-cr-dc,
316
+ var(--_ctm-tab-dn-fs-wt-cr-dc, var(--_ctm-dn-fs-wt-cr-dc))
317
+ );
318
+ font-family: var(
319
+ --_sf-hr-ff,
320
+ var(
321
+ --_ctm-mob-dn-fs-wt-ft-fy-dc,
322
+ var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc))
323
+ )
324
+ );
325
+ text-transform: var(
326
+ --_sf-hr-tt-tm,
327
+ var(
328
+ --_ctm-mob-dn-fs-wt-tt-tm-dc,
329
+ var(--_ctm-tab-dn-fs-wt-tt-tm-dc, var(--_ctm-dn-fs-wt-tt-tm-dc))
330
+ )
331
+ );
332
+ word-wrap: var(
333
+ --_sf-hr-wd-wp,
334
+ var(
335
+ --_ctm-mob-dn-fs-wt-wd-wp-dc,
336
+ var(--_ctm-tab-dn-fs-wt-wd-wp-dc, var(--_ctm-dn-fs-wt-wd-wp-dc))
337
+ )
338
+ );
339
+ word-break: var(
340
+ --_sf-hr-wd-bk,
341
+ var(
342
+ --_ctm-mob-dn-fs-wt-wd-bk-dc,
343
+ var(--_ctm-tab-dn-fs-wt-wd-bk-dc, var(--_ctm-dn-fs-wt-wd-bk-dc))
344
+ )
345
+ );
346
+ font-size: var(
347
+ --_ctm-mob-dn-fs-wt-ft-se-dc,
348
+ var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc))
349
+ );
350
+ font-weight: var(
351
+ --_ctm-mob-dn-fs-wt-ft-wt-dc,
352
+ var(--_ctm-tab-dn-fs-wt-ft-wt-dc, var(--_ctm-dn-fs-wt-ft-wt-dc))
353
+ );
354
+ font-style: var(
355
+ --_ctm-mob-dn-fs-wt-ft-se-ic-dc,
356
+ var(--_ctm-tab-dn-fs-wt-ft-se-ic-dc, var(--_ctm-dn-fs-wt-ft-se-ic-dc))
357
+ );
358
+ text-align: var(
359
+ --_ctm-mob-dn-fs-wt-tt-an-dc,
360
+ var(--_ctm-tab-dn-fs-wt-tt-an-dc, var(--_ctm-dn-fs-wt-tt-an-dc))
361
+ );
362
+ letter-spacing: var(
363
+ --_ctm-mob-dn-fs-wt-lr-sg-dc,
364
+ var(--_ctm-tab-dn-fs-wt-lr-sg-dc, var(--_ctm-dn-fs-wt-lr-sg-dc))
365
+ );
366
+ line-height: var(
367
+ --_ctm-mob-dn-fs-wt-le-ht-dc,
368
+ var(--_ctm-tab-dn-fs-wt-le-ht-dc, var(--_ctm-dn-fs-wt-le-ht-dc))
369
+ );
370
+ text-decoration: var(
371
+ --_ctm-mob-dn-fs-wt-ue-dc,
372
+ var(--_ctm-tab-dn-fs-wt-ue-dc, var(--_ctm-dn-fs-wt-ue-dc))
373
+ );
241
374
  }
242
375
 
243
376
  .selected__items {
@@ -245,7 +378,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
245
378
  flex-wrap: wrap;
246
379
  gap: 10px;
247
380
  align-items: center;
248
-
249
381
  // margin-top: 10px;
250
382
  .selected__category {
251
383
  display: flex;
@@ -261,7 +393,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
261
393
  flex-wrap: nowrap;
262
394
  align-items: flex-start;
263
395
  }
264
-
265
396
  // .selected_item {
266
397
  // display: flex;
267
398
  // gap: 8px;
@@ -286,151 +417,299 @@ $resizeActive: '[data-cms-element-resizer="true"]';
286
417
  transition:
287
418
  background-color 400ms,
288
419
  border-color 400ms ease-in-out;
289
- background-color: var(--_sf-hr-bd-cr,
290
- var(--_ctm-mob-dn-sd-im-dt-se-bd-cr,
291
- var(--_ctm-tab-dn-sd-im-dt-se-bd-cr, var(--_ctm-dn-sd-im-dt-se-bd-cr))));
292
- border-radius: var(--_sf-hr-br-br,
293
- var(--_ctm-mob-dn-sd-im-dt-se-br-rs,
294
- var(--_ctm-tab-dn-sd-im-dt-se-br-rs, var(--_ctm-dn-sd-im-dt-se-br-rs))));
295
- padding: var(--_sf-hr-sd-im-pg,
296
- var(--_ctm-mob-dn-sd-im-dt-se-pg,
297
- var(--_ctm-tab-dn-sd-im-dt-se-pg, var(--_ctm-dn-sd-im-dt-se-pg))));
298
- box-shadow: var(--_hover-show-shadow,
299
- var(--_sf-hr-bx-sw,
300
- var(--_show-shadow,
301
- var(--_ctm-mob-dn-sd-im-dt-se-sw-ae,
302
- var(--_ctm-tab-dn-sd-im-dt-se-sw-ae, var(--_ctm-dn-sd-im-dt-se-sw-ae))) var(--_ctm-mob-dn-sd-im-dt-se-sw-br,
303
- var(--_ctm-tab-dn-sd-im-dt-se-sw-br, var(--_ctm-dn-sd-im-dt-se-sw-br))) var(--_ctm-mob-dn-sd-im-dt-se-sw-sd,
304
- var(--_ctm-tab-dn-sd-im-dt-se-sw-sd, var(--_ctm-dn-sd-im-dt-se-sw-sd))) var(--_ctm-mob-dn-sd-im-dt-se-sw-cr,
305
- var(--_ctm-tab-dn-sd-im-dt-se-sw-cr, var(--_ctm-dn-sd-im-dt-se-sw-cr))))));
306
-
307
- color: var(--_sf-hr-fc,
308
- var(--_ctm-mob-dn-sd-im-dt-se-cr,
309
- var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr))));
310
- font-family: var(--_sf-hr-ff,
311
- var(--_ctm-mob-dn-sd-im-dt-se-ft-fy,
312
- var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy))));
313
- text-transform: var(--_sf-hr-tt-tm,
314
- var(--_ctm-mob-dn-sd-im-dt-se-tt-tm,
315
- var(--_ctm-tab-dn-sd-im-dt-se-tt-tm, var(--_ctm-dn-sd-im-dt-se-tt-tm))));
316
- word-wrap: var(--_sf-hr-wd-wp,
317
- var(--_ctm-mob-dn-sd-im-dt-se-wd-wp,
318
- var(--_ctm-tab-dn-sd-im-dt-se-wd-wp, var(--_ctm-dn-sd-im-dt-se-wd-wp))));
319
- word-break: var(--_sf-hr-wd-bk,
320
- var(--_ctm-mob-dn-sd-im-dt-se-wd-bk,
321
- var(--_ctm-tab-dn-sd-im-dt-se-wd-bk, var(--_ctm-dn-sd-im-dt-se-wd-bk))));
322
-
420
+ background-color: var(
421
+ --_sf-hr-bd-cr,
422
+ var(
423
+ --_ctm-mob-dn-sd-im-dt-se-bd-cr,
424
+ var(--_ctm-tab-dn-sd-im-dt-se-bd-cr, var(--_ctm-dn-sd-im-dt-se-bd-cr))
425
+ )
426
+ );
427
+ border-radius: var(
428
+ --_sf-hr-br-br,
429
+ var(
430
+ --_ctm-mob-dn-sd-im-dt-se-br-rs,
431
+ var(--_ctm-tab-dn-sd-im-dt-se-br-rs, var(--_ctm-dn-sd-im-dt-se-br-rs))
432
+ )
433
+ );
434
+ padding: var(
435
+ --_sf-hr-sd-im-pg,
436
+ var(
437
+ --_ctm-mob-dn-sd-im-dt-se-pg,
438
+ var(--_ctm-tab-dn-sd-im-dt-se-pg, var(--_ctm-dn-sd-im-dt-se-pg))
439
+ )
440
+ );
441
+ box-shadow: var(
442
+ --_hover-show-shadow,
443
+ var(
444
+ --_sf-hr-bx-sw,
445
+ var(
446
+ --_show-shadow,
447
+ var(
448
+ --_ctm-mob-dn-sd-im-dt-se-sw-ae,
449
+ var(--_ctm-tab-dn-sd-im-dt-se-sw-ae, var(--_ctm-dn-sd-im-dt-se-sw-ae))
450
+ )
451
+ var(
452
+ --_ctm-mob-dn-sd-im-dt-se-sw-br,
453
+ var(--_ctm-tab-dn-sd-im-dt-se-sw-br, var(--_ctm-dn-sd-im-dt-se-sw-br))
454
+ )
455
+ var(
456
+ --_ctm-mob-dn-sd-im-dt-se-sw-sd,
457
+ var(--_ctm-tab-dn-sd-im-dt-se-sw-sd, var(--_ctm-dn-sd-im-dt-se-sw-sd))
458
+ )
459
+ var(
460
+ --_ctm-mob-dn-sd-im-dt-se-sw-cr,
461
+ var(--_ctm-tab-dn-sd-im-dt-se-sw-cr, var(--_ctm-dn-sd-im-dt-se-sw-cr))
462
+ )
463
+ )
464
+ )
465
+ );
466
+
467
+ color: var(
468
+ --_sf-hr-fc,
469
+ var(
470
+ --_ctm-mob-dn-sd-im-dt-se-cr,
471
+ var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr))
472
+ )
473
+ );
474
+ font-family: var(
475
+ --_sf-hr-ff,
476
+ var(
477
+ --_ctm-mob-dn-sd-im-dt-se-ft-fy,
478
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy))
479
+ )
480
+ );
481
+ text-transform: var(
482
+ --_sf-hr-tt-tm,
483
+ var(
484
+ --_ctm-mob-dn-sd-im-dt-se-tt-tm,
485
+ var(--_ctm-tab-dn-sd-im-dt-se-tt-tm, var(--_ctm-dn-sd-im-dt-se-tt-tm))
486
+ )
487
+ );
488
+ word-wrap: var(
489
+ --_sf-hr-wd-wp,
490
+ var(
491
+ --_ctm-mob-dn-sd-im-dt-se-wd-wp,
492
+ var(--_ctm-tab-dn-sd-im-dt-se-wd-wp, var(--_ctm-dn-sd-im-dt-se-wd-wp))
493
+ )
494
+ );
495
+ word-break: var(
496
+ --_sf-hr-wd-bk,
497
+ var(
498
+ --_ctm-mob-dn-sd-im-dt-se-wd-bk,
499
+ var(--_ctm-tab-dn-sd-im-dt-se-wd-bk, var(--_ctm-dn-sd-im-dt-se-wd-bk))
500
+ )
501
+ );
323
502
  &.flex__overflow {
324
503
  white-space: normal;
325
504
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
326
505
  }
327
-
328
- font-size: var(--_sf-hr-fs,
329
- var(--_ctm-mob-dn-sd-im-dt-se-ft-se,
330
- var(--_ctm-tab-dn-sd-im-dt-se-ft-se, var(--_ctm-dn-sd-im-dt-se-ft-se))));
331
- font-weight: var(--_sf-hr-fw,
332
- var(--_ctm-mob-dn-sd-im-dt-se-ft-wt,
333
- var(--_ctm-tab-dn-sd-im-dt-se-ft-wt, var(--_ctm-dn-sd-im-dt-se-ft-wt))));
334
- font-style: var(--_sf-hr-ft,
335
- var(--_ctm-mob-dn-sd-im-dt-se-ft-se-ic,
336
- var(--_ctm-tab-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-dn-sd-im-dt-se-ft-se-ic))));
337
- text-align: var(--_sf-hr-ta,
338
- var(--_ctm-mob-dn-sd-im-dt-se-tt-an,
339
- var(--_ctm-tab-dn-sd-im-dt-se-tt-an, var(--_ctm-dn-sd-im-dt-se-tt-an))));
340
- letter-spacing: var(--_sf-hr-ls,
341
- var(--_ctm-mob-dn-sd-im-dt-se-lr-sg,
342
- var(--_ctm-tab-dn-sd-im-dt-se-lr-sg, var(--_ctm-dn-sd-im-dt-se-lr-sg))));
343
- line-height: var(--_sf-hr-lh,
344
- var(--_ctm-mob-dn-sd-im-dt-se-le-ht,
345
- var(--_ctm-tab-dn-sd-im-dt-se-le-ht, var(--_ctm-dn-sd-im-dt-se-le-ht))));
346
- text-decoration: var(--_sf-hr-tt-dn,
347
- var(--_ctm-mob-dn-sd-im-dt-se-ue,
348
- var(--_ctm-tab-dn-sd-im-dt-se-ue, var(--_ctm-dn-sd-im-dt-se-ue))));
349
-
506
+ font-size: var(
507
+ --_sf-hr-fs,
508
+ var(
509
+ --_ctm-mob-dn-sd-im-dt-se-ft-se,
510
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-se, var(--_ctm-dn-sd-im-dt-se-ft-se))
511
+ )
512
+ );
513
+ font-weight: var(
514
+ --_sf-hr-fw,
515
+ var(
516
+ --_ctm-mob-dn-sd-im-dt-se-ft-wt,
517
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-wt, var(--_ctm-dn-sd-im-dt-se-ft-wt))
518
+ )
519
+ );
520
+ font-style: var(
521
+ --_sf-hr-ft,
522
+ var(
523
+ --_ctm-mob-dn-sd-im-dt-se-ft-se-ic,
524
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-dn-sd-im-dt-se-ft-se-ic))
525
+ )
526
+ );
527
+ text-align: var(
528
+ --_sf-hr-ta,
529
+ var(
530
+ --_ctm-mob-dn-sd-im-dt-se-tt-an,
531
+ var(--_ctm-tab-dn-sd-im-dt-se-tt-an, var(--_ctm-dn-sd-im-dt-se-tt-an))
532
+ )
533
+ );
534
+ letter-spacing: var(
535
+ --_sf-hr-ls,
536
+ var(
537
+ --_ctm-mob-dn-sd-im-dt-se-lr-sg,
538
+ var(--_ctm-tab-dn-sd-im-dt-se-lr-sg, var(--_ctm-dn-sd-im-dt-se-lr-sg))
539
+ )
540
+ );
541
+ line-height: var(
542
+ --_sf-hr-lh,
543
+ var(
544
+ --_ctm-mob-dn-sd-im-dt-se-le-ht,
545
+ var(--_ctm-tab-dn-sd-im-dt-se-le-ht, var(--_ctm-dn-sd-im-dt-se-le-ht))
546
+ )
547
+ );
548
+ text-decoration: var(
549
+ --_sf-hr-tt-dn,
550
+ var(
551
+ --_ctm-mob-dn-sd-im-dt-se-ue,
552
+ var(--_ctm-tab-dn-sd-im-dt-se-ue, var(--_ctm-dn-sd-im-dt-se-ue))
553
+ )
554
+ );
350
555
  &[data-show-selected-item-border="true"] {
351
- border-color: var(--_sf-hr-br-cr,
352
- var(--_ctm-mob-dn-sd-im-dt-se-br-cr,
353
- var(--_ctm-tab-dn-sd-im-dt-se-br-cr, var(--_ctm-dn-sd-im-dt-se-br-cr))));
354
- border-style: var(--_sf-hr-br-st,
355
- var(--_ctm-mob-dn-sd-im-dt-se-br-se,
356
- var(--_ctm-tab-dn-sd-im-dt-se-br-se, var(--_ctm-dn-sd-im-dt-se-br-se))));
357
- border-width: var(--_sf-hr-br-wh,
358
- var(--_ctm-mob-dn-sd-im-dt-se-br-wh,
359
- var(--_ctm-tab-dn-sd-im-dt-se-br-wh, var(--_ctm-dn-sd-im-dt-se-br-wh))));
556
+ border-color: var(
557
+ --_sf-hr-br-cr,
558
+ var(
559
+ --_ctm-mob-dn-sd-im-dt-se-br-cr,
560
+ var(--_ctm-tab-dn-sd-im-dt-se-br-cr, var(--_ctm-dn-sd-im-dt-se-br-cr))
561
+ )
562
+ );
563
+ border-style: var(
564
+ --_sf-hr-br-st,
565
+ var(
566
+ --_ctm-mob-dn-sd-im-dt-se-br-se,
567
+ var(--_ctm-tab-dn-sd-im-dt-se-br-se, var(--_ctm-dn-sd-im-dt-se-br-se))
568
+ )
569
+ );
570
+ border-width: var(
571
+ --_sf-hr-br-wh,
572
+ var(
573
+ --_ctm-mob-dn-sd-im-dt-se-br-wh,
574
+ var(--_ctm-tab-dn-sd-im-dt-se-br-wh, var(--_ctm-dn-sd-im-dt-se-br-wh))
575
+ )
576
+ );
360
577
  }
361
-
362
578
  &:hover {
363
579
  // border: 1px solid var(--_gray-300);
364
580
  // background-color: var(--_gray-50);
365
581
  // cursor: pointer;
366
- --_sf-hr-bd-cr: var(--_ctm-mob-dn-sd-im-hr-se-bd-cr,
367
- var(--_ctm-tab-dn-sd-im-hr-se-bd-cr, var(--_ctm-dn-sd-im-hr-se-bd-cr)));
368
- --_sf-hr-br-cr: var(--_ctm-mob-dn-sd-im-hr-se-br-cr,
369
- var(--_ctm-tab-dn-sd-im-hr-se-br-cr, var(--_ctm-dn-sd-im-hr-se-br-cr)));
370
- --_sf-hr-br-st: var(--_ctm-mob-dn-sd-im-hr-se-br-se,
371
- var(--_ctm-tab-dn-sd-im-hr-se-br-se, var(--_ctm-dn-sd-im-hr-se-br-se)));
372
- --_sf-hr-br-wh: var(--_ctm-mob-dn-sd-im-hr-se-br-wh,
373
- var(--_ctm-tab-dn-sd-im-hr-se-br-wh, var(--_ctm-dn-sd-im-hr-se-br-wh)));
374
- --_sf-hr-br-br: var(--_ctm-mob-dn-sd-im-hr-se-br-rs,
375
- var(--_ctm-tab-dn-sd-im-hr-se-br-rs, var(--_ctm-dn-sd-im-hr-se-br-rs)));
376
- --_sf-hr-sd-im-pg: var(--_ctm-mob-dn-sd-im-hr-se-pg,
377
- var(--_ctm-tab-dn-sd-im-hr-se-pg, var(--_ctm-dn-sd-im-hr-se-pg)));
378
- --_sf-hr-bx-sw: var(--_ctm-mob-dn-sd-im-hr-se-sw-ae,
379
- var(--_ctm-tab-dn-sd-im-hr-se-sw-ae, var(--_ctm-dn-sd-im-hr-se-sw-ae))) var(--_ctm-mob-dn-sd-im-hr-se-sw-br,
380
- var(--_ctm-tab-dn-sd-im-hr-se-sw-br, var(--_ctm-dn-sd-im-hr-se-sw-br))) var(--_ctm-mob-dn-sd-im-hr-se-sw-sd,
381
- var(--_ctm-tab-dn-sd-im-hr-se-sw-sd, var(--_ctm-dn-sd-im-hr-se-sw-sd))) var(--_ctm-mob-dn-sd-im-hr-se-sw-cr,
382
- var(--_ctm-tab-dn-sd-im-hr-se-sw-cr, var(--_ctm-dn-sd-im-hr-se-sw-cr)));
383
-
384
- --_sf-hr-fc: var(--_ctm-mob-dn-sd-im-hr-se-cr,
385
- var(--_ctm-tab-dn-sd-im-hr-se-cr, var(--_ctm-dn-sd-im-hr-se-cr)));
386
- --_sf-hr-ff: var(--_ctm-mob-dn-sd-im-hr-se-ft-fy,
387
- var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy)));
388
- --_sf-hr-tt-tm: var(--_ctm-mob-dn-sd-im-hr-se-tt-tm,
389
- var(--_ctm-tab-dn-sd-im-hr-se-tt-tm, var(--_ctm-dn-sd-im-hr-se-tt-tm)));
390
- --_sf-hr-wd-wp: var(--_ctm-mob-dn-sd-im-hr-se-wd-wp,
391
- var(--_ctm-tab-dn-sd-im-hr-se-wd-wp, var(--_ctm-dn-sd-im-hr-se-wd-wp)));
392
- --_sf-hr-wd-bk: var(--_ctm-mob-dn-sd-im-hr-se-wd-bk,
393
- var(--_ctm-tab-dn-sd-im-hr-se-wd-bk, var(--_ctm-dn-sd-im-hr-se-wd-bk)));
394
- --_sf-hr-fs: var(--_ctm-mob-dn-sd-im-hr-se-ft-se,
395
- var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se)));
396
- --_sf-hr-fw: var(--_ctm-mob-dn-sd-im-hr-se-ft-wt,
397
- var(--_ctm-tab-dn-sd-im-hr-se-ft-wt, var(--_ctm-dn-sd-im-hr-se-ft-wt)));
398
- --_sf-hr-ft: var(--_ctm-mob-dn-sd-im-hr-se-ft-se-ic,
399
- var(--_ctm-tab-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-dn-sd-im-hr-se-ft-se-ic)));
400
- --_sf-hr-ta: var(--_ctm-mob-dn-sd-im-hr-se-tt-an,
401
- var(--_ctm-tab-dn-sd-im-hr-se-tt-an, var(--_ctm-dn-sd-im-hr-se-tt-an)));
402
- --_sf-hr-ls: var(--_ctm-mob-dn-sd-im-hr-se-lr-sg,
403
- var(--_ctm-tab-dn-sd-im-hr-se-lr-sg, var(--_ctm-dn-sd-im-hr-se-lr-sg)));
404
- --_sf-hr-lh: var(--_ctm-mob-dn-sd-im-hr-se-le-ht,
405
- var(--_ctm-tab-dn-sd-im-hr-se-le-ht, var(--_ctm-dn-sd-im-hr-se-le-ht)));
406
-
407
- --_sf-hr-ic-wt: var(--_ctm-mob-dn-sd-im-hr-se-in-se,
408
- var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se)));
409
- --_sf-hr-ic-ht: var(--_ctm-mob-dn-sd-im-hr-se-in-se,
410
- var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se)));
411
- --_sf-hr-ic-st: var(--_ctm-mob-dn-sd-im-hr-se-in-c1,
412
- var(--_ctm-tab-dn-sd-im-hr-se-in-c1, var(--_ctm-dn-sd-im-hr-se-in-c1)));
413
- --_sf-hr-tt-dn: var(--_ctm-mob-dn-sd-im-hr-se-ue,
414
- var(--_ctm-tab-dn-sd-im-hr-se-ue, var(--_ctm-dn-sd-im-hr-se-ue)));
582
+ --_sf-hr-bd-cr: var(
583
+ --_ctm-mob-dn-sd-im-hr-se-bd-cr,
584
+ var(--_ctm-tab-dn-sd-im-hr-se-bd-cr, var(--_ctm-dn-sd-im-hr-se-bd-cr))
585
+ );
586
+ --_sf-hr-br-cr: var(
587
+ --_ctm-mob-dn-sd-im-hr-se-br-cr,
588
+ var(--_ctm-tab-dn-sd-im-hr-se-br-cr, var(--_ctm-dn-sd-im-hr-se-br-cr))
589
+ );
590
+ --_sf-hr-br-st: var(
591
+ --_ctm-mob-dn-sd-im-hr-se-br-se,
592
+ var(--_ctm-tab-dn-sd-im-hr-se-br-se, var(--_ctm-dn-sd-im-hr-se-br-se))
593
+ );
594
+ --_sf-hr-br-wh: var(
595
+ --_ctm-mob-dn-sd-im-hr-se-br-wh,
596
+ var(--_ctm-tab-dn-sd-im-hr-se-br-wh, var(--_ctm-dn-sd-im-hr-se-br-wh))
597
+ );
598
+ --_sf-hr-br-br: var(
599
+ --_ctm-mob-dn-sd-im-hr-se-br-rs,
600
+ var(--_ctm-tab-dn-sd-im-hr-se-br-rs, var(--_ctm-dn-sd-im-hr-se-br-rs))
601
+ );
602
+ --_sf-hr-sd-im-pg: var(
603
+ --_ctm-mob-dn-sd-im-hr-se-pg,
604
+ var(--_ctm-tab-dn-sd-im-hr-se-pg, var(--_ctm-dn-sd-im-hr-se-pg))
605
+ );
606
+ --_sf-hr-bx-sw: var(
607
+ --_ctm-mob-dn-sd-im-hr-se-sw-ae,
608
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-ae, var(--_ctm-dn-sd-im-hr-se-sw-ae))
609
+ )
610
+ var(
611
+ --_ctm-mob-dn-sd-im-hr-se-sw-br,
612
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-br, var(--_ctm-dn-sd-im-hr-se-sw-br))
613
+ )
614
+ var(
615
+ --_ctm-mob-dn-sd-im-hr-se-sw-sd,
616
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-sd, var(--_ctm-dn-sd-im-hr-se-sw-sd))
617
+ )
618
+ var(
619
+ --_ctm-mob-dn-sd-im-hr-se-sw-cr,
620
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-cr, var(--_ctm-dn-sd-im-hr-se-sw-cr))
621
+ );
622
+
623
+ --_sf-hr-fc: var(
624
+ --_ctm-mob-dn-sd-im-hr-se-cr,
625
+ var(--_ctm-tab-dn-sd-im-hr-se-cr, var(--_ctm-dn-sd-im-hr-se-cr))
626
+ );
627
+ --_sf-hr-ff: var(
628
+ --_ctm-mob-dn-sd-im-hr-se-ft-fy,
629
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy))
630
+ );
631
+ --_sf-hr-tt-tm: var(
632
+ --_ctm-mob-dn-sd-im-hr-se-tt-tm,
633
+ var(--_ctm-tab-dn-sd-im-hr-se-tt-tm, var(--_ctm-dn-sd-im-hr-se-tt-tm))
634
+ );
635
+ --_sf-hr-wd-wp: var(
636
+ --_ctm-mob-dn-sd-im-hr-se-wd-wp,
637
+ var(--_ctm-tab-dn-sd-im-hr-se-wd-wp, var(--_ctm-dn-sd-im-hr-se-wd-wp))
638
+ );
639
+ --_sf-hr-wd-bk: var(
640
+ --_ctm-mob-dn-sd-im-hr-se-wd-bk,
641
+ var(--_ctm-tab-dn-sd-im-hr-se-wd-bk, var(--_ctm-dn-sd-im-hr-se-wd-bk))
642
+ );
643
+ --_sf-hr-fs: var(
644
+ --_ctm-mob-dn-sd-im-hr-se-ft-se,
645
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se))
646
+ );
647
+ --_sf-hr-fw: var(
648
+ --_ctm-mob-dn-sd-im-hr-se-ft-wt,
649
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-wt, var(--_ctm-dn-sd-im-hr-se-ft-wt))
650
+ );
651
+ --_sf-hr-ft: var(
652
+ --_ctm-mob-dn-sd-im-hr-se-ft-se-ic,
653
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-dn-sd-im-hr-se-ft-se-ic))
654
+ );
655
+ --_sf-hr-ta: var(
656
+ --_ctm-mob-dn-sd-im-hr-se-tt-an,
657
+ var(--_ctm-tab-dn-sd-im-hr-se-tt-an, var(--_ctm-dn-sd-im-hr-se-tt-an))
658
+ );
659
+ --_sf-hr-ls: var(
660
+ --_ctm-mob-dn-sd-im-hr-se-lr-sg,
661
+ var(--_ctm-tab-dn-sd-im-hr-se-lr-sg, var(--_ctm-dn-sd-im-hr-se-lr-sg))
662
+ );
663
+ --_sf-hr-lh: var(
664
+ --_ctm-mob-dn-sd-im-hr-se-le-ht,
665
+ var(--_ctm-tab-dn-sd-im-hr-se-le-ht, var(--_ctm-dn-sd-im-hr-se-le-ht))
666
+ );
667
+
668
+ --_sf-hr-ic-wt: var(
669
+ --_ctm-mob-dn-sd-im-hr-se-in-se,
670
+ var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
671
+ );
672
+ --_sf-hr-ic-ht: var(
673
+ --_ctm-mob-dn-sd-im-hr-se-in-se,
674
+ var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
675
+ );
676
+ --_sf-hr-ic-st: var(
677
+ --_ctm-mob-dn-sd-im-hr-se-in-c1,
678
+ var(--_ctm-tab-dn-sd-im-hr-se-in-c1, var(--_ctm-dn-sd-im-hr-se-in-c1))
679
+ );
680
+ --_sf-hr-tt-dn: var(
681
+ --_ctm-mob-dn-sd-im-hr-se-ue,
682
+ var(--_ctm-tab-dn-sd-im-hr-se-ue, var(--_ctm-dn-sd-im-hr-se-ue))
683
+ );
415
684
 
416
685
  &[data-hover-show-shadow="false"] {
417
686
  --_hover-show-shadow: none;
418
687
  }
419
-
420
688
  &[data-hover-show-icon="false"] {
421
689
  --_hover-show-icon: none;
422
690
  }
423
-
424
691
  &[data-show-selected-item-hover-border="true"] {
425
- border-color: var(--_sf-hr-br-cr,
426
- var(--_ctm-mob-dn-sd-im-dt-se-br-cr,
427
- var(--_ctm-tab-dn-sd-im-dt-se-br-cr, var(--_ctm-dn-sd-im-dt-se-br-cr))));
428
- border-style: var(--_sf-hr-br-st,
429
- var(--_ctm-mob-dn-sd-im-dt-se-br-se,
430
- var(--_ctm-tab-dn-sd-im-dt-se-br-se, var(--_ctm-dn-sd-im-dt-se-br-se))));
431
- border-width: var(--_sf-hr-br-wh,
432
- var(--_ctm-mob-dn-sd-im-dt-se-br-wh,
433
- var(--_ctm-tab-dn-sd-im-dt-se-br-wh, var(--_ctm-dn-sd-im-dt-se-br-wh))));
692
+ border-color: var(
693
+ --_sf-hr-br-cr,
694
+ var(
695
+ --_ctm-mob-dn-sd-im-dt-se-br-cr,
696
+ var(--_ctm-tab-dn-sd-im-dt-se-br-cr, var(--_ctm-dn-sd-im-dt-se-br-cr))
697
+ )
698
+ );
699
+ border-style: var(
700
+ --_sf-hr-br-st,
701
+ var(
702
+ --_ctm-mob-dn-sd-im-dt-se-br-se,
703
+ var(--_ctm-tab-dn-sd-im-dt-se-br-se, var(--_ctm-dn-sd-im-dt-se-br-se))
704
+ )
705
+ );
706
+ border-width: var(
707
+ --_sf-hr-br-wh,
708
+ var(
709
+ --_ctm-mob-dn-sd-im-dt-se-br-wh,
710
+ var(--_ctm-tab-dn-sd-im-dt-se-br-wh, var(--_ctm-dn-sd-im-dt-se-br-wh))
711
+ )
712
+ );
434
713
  }
435
714
  }
436
715
  }
@@ -440,56 +719,83 @@ $resizeActive: '[data-cms-element-resizer="true"]';
440
719
  .option__group__header {
441
720
  @include flex($justifyItems: space-between);
442
721
  gap: 8px;
443
-
444
722
  h2 {
445
723
  font-size: var(--_fs-14);
446
724
  font-weight: var(--_fw-600);
447
725
  }
448
-
449
726
  h3 {
450
727
  // font-size: 12px;
451
728
  // text-transform: uppercase;
452
729
  // color: #333;
453
- color: var(--_ctm-mob-dn-on-ls-cr,
454
- var(--_ctm-tab-dn-on-ls-cr, var(--_ctm-dn-on-ls-cr)));
455
- font-family: var(--_sf-hr-ff,
456
- var(--_ctm-mob-dn-on-ls-ft-fy,
457
- var(--_ctm-tab-dn-on-ls-ft-fy, var(--_ctm-dn-on-ls-ft-fy))));
458
- text-transform: var(--_sf-hr-tt-tm,
459
- var(--_ctm-mob-dn-on-ls-tt-tm,
460
- var(--_ctm-tab-dn-on-ls-tt-tm, var(--_ctm-dn-on-ls-tt-tm))));
461
- word-wrap: var(--_sf-hr-wd-wp,
462
- var(--_ctm-mob-dn-on-ls-wd-wp,
463
- var(--_ctm-tab-dn-on-ls-wd-wp, var(--_ctm-dn-on-ls-wd-wp))));
464
- word-break: var(--_sf-hr-wd-bk,
465
- var(--_ctm-mob-dn-on-ls-wd-bk,
466
- var(--_ctm-tab-dn-on-ls-wd-bk, var(--_ctm-dn-on-ls-wd-bk))));
467
-
730
+ color: var(
731
+ --_ctm-mob-dn-on-ls-cr,
732
+ var(--_ctm-tab-dn-on-ls-cr, var(--_ctm-dn-on-ls-cr))
733
+ );
734
+ font-family: var(
735
+ --_sf-hr-ff,
736
+ var(
737
+ --_ctm-mob-dn-on-ls-ft-fy,
738
+ var(--_ctm-tab-dn-on-ls-ft-fy, var(--_ctm-dn-on-ls-ft-fy))
739
+ )
740
+ );
741
+ text-transform: var(
742
+ --_sf-hr-tt-tm,
743
+ var(
744
+ --_ctm-mob-dn-on-ls-tt-tm,
745
+ var(--_ctm-tab-dn-on-ls-tt-tm, var(--_ctm-dn-on-ls-tt-tm))
746
+ )
747
+ );
748
+ word-wrap: var(
749
+ --_sf-hr-wd-wp,
750
+ var(
751
+ --_ctm-mob-dn-on-ls-wd-wp,
752
+ var(--_ctm-tab-dn-on-ls-wd-wp, var(--_ctm-dn-on-ls-wd-wp))
753
+ )
754
+ );
755
+ word-break: var(
756
+ --_sf-hr-wd-bk,
757
+ var(
758
+ --_ctm-mob-dn-on-ls-wd-bk,
759
+ var(--_ctm-tab-dn-on-ls-wd-bk, var(--_ctm-dn-on-ls-wd-bk))
760
+ )
761
+ );
468
762
  &.flex__overflow {
469
763
  white-space: normal;
470
764
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
471
765
  }
472
-
473
- font-size: var(--_ctm-mob-dn-on-ls-ft-se,
474
- var(--_ctm-tab-dn-on-ls-ft-se, var(--_ctm-dn-on-ls-ft-se)));
475
- font-weight: var(--_ctm-mob-dn-on-ls-ft-wt,
476
- var(--_ctm-tab-dn-on-ls-ft-wt, var(--_ctm-dn-on-ls-ft-wt)));
477
- font-style: var(--_ctm-mob-dn-on-ls-ft-se-ic,
478
- var(--_ctm-tab-dn-on-ls-ft-se-ic, var(--_ctm-dn-on-ls-ft-se-ic)));
479
- text-align: var(--_ctm-mob-dn-on-ls-tt-an,
480
- var(--_ctm-tab-dn-on-ls-tt-an, var(--_ctm-dn-on-ls-tt-an)));
481
- letter-spacing: var(--_ctm-mob-dn-on-ls-lr-sg,
482
- var(--_ctm-tab-dn-on-ls-lr-sg, var(--_ctm-dn-on-ls-lr-sg)));
483
- line-height: var(--_ctm-mob-dn-on-ls-le-ht,
484
- var(--_ctm-tab-dn-on-ls-le-ht, var(--_ctm-dn-on-ls-le-ht)));
485
- text-decoration: var(--_ctm-mob-dn-on-ls-ue,
486
- var(--_ctm-tab-dn-on-ls-ue, var(--_ctm-dn-on-ls-ue)));
766
+ font-size: var(
767
+ --_ctm-mob-dn-on-ls-ft-se,
768
+ var(--_ctm-tab-dn-on-ls-ft-se, var(--_ctm-dn-on-ls-ft-se))
769
+ );
770
+ font-weight: var(
771
+ --_ctm-mob-dn-on-ls-ft-wt,
772
+ var(--_ctm-tab-dn-on-ls-ft-wt, var(--_ctm-dn-on-ls-ft-wt))
773
+ );
774
+ font-style: var(
775
+ --_ctm-mob-dn-on-ls-ft-se-ic,
776
+ var(--_ctm-tab-dn-on-ls-ft-se-ic, var(--_ctm-dn-on-ls-ft-se-ic))
777
+ );
778
+ text-align: var(
779
+ --_ctm-mob-dn-on-ls-tt-an,
780
+ var(--_ctm-tab-dn-on-ls-tt-an, var(--_ctm-dn-on-ls-tt-an))
781
+ );
782
+ letter-spacing: var(
783
+ --_ctm-mob-dn-on-ls-lr-sg,
784
+ var(--_ctm-tab-dn-on-ls-lr-sg, var(--_ctm-dn-on-ls-lr-sg))
785
+ );
786
+ line-height: var(
787
+ --_ctm-mob-dn-on-ls-le-ht,
788
+ var(--_ctm-tab-dn-on-ls-le-ht, var(--_ctm-dn-on-ls-le-ht))
789
+ );
790
+ text-decoration: var(
791
+ --_ctm-mob-dn-on-ls-ue,
792
+ var(--_ctm-tab-dn-on-ls-ue, var(--_ctm-dn-on-ls-ue))
793
+ );
487
794
  display: -webkit-box;
488
795
  -webkit-line-clamp: 1;
489
796
  -webkit-box-orient: vertical;
490
797
  overflow: hidden;
491
798
  }
492
-
493
799
  .reset__btn {
494
800
  font-size: 12px;
495
801
  text-transform: uppercase;
@@ -501,21 +807,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
501
807
  display: flex;
502
808
  align-items: center;
503
809
  gap: 12px;
504
-
505
810
  .search__btn {
506
811
  svg {
507
812
  width: 16px;
508
813
  height: 16px;
509
814
  }
510
815
  }
511
-
512
816
  .rotate_0 {
513
817
  display: flex;
514
818
  align-items: center;
515
819
  transform: rotate(0);
516
820
  transition: all 400ms ease-in-out;
517
821
  }
518
-
519
822
  .rotate_180 {
520
823
  display: flex;
521
824
  align-items: center;
@@ -523,7 +826,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
523
826
  transition: all 400ms ease-in-out;
524
827
  }
525
828
  }
526
-
527
829
  // Search Bar. Until now only Border, Border Radius and Padding reached
528
830
  // CSS from here, which is why Background Color, the text properties and
529
831
  // Box Shadow all looked dead — nothing read their variables.
@@ -537,26 +839,37 @@ $resizeActive: '[data-cms-element-resizer="true"]';
537
839
  align-items: center;
538
840
  width: 100%;
539
841
 
540
- padding: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-pg,
541
- prepareMediaVariable(--_ctm-dn-sh-br-pg));
842
+ padding: prepareMediaVariable(
843
+ --_ctm-dn-sh-br-dt-se-pg,
844
+ prepareMediaVariable(--_ctm-dn-sh-br-pg)
845
+ );
542
846
  background-color: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-bd-cr);
543
- border-color: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-cr,
544
- prepareMediaVariable(--_ctm-dn-sh-br-br-cr));
545
- border-style: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-se,
546
- prepareMediaVariable(--_ctm-dn-sh-br-br-se));
547
- border-width: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-wh,
548
- prepareMediaVariable(--_ctm-dn-sh-br-br-wh));
549
- border-radius: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-rs,
550
- prepareMediaVariable(--_ctm-dn-sh-br-br-rs));
847
+ border-color: prepareMediaVariable(
848
+ --_ctm-dn-sh-br-dt-se-br-cr,
849
+ prepareMediaVariable(--_ctm-dn-sh-br-br-cr)
850
+ );
851
+ border-style: prepareMediaVariable(
852
+ --_ctm-dn-sh-br-dt-se-br-se,
853
+ prepareMediaVariable(--_ctm-dn-sh-br-br-se)
854
+ );
855
+ border-width: prepareMediaVariable(
856
+ --_ctm-dn-sh-br-dt-se-br-wh,
857
+ prepareMediaVariable(--_ctm-dn-sh-br-br-wh)
858
+ );
859
+ border-radius: prepareMediaVariable(
860
+ --_ctm-dn-sh-br-dt-se-br-rs,
861
+ prepareMediaVariable(--_ctm-dn-sh-br-br-rs)
862
+ );
551
863
 
552
864
  // Opt-in, like every other Show Shadow in this element: the bar has
553
865
  // never cast one, so it only appears once the toggle is on.
554
866
  box-shadow: none;
555
-
556
867
  &[data-show-shadow="true"] {
557
- box-shadow: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-ae, 0 0) prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-br, 0) prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-sd, 0) prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-cr, transparent);
868
+ box-shadow: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-ae, 0 0)
869
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-br, 0)
870
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-sd, 0)
871
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-sw-cr, transparent);
558
872
  }
559
-
560
873
  &[data-show-border="false"] {
561
874
  border: none;
562
875
  }
@@ -588,7 +901,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
588
901
  // hides it without removing the button from the flow.
589
902
  button {
590
903
  display: flex;
591
-
592
904
  svg {
593
905
  width: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px);
594
906
  height: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px);
@@ -599,15 +911,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
599
911
  [stroke]:not([stroke="none"]) {
600
912
  stroke: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1);
601
913
  }
602
-
603
914
  &[fill]:not([fill="none"]),
604
915
  [fill]:not([fill="none"]) {
605
916
  fill: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1);
606
917
  }
607
-
608
918
  stroke-width: prepareMediaVariable(--_ctm-dn-sh-br-dt-se-se-wh);
609
919
  }
610
-
611
920
  &[data-show-icon="false"] {
612
921
  display: none;
613
922
  }
@@ -618,50 +927,79 @@ $resizeActive: '[data-cms-element-resizer="true"]';
618
927
  // Each property falls back to its own default-state value, so a focus
619
928
  // style nobody has set is simply the default one.
620
929
  &:focus-within {
621
- padding: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-pg,
622
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-pg));
623
- background-color: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-bd-cr,
624
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-bd-cr));
625
- border-color: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-br-cr,
626
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-cr));
627
- border-style: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-br-se,
628
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-se));
629
- border-width: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-br-wh,
630
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-wh));
631
- border-radius: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-br-rs,
632
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-rs));
930
+ padding: prepareMediaVariable(
931
+ --_ctm-dn-sh-br-fs-se-pg,
932
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-pg)
933
+ );
934
+ background-color: prepareMediaVariable(
935
+ --_ctm-dn-sh-br-fs-se-bd-cr,
936
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-bd-cr)
937
+ );
938
+ border-color: prepareMediaVariable(
939
+ --_ctm-dn-sh-br-fs-se-br-cr,
940
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-cr)
941
+ );
942
+ border-style: prepareMediaVariable(
943
+ --_ctm-dn-sh-br-fs-se-br-se,
944
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-se)
945
+ );
946
+ border-width: prepareMediaVariable(
947
+ --_ctm-dn-sh-br-fs-se-br-wh,
948
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-wh)
949
+ );
950
+ border-radius: prepareMediaVariable(
951
+ --_ctm-dn-sh-br-fs-se-br-rs,
952
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-br-rs)
953
+ );
633
954
 
634
955
  &[data-focus-show-shadow="true"] {
635
- box-shadow: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-ae, 0 0) prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-br, 0) prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-sd, 0) prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-cr, transparent);
956
+ box-shadow: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-ae, 0 0)
957
+ prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-br, 0)
958
+ prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-sd, 0)
959
+ prepareMediaVariable(--_ctm-dn-sh-br-fs-se-sw-cr, transparent);
636
960
  }
637
961
 
638
962
  input[type="text"] {
639
- color: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-cr,
640
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-cr));
641
- font-size: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-ft-se,
642
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-se));
643
- font-weight: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-ft-wt,
644
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-wt));
645
- text-transform: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-tt-tm,
646
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-tt-tm));
963
+ color: prepareMediaVariable(
964
+ --_ctm-dn-sh-br-fs-se-cr,
965
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-cr)
966
+ );
967
+ font-size: prepareMediaVariable(
968
+ --_ctm-dn-sh-br-fs-se-ft-se,
969
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-se)
970
+ );
971
+ font-weight: prepareMediaVariable(
972
+ --_ctm-dn-sh-br-fs-se-ft-wt,
973
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-ft-wt)
974
+ );
975
+ text-transform: prepareMediaVariable(
976
+ --_ctm-dn-sh-br-fs-se-tt-tm,
977
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-tt-tm)
978
+ );
647
979
  }
648
980
 
649
981
  button svg {
650
- width: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-in-se,
651
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px));
652
- height: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-in-se,
653
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px));
654
-
982
+ width: prepareMediaVariable(
983
+ --_ctm-dn-sh-br-fs-se-in-se,
984
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px)
985
+ );
986
+ height: prepareMediaVariable(
987
+ --_ctm-dn-sh-br-fs-se-in-se,
988
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-se, 18px)
989
+ );
655
990
  &[stroke]:not([stroke="none"]),
656
991
  [stroke]:not([stroke="none"]) {
657
- stroke: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-in-c1,
658
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1));
992
+ stroke: prepareMediaVariable(
993
+ --_ctm-dn-sh-br-fs-se-in-c1,
994
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1)
995
+ );
659
996
  }
660
-
661
997
  &[fill]:not([fill="none"]),
662
998
  [fill]:not([fill="none"]) {
663
- fill: prepareMediaVariable(--_ctm-dn-sh-br-fs-se-in-c1,
664
- prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1));
999
+ fill: prepareMediaVariable(
1000
+ --_ctm-dn-sh-br-fs-se-in-c1,
1001
+ prepareMediaVariable(--_ctm-dn-sh-br-dt-se-in-c1)
1002
+ );
665
1003
  }
666
1004
  }
667
1005
  }
@@ -671,7 +1009,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
671
1009
  ul {
672
1010
  margin-top: 10px;
673
1011
  transition: all 400ms ease-in-out;
674
-
675
1012
  &.show__panel {
676
1013
  animation: slideUp 0.4s ease-in-out;
677
1014
  }
@@ -680,11 +1017,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
680
1017
  animation: slideDown 0.4s ease-in-out;
681
1018
  pointer-events: none;
682
1019
  }
683
-
684
1020
  &:not(:last-child) {
685
1021
  border-bottom: 1px solid var(--_gray-300);
686
1022
  }
687
-
688
1023
  li {
689
1024
  display: flex;
690
1025
  align-items: center;
@@ -731,84 +1066,140 @@ $resizeActive: '[data-cms-element-resizer="true"]';
731
1066
  font-weight: var(--_fw-600);
732
1067
  border-radius: var(--_br-6);
733
1068
  width: 100%;
734
-
735
1069
  &:hover {
736
1070
  background-color: var(--_primary-25);
737
1071
  color: var(--_primary-700);
738
1072
  }
739
1073
  }
740
-
741
1074
  .more__button {
742
1075
  // Padding of the More Button. The key was in the schema and the panel
743
1076
  // rendered it under Border Radius, but nothing here read it.
744
1077
  padding: prepareMediaVariable(--_ctm-dn-me-bn-dt-se-pg, 0);
745
-
746
1078
  &:hover {
747
- padding: prepareMediaVariable(--_ctm-dn-me-bn-hr-se-pg,
748
- prepareMediaVariable(--_ctm-dn-me-bn-dt-se-pg, 0));
1079
+ padding: prepareMediaVariable(
1080
+ --_ctm-dn-me-bn-hr-se-pg,
1081
+ prepareMediaVariable(--_ctm-dn-me-bn-dt-se-pg, 0)
1082
+ );
749
1083
  }
750
-
751
1084
  // font-size: 12px;
752
1085
  // text-transform: uppercase;
753
1086
  // font-weight: var(--_fw-500);
754
1087
  // color: var(--_primary-400);
755
- background-color: var(--_ctm-mob-dn-me-bn-dt-se-bd-cr,
756
- var(--_ctm-tab-dn-me-bn-dt-se-bd-cr, var(--_ctm-dn-me-bn-dt-se-bd-cr)));
757
- border-radius: var(--_ctm-mob-dn-me-bn-dt-se-br-rs,
758
- var(--_ctm-tab-dn-me-bn-dt-se-br-rs, var(--_ctm-dn-me-bn-dt-se-br-rs)));
759
- box-shadow: var(--_show-shadow-clear-all,
760
- var(--_ctm-mob-dn-me-bn-dt-se-sw-ae,
761
- var(--_ctm-tab-dn-me-bn-dt-se-sw-ae, var(--_ctm-dn-me-bn-dt-se-sw-ae))) var(--_ctm-mob-dn-me-bn-dt-se-sw-br,
762
- var(--_ctm-tab-dn-me-bn-dt-se-sw-br, var(--_ctm-dn-me-bn-dt-se-sw-br))) var(--_ctm-mob-dn-me-bn-dt-se-sw-sd,
763
- var(--_ctm-tab-dn-me-bn-dt-se-sw-sd, var(--_ctm-dn-me-bn-dt-se-sw-sd))) var(--_ctm-mob-dn-me-bn-dt-se-sw-cr,
764
- var(--_ctm-tab-dn-me-bn-dt-se-sw-cr, var(--_ctm-dn-me-bn-dt-se-sw-cr))));
765
-
766
- color: var(--_ctm-mob-dn-me-bn-dt-se-cr,
767
- var(--_ctm-tab-dn-me-bn-dt-se-cr, var(--_ctm-dn-me-bn-dt-se-cr)));
768
- font-family: var(--_sf-hr-ff,
769
- var(--_ctm-mob-dn-me-bn-dt-se-ft-fy,
770
- var(--_ctm-tab-dn-me-bn-dt-se-ft-fy, var(--_ctm-dn-me-bn-dt-se-ft-fy))));
771
- text-transform: var(--_sf-hr-tt-tm,
772
- var(--_ctm-mob-dn-me-bn-dt-se-tt-tm,
773
- var(--_ctm-tab-dn-me-bn-dt-se-tt-tm, var(--_ctm-dn-me-bn-dt-se-tt-tm))));
774
- word-wrap: var(--_sf-hr-wd-wp,
775
- var(--_ctm-mob-dn-me-bn-dt-se-wd-wp,
776
- var(--_ctm-tab-dn-me-bn-dt-se-wd-wp, var(--_ctm-dn-me-bn-dt-se-wd-wp))));
777
- word-break: var(--_sf-hr-wd-bk,
778
- var(--_ctm-mob-dn-me-bn-dt-se-wd-bk,
779
- var(--_ctm-tab-dn-me-bn-dt-se-wd-bk, var(--_ctm-dn-me-bn-dt-se-wd-bk))));
780
- font-size: var(--_ctm-mob-dn-me-bn-dt-se-ft-se,
781
- var(--_ctm-tab-dn-me-bn-dt-se-ft-se, var(--_ctm-dn-me-bn-dt-se-ft-se)));
782
- font-weight: var(--_ctm-mob-dn-me-bn-dt-se-ft-wt,
783
- var(--_ctm-tab-dn-me-bn-dt-se-ft-wt, var(--_ctm-dn-me-bn-dt-se-ft-wt)));
784
- font-style: var(--_ctm-mob-dn-me-bn-dt-se-ft-se-ic,
785
- var(--_ctm-tab-dn-me-bn-dt-se-ft-se-ic, var(--_ctm-dn-me-bn-dt-se-ft-se-ic)));
786
- text-align: var(--_ctm-mob-dn-me-bn-dt-se-tt-an,
787
- var(--_ctm-tab-dn-me-bn-dt-se-tt-an, var(--_ctm-dn-me-bn-dt-se-tt-an)));
788
- letter-spacing: var(--_ctm-mob-dn-me-bn-dt-se-lr-sg,
789
- var(--_ctm-tab-dn-me-bn-dt-se-lr-sg, var(--_ctm-dn-me-bn-dt-se-lr-sg)));
790
- line-height: var(--_ctm-mob-dn-me-bn-dt-se-le-ht,
791
- var(--_ctm-tab-dn-me-bn-dt-se-le-ht, var(--_ctm-dn-me-bn-dt-se-le-ht)));
792
- text-decoration: var(--_ctm-mob-dn-me-bn-dt-se-ue,
793
- var(--_ctm-tab-dn-me-bn-dt-se-ue, var(--_ctm-dn-me-bn-dt-se-ue)));
794
-
1088
+ background-color: var(
1089
+ --_ctm-mob-dn-me-bn-dt-se-bd-cr,
1090
+ var(--_ctm-tab-dn-me-bn-dt-se-bd-cr, var(--_ctm-dn-me-bn-dt-se-bd-cr))
1091
+ );
1092
+ border-radius: var(
1093
+ --_ctm-mob-dn-me-bn-dt-se-br-rs,
1094
+ var(--_ctm-tab-dn-me-bn-dt-se-br-rs, var(--_ctm-dn-me-bn-dt-se-br-rs))
1095
+ );
1096
+ box-shadow: var(
1097
+ --_show-shadow-clear-all,
1098
+ var(
1099
+ --_ctm-mob-dn-me-bn-dt-se-sw-ae,
1100
+ var(--_ctm-tab-dn-me-bn-dt-se-sw-ae, var(--_ctm-dn-me-bn-dt-se-sw-ae))
1101
+ )
1102
+ var(
1103
+ --_ctm-mob-dn-me-bn-dt-se-sw-br,
1104
+ var(--_ctm-tab-dn-me-bn-dt-se-sw-br, var(--_ctm-dn-me-bn-dt-se-sw-br))
1105
+ )
1106
+ var(
1107
+ --_ctm-mob-dn-me-bn-dt-se-sw-sd,
1108
+ var(--_ctm-tab-dn-me-bn-dt-se-sw-sd, var(--_ctm-dn-me-bn-dt-se-sw-sd))
1109
+ )
1110
+ var(
1111
+ --_ctm-mob-dn-me-bn-dt-se-sw-cr,
1112
+ var(--_ctm-tab-dn-me-bn-dt-se-sw-cr, var(--_ctm-dn-me-bn-dt-se-sw-cr))
1113
+ )
1114
+ );
1115
+
1116
+ color: var(
1117
+ --_ctm-mob-dn-me-bn-dt-se-cr,
1118
+ var(--_ctm-tab-dn-me-bn-dt-se-cr, var(--_ctm-dn-me-bn-dt-se-cr))
1119
+ );
1120
+ font-family: var(
1121
+ --_sf-hr-ff,
1122
+ var(
1123
+ --_ctm-mob-dn-me-bn-dt-se-ft-fy,
1124
+ var(--_ctm-tab-dn-me-bn-dt-se-ft-fy, var(--_ctm-dn-me-bn-dt-se-ft-fy))
1125
+ )
1126
+ );
1127
+ text-transform: var(
1128
+ --_sf-hr-tt-tm,
1129
+ var(
1130
+ --_ctm-mob-dn-me-bn-dt-se-tt-tm,
1131
+ var(--_ctm-tab-dn-me-bn-dt-se-tt-tm, var(--_ctm-dn-me-bn-dt-se-tt-tm))
1132
+ )
1133
+ );
1134
+ word-wrap: var(
1135
+ --_sf-hr-wd-wp,
1136
+ var(
1137
+ --_ctm-mob-dn-me-bn-dt-se-wd-wp,
1138
+ var(--_ctm-tab-dn-me-bn-dt-se-wd-wp, var(--_ctm-dn-me-bn-dt-se-wd-wp))
1139
+ )
1140
+ );
1141
+ word-break: var(
1142
+ --_sf-hr-wd-bk,
1143
+ var(
1144
+ --_ctm-mob-dn-me-bn-dt-se-wd-bk,
1145
+ var(--_ctm-tab-dn-me-bn-dt-se-wd-bk, var(--_ctm-dn-me-bn-dt-se-wd-bk))
1146
+ )
1147
+ );
1148
+ font-size: var(
1149
+ --_ctm-mob-dn-me-bn-dt-se-ft-se,
1150
+ var(--_ctm-tab-dn-me-bn-dt-se-ft-se, var(--_ctm-dn-me-bn-dt-se-ft-se))
1151
+ );
1152
+ font-weight: var(
1153
+ --_ctm-mob-dn-me-bn-dt-se-ft-wt,
1154
+ var(--_ctm-tab-dn-me-bn-dt-se-ft-wt, var(--_ctm-dn-me-bn-dt-se-ft-wt))
1155
+ );
1156
+ font-style: var(
1157
+ --_ctm-mob-dn-me-bn-dt-se-ft-se-ic,
1158
+ var(--_ctm-tab-dn-me-bn-dt-se-ft-se-ic, var(--_ctm-dn-me-bn-dt-se-ft-se-ic))
1159
+ );
1160
+ text-align: var(
1161
+ --_ctm-mob-dn-me-bn-dt-se-tt-an,
1162
+ var(--_ctm-tab-dn-me-bn-dt-se-tt-an, var(--_ctm-dn-me-bn-dt-se-tt-an))
1163
+ );
1164
+ letter-spacing: var(
1165
+ --_ctm-mob-dn-me-bn-dt-se-lr-sg,
1166
+ var(--_ctm-tab-dn-me-bn-dt-se-lr-sg, var(--_ctm-dn-me-bn-dt-se-lr-sg))
1167
+ );
1168
+ line-height: var(
1169
+ --_ctm-mob-dn-me-bn-dt-se-le-ht,
1170
+ var(--_ctm-tab-dn-me-bn-dt-se-le-ht, var(--_ctm-dn-me-bn-dt-se-le-ht))
1171
+ );
1172
+ text-decoration: var(
1173
+ --_ctm-mob-dn-me-bn-dt-se-ue,
1174
+ var(--_ctm-tab-dn-me-bn-dt-se-ue, var(--_ctm-dn-me-bn-dt-se-ue))
1175
+ );
795
1176
  &[data-show-more-button-border="true"] {
796
- border-color: var(--_sf-hr-br-cr,
797
- var(--_ctm-mob-dn-me-bn-dt-se-br-cr,
798
- var(--_ctm-tab-dn-me-bn-dt-se-br-cr, var(--_ctm-dn-me-bn-dt-se-br-cr))));
799
- border-style: var(--_sf-hr-br-st,
800
- var(--_ctm-mob-dn-me-bn-dt-se-br-se,
801
- var(--_ctm-tab-dn-me-bn-dt-se-br-se, var(--_ctm-dn-me-bn-dt-se-br-se))));
802
- border-width: var(--_sf-hr-br-wh,
803
- var(--_ctm-mob-dn-me-bn-dt-se-br-wh,
804
- var(--_ctm-tab-dn-me-bn-dt-se-br-wh, var(--_ctm-dn-me-bn-dt-se-br-wh))));
1177
+ border-color: var(
1178
+ --_sf-hr-br-cr,
1179
+ var(
1180
+ --_ctm-mob-dn-me-bn-dt-se-br-cr,
1181
+ var(--_ctm-tab-dn-me-bn-dt-se-br-cr, var(--_ctm-dn-me-bn-dt-se-br-cr))
1182
+ )
1183
+ );
1184
+ border-style: var(
1185
+ --_sf-hr-br-st,
1186
+ var(
1187
+ --_ctm-mob-dn-me-bn-dt-se-br-se,
1188
+ var(--_ctm-tab-dn-me-bn-dt-se-br-se, var(--_ctm-dn-me-bn-dt-se-br-se))
1189
+ )
1190
+ );
1191
+ border-width: var(
1192
+ --_sf-hr-br-wh,
1193
+ var(
1194
+ --_ctm-mob-dn-me-bn-dt-se-br-wh,
1195
+ var(--_ctm-tab-dn-me-bn-dt-se-br-wh, var(--_ctm-dn-me-bn-dt-se-br-wh))
1196
+ )
1197
+ );
805
1198
  }
806
-
807
1199
  // &:hover {
808
1200
  // color: var(--_primary-700);
809
1201
  // }
810
1202
  }
811
-
812
1203
  &:has(.no__results__found) {
813
1204
  .no__results__found {
814
1205
  padding: 12px;
@@ -824,7 +1215,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
824
1215
  }
825
1216
  }
826
1217
  }
827
-
828
1218
  .no__results__found {
829
1219
  padding: 12px;
830
1220
  color: var(--_gray-600);
@@ -847,50 +1237,79 @@ $resizeActive: '[data-cms-element-resizer="true"]';
847
1237
  // align-items: center;
848
1238
  flex-wrap: wrap;
849
1239
  gap: 20px;
850
-
851
1240
  .filter__Header {
852
1241
  display: flex;
853
1242
  justify-content: flex-start;
854
1243
  gap: 12px;
855
-
856
1244
  h2 {
857
1245
  font-size: var(--_fs-14);
858
1246
  font-weight: var(--_fw-600);
859
1247
  text-transform: uppercase;
860
1248
  }
861
-
862
1249
  h3 {
863
1250
  // font-size: 14px;
864
1251
  // text-transform: uppercase;
865
1252
 
866
- color: var(--_ctm-mob-dn-fs-wt-cr,
867
- var(--_ctm-tab-dn-fs-wt-cr, var(--_ctm-dn-fs-wt-cr)));
868
- font-family: var(--_sf-hr-ff,
869
- var(--_ctm-mob-dn-fs-wt-ft-fy,
870
- var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy))));
871
- text-transform: var(--_sf-hr-tt-tm,
872
- var(--_ctm-mob-dn-fs-wt-tt-tm,
873
- var(--_ctm-tab-dn-fs-wt-tt-tm, var(--_ctm-dn-fs-wt-tt-tm))));
874
- word-wrap: var(--_sf-hr-wd-wp,
875
- var(--_ctm-mob-dn-fs-wt-wd-wp,
876
- var(--_ctm-tab-dn-fs-wt-wd-wp, var(--_ctm-dn-fs-wt-wd-wp))));
877
- word-break: var(--_sf-hr-wd-bk,
878
- var(--_ctm-mob-dn-fs-wt-wd-bk,
879
- var(--_ctm-tab-dn-fs-wt-wd-bk, var(--_ctm-dn-fs-wt-wd-bk))));
880
- font-size: var(--_ctm-mob-dn-fs-wt-ft-se,
881
- var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se)));
882
- font-weight: var(--_ctm-mob-dn-fs-wt-ft-wt,
883
- var(--_ctm-tab-dn-fs-wt-ft-wt, var(--_ctm-dn-fs-wt-ft-wt)));
884
- font-style: var(--_ctm-mob-dn-fs-wt-ft-se-ic,
885
- var(--_ctm-tab-dn-fs-wt-ft-se-ic, var(--_ctm-dn-fs-wt-ft-se-ic)));
886
- text-align: var(--_ctm-mob-dn-fs-wt-tt-an,
887
- var(--_ctm-tab-dn-fs-wt-tt-an, var(--_ctm-dn-fs-wt-tt-an)));
888
- letter-spacing: var(--_ctm-mob-dn-fs-wt-lr-sg,
889
- var(--_ctm-tab-dn-fs-wt-lr-sg, var(--_ctm-dn-fs-wt-lr-sg)));
890
- line-height: var(--_ctm-mob-dn-fs-wt-le-ht,
891
- var(--_ctm-tab-dn-fs-wt-le-ht, var(--_ctm-dn-fs-wt-le-ht)));
892
- text-decoration: var(--_ctm-mob-dn-fs-wt-ue,
893
- var(--_ctm-tab-dn-fs-wt-ue, var(--_ctm-dn-fs-wt-ue)));
1253
+ color: var(
1254
+ --_ctm-mob-dn-fs-wt-cr,
1255
+ var(--_ctm-tab-dn-fs-wt-cr, var(--_ctm-dn-fs-wt-cr))
1256
+ );
1257
+ font-family: var(
1258
+ --_sf-hr-ff,
1259
+ var(
1260
+ --_ctm-mob-dn-fs-wt-ft-fy,
1261
+ var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy))
1262
+ )
1263
+ );
1264
+ text-transform: var(
1265
+ --_sf-hr-tt-tm,
1266
+ var(
1267
+ --_ctm-mob-dn-fs-wt-tt-tm,
1268
+ var(--_ctm-tab-dn-fs-wt-tt-tm, var(--_ctm-dn-fs-wt-tt-tm))
1269
+ )
1270
+ );
1271
+ word-wrap: var(
1272
+ --_sf-hr-wd-wp,
1273
+ var(
1274
+ --_ctm-mob-dn-fs-wt-wd-wp,
1275
+ var(--_ctm-tab-dn-fs-wt-wd-wp, var(--_ctm-dn-fs-wt-wd-wp))
1276
+ )
1277
+ );
1278
+ word-break: var(
1279
+ --_sf-hr-wd-bk,
1280
+ var(
1281
+ --_ctm-mob-dn-fs-wt-wd-bk,
1282
+ var(--_ctm-tab-dn-fs-wt-wd-bk, var(--_ctm-dn-fs-wt-wd-bk))
1283
+ )
1284
+ );
1285
+ font-size: var(
1286
+ --_ctm-mob-dn-fs-wt-ft-se,
1287
+ var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se))
1288
+ );
1289
+ font-weight: var(
1290
+ --_ctm-mob-dn-fs-wt-ft-wt,
1291
+ var(--_ctm-tab-dn-fs-wt-ft-wt, var(--_ctm-dn-fs-wt-ft-wt))
1292
+ );
1293
+ font-style: var(
1294
+ --_ctm-mob-dn-fs-wt-ft-se-ic,
1295
+ var(--_ctm-tab-dn-fs-wt-ft-se-ic, var(--_ctm-dn-fs-wt-ft-se-ic))
1296
+ );
1297
+ text-align: var(
1298
+ --_ctm-mob-dn-fs-wt-tt-an,
1299
+ var(--_ctm-tab-dn-fs-wt-tt-an, var(--_ctm-dn-fs-wt-tt-an))
1300
+ );
1301
+ letter-spacing: var(
1302
+ --_ctm-mob-dn-fs-wt-lr-sg,
1303
+ var(--_ctm-tab-dn-fs-wt-lr-sg, var(--_ctm-dn-fs-wt-lr-sg))
1304
+ );
1305
+ line-height: var(
1306
+ --_ctm-mob-dn-fs-wt-le-ht,
1307
+ var(--_ctm-tab-dn-fs-wt-le-ht, var(--_ctm-dn-fs-wt-le-ht))
1308
+ );
1309
+ text-decoration: var(
1310
+ --_ctm-mob-dn-fs-wt-ue,
1311
+ var(--_ctm-tab-dn-fs-wt-ue, var(--_ctm-dn-fs-wt-ue))
1312
+ );
894
1313
  }
895
1314
 
896
1315
  .reset__btn {
@@ -898,84 +1317,165 @@ $resizeActive: '[data-cms-element-resizer="true"]';
898
1317
  // text-transform: uppercase;
899
1318
  // font-weight: var(--_fw-500);
900
1319
  // color: var(--_primary-400);
901
- background-color: var(--_ctm-mob-dn-cr-al-tt-dt-se-bd-cr,
902
- var(--_ctm-tab-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-dn-cr-al-tt-dt-se-bd-cr)));
903
- border-radius: var(--_ctm-mob-dn-cr-al-tt-dt-se-br-rs,
904
- var(--_ctm-tab-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-dn-cr-al-tt-dt-se-br-rs)));
905
- padding: var(--_ctm-mob-dn-cr-al-tt-dt-se-pg,
906
- var(--_ctm-tab-dn-cr-al-tt-dt-se-pg, var(--_ctm-dn-cr-al-tt-dt-se-pg)));
907
- box-shadow: var(--_show-shadow-clear-all,
908
- var(--_ctm-mob-dn-cr-al-tt-dt-se-sw-ae,
909
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-dn-cr-al-tt-dt-se-sw-ae))) var(--_ctm-mob-dn-cr-al-tt-dt-se-sw-br,
910
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-dn-cr-al-tt-dt-se-sw-br))) var(--_ctm-mob-dn-cr-al-tt-dt-se-sw-sd,
911
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-dn-cr-al-tt-dt-se-sw-sd))) var(--_ctm-mob-dn-cr-al-tt-dt-se-sw-cr,
912
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-dn-cr-al-tt-dt-se-sw-cr))));
913
-
914
- color: var(--_ctm-mob-dn-cr-al-tt-dt-se-cr,
915
- var(--_ctm-tab-dn-cr-al-tt-dt-se-cr, var(--_ctm-dn-cr-al-tt-dt-se-cr)));
916
- font-family: var(--_sf-hr-ff,
917
- var(--_ctm-mob-dn-cr-al-tt-dt-se-ft-fy,
918
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy))));
919
- text-transform: var(--_sf-hr-tt-tm,
920
- var(--_ctm-mob-dn-cr-al-tt-dt-se-tt-tm,
921
- var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-tm, var(--_ctm-dn-cr-al-tt-dt-se-tt-tm))));
922
- word-wrap: var(--_sf-hr-wd-wp,
923
- var(--_ctm-mob-dn-cr-al-tt-dt-se-wd-wp,
924
- var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-wp, var(--_ctm-dn-cr-al-tt-dt-se-wd-wp))));
925
- word-break: var(--_sf-hr-wd-bk,
926
- var(--_ctm-mob-dn-cr-al-tt-dt-se-wd-bk,
927
- var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-bk, var(--_ctm-dn-cr-al-tt-dt-se-wd-bk))));
928
- font-size: var(--_ctm-mob-dn-cr-al-tt-dt-se-ft-se,
929
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se)));
930
- font-weight: var(--_ctm-mob-dn-cr-al-tt-dt-se-ft-wt,
931
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-dn-cr-al-tt-dt-se-ft-wt)));
932
- font-style: var(--_ctm-mob-dn-cr-al-tt-dt-se-ft-se-ic,
933
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-dn-cr-al-tt-dt-se-ft-se-ic)));
934
- text-align: var(--_ctm-mob-dn-cr-al-tt-dt-se-tt-an,
935
- var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-dn-cr-al-tt-dt-se-tt-an)));
936
- letter-spacing: var(--_ctm-mob-dn-cr-al-tt-dt-se-lr-sg,
937
- var(--_ctm-tab-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-dn-cr-al-tt-dt-se-lr-sg)));
938
- line-height: var(--_ctm-mob-dn-cr-al-tt-dt-se-le-ht,
939
- var(--_ctm-tab-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-dn-cr-al-tt-dt-se-le-ht)));
940
- text-decoration: var(--_ctm-mob-dn-cr-al-tt-dt-se-ue,
941
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ue, var(--_ctm-dn-cr-al-tt-dt-se-ue)));
1320
+ background-color: var(
1321
+ --_ctm-mob-dn-cr-al-tt-dt-se-bd-cr,
1322
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-dn-cr-al-tt-dt-se-bd-cr))
1323
+ );
1324
+ border-radius: var(
1325
+ --_ctm-mob-dn-cr-al-tt-dt-se-br-rs,
1326
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-dn-cr-al-tt-dt-se-br-rs))
1327
+ );
1328
+ padding: var(
1329
+ --_ctm-mob-dn-cr-al-tt-dt-se-pg,
1330
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-pg, var(--_ctm-dn-cr-al-tt-dt-se-pg))
1331
+ );
1332
+ box-shadow: var(
1333
+ --_show-shadow-clear-all,
1334
+ var(
1335
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-ae,
1336
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-dn-cr-al-tt-dt-se-sw-ae))
1337
+ )
1338
+ var(
1339
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-br,
1340
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-dn-cr-al-tt-dt-se-sw-br))
1341
+ )
1342
+ var(
1343
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-sd,
1344
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-dn-cr-al-tt-dt-se-sw-sd))
1345
+ )
1346
+ var(
1347
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-cr,
1348
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-dn-cr-al-tt-dt-se-sw-cr))
1349
+ )
1350
+ );
1351
+
1352
+ color: var(
1353
+ --_ctm-mob-dn-cr-al-tt-dt-se-cr,
1354
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-cr, var(--_ctm-dn-cr-al-tt-dt-se-cr))
1355
+ );
1356
+ font-family: var(
1357
+ --_sf-hr-ff,
1358
+ var(
1359
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-fy,
1360
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy))
1361
+ )
1362
+ );
1363
+ text-transform: var(
1364
+ --_sf-hr-tt-tm,
1365
+ var(
1366
+ --_ctm-mob-dn-cr-al-tt-dt-se-tt-tm,
1367
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-tm, var(--_ctm-dn-cr-al-tt-dt-se-tt-tm))
1368
+ )
1369
+ );
1370
+ word-wrap: var(
1371
+ --_sf-hr-wd-wp,
1372
+ var(
1373
+ --_ctm-mob-dn-cr-al-tt-dt-se-wd-wp,
1374
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-wp, var(--_ctm-dn-cr-al-tt-dt-se-wd-wp))
1375
+ )
1376
+ );
1377
+ word-break: var(
1378
+ --_sf-hr-wd-bk,
1379
+ var(
1380
+ --_ctm-mob-dn-cr-al-tt-dt-se-wd-bk,
1381
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-wd-bk, var(--_ctm-dn-cr-al-tt-dt-se-wd-bk))
1382
+ )
1383
+ );
1384
+ font-size: var(
1385
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-se,
1386
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se))
1387
+ );
1388
+ font-weight: var(
1389
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-wt,
1390
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-dn-cr-al-tt-dt-se-ft-wt))
1391
+ );
1392
+ font-style: var(
1393
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-se-ic,
1394
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-dn-cr-al-tt-dt-se-ft-se-ic))
1395
+ );
1396
+ text-align: var(
1397
+ --_ctm-mob-dn-cr-al-tt-dt-se-tt-an,
1398
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-dn-cr-al-tt-dt-se-tt-an))
1399
+ );
1400
+ letter-spacing: var(
1401
+ --_ctm-mob-dn-cr-al-tt-dt-se-lr-sg,
1402
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-dn-cr-al-tt-dt-se-lr-sg))
1403
+ );
1404
+ line-height: var(
1405
+ --_ctm-mob-dn-cr-al-tt-dt-se-le-ht,
1406
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-dn-cr-al-tt-dt-se-le-ht))
1407
+ );
1408
+ text-decoration: var(
1409
+ --_ctm-mob-dn-cr-al-tt-dt-se-ue,
1410
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ue, var(--_ctm-dn-cr-al-tt-dt-se-ue))
1411
+ );
942
1412
  // &:hover {
943
1413
  // color: var(--_primary-700);
944
1414
  // }
945
1415
  }
946
1416
  }
947
-
948
1417
  p {
949
- color: var(--_ctm-mob-dn-fs-wt-cr-dc,
950
- var(--_ctm-tab-dn-fs-wt-cr-dc, var(--_ctm-dn-fs-wt-cr-dc)));
951
- font-family: var(--_sf-hr-ff,
952
- var(--_ctm-mob-dn-fs-wt-ft-fy-dc,
953
- var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc))));
954
- text-transform: var(--_sf-hr-tt-tm,
955
- var(--_ctm-mob-dn-fs-wt-tt-tm-dc,
956
- var(--_ctm-tab-dn-fs-wt-tt-tm-dc, var(--_ctm-dn-fs-wt-tt-tm-dc))));
957
- word-wrap: var(--_sf-hr-wd-wp,
958
- var(--_ctm-mob-dn-fs-wt-wd-wp-dc,
959
- var(--_ctm-tab-dn-fs-wt-wd-wp-dc, var(--_ctm-dn-fs-wt-wd-wp-dc))));
960
- word-break: var(--_sf-hr-wd-bk,
961
- var(--_ctm-mob-dn-fs-wt-wd-bk-dc,
962
- var(--_ctm-tab-dn-fs-wt-wd-bk-dc, var(--_ctm-dn-fs-wt-wd-bk-dc))));
963
- font-size: var(--_ctm-mob-dn-fs-wt-ft-se-dc,
964
- var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc)));
965
- font-weight: var(--_ctm-mob-dn-fs-wt-ft-wt-dc,
966
- var(--_ctm-tab-dn-fs-wt-ft-wt-dc, var(--_ctm-dn-fs-wt-ft-wt-dc)));
967
- font-style: var(--_ctm-mob-dn-fs-wt-ft-se-ic-dc,
968
- var(--_ctm-tab-dn-fs-wt-ft-se-ic-dc, var(--_ctm-dn-fs-wt-ft-se-ic-dc)));
969
- text-align: var(--_ctm-mob-dn-fs-wt-tt-an-dc,
970
- var(--_ctm-tab-dn-fs-wt-tt-an-dc, var(--_ctm-dn-fs-wt-tt-an-dc)));
971
- letter-spacing: var(--_ctm-mob-dn-fs-wt-lr-sg-dc,
972
- var(--_ctm-tab-dn-fs-wt-lr-sg-dc, var(--_ctm-dn-fs-wt-lr-sg-dc)));
973
- line-height: var(--_ctm-mob-dn-fs-wt-le-ht-dc,
974
- var(--_ctm-tab-dn-fs-wt-le-ht-dc, var(--_ctm-dn-fs-wt-le-ht-dc)));
975
- text-decoration: var(--_ctm-mob-dn-fs-wt-ue-dc,
976
- var(--_ctm-tab-dn-fs-wt-ue-dc, var(--_ctm-dn-fs-wt-ue-dc)));
1418
+ color: var(
1419
+ --_ctm-mob-dn-fs-wt-cr-dc,
1420
+ var(--_ctm-tab-dn-fs-wt-cr-dc, var(--_ctm-dn-fs-wt-cr-dc))
1421
+ );
1422
+ font-family: var(
1423
+ --_sf-hr-ff,
1424
+ var(
1425
+ --_ctm-mob-dn-fs-wt-ft-fy-dc,
1426
+ var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc))
1427
+ )
1428
+ );
1429
+ text-transform: var(
1430
+ --_sf-hr-tt-tm,
1431
+ var(
1432
+ --_ctm-mob-dn-fs-wt-tt-tm-dc,
1433
+ var(--_ctm-tab-dn-fs-wt-tt-tm-dc, var(--_ctm-dn-fs-wt-tt-tm-dc))
1434
+ )
1435
+ );
1436
+ word-wrap: var(
1437
+ --_sf-hr-wd-wp,
1438
+ var(
1439
+ --_ctm-mob-dn-fs-wt-wd-wp-dc,
1440
+ var(--_ctm-tab-dn-fs-wt-wd-wp-dc, var(--_ctm-dn-fs-wt-wd-wp-dc))
1441
+ )
1442
+ );
1443
+ word-break: var(
1444
+ --_sf-hr-wd-bk,
1445
+ var(
1446
+ --_ctm-mob-dn-fs-wt-wd-bk-dc,
1447
+ var(--_ctm-tab-dn-fs-wt-wd-bk-dc, var(--_ctm-dn-fs-wt-wd-bk-dc))
1448
+ )
1449
+ );
1450
+ font-size: var(
1451
+ --_ctm-mob-dn-fs-wt-ft-se-dc,
1452
+ var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc))
1453
+ );
1454
+ font-weight: var(
1455
+ --_ctm-mob-dn-fs-wt-ft-wt-dc,
1456
+ var(--_ctm-tab-dn-fs-wt-ft-wt-dc, var(--_ctm-dn-fs-wt-ft-wt-dc))
1457
+ );
1458
+ font-style: var(
1459
+ --_ctm-mob-dn-fs-wt-ft-se-ic-dc,
1460
+ var(--_ctm-tab-dn-fs-wt-ft-se-ic-dc, var(--_ctm-dn-fs-wt-ft-se-ic-dc))
1461
+ );
1462
+ text-align: var(
1463
+ --_ctm-mob-dn-fs-wt-tt-an-dc,
1464
+ var(--_ctm-tab-dn-fs-wt-tt-an-dc, var(--_ctm-dn-fs-wt-tt-an-dc))
1465
+ );
1466
+ letter-spacing: var(
1467
+ --_ctm-mob-dn-fs-wt-lr-sg-dc,
1468
+ var(--_ctm-tab-dn-fs-wt-lr-sg-dc, var(--_ctm-dn-fs-wt-lr-sg-dc))
1469
+ );
1470
+ line-height: var(
1471
+ --_ctm-mob-dn-fs-wt-le-ht-dc,
1472
+ var(--_ctm-tab-dn-fs-wt-le-ht-dc, var(--_ctm-dn-fs-wt-le-ht-dc))
1473
+ );
1474
+ text-decoration: var(
1475
+ --_ctm-mob-dn-fs-wt-ue-dc,
1476
+ var(--_ctm-tab-dn-fs-wt-ue-dc, var(--_ctm-dn-fs-wt-ue-dc))
1477
+ );
977
1478
  }
978
-
979
1479
  .flt__dropdowns {
980
1480
  display: flex;
981
1481
  // flex-direction: column;
@@ -983,7 +1483,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
983
1483
  align-items: center;
984
1484
  flex-wrap: wrap;
985
1485
  gap: 20px;
986
-
987
1486
  .filter__option__dropdown {
988
1487
  display: flex;
989
1488
  gap: 20px;
@@ -992,7 +1491,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
992
1491
  padding: 6px 12px;
993
1492
  border-radius: 6px;
994
1493
  width: fit-content;
995
-
996
1494
  &:hover {
997
1495
  border: 1px solid var(--_gray-200);
998
1496
  background-color: var(--_gray-50);
@@ -1006,19 +1504,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1006
1504
  flex-wrap: wrap;
1007
1505
  gap: 20px;
1008
1506
  }
1009
-
1010
1507
  .selected__items {
1011
1508
  display: flex;
1012
1509
  flex-wrap: wrap;
1013
1510
  gap: 10px;
1014
1511
  align-items: center;
1015
-
1016
1512
  .selected__category {
1017
1513
  display: flex;
1018
1514
  align-items: center;
1019
1515
  gap: 10px;
1020
1516
  flex-wrap: wrap;
1021
-
1022
1517
  .selected_item {
1023
1518
  display: flex;
1024
1519
  gap: 8px;
@@ -1027,107 +1522,204 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1027
1522
  padding: 6px 12px;
1028
1523
  align-items: center;
1029
1524
 
1030
- color: var(--_sf-hr-fc,
1031
- var(--_ctm-mob-dn-sd-im-dt-se-cr,
1032
- var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr))));
1033
- font-family: var(--_sf-hr-ff,
1034
- var(--_ctm-mob-dn-sd-im-dt-se-ft-fy,
1035
- var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy))));
1036
- text-transform: var(--_sf-hr-tt-tm,
1037
- var(--_ctm-mob-dn-sd-im-dt-se-tt-tm,
1038
- var(--_ctm-tab-dn-sd-im-dt-se-tt-tm, var(--_ctm-dn-sd-im-dt-se-tt-tm))));
1039
- word-wrap: var(--_sf-hr-wd-wp,
1040
- var(--_ctm-mob-dn-sd-im-dt-se-wd-wp,
1041
- var(--_ctm-tab-dn-sd-im-dt-se-wd-wp, var(--_ctm-dn-sd-im-dt-se-wd-wp))));
1042
- word-break: var(--_sf-hr-wd-bk,
1043
- var(--_ctm-mob-dn-sd-im-dt-se-wd-bk,
1044
- var(--_ctm-tab-dn-sd-im-dt-se-wd-bk, var(--_ctm-dn-sd-im-dt-se-wd-bk))));
1045
-
1525
+ color: var(
1526
+ --_sf-hr-fc,
1527
+ var(
1528
+ --_ctm-mob-dn-sd-im-dt-se-cr,
1529
+ var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr))
1530
+ )
1531
+ );
1532
+ font-family: var(
1533
+ --_sf-hr-ff,
1534
+ var(
1535
+ --_ctm-mob-dn-sd-im-dt-se-ft-fy,
1536
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy))
1537
+ )
1538
+ );
1539
+ text-transform: var(
1540
+ --_sf-hr-tt-tm,
1541
+ var(
1542
+ --_ctm-mob-dn-sd-im-dt-se-tt-tm,
1543
+ var(--_ctm-tab-dn-sd-im-dt-se-tt-tm, var(--_ctm-dn-sd-im-dt-se-tt-tm))
1544
+ )
1545
+ );
1546
+ word-wrap: var(
1547
+ --_sf-hr-wd-wp,
1548
+ var(
1549
+ --_ctm-mob-dn-sd-im-dt-se-wd-wp,
1550
+ var(--_ctm-tab-dn-sd-im-dt-se-wd-wp, var(--_ctm-dn-sd-im-dt-se-wd-wp))
1551
+ )
1552
+ );
1553
+ word-break: var(
1554
+ --_sf-hr-wd-bk,
1555
+ var(
1556
+ --_ctm-mob-dn-sd-im-dt-se-wd-bk,
1557
+ var(--_ctm-tab-dn-sd-im-dt-se-wd-bk, var(--_ctm-dn-sd-im-dt-se-wd-bk))
1558
+ )
1559
+ );
1046
1560
  &.flex__overflow {
1047
1561
  white-space: normal;
1048
1562
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1049
1563
  }
1050
-
1051
- font-size: var(--_sf-hr-fs,
1052
- var(--_ctm-mob-dn-sd-im-dt-se-ft-se,
1053
- var(--_ctm-tab-dn-sd-im-dt-se-ft-se, var(--_ctm-dn-sd-im-dt-se-ft-se))));
1054
- font-weight: var(--_sf-hr-fw,
1055
- var(--_ctm-mob-dn-sd-im-dt-se-ft-wt,
1056
- var(--_ctm-tab-dn-sd-im-dt-se-ft-wt, var(--_ctm-dn-sd-im-dt-se-ft-wt))));
1057
- font-style: var(--_sf-hr-ft,
1058
- var(--_ctm-mob-dn-sd-im-dt-se-ft-se-ic,
1059
- var(--_ctm-tab-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-dn-sd-im-dt-se-ft-se-ic))));
1060
- text-align: var(--_sf-hr-ta,
1061
- var(--_ctm-mob-dn-sd-im-dt-se-tt-an,
1062
- var(--_ctm-tab-dn-sd-im-dt-se-tt-an, var(--_ctm-dn-sd-im-dt-se-tt-an))));
1063
- letter-spacing: var(--_sf-hr-ls,
1064
- var(--_ctm-mob-dn-sd-im-dt-se-lr-sg,
1065
- var(--_ctm-tab-dn-sd-im-dt-se-lr-sg, var(--_ctm-dn-sd-im-dt-se-lr-sg))));
1066
- line-height: var(--_sf-hr-lh,
1067
- var(--_ctm-mob-dn-sd-im-dt-se-le-ht,
1068
- var(--_ctm-tab-dn-sd-im-dt-se-le-ht, var(--_ctm-dn-sd-im-dt-se-le-ht))));
1069
- text-decoration: var(--_sf-hr-tt-dn,
1070
- var(--_ctm-mob-dn-sd-im-dt-se-ue,
1071
- var(--_ctm-tab-dn-sd-im-dt-se-ue, var(--_ctm-dn-sd-im-dt-se-ue))));
1072
-
1564
+ font-size: var(
1565
+ --_sf-hr-fs,
1566
+ var(
1567
+ --_ctm-mob-dn-sd-im-dt-se-ft-se,
1568
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-se, var(--_ctm-dn-sd-im-dt-se-ft-se))
1569
+ )
1570
+ );
1571
+ font-weight: var(
1572
+ --_sf-hr-fw,
1573
+ var(
1574
+ --_ctm-mob-dn-sd-im-dt-se-ft-wt,
1575
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-wt, var(--_ctm-dn-sd-im-dt-se-ft-wt))
1576
+ )
1577
+ );
1578
+ font-style: var(
1579
+ --_sf-hr-ft,
1580
+ var(
1581
+ --_ctm-mob-dn-sd-im-dt-se-ft-se-ic,
1582
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-dn-sd-im-dt-se-ft-se-ic))
1583
+ )
1584
+ );
1585
+ text-align: var(
1586
+ --_sf-hr-ta,
1587
+ var(
1588
+ --_ctm-mob-dn-sd-im-dt-se-tt-an,
1589
+ var(--_ctm-tab-dn-sd-im-dt-se-tt-an, var(--_ctm-dn-sd-im-dt-se-tt-an))
1590
+ )
1591
+ );
1592
+ letter-spacing: var(
1593
+ --_sf-hr-ls,
1594
+ var(
1595
+ --_ctm-mob-dn-sd-im-dt-se-lr-sg,
1596
+ var(--_ctm-tab-dn-sd-im-dt-se-lr-sg, var(--_ctm-dn-sd-im-dt-se-lr-sg))
1597
+ )
1598
+ );
1599
+ line-height: var(
1600
+ --_sf-hr-lh,
1601
+ var(
1602
+ --_ctm-mob-dn-sd-im-dt-se-le-ht,
1603
+ var(--_ctm-tab-dn-sd-im-dt-se-le-ht, var(--_ctm-dn-sd-im-dt-se-le-ht))
1604
+ )
1605
+ );
1606
+ text-decoration: var(
1607
+ --_sf-hr-tt-dn,
1608
+ var(
1609
+ --_ctm-mob-dn-sd-im-dt-se-ue,
1610
+ var(--_ctm-tab-dn-sd-im-dt-se-ue, var(--_ctm-dn-sd-im-dt-se-ue))
1611
+ )
1612
+ );
1073
1613
  &:hover {
1074
1614
  // border: 1px solid var(--_gray-300);
1075
1615
  // background-color: var(--_gray-50);
1076
1616
  // cursor: pointer;
1077
- --_sf-hr-bd-cr: var(--_ctm-mob-dn-sd-im-hr-se-bd-cr,
1078
- var(--_ctm-tab-dn-sd-im-hr-se-bd-cr, var(--_ctm-dn-sd-im-hr-se-bd-cr)));
1079
- --_sf-hr-br-cr: var(--_ctm-mob-dn-sd-im-hr-se-br-cr,
1080
- var(--_ctm-tab-dn-sd-im-hr-se-br-cr, var(--_ctm-dn-sd-im-hr-se-br-cr)));
1081
- --_sf-hr-br-st: var(--_ctm-mob-dn-sd-im-hr-se-br-se,
1082
- var(--_ctm-tab-dn-sd-im-hr-se-br-se, var(--_ctm-dn-sd-im-hr-se-br-se)));
1083
- --_sf-hr-br-wh: var(--_ctm-mob-dn-sd-im-hr-se-br-wh,
1084
- var(--_ctm-tab-dn-sd-im-hr-se-br-wh, var(--_ctm-dn-sd-im-hr-se-br-wh)));
1085
- --_sf-hr-br-br: var(--_ctm-mob-dn-sd-im-hr-se-br-rs,
1086
- var(--_ctm-tab-dn-sd-im-hr-se-br-rs, var(--_ctm-dn-sd-im-hr-se-br-rs)));
1087
- --_sf-hr-sd-im-pg: var(--_ctm-mob-dn-sd-im-hr-se-pg,
1088
- var(--_ctm-tab-dn-sd-im-hr-se-pg, var(--_ctm-dn-sd-im-hr-se-pg)));
1089
- --_sf-hr-bx-sw: var(--_ctm-mob-dn-sd-im-hr-se-sw-ae,
1090
- var(--_ctm-tab-dn-sd-im-hr-se-sw-ae, var(--_ctm-dn-sd-im-hr-se-sw-ae))) var(--_ctm-mob-dn-sd-im-hr-se-sw-br,
1091
- var(--_ctm-tab-dn-sd-im-hr-se-sw-br, var(--_ctm-dn-sd-im-hr-se-sw-br))) var(--_ctm-mob-dn-sd-im-hr-se-sw-sd,
1092
- var(--_ctm-tab-dn-sd-im-hr-se-sw-sd, var(--_ctm-dn-sd-im-hr-se-sw-sd))) var(--_ctm-mob-dn-sd-im-hr-se-sw-cr,
1093
- var(--_ctm-tab-dn-sd-im-hr-se-sw-cr, var(--_ctm-dn-sd-im-hr-se-sw-cr)));
1094
-
1095
- --_sf-hr-fc: var(--_ctm-mob-dn-sd-im-hr-se-cr,
1096
- var(--_ctm-tab-dn-sd-im-hr-se-cr, var(--_ctm-dn-sd-im-hr-se-cr)));
1097
- --_sf-hr-ff: var(--_ctm-mob-dn-sd-im-hr-se-ft-fy,
1098
- var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy)));
1099
- --_sf-hr-tt-tm: var(--_ctm-mob-dn-sd-im-hr-se-tt-tm,
1100
- var(--_ctm-tab-dn-sd-im-hr-se-tt-tm, var(--_ctm-dn-sd-im-hr-se-tt-tm)));
1101
- --_sf-hr-wd-wp: var(--_ctm-mob-dn-sd-im-hr-se-wd-wp,
1102
- var(--_ctm-tab-dn-sd-im-hr-se-wd-wp, var(--_ctm-dn-sd-im-hr-se-wd-wp)));
1103
- --_sf-hr-wd-bk: var(--_ctm-mob-dn-sd-im-hr-se-wd-bk,
1104
- var(--_ctm-tab-dn-sd-im-hr-se-wd-bk, var(--_ctm-dn-sd-im-hr-se-wd-bk)));
1105
- --_sf-hr-fs: var(--_ctm-mob-dn-sd-im-hr-se-ft-se,
1106
- var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se)));
1107
- --_sf-hr-fw: var(--_ctm-mob-dn-sd-im-hr-se-ft-wt,
1108
- var(--_ctm-tab-dn-sd-im-hr-se-ft-wt, var(--_ctm-dn-sd-im-hr-se-ft-wt)));
1109
- --_sf-hr-ft: var(--_ctm-mob-dn-sd-im-hr-se-ft-se-ic,
1110
- var(--_ctm-tab-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-dn-sd-im-hr-se-ft-se-ic)));
1111
- --_sf-hr-ta: var(--_ctm-mob-dn-sd-im-hr-se-tt-an,
1112
- var(--_ctm-tab-dn-sd-im-hr-se-tt-an, var(--_ctm-dn-sd-im-hr-se-tt-an)));
1113
- --_sf-hr-ls: var(--_ctm-mob-dn-sd-im-hr-se-lr-sg,
1114
- var(--_ctm-tab-dn-sd-im-hr-se-lr-sg, var(--_ctm-dn-sd-im-hr-se-lr-sg)));
1115
- --_sf-hr-lh: var(--_ctm-mob-dn-sd-im-hr-se-le-ht,
1116
- var(--_ctm-tab-dn-sd-im-hr-se-le-ht, var(--_ctm-dn-sd-im-hr-se-le-ht)));
1117
-
1118
- --_sf-hr-ic-wt: var(--_ctm-mob-dn-sd-im-hr-se-in-se,
1119
- var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se)));
1120
- --_sf-hr-ic-ht: var(--_ctm-mob-dn-sd-im-hr-se-in-se,
1121
- var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se)));
1122
- --_sf-hr-ic-st: var(--_ctm-mob-dn-sd-im-hr-se-in-c1,
1123
- var(--_ctm-tab-dn-sd-im-hr-se-in-c1, var(--_ctm-dn-sd-im-hr-se-in-c1)));
1124
- --_sf-hr-tt-dn: var(--_ctm-mob-dn-sd-im-hr-se-ue,
1125
- var(--_ctm-tab-dn-sd-im-hr-se-ue, var(--_ctm-dn-sd-im-hr-se-ue)));
1617
+ --_sf-hr-bd-cr: var(
1618
+ --_ctm-mob-dn-sd-im-hr-se-bd-cr,
1619
+ var(--_ctm-tab-dn-sd-im-hr-se-bd-cr, var(--_ctm-dn-sd-im-hr-se-bd-cr))
1620
+ );
1621
+ --_sf-hr-br-cr: var(
1622
+ --_ctm-mob-dn-sd-im-hr-se-br-cr,
1623
+ var(--_ctm-tab-dn-sd-im-hr-se-br-cr, var(--_ctm-dn-sd-im-hr-se-br-cr))
1624
+ );
1625
+ --_sf-hr-br-st: var(
1626
+ --_ctm-mob-dn-sd-im-hr-se-br-se,
1627
+ var(--_ctm-tab-dn-sd-im-hr-se-br-se, var(--_ctm-dn-sd-im-hr-se-br-se))
1628
+ );
1629
+ --_sf-hr-br-wh: var(
1630
+ --_ctm-mob-dn-sd-im-hr-se-br-wh,
1631
+ var(--_ctm-tab-dn-sd-im-hr-se-br-wh, var(--_ctm-dn-sd-im-hr-se-br-wh))
1632
+ );
1633
+ --_sf-hr-br-br: var(
1634
+ --_ctm-mob-dn-sd-im-hr-se-br-rs,
1635
+ var(--_ctm-tab-dn-sd-im-hr-se-br-rs, var(--_ctm-dn-sd-im-hr-se-br-rs))
1636
+ );
1637
+ --_sf-hr-sd-im-pg: var(
1638
+ --_ctm-mob-dn-sd-im-hr-se-pg,
1639
+ var(--_ctm-tab-dn-sd-im-hr-se-pg, var(--_ctm-dn-sd-im-hr-se-pg))
1640
+ );
1641
+ --_sf-hr-bx-sw: var(
1642
+ --_ctm-mob-dn-sd-im-hr-se-sw-ae,
1643
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-ae, var(--_ctm-dn-sd-im-hr-se-sw-ae))
1644
+ )
1645
+ var(
1646
+ --_ctm-mob-dn-sd-im-hr-se-sw-br,
1647
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-br, var(--_ctm-dn-sd-im-hr-se-sw-br))
1648
+ )
1649
+ var(
1650
+ --_ctm-mob-dn-sd-im-hr-se-sw-sd,
1651
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-sd, var(--_ctm-dn-sd-im-hr-se-sw-sd))
1652
+ )
1653
+ var(
1654
+ --_ctm-mob-dn-sd-im-hr-se-sw-cr,
1655
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-cr, var(--_ctm-dn-sd-im-hr-se-sw-cr))
1656
+ );
1657
+
1658
+ --_sf-hr-fc: var(
1659
+ --_ctm-mob-dn-sd-im-hr-se-cr,
1660
+ var(--_ctm-tab-dn-sd-im-hr-se-cr, var(--_ctm-dn-sd-im-hr-se-cr))
1661
+ );
1662
+ --_sf-hr-ff: var(
1663
+ --_ctm-mob-dn-sd-im-hr-se-ft-fy,
1664
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy))
1665
+ );
1666
+ --_sf-hr-tt-tm: var(
1667
+ --_ctm-mob-dn-sd-im-hr-se-tt-tm,
1668
+ var(--_ctm-tab-dn-sd-im-hr-se-tt-tm, var(--_ctm-dn-sd-im-hr-se-tt-tm))
1669
+ );
1670
+ --_sf-hr-wd-wp: var(
1671
+ --_ctm-mob-dn-sd-im-hr-se-wd-wp,
1672
+ var(--_ctm-tab-dn-sd-im-hr-se-wd-wp, var(--_ctm-dn-sd-im-hr-se-wd-wp))
1673
+ );
1674
+ --_sf-hr-wd-bk: var(
1675
+ --_ctm-mob-dn-sd-im-hr-se-wd-bk,
1676
+ var(--_ctm-tab-dn-sd-im-hr-se-wd-bk, var(--_ctm-dn-sd-im-hr-se-wd-bk))
1677
+ );
1678
+ --_sf-hr-fs: var(
1679
+ --_ctm-mob-dn-sd-im-hr-se-ft-se,
1680
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se))
1681
+ );
1682
+ --_sf-hr-fw: var(
1683
+ --_ctm-mob-dn-sd-im-hr-se-ft-wt,
1684
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-wt, var(--_ctm-dn-sd-im-hr-se-ft-wt))
1685
+ );
1686
+ --_sf-hr-ft: var(
1687
+ --_ctm-mob-dn-sd-im-hr-se-ft-se-ic,
1688
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-dn-sd-im-hr-se-ft-se-ic))
1689
+ );
1690
+ --_sf-hr-ta: var(
1691
+ --_ctm-mob-dn-sd-im-hr-se-tt-an,
1692
+ var(--_ctm-tab-dn-sd-im-hr-se-tt-an, var(--_ctm-dn-sd-im-hr-se-tt-an))
1693
+ );
1694
+ --_sf-hr-ls: var(
1695
+ --_ctm-mob-dn-sd-im-hr-se-lr-sg,
1696
+ var(--_ctm-tab-dn-sd-im-hr-se-lr-sg, var(--_ctm-dn-sd-im-hr-se-lr-sg))
1697
+ );
1698
+ --_sf-hr-lh: var(
1699
+ --_ctm-mob-dn-sd-im-hr-se-le-ht,
1700
+ var(--_ctm-tab-dn-sd-im-hr-se-le-ht, var(--_ctm-dn-sd-im-hr-se-le-ht))
1701
+ );
1702
+
1703
+ --_sf-hr-ic-wt: var(
1704
+ --_ctm-mob-dn-sd-im-hr-se-in-se,
1705
+ var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
1706
+ );
1707
+ --_sf-hr-ic-ht: var(
1708
+ --_ctm-mob-dn-sd-im-hr-se-in-se,
1709
+ var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
1710
+ );
1711
+ --_sf-hr-ic-st: var(
1712
+ --_ctm-mob-dn-sd-im-hr-se-in-c1,
1713
+ var(--_ctm-tab-dn-sd-im-hr-se-in-c1, var(--_ctm-dn-sd-im-hr-se-in-c1))
1714
+ );
1715
+ --_sf-hr-tt-dn: var(
1716
+ --_ctm-mob-dn-sd-im-hr-se-ue,
1717
+ var(--_ctm-tab-dn-sd-im-hr-se-ue, var(--_ctm-dn-sd-im-hr-se-ue))
1718
+ );
1126
1719
 
1127
1720
  &[data-hover-show-shadow="false"] {
1128
1721
  --_hover-show-shadow: none;
1129
1722
  }
1130
-
1131
1723
  &[data-hover-show-icon="false"] {
1132
1724
  --_hover-show-icon: none;
1133
1725
  }
@@ -1140,11 +1732,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1140
1732
  .clear__btn {
1141
1733
  display: flex;
1142
1734
  align-items: center;
1143
-
1144
1735
  svg {
1145
1736
  width: 18px;
1146
1737
  height: 18px;
1147
-
1148
1738
  &:hover {
1149
1739
  path {
1150
1740
  stroke: var(--_gray-900);
@@ -1152,7 +1742,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1152
1742
  }
1153
1743
  }
1154
1744
  }
1155
-
1156
1745
  //Filter Features Ends
1157
1746
 
1158
1747
  // Input checkbox Starts
@@ -1172,7 +1761,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1172
1761
  -moz-user-select: none;
1173
1762
  -ms-user-select: none;
1174
1763
  user-select: none;
1175
-
1176
1764
  .color-image {
1177
1765
  width: 15px;
1178
1766
  height: 15px;
@@ -1181,7 +1769,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1181
1769
  object-fit: "cover";
1182
1770
  display: "block";
1183
1771
  }
1184
-
1185
1772
  .color {
1186
1773
  width: 15px;
1187
1774
  height: 15px;
@@ -1190,34 +1777,66 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1190
1777
  }
1191
1778
 
1192
1779
  .option__value {
1193
- color: var(--_ctm-mob-dn-on-ls-cr-dc,
1194
- var(--_ctm-tab-dn-on-ls-cr-dc, var(--_ctm-dn-on-ls-cr-dc)));
1195
- font-family: var(--_sf-hr-ff,
1196
- var(--_ctm-mob-dn-on-ls-ft-fy-dc,
1197
- var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc))));
1198
- text-transform: var(--_sf-hr-tt-tm,
1199
- var(--_ctm-mob-dn-on-ls-tt-tm-dc,
1200
- var(--_ctm-tab-dn-on-ls-tt-tm-dc, var(--_ctm-dn-on-ls-tt-tm-dc))));
1201
- word-wrap: var(--_sf-hr-wd-wp,
1202
- var(--_ctm-mob-dn-on-ls-wd-wp-dc,
1203
- var(--_ctm-tab-dn-on-ls-wd-wp-dc, var(--_ctm-dn-on-ls-wd-wp-dc))));
1204
- word-break: var(--_sf-hr-wd-bk,
1205
- var(--_ctm-mob-dn-on-ls-wd-bk-dc,
1206
- var(--_ctm-tab-dn-on-ls-wd-bk-dc, var(--_ctm-dn-on-ls-wd-bk-dc))));
1207
- font-size: var(--_ctm-mob-dn-on-ls-ft-se-dc,
1208
- var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc)));
1209
- font-weight: var(--_ctm-mob-dn-on-ls-ft-wt-dc,
1210
- var(--_ctm-tab-dn-on-ls-ft-wt-dc, var(--_ctm-dn-on-ls-ft-wt-dc)));
1211
- font-style: var(--_ctm-mob-dn-on-ls-ft-se-ic-dc,
1212
- var(--_ctm-tab-dn-on-ls-ft-se-ic-dc, var(--_ctm-dn-on-ls-ft-se-ic-dc)));
1213
- text-align: var(--_ctm-mob-dn-on-ls-tt-an-dc,
1214
- var(--_ctm-tab-dn-on-ls-tt-an-dc, var(--_ctm-dn-on-ls-tt-an-dc)));
1215
- letter-spacing: var(--_ctm-mob-dn-on-ls-lr-sg-dc,
1216
- var(--_ctm-tab-dn-on-ls-lr-sg-dc, var(--_ctm-dn-on-ls-lr-sg-dc)));
1217
- line-height: var(--_ctm-mob-dn-on-ls-le-ht-dc,
1218
- var(--_ctm-tab-dn-on-ls-le-ht-dc, var(--_ctm-dn-on-ls-le-ht-dc)));
1219
- text-decoration: var(--_ctm-mob-dn-on-ls-ue-dc,
1220
- var(--_ctm-tab-dn-on-ls-ue-dc, var(--_ctm-dn-on-ls-ue-dc)));
1780
+ color: var(
1781
+ --_ctm-mob-dn-on-ls-cr-dc,
1782
+ var(--_ctm-tab-dn-on-ls-cr-dc, var(--_ctm-dn-on-ls-cr-dc))
1783
+ );
1784
+ font-family: var(
1785
+ --_sf-hr-ff,
1786
+ var(
1787
+ --_ctm-mob-dn-on-ls-ft-fy-dc,
1788
+ var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc))
1789
+ )
1790
+ );
1791
+ text-transform: var(
1792
+ --_sf-hr-tt-tm,
1793
+ var(
1794
+ --_ctm-mob-dn-on-ls-tt-tm-dc,
1795
+ var(--_ctm-tab-dn-on-ls-tt-tm-dc, var(--_ctm-dn-on-ls-tt-tm-dc))
1796
+ )
1797
+ );
1798
+ word-wrap: var(
1799
+ --_sf-hr-wd-wp,
1800
+ var(
1801
+ --_ctm-mob-dn-on-ls-wd-wp-dc,
1802
+ var(--_ctm-tab-dn-on-ls-wd-wp-dc, var(--_ctm-dn-on-ls-wd-wp-dc))
1803
+ )
1804
+ );
1805
+ word-break: var(
1806
+ --_sf-hr-wd-bk,
1807
+ var(
1808
+ --_ctm-mob-dn-on-ls-wd-bk-dc,
1809
+ var(--_ctm-tab-dn-on-ls-wd-bk-dc, var(--_ctm-dn-on-ls-wd-bk-dc))
1810
+ )
1811
+ );
1812
+ font-size: var(
1813
+ --_ctm-mob-dn-on-ls-ft-se-dc,
1814
+ var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc))
1815
+ );
1816
+ font-weight: var(
1817
+ --_ctm-mob-dn-on-ls-ft-wt-dc,
1818
+ var(--_ctm-tab-dn-on-ls-ft-wt-dc, var(--_ctm-dn-on-ls-ft-wt-dc))
1819
+ );
1820
+ font-style: var(
1821
+ --_ctm-mob-dn-on-ls-ft-se-ic-dc,
1822
+ var(--_ctm-tab-dn-on-ls-ft-se-ic-dc, var(--_ctm-dn-on-ls-ft-se-ic-dc))
1823
+ );
1824
+ text-align: var(
1825
+ --_ctm-mob-dn-on-ls-tt-an-dc,
1826
+ var(--_ctm-tab-dn-on-ls-tt-an-dc, var(--_ctm-dn-on-ls-tt-an-dc))
1827
+ );
1828
+ letter-spacing: var(
1829
+ --_ctm-mob-dn-on-ls-lr-sg-dc,
1830
+ var(--_ctm-tab-dn-on-ls-lr-sg-dc, var(--_ctm-dn-on-ls-lr-sg-dc))
1831
+ );
1832
+ line-height: var(
1833
+ --_ctm-mob-dn-on-ls-le-ht-dc,
1834
+ var(--_ctm-tab-dn-on-ls-le-ht-dc, var(--_ctm-dn-on-ls-le-ht-dc))
1835
+ );
1836
+ text-decoration: var(
1837
+ --_ctm-mob-dn-on-ls-ue-dc,
1838
+ var(--_ctm-tab-dn-on-ls-ue-dc, var(--_ctm-dn-on-ls-ue-dc))
1839
+ );
1221
1840
  }
1222
1841
  }
1223
1842
 
@@ -1245,47 +1864,78 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1245
1864
  // Unchecked hover. The checkbox variant had no hover rule at all, so the
1246
1865
  // Hover state of Checkbox Unchecked Style reached nothing here.
1247
1866
  &:hover {
1248
- width: prepareMediaVariable(--_ctm-dn-cx-ud-se-hr-se-wh,
1249
- prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px));
1250
- height: prepareMediaVariable(--_ctm-dn-cx-ud-se-hr-se-ht,
1251
- prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px));
1252
- padding: prepareMediaVariable(--_ctm-dn-cx-ud-se-hr-se-pg,
1253
- prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0));
1867
+ width: prepareMediaVariable(
1868
+ --_ctm-dn-cx-ud-se-hr-se-wh,
1869
+ prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px)
1870
+ );
1871
+ height: prepareMediaVariable(
1872
+ --_ctm-dn-cx-ud-se-hr-se-ht,
1873
+ prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px)
1874
+ );
1875
+ padding: prepareMediaVariable(
1876
+ --_ctm-dn-cx-ud-se-hr-se-pg,
1877
+ prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0)
1878
+ );
1254
1879
  }
1255
-
1256
1880
  // border: 1px solid var(--_gray-500);
1257
1881
  // background-color: var(--_base-white);
1258
1882
  display: flex;
1259
1883
  justify-content: center;
1260
1884
  align-items: center;
1261
1885
 
1262
- background-color: var(--_ctm-mob-dn-cx-ud-se-dt-se-bd-cr,
1263
- var(--_ctm-tab-dn-cx-ud-se-dt-se-bd-cr, var(--_ctm-dn-cx-ud-se-dt-se-bd-cr)));
1264
- border-radius: var(--_ctm-mob-dn-cx-ud-se-dt-se-br-rs,
1265
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-dn-cx-ud-se-dt-se-br-rs)));
1886
+ background-color: var(
1887
+ --_ctm-mob-dn-cx-ud-se-dt-se-bd-cr,
1888
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-bd-cr, var(--_ctm-dn-cx-ud-se-dt-se-bd-cr))
1889
+ );
1890
+ border-radius: var(
1891
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-rs,
1892
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-dn-cx-ud-se-dt-se-br-rs))
1893
+ );
1266
1894
  transition: background-color 400ms ease-in-out;
1267
-
1268
1895
  &[data-show-default-unchecked-shadow="true"] {
1269
- box-shadow: var(--_show-shadow-clear-all,
1270
- var(--_ctm-mob-dn-cx-ud-se-dt-se-sw-ae,
1271
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-dn-cx-ud-se-dt-se-sw-ae))) var(--_ctm-mob-dn-cx-ud-se-dt-se-sw-br,
1272
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-dn-cx-ud-se-dt-se-sw-br))) var(--_ctm-mob-dn-cx-ud-se-dt-se-sw-sd,
1273
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-dn-cx-ud-se-dt-se-sw-sd))) var(--_ctm-mob-dn-cx-ud-se-dt-se-sw-cr,
1274
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-dn-cx-ud-se-dt-se-sw-cr))));
1896
+ box-shadow: var(
1897
+ --_show-shadow-clear-all,
1898
+ var(
1899
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-ae,
1900
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-dn-cx-ud-se-dt-se-sw-ae))
1901
+ )
1902
+ var(
1903
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-br,
1904
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-dn-cx-ud-se-dt-se-sw-br))
1905
+ )
1906
+ var(
1907
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-sd,
1908
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-dn-cx-ud-se-dt-se-sw-sd))
1909
+ )
1910
+ var(
1911
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-cr,
1912
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-dn-cx-ud-se-dt-se-sw-cr))
1913
+ )
1914
+ );
1275
1915
  }
1276
-
1277
1916
  &[data-show-default-unchecked-border="true"] {
1278
- border-color: var(--_sf-hr-br-cr,
1279
- var(--_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
1280
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))));
1281
- border-style: var(--_sf-hr-br-st,
1282
- var(--_ctm-mob-dn-cx-ud-se-dt-se-br-se,
1283
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-se, var(--_ctm-dn-cx-ud-se-dt-se-br-se))));
1284
- border-width: var(--_sf-hr-br-wh,
1285
- var(--_ctm-mob-dn-cx-ud-se-dt-se-br-wh,
1286
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-dn-cx-ud-se-dt-se-br-wh))));
1917
+ border-color: var(
1918
+ --_sf-hr-br-cr,
1919
+ var(
1920
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
1921
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
1922
+ )
1923
+ );
1924
+ border-style: var(
1925
+ --_sf-hr-br-st,
1926
+ var(
1927
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-se,
1928
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-se, var(--_ctm-dn-cx-ud-se-dt-se-br-se))
1929
+ )
1930
+ );
1931
+ border-width: var(
1932
+ --_sf-hr-br-wh,
1933
+ var(
1934
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-wh,
1935
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-dn-cx-ud-se-dt-se-br-wh))
1936
+ )
1937
+ );
1287
1938
  }
1288
-
1289
1939
  // &:hover {
1290
1940
  // &[data-show-hover-unchecked-border="true"] {
1291
1941
  // border-color: var(
@@ -1365,80 +2015,146 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1365
2015
  }
1366
2016
  }
1367
2017
 
1368
- .checkbox__radio input:checked~.checkmark {
2018
+ .checkbox__radio input:checked ~ .checkmark {
1369
2019
  // Checked has its own Layout Options, falling back to the unchecked ones so a
1370
2020
  // box that is only sized on one of the two sections stays a square.
1371
- width: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-wh,
1372
- prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px));
1373
- height: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-ht,
1374
- prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px));
1375
- padding: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-pg,
1376
- prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0));
1377
- background-color: var(--_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
1378
- var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr)));
1379
- border-radius: var(--_ctm-mob-dn-cx-cd-se-dt-se-br-rs,
1380
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-rs, var(--_ctm-dn-cx-cd-se-dt-se-br-rs)));
2021
+ width: prepareMediaVariable(
2022
+ --_ctm-dn-cx-cd-se-dt-se-wh,
2023
+ prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px)
2024
+ );
2025
+ height: prepareMediaVariable(
2026
+ --_ctm-dn-cx-cd-se-dt-se-ht,
2027
+ prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px)
2028
+ );
2029
+ padding: prepareMediaVariable(
2030
+ --_ctm-dn-cx-cd-se-dt-se-pg,
2031
+ prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0)
2032
+ );
2033
+ background-color: var(
2034
+ --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
2035
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
2036
+ );
2037
+ border-radius: var(
2038
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-rs,
2039
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-rs, var(--_ctm-dn-cx-cd-se-dt-se-br-rs))
2040
+ );
1381
2041
  transition: background-color 400ms ease-in-out;
1382
-
1383
2042
  &[data-show-default-checked-shadow="true"] {
1384
- box-shadow: var(--_show-shadow-clear-all,
1385
- var(--_ctm-mob-dn-cx-cd-se-dt-se-sw-ae,
1386
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-dn-cx-cd-se-dt-se-sw-ae))) var(--_ctm-mob-dn-cx-cd-se-dt-se-sw-br,
1387
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-dn-cx-cd-se-dt-se-sw-br))) var(--_ctm-mob-dn-cx-cd-se-dt-se-sw-sd,
1388
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-dn-cx-cd-se-dt-se-sw-sd))) var(--_ctm-mob-dn-cx-cd-se-dt-se-sw-cr,
1389
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-dn-cx-cd-se-dt-se-sw-cr))));
2043
+ box-shadow: var(
2044
+ --_show-shadow-clear-all,
2045
+ var(
2046
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-ae,
2047
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-dn-cx-cd-se-dt-se-sw-ae))
2048
+ )
2049
+ var(
2050
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-br,
2051
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-dn-cx-cd-se-dt-se-sw-br))
2052
+ )
2053
+ var(
2054
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-sd,
2055
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-dn-cx-cd-se-dt-se-sw-sd))
2056
+ )
2057
+ var(
2058
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-cr,
2059
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-dn-cx-cd-se-dt-se-sw-cr))
2060
+ )
2061
+ );
1390
2062
  }
1391
2063
 
1392
2064
  &[data-show-default-checked-border="true"] {
1393
- border-color: var(--_sf-hr-br-cr,
1394
- var(--_ctm-mob-dn-cx-cd-se-dt-se-br-cr,
1395
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-dn-cx-cd-se-dt-se-br-cr))));
1396
- border-style: var(--_sf-hr-br-st,
1397
- var(--_ctm-mob-dn-cx-cd-se-dt-se-br-se,
1398
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-se, var(--_ctm-dn-cx-cd-se-dt-se-br-se))));
1399
- border-width: var(--_sf-hr-br-wh,
1400
- var(--_ctm-mob-dn-cx-cd-se-dt-se-br-wh,
1401
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-dn-cx-cd-se-dt-se-br-wh))));
2065
+ border-color: var(
2066
+ --_sf-hr-br-cr,
2067
+ var(
2068
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-cr,
2069
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-dn-cx-cd-se-dt-se-br-cr))
2070
+ )
2071
+ );
2072
+ border-style: var(
2073
+ --_sf-hr-br-st,
2074
+ var(
2075
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-se,
2076
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-se, var(--_ctm-dn-cx-cd-se-dt-se-br-se))
2077
+ )
2078
+ );
2079
+ border-width: var(
2080
+ --_sf-hr-br-wh,
2081
+ var(
2082
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-wh,
2083
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-dn-cx-cd-se-dt-se-br-wh))
2084
+ )
2085
+ );
1402
2086
  }
1403
2087
 
1404
2088
  &:hover {
1405
2089
  // Hover carries its own Layout Options, each falling back to the default
1406
2090
  // state so a box only sized on Default keeps that size on hover.
1407
- width: prepareMediaVariable(--_ctm-dn-cx-cd-se-hr-se-wh,
1408
- prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-wh, 18px));
1409
- height: prepareMediaVariable(--_ctm-dn-cx-cd-se-hr-se-ht,
1410
- prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-ht, 18px));
1411
- padding: prepareMediaVariable(--_ctm-dn-cx-cd-se-hr-se-pg,
1412
- prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-pg, 0));
1413
- background-color: var(--_ctm-mob-dn-cx-cd-se-hr-se-bd-cr,
1414
- var(--_ctm-tab-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-dn-cx-cd-se-hr-se-bd-cr)));
1415
- border-radius: var(--_ctm-mob-dn-cx-cd-se-hr-se-br-rs,
1416
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-rs, var(--_ctm-dn-cx-cd-se-hr-se-br-rs)));
1417
-
2091
+ width: prepareMediaVariable(
2092
+ --_ctm-dn-cx-cd-se-hr-se-wh,
2093
+ prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-wh, 18px)
2094
+ );
2095
+ height: prepareMediaVariable(
2096
+ --_ctm-dn-cx-cd-se-hr-se-ht,
2097
+ prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-ht, 18px)
2098
+ );
2099
+ padding: prepareMediaVariable(
2100
+ --_ctm-dn-cx-cd-se-hr-se-pg,
2101
+ prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-pg, 0)
2102
+ );
2103
+ background-color: var(
2104
+ --_ctm-mob-dn-cx-cd-se-hr-se-bd-cr,
2105
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-dn-cx-cd-se-hr-se-bd-cr))
2106
+ );
2107
+ border-radius: var(
2108
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-rs,
2109
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-rs, var(--_ctm-dn-cx-cd-se-hr-se-br-rs))
2110
+ );
1418
2111
  &[data-show-hover-checked-shadow="true"] {
1419
- box-shadow: var(--_show-shadow-clear-all,
1420
- var(--_ctm-mob-dn-cx-cd-se-hr-se-sw-ae,
1421
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-dn-cx-cd-se-hr-se-sw-ae))) var(--_ctm-mob-dn-cx-cd-se-hr-se-sw-br,
1422
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-dn-cx-cd-se-hr-se-sw-br))) var(--_ctm-mob-dn-cx-cd-se-hr-se-sw-sd,
1423
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-dn-cx-cd-se-hr-se-sw-sd))) var(--_ctm-mob-dn-cx-cd-se-hr-se-sw-cr,
1424
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-dn-cx-cd-se-hr-se-sw-cr))));
2112
+ box-shadow: var(
2113
+ --_show-shadow-clear-all,
2114
+ var(
2115
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-ae,
2116
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-dn-cx-cd-se-hr-se-sw-ae))
2117
+ )
2118
+ var(
2119
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-br,
2120
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-dn-cx-cd-se-hr-se-sw-br))
2121
+ )
2122
+ var(
2123
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-sd,
2124
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-dn-cx-cd-se-hr-se-sw-sd))
2125
+ )
2126
+ var(
2127
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-cr,
2128
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-dn-cx-cd-se-hr-se-sw-cr))
2129
+ )
2130
+ );
1425
2131
  }
1426
2132
 
1427
2133
  &[data-show-hover-checked-border="true"] {
1428
- border-color: var(--_sf-hr-br-cr,
1429
- var(--_ctm-mob-dn-cx-cd-se-hr-se-br-cr,
1430
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-dn-cx-cd-se-hr-se-br-cr))));
1431
- border-style: var(--_sf-hr-br-st,
1432
- var(--_ctm-mob-dn-cx-cd-se-hr-se-br-se,
1433
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-se, var(--_ctm-dn-cx-cd-se-hr-se-br-se))));
1434
- border-width: var(--_sf-hr-br-wh,
1435
- var(--_ctm-mob-dn-cx-cd-se-hr-se-br-wh,
1436
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-dn-cx-cd-se-hr-se-br-wh))));
2134
+ border-color: var(
2135
+ --_sf-hr-br-cr,
2136
+ var(
2137
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-cr,
2138
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-dn-cx-cd-se-hr-se-br-cr))
2139
+ )
2140
+ );
2141
+ border-style: var(
2142
+ --_sf-hr-br-st,
2143
+ var(
2144
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-se,
2145
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-se, var(--_ctm-dn-cx-cd-se-hr-se-br-se))
2146
+ )
2147
+ );
2148
+ border-width: var(
2149
+ --_sf-hr-br-wh,
2150
+ var(
2151
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-wh,
2152
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-dn-cx-cd-se-hr-se-br-wh))
2153
+ )
2154
+ );
1437
2155
  }
1438
-
1439
2156
  button {
1440
2157
  display: flex;
1441
-
1442
2158
  .default-icon {
1443
2159
  display: none;
1444
2160
  }
@@ -1448,20 +2164,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1448
2164
  align-items: center;
1449
2165
  justify-content: center;
1450
2166
  }
1451
-
1452
2167
  svg {
1453
2168
  // Icon Size of the hover state. These read a plain `-se`, a name nothing
1454
2169
  // emits — iconSize becomes `in-se`. Falls back to the default state's
1455
2170
  // size so an icon only sized on Default keeps that size on hover.
1456
- width: prepareMediaVariable(--_ctm-dn-cx-cd-se-hr-se-in-se,
1457
- prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px));
1458
- height: prepareMediaVariable(--_ctm-dn-cx-cd-se-hr-se-in-se,
1459
- prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px));
1460
-
2171
+ width: prepareMediaVariable(
2172
+ --_ctm-dn-cx-cd-se-hr-se-in-se,
2173
+ prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px)
2174
+ );
2175
+ height: prepareMediaVariable(
2176
+ --_ctm-dn-cx-cd-se-hr-se-in-se,
2177
+ prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px)
2178
+ );
1461
2179
  path {
1462
2180
  // stroke: var(--_base-white);
1463
- stroke: var(--_ctm-mob-dn-cx-cd-se-hr-se-in-c1,
1464
- var(--_ctm-tab-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-dn-cx-cd-se-hr-se-in-c1)));
2181
+ stroke: var(
2182
+ --_ctm-mob-dn-cx-cd-se-hr-se-in-c1,
2183
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-dn-cx-cd-se-hr-se-in-c1))
2184
+ );
1465
2185
  }
1466
2186
  }
1467
2187
  }
@@ -1476,7 +2196,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1476
2196
 
1477
2197
  button {
1478
2198
  display: flex;
1479
-
1480
2199
  .default-icon {
1481
2200
  display: flex;
1482
2201
  justify-content: center;
@@ -1486,18 +2205,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1486
2205
  .hover-icon {
1487
2206
  display: none;
1488
2207
  }
1489
-
1490
2208
  svg {
1491
2209
  // Icon Size. `iconSize` carries `property: "iconSize"`, which
1492
2210
  // splitCamelCaseAndJoin turns into `in-se` — these read plain `-se`, a
1493
2211
  // name nothing emits, so the control moved a variable no rule used.
1494
2212
  width: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px);
1495
2213
  height: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px);
1496
-
1497
2214
  path {
1498
2215
  // stroke: var(--_base-white);
1499
- stroke: var(--_ctm-mob-dn-cx-cd-se-dt-se-in-c1,
1500
- var(--_ctm-tab-dn-cx-cd-se-dt-se-in-c1, var(--_ctm-dn-cx-cd-se-dt-se-in-c1)));
2216
+ stroke: var(
2217
+ --_ctm-mob-dn-cx-cd-se-dt-se-in-c1,
2218
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-in-c1, var(--_ctm-dn-cx-cd-se-dt-se-in-c1))
2219
+ );
1501
2220
  // Overrides the stroke-width presentation attribute baked into the icon markup.
1502
2221
  stroke-width: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-se-wh, 1.25);
1503
2222
  }
@@ -1511,7 +2230,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1511
2230
  display: none;
1512
2231
  }
1513
2232
 
1514
- .checkbox__radio input:checked~.checkmark:after {
2233
+ .checkbox__radio input:checked ~ .checkmark:after {
1515
2234
  display: block;
1516
2235
  }
1517
2236
 
@@ -1562,135 +2281,257 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1562
2281
  // --_ctm-mob-dn-cx-ud-se-dt-se-bd-cr,
1563
2282
  // var(--_ctm-tab-dn-cx-ud-se-dt-se-bd-cr, var(--_ctm-dn-cx-ud-se-dt-se-bd-cr))
1564
2283
  // );
1565
- border-radius: var(--_ctm-mob-dn-cx-ud-se-dt-se-br-rs,
1566
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-dn-cx-ud-se-dt-se-br-rs)));
1567
-
2284
+ border-radius: var(
2285
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-rs,
2286
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-dn-cx-ud-se-dt-se-br-rs))
2287
+ );
1568
2288
  &[data-show-default-unchecked-shadow="true"] {
1569
- box-shadow: var(--_show-shadow-clear-all,
1570
- var(--_ctm-mob-dn-cx-ud-se-dt-se-sw-ae,
1571
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-dn-cx-ud-se-dt-se-sw-ae))) var(--_ctm-mob-dn-cx-ud-se-dt-se-sw-br,
1572
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-dn-cx-ud-se-dt-se-sw-br))) var(--_ctm-mob-dn-cx-ud-se-dt-se-sw-sd,
1573
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-dn-cx-ud-se-dt-se-sw-sd))) var(--_ctm-mob-dn-cx-ud-se-dt-se-sw-cr,
1574
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-dn-cx-ud-se-dt-se-sw-cr))));
2289
+ box-shadow: var(
2290
+ --_show-shadow-clear-all,
2291
+ var(
2292
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-ae,
2293
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-dn-cx-ud-se-dt-se-sw-ae))
2294
+ )
2295
+ var(
2296
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-br,
2297
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-dn-cx-ud-se-dt-se-sw-br))
2298
+ )
2299
+ var(
2300
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-sd,
2301
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-dn-cx-ud-se-dt-se-sw-sd))
2302
+ )
2303
+ var(
2304
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-cr,
2305
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-dn-cx-ud-se-dt-se-sw-cr))
2306
+ )
2307
+ );
1575
2308
  }
1576
-
1577
2309
  &[data-show-default-unchecked-border="true"] {
1578
- border-color: var(--_sf-hr-br-cr,
1579
- var(--_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
1580
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))));
1581
- border-style: var(--_sf-hr-br-st,
1582
- var(--_ctm-mob-dn-cx-ud-se-dt-se-br-se,
1583
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-se, var(--_ctm-dn-cx-ud-se-dt-se-br-se))));
1584
- border-width: var(--_sf-hr-br-wh,
1585
- var(--_ctm-mob-dn-cx-ud-se-dt-se-br-wh,
1586
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-dn-cx-ud-se-dt-se-br-wh))));
2310
+ border-color: var(
2311
+ --_sf-hr-br-cr,
2312
+ var(
2313
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2314
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
2315
+ )
2316
+ );
2317
+ border-style: var(
2318
+ --_sf-hr-br-st,
2319
+ var(
2320
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-se,
2321
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-se, var(--_ctm-dn-cx-ud-se-dt-se-br-se))
2322
+ )
2323
+ );
2324
+ border-width: var(
2325
+ --_sf-hr-br-wh,
2326
+ var(
2327
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-wh,
2328
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-dn-cx-ud-se-dt-se-br-wh))
2329
+ )
2330
+ );
1587
2331
  }
1588
-
1589
2332
  &:hover {
1590
2333
  // Layout Options of the hover state, falling back to the default state.
1591
- width: prepareMediaVariable(--_ctm-dn-cx-ud-se-hr-se-wh,
1592
- prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px));
1593
- height: prepareMediaVariable(--_ctm-dn-cx-ud-se-hr-se-ht,
1594
- prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px));
1595
- padding: prepareMediaVariable(--_ctm-dn-cx-ud-se-hr-se-pg,
1596
- prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0));
1597
-
2334
+ width: prepareMediaVariable(
2335
+ --_ctm-dn-cx-ud-se-hr-se-wh,
2336
+ prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px)
2337
+ );
2338
+ height: prepareMediaVariable(
2339
+ --_ctm-dn-cx-ud-se-hr-se-ht,
2340
+ prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px)
2341
+ );
2342
+ padding: prepareMediaVariable(
2343
+ --_ctm-dn-cx-ud-se-hr-se-pg,
2344
+ prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0)
2345
+ );
1598
2346
  &[data-show-hover-unchecked-border="true"] {
1599
- border-color: var(--_sf-hr-br-cr,
1600
- var(--_ctm-mob-dn-cx-ud-se-hr-se-br-cr,
1601
- var(--_ctm-tab-dn-cx-ud-se-hr-se-br-cr, var(--_ctm-dn-cx-ud-se-hr-se-br-cr))));
1602
- border-style: var(--_sf-hr-br-st,
1603
- var(--_ctm-mob-dn-cx-ud-se-hr-se-br-se,
1604
- var(--_ctm-tab-dn-cx-ud-se-hr-se-br-se, var(--_ctm-dn-cx-ud-se-hr-se-br-se))));
1605
- border-width: var(--_sf-hr-br-wh,
1606
- var(--_ctm-mob-dn-cx-ud-se-hr-se-br-wh,
1607
- var(--_ctm-tab-dn-cx-ud-se-hr-se-br-wh, var(--_ctm-dn-cx-ud-se-hr-se-br-wh))));
2347
+ border-color: var(
2348
+ --_sf-hr-br-cr,
2349
+ var(
2350
+ --_ctm-mob-dn-cx-ud-se-hr-se-br-cr,
2351
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-br-cr, var(--_ctm-dn-cx-ud-se-hr-se-br-cr))
2352
+ )
2353
+ );
2354
+ border-style: var(
2355
+ --_sf-hr-br-st,
2356
+ var(
2357
+ --_ctm-mob-dn-cx-ud-se-hr-se-br-se,
2358
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-br-se, var(--_ctm-dn-cx-ud-se-hr-se-br-se))
2359
+ )
2360
+ );
2361
+ border-width: var(
2362
+ --_sf-hr-br-wh,
2363
+ var(
2364
+ --_ctm-mob-dn-cx-ud-se-hr-se-br-wh,
2365
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-br-wh, var(--_ctm-dn-cx-ud-se-hr-se-br-wh))
2366
+ )
2367
+ );
1608
2368
  }
1609
-
1610
2369
  &[data-show-hover-unchecked-shadow="true"] {
1611
- box-shadow: var(--_show-shadow-clear-all,
1612
- var(--_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
1613
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))) var(--_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
1614
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))) var(--_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
1615
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))) var(--_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
1616
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))));
2370
+ box-shadow: var(
2371
+ --_show-shadow-clear-all,
2372
+ var(
2373
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
2374
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
2375
+ )
2376
+ var(
2377
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
2378
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
2379
+ )
2380
+ var(
2381
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
2382
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
2383
+ )
2384
+ var(
2385
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
2386
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
2387
+ )
2388
+ );
1617
2389
  }
1618
-
1619
- background-color: var(--_ctm-mob-dn-cx-ud-se-hr-se-bd-cr,
1620
- var(--_ctm-tab-dn-cx-ud-se-hr-se-bd-cr, var(--_ctm-dn-cx-ud-se-hr-se-bd-cr)));
1621
- border-radius: var(--_ctm-mob-dn-cx-ud-se-hr-se-br-rs,
1622
- var(--_ctm-tab-dn-cx-ud-se-hr-se-br-rs, var(--_ctm-dn-cx-ud-se-hr-se-br-rs)));
1623
- box-shadow: var(--_show-shadow-clear-all,
1624
- var(--_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
1625
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))) var(--_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
1626
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))) var(--_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
1627
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))) var(--_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
1628
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))));
2390
+ background-color: var(
2391
+ --_ctm-mob-dn-cx-ud-se-hr-se-bd-cr,
2392
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-bd-cr, var(--_ctm-dn-cx-ud-se-hr-se-bd-cr))
2393
+ );
2394
+ border-radius: var(
2395
+ --_ctm-mob-dn-cx-ud-se-hr-se-br-rs,
2396
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-br-rs, var(--_ctm-dn-cx-ud-se-hr-se-br-rs))
2397
+ );
2398
+ box-shadow: var(
2399
+ --_show-shadow-clear-all,
2400
+ var(
2401
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
2402
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
2403
+ )
2404
+ var(
2405
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
2406
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
2407
+ )
2408
+ var(
2409
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
2410
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
2411
+ )
2412
+ var(
2413
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
2414
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
2415
+ )
2416
+ );
1629
2417
  }
1630
2418
  }
1631
2419
 
1632
2420
  // Only style this way if the input is a radio
1633
- input[type="radio"]~.filter__checkmark {
2421
+ input[type="radio"] ~ .filter__checkmark {
1634
2422
  border-radius: 50%;
1635
2423
  }
1636
2424
 
1637
- input[type="radio"]:checked~.filter__checkmark {
2425
+ input[type="radio"]:checked ~ .filter__checkmark {
1638
2426
  // Checked carries its own Layout Options, falling back to the unchecked ones
1639
2427
  // so a radio sized on only one of the two sections stays round.
1640
- width: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-wh,
1641
- prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px));
1642
- height: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-ht,
1643
- prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px));
1644
- padding: prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-pg,
1645
- prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0));
1646
-
2428
+ width: prepareMediaVariable(
2429
+ --_ctm-dn-cx-cd-se-dt-se-wh,
2430
+ prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-wh, 18px)
2431
+ );
2432
+ height: prepareMediaVariable(
2433
+ --_ctm-dn-cx-cd-se-dt-se-ht,
2434
+ prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-ht, 18px)
2435
+ );
2436
+ padding: prepareMediaVariable(
2437
+ --_ctm-dn-cx-cd-se-dt-se-pg,
2438
+ prepareMediaVariable(--_ctm-dn-cx-ud-se-dt-se-pg, 0)
2439
+ );
1647
2440
  // border-color: #007bff;
1648
2441
  &[data-show-default-checked-shadow="true"] {
1649
- box-shadow: var(--_show-shadow-clear-all,
1650
- var(--_ctm-mob-dn-cx-cd-se-dt-se-sw-ae,
1651
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-dn-cx-cd-se-dt-se-sw-ae))) var(--_ctm-mob-dn-cx-cd-se-dt-se-sw-br,
1652
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-dn-cx-cd-se-dt-se-sw-br))) var(--_ctm-mob-dn-cx-cd-se-dt-se-sw-sd,
1653
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-dn-cx-cd-se-dt-se-sw-sd))) var(--_ctm-mob-dn-cx-cd-se-dt-se-sw-cr,
1654
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-dn-cx-cd-se-dt-se-sw-cr))));
2442
+ box-shadow: var(
2443
+ --_show-shadow-clear-all,
2444
+ var(
2445
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-ae,
2446
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-dn-cx-cd-se-dt-se-sw-ae))
2447
+ )
2448
+ var(
2449
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-br,
2450
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-dn-cx-cd-se-dt-se-sw-br))
2451
+ )
2452
+ var(
2453
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-sd,
2454
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-dn-cx-cd-se-dt-se-sw-sd))
2455
+ )
2456
+ var(
2457
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-cr,
2458
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-dn-cx-cd-se-dt-se-sw-cr))
2459
+ )
2460
+ );
1655
2461
  }
1656
2462
 
1657
2463
  &[data-show-default-checked-border="true"] {
1658
- border-color: var(--_sf-hr-br-cr,
1659
- var(--_ctm-mob-dn-cx-cd-se-dt-se-br-cr,
1660
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-dn-cx-cd-se-dt-se-br-cr))));
1661
- border-style: var(--_sf-hr-br-st,
1662
- var(--_ctm-mob-dn-cx-cd-se-dt-se-br-se,
1663
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-se, var(--_ctm-dn-cx-cd-se-dt-se-br-se))));
1664
- border-width: var(--_sf-hr-br-wh,
1665
- var(--_ctm-mob-dn-cx-cd-se-dt-se-br-wh,
1666
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-dn-cx-cd-se-dt-se-br-wh))));
2464
+ border-color: var(
2465
+ --_sf-hr-br-cr,
2466
+ var(
2467
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-cr,
2468
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-dn-cx-cd-se-dt-se-br-cr))
2469
+ )
2470
+ );
2471
+ border-style: var(
2472
+ --_sf-hr-br-st,
2473
+ var(
2474
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-se,
2475
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-se, var(--_ctm-dn-cx-cd-se-dt-se-br-se))
2476
+ )
2477
+ );
2478
+ border-width: var(
2479
+ --_sf-hr-br-wh,
2480
+ var(
2481
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-wh,
2482
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-dn-cx-cd-se-dt-se-br-wh))
2483
+ )
2484
+ );
1667
2485
  }
1668
2486
 
1669
2487
  &:hover {
1670
2488
  &[data-show-hover-checked-shadow="true"] {
1671
- box-shadow: var(--_show-shadow-clear-all,
1672
- var(--_ctm-mob-dn-cx-cd-se-hr-se-sw-ae,
1673
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-dn-cx-cd-se-hr-se-sw-ae))) var(--_ctm-mob-dn-cx-cd-se-hr-se-sw-br,
1674
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-dn-cx-cd-se-hr-se-sw-br))) var(--_ctm-mob-dn-cx-cd-se-hr-se-sw-sd,
1675
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-dn-cx-cd-se-hr-se-sw-sd))) var(--_ctm-mob-dn-cx-cd-se-hr-se-sw-cr,
1676
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-dn-cx-cd-se-hr-se-sw-cr))));
2489
+ box-shadow: var(
2490
+ --_show-shadow-clear-all,
2491
+ var(
2492
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-ae,
2493
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-dn-cx-cd-se-hr-se-sw-ae))
2494
+ )
2495
+ var(
2496
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-br,
2497
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-dn-cx-cd-se-hr-se-sw-br))
2498
+ )
2499
+ var(
2500
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-sd,
2501
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-dn-cx-cd-se-hr-se-sw-sd))
2502
+ )
2503
+ var(
2504
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-cr,
2505
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-dn-cx-cd-se-hr-se-sw-cr))
2506
+ )
2507
+ );
1677
2508
  }
1678
2509
 
1679
2510
  &[data-show-hover-checked-border="true"] {
1680
- border-color: var(--_sf-hr-br-cr,
1681
- var(--_ctm-mob-dn-cx-cd-se-hr-se-br-cr,
1682
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-dn-cx-cd-se-hr-se-br-cr))));
1683
- border-style: var(--_sf-hr-br-st,
1684
- var(--_ctm-mob-dn-cx-cd-se-hr-se-br-se,
1685
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-se, var(--_ctm-dn-cx-cd-se-hr-se-br-se))));
1686
- border-width: var(--_sf-hr-br-wh,
1687
- var(--_ctm-mob-dn-cx-cd-se-hr-se-br-wh,
1688
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-dn-cx-cd-se-hr-se-br-wh))));
2511
+ border-color: var(
2512
+ --_sf-hr-br-cr,
2513
+ var(
2514
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-cr,
2515
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-dn-cx-cd-se-hr-se-br-cr))
2516
+ )
2517
+ );
2518
+ border-style: var(
2519
+ --_sf-hr-br-st,
2520
+ var(
2521
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-se,
2522
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-se, var(--_ctm-dn-cx-cd-se-hr-se-br-se))
2523
+ )
2524
+ );
2525
+ border-width: var(
2526
+ --_sf-hr-br-wh,
2527
+ var(
2528
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-wh,
2529
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-dn-cx-cd-se-hr-se-br-wh))
2530
+ )
2531
+ );
1689
2532
  }
1690
-
1691
2533
  button {
1692
2534
  display: flex;
1693
-
1694
2535
  .default-icon {
1695
2536
  display: none;
1696
2537
  }
@@ -1698,25 +2539,29 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1698
2539
  .hover-icon {
1699
2540
  display: block;
1700
2541
  }
1701
-
1702
2542
  svg {
1703
2543
  // Same `-se` / `in-se` mix-up as the checkbox copy above.
1704
- width: prepareMediaVariable(--_ctm-dn-cx-cd-se-hr-se-in-se,
1705
- prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px));
1706
- height: prepareMediaVariable(--_ctm-dn-cx-cd-se-hr-se-in-se,
1707
- prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px));
1708
-
2544
+ width: prepareMediaVariable(
2545
+ --_ctm-dn-cx-cd-se-hr-se-in-se,
2546
+ prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px)
2547
+ );
2548
+ height: prepareMediaVariable(
2549
+ --_ctm-dn-cx-cd-se-hr-se-in-se,
2550
+ prepareMediaVariable(--_ctm-dn-cx-cd-se-dt-se-in-se, 13px)
2551
+ );
1709
2552
  path {
1710
2553
  // stroke: var(--_base-white);
1711
- stroke: var(--_ctm-mob-dn-cx-cd-se-hr-se-in-c1,
1712
- var(--_ctm-tab-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-dn-cx-cd-se-hr-se-in-c1)));
2554
+ stroke: var(
2555
+ --_ctm-mob-dn-cx-cd-se-hr-se-in-c1,
2556
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-dn-cx-cd-se-hr-se-in-c1))
2557
+ );
1713
2558
  }
1714
2559
  }
1715
2560
  }
1716
2561
  }
1717
2562
  }
1718
2563
 
1719
- input[type="radio"]:checked~.filter__checkmark::after {
2564
+ input[type="radio"]:checked ~ .filter__checkmark::after {
1720
2565
  content: "";
1721
2566
  position: absolute;
1722
2567
  top: 50%;
@@ -1726,17 +2571,20 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1726
2571
  width: 8px;
1727
2572
  border-radius: 50%;
1728
2573
  // background-color: #007bff;
1729
- background-color: var(--_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
1730
- var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr)));
1731
-
2574
+ background-color: var(
2575
+ --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
2576
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
2577
+ );
1732
2578
  &:hover {
1733
- background-color: var(--_ctm-mob-dn-cx-cd-se-hr-se-bd-cr,
1734
- var(--_ctm-tab-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-dn-cx-cd-se-hr-se-bd-cr)));
2579
+ background-color: var(
2580
+ --_ctm-mob-dn-cx-cd-se-hr-se-bd-cr,
2581
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-dn-cx-cd-se-hr-se-bd-cr))
2582
+ );
1735
2583
  }
1736
2584
  }
1737
2585
 
1738
2586
  // Optional for checkbox styling (square)
1739
- input[type="checkbox"]~.filter__checkmark {
2587
+ input[type="checkbox"] ~ .filter__checkmark {
1740
2588
  border-radius: 4px;
1741
2589
  }
1742
2590
 
@@ -1759,34 +2607,66 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1759
2607
 
1760
2608
  .filter__option__value {
1761
2609
  margin-left: 8px;
1762
- color: var(--_ctm-mob-dn-on-ls-cr-dc,
1763
- var(--_ctm-tab-dn-on-ls-cr-dc, var(--_ctm-dn-on-ls-cr-dc)));
1764
- font-family: var(--_sf-hr-ff,
1765
- var(--_ctm-mob-dn-on-ls-ft-fy-dc,
1766
- var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc))));
1767
- text-transform: var(--_sf-hr-tt-tm,
1768
- var(--_ctm-mob-dn-on-ls-tt-tm-dc,
1769
- var(--_ctm-tab-dn-on-ls-tt-tm-dc, var(--_ctm-dn-on-ls-tt-tm-dc))));
1770
- word-wrap: var(--_sf-hr-wd-wp,
1771
- var(--_ctm-mob-dn-on-ls-wd-wp-dc,
1772
- var(--_ctm-tab-dn-on-ls-wd-wp-dc, var(--_ctm-dn-on-ls-wd-wp-dc))));
1773
- word-break: var(--_sf-hr-wd-bk,
1774
- var(--_ctm-mob-dn-on-ls-wd-bk-dc,
1775
- var(--_ctm-tab-dn-on-ls-wd-bk-dc, var(--_ctm-dn-on-ls-wd-bk-dc))));
1776
- font-size: var(--_ctm-mob-dn-on-ls-ft-se-dc,
1777
- var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc)));
1778
- font-weight: var(--_ctm-mob-dn-on-ls-ft-wt-dc,
1779
- var(--_ctm-tab-dn-on-ls-ft-wt-dc, var(--_ctm-dn-on-ls-ft-wt-dc)));
1780
- font-style: var(--_ctm-mob-dn-on-ls-ft-se-ic-dc,
1781
- var(--_ctm-tab-dn-on-ls-ft-se-ic-dc, var(--_ctm-dn-on-ls-ft-se-ic-dc)));
1782
- text-align: var(--_ctm-mob-dn-on-ls-tt-an-dc,
1783
- var(--_ctm-tab-dn-on-ls-tt-an-dc, var(--_ctm-dn-on-ls-tt-an-dc)));
1784
- letter-spacing: var(--_ctm-mob-dn-on-ls-lr-sg-dc,
1785
- var(--_ctm-tab-dn-on-ls-lr-sg-dc, var(--_ctm-dn-on-ls-lr-sg-dc)));
1786
- line-height: var(--_ctm-mob-dn-on-ls-le-ht-dc,
1787
- var(--_ctm-tab-dn-on-ls-le-ht-dc, var(--_ctm-dn-on-ls-le-ht-dc)));
1788
- text-decoration: var(--_ctm-mob-dn-on-ls-ue-dc,
1789
- var(--_ctm-tab-dn-on-ls-ue-dc, var(--_ctm-dn-on-ls-ue-dc)));
2610
+ color: var(
2611
+ --_ctm-mob-dn-on-ls-cr-dc,
2612
+ var(--_ctm-tab-dn-on-ls-cr-dc, var(--_ctm-dn-on-ls-cr-dc))
2613
+ );
2614
+ font-family: var(
2615
+ --_sf-hr-ff,
2616
+ var(
2617
+ --_ctm-mob-dn-on-ls-ft-fy-dc,
2618
+ var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc))
2619
+ )
2620
+ );
2621
+ text-transform: var(
2622
+ --_sf-hr-tt-tm,
2623
+ var(
2624
+ --_ctm-mob-dn-on-ls-tt-tm-dc,
2625
+ var(--_ctm-tab-dn-on-ls-tt-tm-dc, var(--_ctm-dn-on-ls-tt-tm-dc))
2626
+ )
2627
+ );
2628
+ word-wrap: var(
2629
+ --_sf-hr-wd-wp,
2630
+ var(
2631
+ --_ctm-mob-dn-on-ls-wd-wp-dc,
2632
+ var(--_ctm-tab-dn-on-ls-wd-wp-dc, var(--_ctm-dn-on-ls-wd-wp-dc))
2633
+ )
2634
+ );
2635
+ word-break: var(
2636
+ --_sf-hr-wd-bk,
2637
+ var(
2638
+ --_ctm-mob-dn-on-ls-wd-bk-dc,
2639
+ var(--_ctm-tab-dn-on-ls-wd-bk-dc, var(--_ctm-dn-on-ls-wd-bk-dc))
2640
+ )
2641
+ );
2642
+ font-size: var(
2643
+ --_ctm-mob-dn-on-ls-ft-se-dc,
2644
+ var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc))
2645
+ );
2646
+ font-weight: var(
2647
+ --_ctm-mob-dn-on-ls-ft-wt-dc,
2648
+ var(--_ctm-tab-dn-on-ls-ft-wt-dc, var(--_ctm-dn-on-ls-ft-wt-dc))
2649
+ );
2650
+ font-style: var(
2651
+ --_ctm-mob-dn-on-ls-ft-se-ic-dc,
2652
+ var(--_ctm-tab-dn-on-ls-ft-se-ic-dc, var(--_ctm-dn-on-ls-ft-se-ic-dc))
2653
+ );
2654
+ text-align: var(
2655
+ --_ctm-mob-dn-on-ls-tt-an-dc,
2656
+ var(--_ctm-tab-dn-on-ls-tt-an-dc, var(--_ctm-dn-on-ls-tt-an-dc))
2657
+ );
2658
+ letter-spacing: var(
2659
+ --_ctm-mob-dn-on-ls-lr-sg-dc,
2660
+ var(--_ctm-tab-dn-on-ls-lr-sg-dc, var(--_ctm-dn-on-ls-lr-sg-dc))
2661
+ );
2662
+ line-height: var(
2663
+ --_ctm-mob-dn-on-ls-le-ht-dc,
2664
+ var(--_ctm-tab-dn-on-ls-le-ht-dc, var(--_ctm-dn-on-ls-le-ht-dc))
2665
+ );
2666
+ text-decoration: var(
2667
+ --_ctm-mob-dn-on-ls-ue-dc,
2668
+ var(--_ctm-tab-dn-on-ls-ue-dc, var(--_ctm-dn-on-ls-ue-dc))
2669
+ );
1790
2670
  }
1791
2671
  }
1792
2672
 
@@ -1843,20 +2723,42 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1843
2723
  // 100%
1844
2724
  // );
1845
2725
 
1846
- background: linear-gradient(to right,
1847
- var(--_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
1848
- var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))) 0%,
1849
- var(--_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
1850
- var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))) var(--left),
1851
- var(--_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
1852
- var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))) var(--left),
1853
- var(--_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
1854
- var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))) var(--right),
1855
- var(--_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
1856
- var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))) var(--right),
1857
- var(--_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
1858
- var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr,
1859
- var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr, #ccc))) 100%);
2726
+ background: linear-gradient(
2727
+ to right,
2728
+ var(
2729
+ --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2730
+ var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
2731
+ )
2732
+ 0%,
2733
+ var(
2734
+ --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2735
+ var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
2736
+ )
2737
+ var(--left),
2738
+ var(
2739
+ --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
2740
+ var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))
2741
+ )
2742
+ var(--left),
2743
+ var(
2744
+ --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
2745
+ var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))
2746
+ )
2747
+ var(--right),
2748
+ var(
2749
+ --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2750
+ var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
2751
+ )
2752
+ var(--right),
2753
+ var(
2754
+ --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2755
+ var(
2756
+ --_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr,
2757
+ var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr, #ccc)
2758
+ )
2759
+ )
2760
+ 100%
2761
+ );
1860
2762
  // background-color: var(
1861
2763
  // --_sf-hr-bd-cr,
1862
2764
  // #{prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr)}
@@ -1866,7 +2768,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1866
2768
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-cr));
1867
2769
  border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-wh));
1868
2770
  border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-se));
1869
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-cr));
2771
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-ae))
2772
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-br))
2773
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-sd))
2774
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-cr));
1870
2775
  }
1871
2776
 
1872
2777
  .slider-track {
@@ -1903,14 +2808,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1903
2808
  appearance: none;
1904
2809
  cursor: pointer;
1905
2810
  // box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5);
1906
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-cr));
2811
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-ae))
2812
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-br))
2813
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-sd))
2814
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-cr));
1907
2815
  position: relative;
1908
- z-index: 2;
1909
- /* Ensure thumbs appear above the track */
2816
+ z-index: 2; /* Ensure thumbs appear above the track */
1910
2817
  transition:
1911
2818
  background-color 400ms,
1912
2819
  border-color 400ms ease-in-out;
1913
-
1914
2820
  &:hover {
1915
2821
  border: 1px solid var(--_thm-cs-be-se-1);
1916
2822
  }
@@ -1943,11 +2849,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1943
2849
  .min-box {
1944
2850
  margin-right: 10px;
1945
2851
  }
1946
-
1947
2852
  .max-box input {
1948
2853
  float: right;
1949
2854
  }
1950
-
1951
2855
  input[type="number"] {
1952
2856
  width: 90px;
1953
2857
  padding: 10px;
@@ -1980,22 +2884,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1980
2884
  border-radius: 5px;
1981
2885
  white-space: nowrap;
1982
2886
  padding-inline: 15px;
1983
-
1984
2887
  span {
1985
2888
  margin-right: 4px;
1986
-
1987
2889
  svg {
1988
2890
  path {
1989
2891
  stroke: var(--_thm-cs-be-se-1);
1990
2892
  }
1991
2893
  }
1992
2894
  }
1993
-
1994
2895
  input {
1995
2896
  padding-left: 0px !important;
1996
2897
  text-align: left !important;
1997
2898
  }
1998
-
1999
2899
  &:focus-within {
2000
2900
  outline: 2px solid var(--_gray-200);
2001
2901
  border: 1px solid var(--_gray-300);
@@ -2115,7 +3015,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2115
3015
  .button_main {
2116
3016
  border: 1px solid var(--_gray-600);
2117
3017
  cursor: pointer;
2118
-
2119
3018
  .btn__group {
2120
3019
  display: flex;
2121
3020
  justify-content: center;
@@ -2126,7 +3025,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2126
3025
  font-size: 16px;
2127
3026
  background-color: #000080;
2128
3027
  padding: 10px 20px;
2129
-
2130
3028
  button {
2131
3029
  svg {
2132
3030
  path {
@@ -2136,8 +3034,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2136
3034
  }
2137
3035
  }
2138
3036
  }
2139
-
2140
3037
  // Button Group Ends
2141
3038
  }
2142
3039
  }
2143
- }
3040
+ }