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

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 (128) hide show
  1. package/dist/add-existing-form.scss +13 -5
  2. package/dist/add-order.scss +126 -236
  3. package/dist/add-products-tab-details.scss +1048 -2097
  4. package/dist/add-products-tab.scss +666 -1204
  5. package/dist/allocation-header-quota-details.scss +189 -407
  6. package/dist/allocationDetails.scss +1661 -2143
  7. package/dist/allocations-quota-details.scss +159 -323
  8. package/dist/allocations.scss +475 -793
  9. package/dist/amount-estimator.scss +405 -743
  10. package/dist/badge.scss +43 -18
  11. package/dist/brand-basic-elements.scss +76 -124
  12. package/dist/brand.scss +28 -55
  13. package/dist/breadcrumbs.scss +356 -718
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-variant-picker.scss +1128 -2027
  16. package/dist/bundle.scss +841 -1477
  17. package/dist/bundleCategories.scss +301 -301
  18. package/dist/bundleDetails.scss +3774 -5072
  19. package/dist/button.scss +79 -103
  20. package/dist/buy-for-tab-container.scss +77 -106
  21. package/dist/buyForHeaders.scss +1722 -2976
  22. package/dist/cart-details.scss +481 -1012
  23. package/dist/cart-summary.scss +2234 -2826
  24. package/dist/cart-wrapper.scss +37 -79
  25. package/dist/cart.scss +117 -225
  26. package/dist/cartAttributes.scss +1103 -1422
  27. package/dist/category-groups-element.scss +127 -108
  28. package/dist/category-groups-product-grid.scss +120 -147
  29. package/dist/category-groups-product-image.scss +1162 -1457
  30. package/dist/category-groups-product-options.scss +613 -680
  31. package/dist/category-groups-product-price.scss +1966 -3244
  32. package/dist/category-groups-quota-details.scss +210 -464
  33. package/dist/category.scss +26 -50
  34. package/dist/checkout.scss +24 -16
  35. package/dist/confirm-modal.scss +22 -2
  36. package/dist/container.scss +32 -54
  37. package/dist/countdown.scss +711 -899
  38. package/dist/coupon.scss +1160 -1519
  39. package/dist/default-dropdown.scss +12 -1
  40. package/dist/embroider-template-1-v2.scss +123 -172
  41. package/dist/embroider-template-1.scss +68 -104
  42. package/dist/embroidery.scss +30 -31
  43. package/dist/employee-bulk-order.scss +418 -142
  44. package/dist/faq.scss +228 -408
  45. package/dist/filter-results.scss +125 -265
  46. package/dist/filters.scss +2143 -3040
  47. package/dist/gallery-slider-temp.scss +1458 -1776
  48. package/dist/global-styles.scss +218 -198
  49. package/dist/grid.scss +25 -33
  50. package/dist/hotspot.scss +68 -115
  51. package/dist/image-temp.scss +21 -20
  52. package/dist/item-stock.scss +9 -16
  53. package/dist/kitDetails.scss +2719 -4299
  54. package/dist/kits.scss +24 -19
  55. package/dist/language-selector.scss +211 -361
  56. package/dist/last-x-orders.scss +95 -174
  57. package/dist/layouter-item.scss +75 -103
  58. package/dist/layouter-pro-item.scss +89 -95
  59. package/dist/layouter-pro.scss +87 -92
  60. package/dist/layouter.scss +383 -445
  61. package/dist/light-box-v2.scss +89 -104
  62. package/dist/login.scss +287 -566
  63. package/dist/map.scss +1212 -1359
  64. package/dist/marchandiserSets.scss +95 -104
  65. package/dist/mega-menu-container.scss +96 -109
  66. package/dist/mega-menu.scss +624 -731
  67. package/dist/menu-item.scss +2 -2
  68. package/dist/menu-v2.scss +507 -619
  69. package/dist/multi-select-dropdown.scss +27 -3
  70. package/dist/my-templates.scss +38 -9
  71. package/dist/option-bar.scss +215 -375
  72. package/dist/order-status.scss +1790 -2187
  73. package/dist/overflow-module.scss +6 -7
  74. package/dist/past-orders.scss +118 -149
  75. package/dist/payment-methods.scss +46 -30
  76. package/dist/pickup-locations.scss +558 -1118
  77. package/dist/position-module.scss +20 -17
  78. package/dist/prefix-list.scss +21 -10
  79. package/dist/product-actions.scss +1750 -2055
  80. package/dist/product-basic-elements.scss +108 -169
  81. package/dist/product-highlights.scss +303 -348
  82. package/dist/product-image-allocation.scss +1477 -1477
  83. package/dist/product-image-bundles.scss +337 -642
  84. package/dist/product-inventory.scss +673 -1357
  85. package/dist/product-labels.scss +84 -105
  86. package/dist/product-options.scss +1287 -1444
  87. package/dist/product-price.scss +1283 -2561
  88. package/dist/product-promotions.scss +1388 -2830
  89. package/dist/product-sizechart.scss +516 -905
  90. package/dist/product.scss +28 -61
  91. package/dist/productDetails.scss +19 -39
  92. package/dist/profile.scss +207 -447
  93. package/dist/quantity-selector.scss +837 -1074
  94. package/dist/quick-inventory-check.scss +95 -174
  95. package/dist/quick-links.scss +55 -133
  96. package/dist/quick-order-pad.scss +218 -271
  97. package/dist/quota-details.scss +152 -282
  98. package/dist/quotes.scss +814 -847
  99. package/dist/repeater-embla-controls.scss +35 -15
  100. package/dist/repeater-grid-toggle.scss +156 -166
  101. package/dist/repeater-item.scss +41 -64
  102. package/dist/repeater.scss +671 -814
  103. package/dist/request-for-quotes.scss +66 -16
  104. package/dist/responsive-behaviour.scss +3 -1
  105. package/dist/rfqs.scss +118 -181
  106. package/dist/scroll.scss +93 -172
  107. package/dist/search-results-heading.scss +309 -309
  108. package/dist/search.scss +179 -326
  109. package/dist/section.scss +27 -51
  110. package/dist/shipping-payments.scss +198 -58
  111. package/dist/simple-list.scss +74 -164
  112. package/dist/social.scss +80 -145
  113. package/dist/sort.scss +168 -176
  114. package/dist/stack.scss +23 -34
  115. package/dist/static-global.scss +44 -26
  116. package/dist/stockStatus.scss +11 -19
  117. package/dist/store-locations.scss +577 -1105
  118. package/dist/tab-container.scss +81 -108
  119. package/dist/table-common.scss +217 -408
  120. package/dist/table.scss +271 -502
  121. package/dist/text-temp.scss +8 -7
  122. package/dist/theme-classes.scss +17 -13
  123. package/dist/uom-selector.scss +489 -949
  124. package/dist/user-elements.scss +2588 -2896
  125. package/dist/variant-picker.scss +1281 -2555
  126. package/dist/volume-pricing.scss +541 -1037
  127. package/dist/widget.scss +153 -153
  128. package/package.json +1 -1
package/dist/allocations.scss CHANGED
@@ -4,21 +4,15 @@
4
4
 
5
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
6
6
  $resizeActive: '[data-cms-element-resizer="true"]';
7
+
7
8
  [data-div-type="element"] {
8
9
  &[data-element-type="allocations"] {
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
- );
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))))));
19
13
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
14
 
21
- & > div {
15
+ &>div {
22
16
  &.wrapper {
23
17
  width: 100%;
24
18
  // min-width: 400px;
@@ -37,61 +31,43 @@ $resizeActive: '[data-cms-element-resizer="true"]';
37
31
  }
38
32
 
39
33
  .allocations__element {
40
- background-color: var(
41
- --_ctm-mob-dn-wt-se-bd-cr,
42
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
43
- );
34
+ background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
35
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
44
36
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
45
37
  display: flex;
46
38
  flex-direction: column;
47
- --_sf-gp: var(
48
- --_ctm-mob-lt-im-sg,
49
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
50
- );
39
+ --_sf-gp: var(--_ctm-mob-lt-im-sg,
40
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px)));
51
41
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
52
42
  row-gap: var(--_sf-gp);
53
43
  width: 100%;
54
44
  // height: 100%;
55
- border-color: var(
56
- --_ctm-mob-dn-wt-se-br-cr,
57
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
58
- );
59
- border-style: var(
60
- --_ctm-mob-dn-wt-se-br-se,
61
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
62
- );
63
- border-width: var(
64
- --_ctm-mob-dn-wt-se-br-wh,
65
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
66
- );
67
- border-radius: var(
68
- --_ctm-mob-dn-wt-se-br-rs,
69
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
70
- );
71
- box-shadow: var(
72
- --_show-shadow,
73
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
74
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
75
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
76
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
77
- );
45
+ border-color: var(--_ctm-mob-dn-wt-se-br-cr,
46
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
47
+ border-style: var(--_ctm-mob-dn-wt-se-br-se,
48
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
49
+ border-width: var(--_ctm-mob-dn-wt-se-br-wh,
50
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
51
+ border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
52
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
53
+ box-shadow: var(--_show-shadow,
54
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))));
78
55
 
79
56
  &[data-divider-show="true"] {
80
- --_sf-dvdr: var(
81
- --_ctm-mob-dn-dr-dr-wh,
82
- var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))
83
- )
84
- var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid)))
85
- var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
57
+ --_sf-dvdr: var(--_ctm-mob-dn-dr-dr-wh,
58
+ var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))) var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid))) var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
86
59
  --_sf-dvdr-gap: var(--_sf-gp);
87
60
  }
61
+
88
62
  &[data-icon-position="Left"] {
89
63
  --_sf-fd: row-reverse;
90
64
  --_sf-jc: flex-end;
91
65
  }
66
+
92
67
  &[data-show-icon="false"] {
93
68
  --_sf-show-icon-ff: none;
94
69
  }
70
+
95
71
  &[data-divider-show="true"] {
96
72
  // .accordion-item:not(:last-child) {
97
73
  // border-bottom: var(
@@ -107,11 +83,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
107
83
  display: flex;
108
84
  width: 100%;
109
85
  margin-top: 10px;
86
+
110
87
  &:hover {
111
- --_sf-hr-bn-at: var(
112
- --_ctm-mob-dn-ld-me-bn-hr-se-bn-at,
113
- var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at))
114
- );
88
+ --_sf-hr-bn-at: var(--_ctm-mob-dn-ld-me-bn-hr-se-bn-at,
89
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at)));
115
90
  }
116
91
 
117
92
  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bn-at));
@@ -121,145 +96,94 @@ $resizeActive: '[data-cms-element-resizer="true"]';
121
96
  &[data-show-shadow="false"] {
122
97
  --_show-shadow: none;
123
98
  }
99
+
124
100
  &[data-icon-position="left"] {
125
101
  --_sf-fd-bn: row;
126
102
  }
103
+
127
104
  &[data-icon-position="right"] {
128
105
  --_sf-fd-bn: row-reverse;
129
106
  }
107
+
130
108
  &[data-icon-position="center"] {
131
109
  --_sf-fd-bn: row;
132
110
  }
133
111
 
134
112
  &:hover {
135
- --_sf-hr-bd-cr: var(
136
- --_ctm-mob-dn-rm-bn-hr-se-bd-cr,
137
- var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr))
138
- );
139
- --_sf-hr-br-cr: var(
140
- --_ctm-mob-dn-rm-bn-hr-se-br-cr,
141
- var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr))
142
- );
143
- --_sf-hr-br-se: var(
144
- --_ctm-mob-dn-rm-bn-hr-se-br-se,
145
- var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se))
146
- );
147
- --_sf-hr-br-wh: var(
148
- --_ctm-mob-dn-rm-bn-hr-se-br-wh,
149
- var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh))
150
- );
151
- --_sf-hr-br-rs: var(
152
- --_ctm-mob-dn-rm-bn-hr-se-br-rs,
153
- var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs))
154
- );
155
- --_sf-hr-at: var(
156
- --_ctm-mob-dn-rm-bn-hr-se-at,
157
- var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at))
158
- );
159
- --_sf-hr-gp: var(
160
- --_ctm-mob-dn-rm-bn-hr-se-gp,
161
- var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp))
162
- );
113
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-rm-bn-hr-se-bd-cr,
114
+ var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr)));
115
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-rm-bn-hr-se-br-cr,
116
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr)));
117
+ --_sf-hr-br-se: var(--_ctm-mob-dn-rm-bn-hr-se-br-se,
118
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se)));
119
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-rm-bn-hr-se-br-wh,
120
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh)));
121
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-rm-bn-hr-se-br-rs,
122
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs)));
123
+ --_sf-hr-at: var(--_ctm-mob-dn-rm-bn-hr-se-at,
124
+ var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at)));
125
+ --_sf-hr-gp: var(--_ctm-mob-dn-rm-bn-hr-se-gp,
126
+ var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp)));
163
127
 
164
128
  // for shadow
165
- --_sf-hr-sw-ae: var(
166
- --_ctm-mob-dn-rm-bn-hr-se-sw-ae,
167
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-ae, var(--_ctm-dn-rm-bn-hr-se-sw-ae))
168
- );
169
- --_sf-hr-sw-br: var(
170
- --_ctm-mob-dn-rm-bn-hr-se-sw-br,
171
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-br, var(--_ctm-dn-rm-bn-hr-se-sw-br))
172
- );
173
- --_sf-hr-sw-hr: var(
174
- --_ctm-mob-dn-rm-bn-hr-se-sw-hr,
175
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-hr, var(--_ctm-dn-rm-bn-hr-se-sw-hr))
176
- );
177
- --_sf-hr-sw-cr: var(
178
- --_ctm-mob-dn-rm-bn-hr-se-sw-cr,
179
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-cr, var(--_ctm-dn-rm-bn-hr-se-sw-cr))
180
- );
129
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-rm-bn-hr-se-sw-ae,
130
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-ae, var(--_ctm-dn-rm-bn-hr-se-sw-ae)));
131
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-rm-bn-hr-se-sw-br,
132
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-br, var(--_ctm-dn-rm-bn-hr-se-sw-br)));
133
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-rm-bn-hr-se-sw-hr,
134
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-hr, var(--_ctm-dn-rm-bn-hr-se-sw-hr)));
135
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-rm-bn-hr-se-sw-cr,
136
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-cr, var(--_ctm-dn-rm-bn-hr-se-sw-cr)));
181
137
 
182
138
  // for font
183
139
 
184
- --_sf-hr-cr: var(
185
- --_ctm-mob-dn-rm-bn-hr-se-cr,
186
- var(--_ctm-tab-dn-rm-bn-hr-se-cr, var(--_ctm-dn-rm-bn-hr-se-cr))
187
- );
188
- --_sf-hr-ft-fy: var(
189
- --_ctm-mob-dn-rm-bn-hr-se-ft-fy,
190
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-fy, var(--_ctm-dn-rm-bn-hr-se-ft-fy))
191
- );
192
- --_sf-hr-tt-tm: var(
193
- --_ctm-mob-dn-rm-bn-hr-se-tt-tm,
194
- var(--_ctm-tab-dn-rm-bn-hr-se-tt-tm, var(--_ctm-dn-rm-bn-hr-se-tt-tm))
195
- );
196
- --_sf-hr-wd-wp: var(
197
- --_ctm-mob-dn-rm-bn-hr-se-wd-wp,
198
- var(--_ctm-tab-dn-rm-bn-hr-se-wd-wp, var(--_ctm-dn-rm-bn-hr-se-wd-wp))
199
- );
200
- --_sf-hr-wd-bk: var(
201
- --_ctm-mob-dn-rm-bn-hr-se-wd-bk,
202
- var(--_ctm-tab-dn-rm-bn-hr-se-wd-bk, var(--_ctm-dn-rm-bn-hr-se-wd-bk))
203
- );
204
- --_sf-hr-ft-se: var(
205
- --_ctm-mob-dn-rm-bn-hr-se-ft-se,
206
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se))
207
- );
208
- --_sf-hr-ft-wt: var(
209
- --_ctm-mob-dn-rm-bn-hr-se-ft-wt,
210
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt))
211
- );
212
- --_sf-hr-ft-se-ic: var(
213
- --_ctm-mob-dn-rm-bn-hr-se-ft-se-ic,
214
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic))
215
- );
216
- --_sf-hr-tt-an: var(
217
- --_ctm-mob-dn-rm-bn-hr-se-tt-an,
218
- var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an))
219
- );
220
- --_sf-hr-lr-sg: var(
221
- --_ctm-mob-dn-rm-bn-hr-se-lr-sg,
222
- var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg))
223
- );
224
- --_sf-hr-le-ht: var(
225
- --_ctm-mob-dn-rm-bn-hr-se-le-ht,
226
- var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht))
227
- );
228
-
229
- --_sf-hr-in-se: var(
230
- --_ctm-mob-dn-rm-bn-hr-se-in-se,
231
- var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
232
- );
233
- --_sf-hr-in-se: var(
234
- --_ctm-mob-dn-rm-bn-hr-se-in-se,
235
- var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
236
- );
237
- --_sf-hr-in-c1: var(
238
- --_ctm-mob-dn-rm-bn-hr-se-in-c1,
239
- var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1))
240
- );
241
- --_sf-hr-ue: var(
242
- --_ctm-mob-dn-rm-bn-hr-se-ue,
243
- var(--_ctm-tab-dn-rm-bn-hr-se-ue, var(--_ctm-dn-rm-bn-hr-se-ue))
244
- );
140
+ --_sf-hr-cr: var(--_ctm-mob-dn-rm-bn-hr-se-cr,
141
+ var(--_ctm-tab-dn-rm-bn-hr-se-cr, var(--_ctm-dn-rm-bn-hr-se-cr)));
142
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-rm-bn-hr-se-ft-fy,
143
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-fy, var(--_ctm-dn-rm-bn-hr-se-ft-fy)));
144
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-rm-bn-hr-se-tt-tm,
145
+ var(--_ctm-tab-dn-rm-bn-hr-se-tt-tm, var(--_ctm-dn-rm-bn-hr-se-tt-tm)));
146
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-rm-bn-hr-se-wd-wp,
147
+ var(--_ctm-tab-dn-rm-bn-hr-se-wd-wp, var(--_ctm-dn-rm-bn-hr-se-wd-wp)));
148
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-rm-bn-hr-se-wd-bk,
149
+ var(--_ctm-tab-dn-rm-bn-hr-se-wd-bk, var(--_ctm-dn-rm-bn-hr-se-wd-bk)));
150
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-rm-bn-hr-se-ft-se,
151
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se)));
152
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-rm-bn-hr-se-ft-wt,
153
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt)));
154
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-rm-bn-hr-se-ft-se-ic,
155
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic)));
156
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-rm-bn-hr-se-tt-an,
157
+ var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an)));
158
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-rm-bn-hr-se-lr-sg,
159
+ var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg)));
160
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-rm-bn-hr-se-le-ht,
161
+ var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht)));
162
+
163
+ --_sf-hr-in-se: var(--_ctm-mob-dn-rm-bn-hr-se-in-se,
164
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se)));
165
+ --_sf-hr-in-se: var(--_ctm-mob-dn-rm-bn-hr-se-in-se,
166
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se)));
167
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-rm-bn-hr-se-in-c1,
168
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1)));
169
+ --_sf-hr-ue: var(--_ctm-mob-dn-rm-bn-hr-se-ue,
170
+ var(--_ctm-tab-dn-rm-bn-hr-se-ue, var(--_ctm-dn-rm-bn-hr-se-ue)));
245
171
 
246
172
  // for pading and width
247
- --_sf-hr-pg: var(
248
- --_ctm-mob-dn-rm-bn-hr-pg,
249
- var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg))
250
- );
251
- --_sf-hr-wh: var(
252
- --_ctm-mob-dn-rm-bn-hr-wh,
253
- var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh))
254
- );
173
+ --_sf-hr-pg: var(--_ctm-mob-dn-rm-bn-hr-pg,
174
+ var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg)));
175
+ --_sf-hr-wh: var(--_ctm-mob-dn-rm-bn-hr-wh,
176
+ var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh)));
255
177
 
256
178
  &[data-hover-show-shadow="false"] {
257
179
  --_hover-show-shadow: none;
258
180
  }
181
+
259
182
  &[data-hover-show-icon="false"] {
260
183
  --_hover-show-icon: none;
261
184
  }
262
185
  }
186
+
263
187
  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-bd-cr));
264
188
 
265
189
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-pg));
@@ -273,10 +197,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
273
197
 
274
198
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-rs));
275
199
 
276
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-ae))
277
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-br))
278
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-sd))
279
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-cr));
200
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-cr));
280
201
 
281
202
  &[data-show-border="true"] {
282
203
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-cr));
@@ -295,6 +216,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
295
216
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-tt-tm));
296
217
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wd-wp));
297
218
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wd-bk));
219
+
298
220
  &.flex__overflow {
299
221
  white-space: normal;
300
222
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -317,6 +239,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
317
239
 
318
240
  .icon {
319
241
  display: var(--_hover-show-icon, var(--_show-icon, flex));
242
+
320
243
  svg {
321
244
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
322
245
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
@@ -328,6 +251,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
328
251
  }
329
252
  }
330
253
  }
254
+
331
255
  [data-element-style="Text"] {
332
256
  display: inline-block;
333
257
  width: 100%;
@@ -359,19 +283,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
359
283
  align-self: stretch;
360
284
  align-items: center;
361
285
  width: 100%;
286
+
362
287
  .table__wrapper,
363
288
  .table__container {
364
289
  // overflow: visible !important;
365
290
  overflow-x: auto;
366
291
  scrollbar-width: none;
367
292
  }
293
+
368
294
  thead th {
369
295
  overflow: visible;
370
296
  position: relative;
371
297
  }
298
+
372
299
  .est__dropdown__main {
373
300
  z-index: var(--_higher-zIndex, 10);
374
301
  }
302
+
375
303
  .table__common_parent {
376
304
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
377
305
  width: 100%;
@@ -400,75 +328,61 @@ $resizeActive: '[data-cms-element-resizer="true"]';
400
328
  --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
401
329
  --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
402
330
  }
331
+
403
332
  &[data-widget-shadow="false"] {
404
333
  .table__wrapper {
405
334
  --_show-shadow: none;
406
335
  }
407
336
  }
337
+
408
338
  &[data-widget-border="true"] {
409
339
  .table__wrapper {
410
- border-color: var(
411
- --_ctm-mob-dn-te-wt-br-cr,
412
- var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
413
- );
414
- border-style: var(
415
- --_ctm-mob-dn-te-wt-br-se,
416
- var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
417
- );
418
- border-width: var(
419
- --_ctm-mob-dn-te-wt-br-wh,
420
- var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
421
- );
340
+ border-color: var(--_ctm-mob-dn-te-wt-br-cr,
341
+ var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr)));
342
+ border-style: var(--_ctm-mob-dn-te-wt-br-se,
343
+ var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se)));
344
+ border-width: var(--_ctm-mob-dn-te-wt-br-wh,
345
+ var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh)));
422
346
  }
423
347
  }
348
+
424
349
  &[data-table-shadow="false"] {
425
350
  .table__container {
426
351
  --_show-table-shadow: none;
427
352
  }
428
353
  }
354
+
429
355
  &[data-table-border="true"] {
430
356
  .table__container {
431
- border-color: var(
432
- --_ctm-mob-dn-te-br-cr,
433
- var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
434
- );
435
- border-style: var(
436
- --_ctm-mob-dn-te-br-se,
437
- var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
438
- );
439
- border-width: var(
440
- --_ctm-mob-dn-te-br-wh,
441
- var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
442
- );
357
+ border-color: var(--_ctm-mob-dn-te-br-cr,
358
+ var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr)));
359
+ border-style: var(--_ctm-mob-dn-te-br-se,
360
+ var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se)));
361
+ border-width: var(--_ctm-mob-dn-te-br-wh,
362
+ var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh)));
443
363
  }
444
364
  }
445
365
 
446
366
  &[data-header-divider="true"] {
447
367
  thead tr th {
448
- border-bottom: 1px solid
449
- var(
450
- --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
451
- var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
452
- );
368
+ border-bottom: 1px solid var(--_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
369
+ var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr)));
453
370
  }
454
371
  }
372
+
455
373
  &[data-row-divider="true"] {
456
374
  tbody tr {
457
- border-bottom: 1px solid
458
- var(
459
- --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
460
- var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
461
- );
375
+ border-bottom: 1px solid var(--_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
376
+ var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr)));
462
377
  }
463
378
  }
379
+
464
380
  &[data-column-divider="true"] {
381
+
465
382
  tbody tr td,
466
383
  thead tr th {
467
- border-right: 1px solid
468
- var(
469
- --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
470
- var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
471
- );
384
+ border-right: 1px solid var(--_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
385
+ var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr)));
472
386
  }
473
387
 
474
388
  tbody tr td:last-child,
@@ -476,19 +390,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
476
390
  border-right: none;
477
391
  }
478
392
  }
393
+
479
394
  &[data-show-more-rows="onScroll"] {
480
395
  .table__container {
481
396
  overflow-y: scroll;
482
- height: var(
483
- --_ctm-mob-lt-te-ht,
484
- var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))
485
- ) !important;
397
+ height: var(--_ctm-mob-lt-te-ht,
398
+ var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))) !important;
486
399
 
487
400
  &::-webkit-scrollbar {
488
- width: var(
489
- --_ctm-mob-dn-sl-br-sl-br-wh,
490
- var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
491
- );
401
+ width: var(--_ctm-mob-dn-sl-br-sl-br-wh,
402
+ var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh)));
492
403
  }
493
404
 
494
405
  &::-webkit-scrollbar-track {
@@ -496,10 +407,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
496
407
  }
497
408
 
498
409
  &::-webkit-scrollbar-thumb {
499
- background-color: var(
500
- --_ctm-mob-dn-sl-br-sl-br-cr,
501
- var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
502
- );
410
+ background-color: var(--_ctm-mob-dn-sl-br-sl-br-cr,
411
+ var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr)));
503
412
  }
504
413
 
505
414
  // // Scrollbar thumb when hovered
@@ -518,65 +427,38 @@ $resizeActive: '[data-cms-element-resizer="true"]';
518
427
  background-color: prepareMediaVariable(--_ctm-dn-rw-ae-cr-bd-cr);
519
428
  }
520
429
  }
430
+
521
431
  .table__wrapper {
522
432
  flex: 1 1 auto;
523
433
  min-width: 0;
524
434
  overflow-x: auto;
525
- padding: var(
526
- --_ctm-mob-lt-pg,
527
- var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg)))
528
- );
529
-
530
- background-color: var(
531
- --_ctm-mob-dn-te-wt-bd-cr,
532
- var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
533
- );
534
-
535
- border-radius: var(
536
- --_ctm-mob-dn-te-wt-br-rs,
537
- var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
538
- );
539
-
540
- box-shadow: var(
541
- --_show-shadow,
542
- var(
543
- --_ctm-mob-dn-te-wt-sw-ae,
544
- var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
545
- )
546
- var(
547
- --_ctm-mob-dn-te-wt-sw-br,
548
- var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
549
- )
550
- var(
551
- --_ctm-mob-dn-te-wt-sw-sd,
552
- var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
553
- )
554
- var(
555
- --_ctm-mob-dn-te-wt-sw-cr,
556
- var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
557
- )
558
- );
435
+ padding: var(--_ctm-mob-lt-pg,
436
+ var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg))));
437
+
438
+ background-color: var(--_ctm-mob-dn-te-wt-bd-cr,
439
+ var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr))));
440
+
441
+ border-radius: var(--_ctm-mob-dn-te-wt-br-rs,
442
+ var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs))));
443
+
444
+ box-shadow: var(--_show-shadow,
445
+ var(--_ctm-mob-dn-te-wt-sw-ae,
446
+ var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))) var(--_ctm-mob-dn-te-wt-sw-br,
447
+ var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))) var(--_ctm-mob-dn-te-wt-sw-sd,
448
+ var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))) var(--_ctm-mob-dn-te-wt-sw-cr,
449
+ var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))));
559
450
 
560
451
  width: 100%;
561
452
 
562
453
  .table__container {
563
- background-color: var(
564
- --_ctm-mob-dn-te-bd-cr,
565
- var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
566
- );
567
-
568
- border-radius: var(
569
- --_ctm-mob-dn-te-br-rs,
570
- var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
571
- );
572
-
573
- box-shadow: var(
574
- --_show-table-shadow,
575
- var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
576
- var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
577
- var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
578
- var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
579
- );
454
+ background-color: var(--_ctm-mob-dn-te-bd-cr,
455
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr)));
456
+
457
+ border-radius: var(--_ctm-mob-dn-te-br-rs,
458
+ var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs)));
459
+
460
+ box-shadow: var(--_show-table-shadow,
461
+ var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae))) var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br))) var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd))) var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr))));
580
462
  }
581
463
 
582
464
  h3 {
@@ -584,6 +466,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
584
466
  width: 100%;
585
467
  margin-bottom: 10px;
586
468
  }
469
+
587
470
  table {
588
471
  border-collapse: collapse;
589
472
  // border: none;
@@ -593,69 +476,49 @@ $resizeActive: '[data-cms-element-resizer="true"]';
593
476
  width: max-content;
594
477
  min-width: 100%;
595
478
  table-layout: auto;
479
+
596
480
  th,
597
481
  td {
598
482
  border: none;
599
483
  }
484
+
600
485
  thead {
601
- background-color: var(
602
- --_ctm-mob-dn-te-hr-bd-cr,
603
- var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
604
- );
486
+ background-color: var(--_ctm-mob-dn-te-hr-bd-cr,
487
+ var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr)));
605
488
 
606
489
  .thead__row__divider {
607
490
  height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
608
491
 
609
492
  .th__col__divider {
610
- padding: var(
611
- --_ctm-mob-lt-hr-cl-pg,
612
- var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
613
- );
614
-
615
- color: var(
616
- --_ctm-mob-dn-hr-tt-cr,
617
- var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
618
- );
619
-
620
- font-family: var(
621
- --_ctm-mob-dn-hr-tt-ft-fy,
622
- var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
623
- );
624
-
625
- font-size: var(
626
- --_ctm-mob-dn-hr-tt-ft-se,
627
- var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
628
- );
629
-
630
- font-weight: var(
631
- --_ctm-mob-dn-hr-tt-ft-wt,
632
- var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
633
- );
634
-
635
- text-decoration: var(
636
- --_ctm-mob-dn-hr-tt-ue,
637
- var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
638
- );
639
-
640
- font-style: var(
641
- --_ctm-mob-dn-hr-tt-ft-se-ic,
642
- var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
643
- );
644
-
645
- text-align: var(
646
- --_ctm-mob-dn-hr-tt-tt-an,
647
- var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
648
- );
649
-
650
- letter-spacing: var(
651
- --_ctm-mob-dn-hr-tt-lr-sg,
652
- var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
653
- );
654
-
655
- line-height: var(
656
- --_ctm-mob-dn-hr-tt-le-ht,
657
- var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
658
- );
493
+ padding: var(--_ctm-mob-lt-hr-cl-pg,
494
+ var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg)));
495
+
496
+ color: var(--_ctm-mob-dn-hr-tt-cr,
497
+ var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr)));
498
+
499
+ font-family: var(--_ctm-mob-dn-hr-tt-ft-fy,
500
+ var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy)));
501
+
502
+ font-size: var(--_ctm-mob-dn-hr-tt-ft-se,
503
+ var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se)));
504
+
505
+ font-weight: var(--_ctm-mob-dn-hr-tt-ft-wt,
506
+ var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt)));
507
+
508
+ text-decoration: var(--_ctm-mob-dn-hr-tt-ue,
509
+ var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue)));
510
+
511
+ font-style: var(--_ctm-mob-dn-hr-tt-ft-se-ic,
512
+ var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic)));
513
+
514
+ text-align: var(--_ctm-mob-dn-hr-tt-tt-an,
515
+ var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an)));
516
+
517
+ letter-spacing: var(--_ctm-mob-dn-hr-tt-lr-sg,
518
+ var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg)));
519
+
520
+ line-height: var(--_ctm-mob-dn-hr-tt-le-ht,
521
+ var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht)));
659
522
 
660
523
  // Header Text > Text Transform and the word wrap/break pair that the
661
524
  // typography panel renders alongside it.
@@ -679,8 +542,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
679
542
  }
680
543
  }
681
544
  }
545
+
682
546
  tbody {
683
547
  .tbody__row__divider {
548
+
684
549
  // Set by CommonTable only when the caller passed onRowClick.
685
550
  // The cells carry it too: a <td> establishes its own cursor context,
686
551
  // so the pointer would stop at the row padding otherwise.
@@ -693,126 +558,68 @@ $resizeActive: '[data-cms-element-resizer="true"]';
693
558
  }
694
559
  }
695
560
 
696
- background-color: var(
697
- --_ctm-mob-dn-te-rw-bd-cr,
698
- var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
699
- );
561
+ background-color: var(--_ctm-mob-dn-te-rw-bd-cr,
562
+ var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr)));
700
563
 
701
564
  // Table Row > Hover Background. Falls back to the default background
702
565
  // so a row that has no hover colour set does not go transparent.
703
566
  &:hover {
704
- background-color: var(
705
- --_ctm-mob-dn-te-rw-bd-cr-hr,
706
- var(
707
- --_ctm-tab-dn-te-rw-bd-cr-hr,
708
- var(
709
- --_ctm-dn-te-rw-bd-cr-hr,
710
- var(
711
- --_ctm-mob-dn-te-rw-bd-cr,
712
- var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
713
- )
714
- )
715
- )
716
- );
567
+ background-color: var(--_ctm-mob-dn-te-rw-bd-cr-hr,
568
+ var(--_ctm-tab-dn-te-rw-bd-cr-hr,
569
+ var(--_ctm-dn-te-rw-bd-cr-hr,
570
+ var(--_ctm-mob-dn-te-rw-bd-cr,
571
+ var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))))));
717
572
  }
718
573
 
719
574
  height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
720
575
 
721
576
  .td__col__divider {
722
- padding: var(
723
- --_ctm-mob-lt-rw-cl-pg,
724
- var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
725
- );
726
-
727
- color: var(
728
- --_sf-hr-fc,
729
- var(
730
- --_ctm-mob-dn-rw-tt-cr,
731
- var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))
732
- )
733
- );
734
-
735
- font-family: var(
736
- --_sf-hr-ff,
737
- var(
738
- --_ctm-mob-dn-rw-tt-ft-fy,
739
- var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
740
- )
741
- );
742
- text-transform: var(
743
- --_sf-hr-tt-tm,
744
- var(
745
- --_ctm-mob-dn-rw-tt-tt-tm,
746
- var(--_ctm-tab-dn-rw-tt-tt-tm, var(--_ctm-dn-rw-tt-tt-tm))
747
- )
748
- );
749
- word-wrap: var(
750
- --_sf-hr-wd-wp,
751
- var(
752
- --_ctm-mob-dn-rw-tt-wd-wp,
753
- var(--_ctm-tab-dn-rw-tt-wd-wp, var(--_ctm-dn-rw-tt-wd-wp))
754
- )
755
- );
756
- word-break: var(
757
- --_sf-hr-wd-bk,
758
- var(
759
- --_ctm-mob-dn-rw-tt-wd-bk,
760
- var(--_ctm-tab-dn-rw-tt-wd-bk, var(--_ctm-dn-rw-tt-wd-bk))
761
- )
762
- );
763
-
764
- font-size: var(
765
- --_sf-hr-fs,
766
- var(
767
- --_ctm-mob-dn-rw-tt-ft-se,
768
- var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
769
- )
770
- );
771
-
772
- text-decoration: var(
773
- --_ctm-mob-dn-rw-tt-ue,
774
- var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
775
- );
776
-
777
- font-weight: var(
778
- --_sf-hr-fw,
779
- var(
780
- --_ctm-mob-dn-rw-tt-ft-wt,
781
- var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
782
- )
783
- );
784
-
785
- font-style: var(
786
- --_sf-hr-ft,
787
- var(
788
- --_ctm-mob-dn-rw-tt-ft-se-ic,
789
- var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
790
- )
791
- );
792
-
793
- text-align: var(
794
- --_sf-hr-ta,
795
- var(
796
- --_ctm-mob-dn-rw-tt-tt-an,
797
- var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
798
- )
799
- );
800
-
801
- letter-spacing: var(
802
- --_sf-hr-ls,
803
- var(
804
- --_ctm-mob-dn-rw-tt-lr-sg,
805
- var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
806
- )
807
- );
808
-
809
- line-height: var(
810
- --_sf-hr-lh,
811
- var(
812
- --_ctm-mob-dn-rw-tt-le-ht,
813
- var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
814
- )
815
- );
577
+ padding: var(--_ctm-mob-lt-rw-cl-pg,
578
+ var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg)));
579
+
580
+ color: var(--_sf-hr-fc,
581
+ var(--_ctm-mob-dn-rw-tt-cr,
582
+ var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))));
583
+
584
+ font-family: var(--_sf-hr-ff,
585
+ var(--_ctm-mob-dn-rw-tt-ft-fy,
586
+ var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))));
587
+ text-transform: var(--_sf-hr-tt-tm,
588
+ var(--_ctm-mob-dn-rw-tt-tt-tm,
589
+ var(--_ctm-tab-dn-rw-tt-tt-tm, var(--_ctm-dn-rw-tt-tt-tm))));
590
+ word-wrap: var(--_sf-hr-wd-wp,
591
+ var(--_ctm-mob-dn-rw-tt-wd-wp,
592
+ var(--_ctm-tab-dn-rw-tt-wd-wp, var(--_ctm-dn-rw-tt-wd-wp))));
593
+ word-break: var(--_sf-hr-wd-bk,
594
+ var(--_ctm-mob-dn-rw-tt-wd-bk,
595
+ var(--_ctm-tab-dn-rw-tt-wd-bk, var(--_ctm-dn-rw-tt-wd-bk))));
596
+
597
+ font-size: var(--_sf-hr-fs,
598
+ var(--_ctm-mob-dn-rw-tt-ft-se,
599
+ var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))));
600
+
601
+ text-decoration: var(--_ctm-mob-dn-rw-tt-ue,
602
+ var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue)));
603
+
604
+ font-weight: var(--_sf-hr-fw,
605
+ var(--_ctm-mob-dn-rw-tt-ft-wt,
606
+ var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))));
607
+
608
+ font-style: var(--_sf-hr-ft,
609
+ var(--_ctm-mob-dn-rw-tt-ft-se-ic,
610
+ var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))));
611
+
612
+ text-align: var(--_sf-hr-ta,
613
+ var(--_ctm-mob-dn-rw-tt-tt-an,
614
+ var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))));
615
+
616
+ letter-spacing: var(--_sf-hr-ls,
617
+ var(--_ctm-mob-dn-rw-tt-lr-sg,
618
+ var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))));
619
+
620
+ line-height: var(--_sf-hr-lh,
621
+ var(--_ctm-mob-dn-rw-tt-le-ht,
622
+ var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))));
816
623
  }
817
624
  }
818
625
  }
@@ -821,18 +628,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
821
628
  .pagination {
822
629
  display: var(--_d-flex);
823
630
  align-items: var(--_align-center);
824
- justify-content: var(
825
- --_ctm-mob-lt-pn-at,
826
- var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at))
827
- );
631
+ justify-content: var(--_ctm-mob-lt-pn-at,
632
+ var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at)));
828
633
  margin-top: 10px;
829
- background-color: var(
830
- --_sf-bd-cr,
831
- var(
832
- --_ctm-mob-dn-pn-dt-se-bd-cr,
833
- var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
834
- )
835
- );
634
+ background-color: var(--_sf-bd-cr,
635
+ var(--_ctm-mob-dn-pn-dt-se-bd-cr,
636
+ var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))));
637
+
836
638
  &.pagination__center {
837
639
  justify-content: var(justify-center);
838
640
  }
@@ -843,48 +645,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
843
645
  border-style: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none);
844
646
  border-width: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0);
845
647
  border-radius: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0);
846
- box-shadow: var(
847
- --_show-shadow,
848
- prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-ae, 0)
849
- prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-br, 0)
850
- prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-sd, 0)
851
- prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-cr, transparent)
852
- );
648
+ box-shadow: var(--_show-shadow,
649
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-ae, 0) prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-br, 0) prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-sd, 0) prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-cr, transparent));
853
650
 
854
651
  &:hover {
855
- background-color: var(
856
- --_sf-bd-cr,
857
- prepareMediaVariable(
858
- --_ctm-dn-pn-hr-se-bd-cr,
859
- prepareMediaVariable(--_ctm-dn-pn-dt-se-bd-cr)
860
- )
861
- );
862
- border-color: prepareMediaVariable(
863
- --_ctm-dn-pn-hr-se-br-cr,
864
- prepareMediaVariable(--_ctm-dn-pn-dt-se-br-cr)
865
- );
866
- border-style: prepareMediaVariable(
867
- --_ctm-dn-pn-hr-se-br-se,
868
- prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none)
869
- );
870
- border-width: prepareMediaVariable(
871
- --_ctm-dn-pn-hr-se-br-wh,
872
- prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0)
873
- );
874
- border-radius: prepareMediaVariable(
875
- --_ctm-dn-pn-hr-se-br-rs,
876
- prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0)
877
- );
878
- box-shadow: var(
879
- --_show-shadow,
880
- prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-ae, 0)
881
- prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-br, 0)
882
- prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-sd, 0)
883
- prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-cr, transparent)
884
- );
652
+ background-color: var(--_sf-bd-cr,
653
+ prepareMediaVariable(--_ctm-dn-pn-hr-se-bd-cr,
654
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-bd-cr)));
655
+ border-color: prepareMediaVariable(--_ctm-dn-pn-hr-se-br-cr,
656
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-br-cr));
657
+ border-style: prepareMediaVariable(--_ctm-dn-pn-hr-se-br-se,
658
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none));
659
+ border-width: prepareMediaVariable(--_ctm-dn-pn-hr-se-br-wh,
660
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0));
661
+ border-radius: prepareMediaVariable(--_ctm-dn-pn-hr-se-br-rs,
662
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0));
663
+ box-shadow: var(--_show-shadow,
664
+ prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-ae, 0) prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-br, 0) prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-sd, 0) prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-cr, transparent));
885
665
  }
886
666
 
887
667
  button {
668
+
888
669
  // Default glyph shows, hover glyph waits. Both are in the DOM so the
889
670
  // swap costs no re-render; when no hover icon is picked the renderer
890
671
  // falls back to the default one, so the pair looks identical.
@@ -913,6 +694,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
913
694
  // pinned to a hardcoded 18px and grey, so neither control did anything.
914
695
  width: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px);
915
696
  height: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px);
697
+
916
698
  path {
917
699
  stroke: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500));
918
700
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -921,26 +703,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
921
703
  }
922
704
 
923
705
  &:hover svg {
924
- width: prepareMediaVariable(
925
- --_ctm-dn-pn-hr-se-in-se,
926
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
927
- );
928
- height: prepareMediaVariable(
929
- --_ctm-dn-pn-hr-se-in-se,
930
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
931
- );
706
+ width: prepareMediaVariable(--_ctm-dn-pn-hr-se-in-se,
707
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px));
708
+ height: prepareMediaVariable(--_ctm-dn-pn-hr-se-in-se,
709
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px));
710
+
932
711
  path {
933
- stroke: prepareMediaVariable(
934
- --_ctm-dn-pn-hr-se-in-c1,
935
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500))
936
- );
712
+ stroke: prepareMediaVariable(--_ctm-dn-pn-hr-se-in-c1,
713
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500)));
937
714
  }
938
715
  }
939
716
  }
717
+
940
718
  span {
941
719
  float: left;
942
720
  padding: var(--_pd-8) var(--_pd-16);
943
721
  text-decoration: none;
722
+
944
723
  span {
945
724
  // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
946
725
  // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
@@ -952,6 +731,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
952
731
  // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
953
732
  // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
954
733
  }
734
+
955
735
  &.active:hover {
956
736
  &hover {
957
737
  --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
@@ -967,101 +747,55 @@ $resizeActive: '[data-cms-element-resizer="true"]';
967
747
  --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
968
748
  }
969
749
  }
750
+
970
751
  &.active {
971
- color: var(
972
- --_sf-hr-fc,
973
- var(
974
- --_ctm-mob-dn-pn-dt-se-cr,
975
- var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
976
- )
977
- );
978
-
979
- font-family: var(
980
- --_sf-hr-ff,
981
- var(
982
- --_ctm-mob-dn-pn-dt-se-ft-fy,
983
- var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
984
- )
985
- );
986
- text-transform: var(
987
- --_sf-hr-tt-tm,
988
- var(
989
- --_ctm-mob-dn-pn-dt-se-tt-tm,
990
- var(--_ctm-tab-dn-pn-dt-se-tt-tm, var(--_ctm-dn-pn-dt-se-tt-tm))
991
- )
992
- );
993
- word-wrap: var(
994
- --_sf-hr-wd-wp,
995
- var(
996
- --_ctm-mob-dn-pn-dt-se-wd-wp,
997
- var(--_ctm-tab-dn-pn-dt-se-wd-wp, var(--_ctm-dn-pn-dt-se-wd-wp))
998
- )
999
- );
1000
- word-break: var(
1001
- --_sf-hr-wd-bk,
1002
- var(
1003
- --_ctm-mob-dn-pn-dt-se-wd-bk,
1004
- var(--_ctm-tab-dn-pn-dt-se-wd-bk, var(--_ctm-dn-pn-dt-se-wd-bk))
1005
- )
1006
- );
1007
-
1008
- font-size: var(
1009
- --_sf-hr-fs,
1010
- var(
1011
- --_ctm-mob-dn-pn-dt-se-ft-se,
1012
- var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
1013
- )
1014
- );
1015
-
1016
- text-decoration: var(
1017
- --_sf-hr-td,
1018
- var(
1019
- --_ctm-mob-dn-pn-dt-se-ue,
1020
- var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
1021
- )
1022
- );
1023
-
1024
- font-weight: var(
1025
- --_sf-hr-fw,
1026
- var(
1027
- --_ctm-mob-dn-pn-dt-se-ft-wt,
1028
- var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
1029
- )
1030
- );
1031
-
1032
- font-style: var(
1033
- --_sf-hr-ft,
1034
- var(
1035
- --_ctm-mob-dn-pn-dt-se-ft-se-ic,
1036
- var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
1037
- )
1038
- );
1039
-
1040
- text-align: var(
1041
- --_sf-hr-ta,
1042
- var(
1043
- --_ctm-mob-dn-pn-dt-se-tt-an,
1044
- var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
1045
- )
1046
- );
1047
-
1048
- letter-spacing: var(
1049
- --_sf-hr-ls,
1050
- var(
1051
- --_ctm-mob-dn-pn-dt-se-lr-sg,
1052
- var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
1053
- )
1054
- );
1055
-
1056
- line-height: var(
1057
- --_sf-hr-lh,
1058
- var(
1059
- --_ctm-mob-dn-pn-dt-se-le-ht,
1060
- var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
1061
- )
1062
- );
752
+ color: var(--_sf-hr-fc,
753
+ var(--_ctm-mob-dn-pn-dt-se-cr,
754
+ var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))));
755
+
756
+ font-family: var(--_sf-hr-ff,
757
+ var(--_ctm-mob-dn-pn-dt-se-ft-fy,
758
+ var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))));
759
+ text-transform: var(--_sf-hr-tt-tm,
760
+ var(--_ctm-mob-dn-pn-dt-se-tt-tm,
761
+ var(--_ctm-tab-dn-pn-dt-se-tt-tm, var(--_ctm-dn-pn-dt-se-tt-tm))));
762
+ word-wrap: var(--_sf-hr-wd-wp,
763
+ var(--_ctm-mob-dn-pn-dt-se-wd-wp,
764
+ var(--_ctm-tab-dn-pn-dt-se-wd-wp, var(--_ctm-dn-pn-dt-se-wd-wp))));
765
+ word-break: var(--_sf-hr-wd-bk,
766
+ var(--_ctm-mob-dn-pn-dt-se-wd-bk,
767
+ var(--_ctm-tab-dn-pn-dt-se-wd-bk, var(--_ctm-dn-pn-dt-se-wd-bk))));
768
+
769
+ font-size: var(--_sf-hr-fs,
770
+ var(--_ctm-mob-dn-pn-dt-se-ft-se,
771
+ var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))));
772
+
773
+ text-decoration: var(--_sf-hr-td,
774
+ var(--_ctm-mob-dn-pn-dt-se-ue,
775
+ var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))));
776
+
777
+ font-weight: var(--_sf-hr-fw,
778
+ var(--_ctm-mob-dn-pn-dt-se-ft-wt,
779
+ var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))));
780
+
781
+ font-style: var(--_sf-hr-ft,
782
+ var(--_ctm-mob-dn-pn-dt-se-ft-se-ic,
783
+ var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))));
784
+
785
+ text-align: var(--_sf-hr-ta,
786
+ var(--_ctm-mob-dn-pn-dt-se-tt-an,
787
+ var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))));
788
+
789
+ letter-spacing: var(--_sf-hr-ls,
790
+ var(--_ctm-mob-dn-pn-dt-se-lr-sg,
791
+ var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))));
792
+
793
+ line-height: var(--_sf-hr-lh,
794
+ var(--_ctm-mob-dn-pn-dt-se-le-ht,
795
+ var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))));
1063
796
  }
1064
797
  }
798
+
1065
799
  // Same wrong path as the svg rule above: the icon variables carry the
1066
800
  // section's state segment. Only the "next" button has this class in the
1067
801
  // markup, so the svg rules are what actually style both arrows — these are
@@ -1071,14 +805,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1071
805
  font-size: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se);
1072
806
 
1073
807
  &:hover {
1074
- color: prepareMediaVariable(
1075
- --_ctm-dn-pn-hr-se-in-c1,
1076
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1)
1077
- );
1078
- font-size: prepareMediaVariable(
1079
- --_ctm-dn-pn-hr-se-in-se,
1080
- prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se)
1081
- );
808
+ color: prepareMediaVariable(--_ctm-dn-pn-hr-se-in-c1,
809
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1));
810
+ font-size: prepareMediaVariable(--_ctm-dn-pn-hr-se-in-se,
811
+ prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se));
1082
812
  }
1083
813
  }
1084
814
  }
@@ -1110,6 +840,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1110
840
  // font-weight: 400;
1111
841
  // line-height: 24px;
1112
842
  width: 100%;
843
+
1113
844
  &:nth-of-type(1) {
1114
845
  color: prepareMediaVariable(--_ctm-dn-te-cr);
1115
846
  font-family: prepareMediaVariable(--_ctm-dn-te-ft-fy);
@@ -1124,6 +855,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1124
855
  line-height: prepareMediaVariable(--_ctm-dn-te-le-ht);
1125
856
  text-decoration: prepareMediaVariable(--_ctm-dn-te-ue);
1126
857
  }
858
+
1127
859
  &:nth-of-type(2) {
1128
860
  color: prepareMediaVariable(--_ctm-dn-dn-cr);
1129
861
  font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy);
@@ -1174,149 +906,99 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1174
906
  }
1175
907
  }
1176
908
  }
909
+
1177
910
  .btn__with__text[data-btn-name="loadMore"] {
1178
911
  &[data-show-shadow="false"] {
1179
912
  --_show-shadow: none;
1180
913
  }
914
+
1181
915
  &[data-icon-position="left"] {
1182
916
  --_sf-fd-bn: row;
1183
917
  }
918
+
1184
919
  &[data-icon-position="right"] {
1185
920
  --_sf-fd-bn: row-reverse;
1186
921
  }
922
+
1187
923
  &[data-icon-position="center"] {
1188
924
  --_sf-fd-bn: row;
1189
925
  }
1190
926
 
1191
927
  &:hover {
1192
- --_sf-hr-bd-cr: var(
1193
- --_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
1194
- var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr))
1195
- );
1196
- --_sf-hr-br-cr: var(
1197
- --_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
1198
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr))
1199
- );
1200
- --_sf-hr-br-se: var(
1201
- --_ctm-mob-dn-ld-me-bn-hr-se-br-se,
1202
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se))
1203
- );
1204
- --_sf-hr-br-wh: var(
1205
- --_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
1206
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh))
1207
- );
1208
- --_sf-hr-br-rs: var(
1209
- --_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
1210
- var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs))
1211
- );
1212
- --_sf-hr-at: var(
1213
- --_ctm-mob-dn-ld-me-bn-hr-se-at,
1214
- var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at))
1215
- );
1216
- --_sf-hr-gp: var(
1217
- --_ctm-mob-dn-ld-me-bn-hr-se-gp,
1218
- var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp))
1219
- );
928
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
929
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr)));
930
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
931
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr)));
932
+ --_sf-hr-br-se: var(--_ctm-mob-dn-ld-me-bn-hr-se-br-se,
933
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se)));
934
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
935
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh)));
936
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
937
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs)));
938
+ --_sf-hr-at: var(--_ctm-mob-dn-ld-me-bn-hr-se-at,
939
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at)));
940
+ --_sf-hr-gp: var(--_ctm-mob-dn-ld-me-bn-hr-se-gp,
941
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp)));
1220
942
 
1221
943
  // for shadow
1222
- --_sf-hr-sw-ae: var(
1223
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
1224
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae))
1225
- );
1226
- --_sf-hr-sw-br: var(
1227
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
1228
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br))
1229
- );
1230
- --_sf-hr-sw-hr: var(
1231
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
1232
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr))
1233
- );
1234
- --_sf-hr-sw-cr: var(
1235
- --_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
1236
- var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr))
1237
- );
944
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
945
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae)));
946
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
947
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br)));
948
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
949
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr)));
950
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
951
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr)));
1238
952
 
1239
953
  // for font
1240
954
 
1241
- --_sf-hr-cr: var(
1242
- --_ctm-mob-dn-ld-me-bn-hr-se-cr,
1243
- var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr))
1244
- );
1245
- --_sf-hr-ft-fy: var(
1246
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
1247
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy))
1248
- );
1249
- --_sf-hr-tt-tm: var(
1250
- --_ctm-mob-dn-ld-me-bn-hr-se-tt-tm,
1251
- var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-tm, var(--_ctm-dn-ld-me-bn-hr-se-tt-tm))
1252
- );
1253
- --_sf-hr-wd-wp: var(
1254
- --_ctm-mob-dn-ld-me-bn-hr-se-wd-wp,
1255
- var(--_ctm-tab-dn-ld-me-bn-hr-se-wd-wp, var(--_ctm-dn-ld-me-bn-hr-se-wd-wp))
1256
- );
1257
- --_sf-hr-wd-bk: var(
1258
- --_ctm-mob-dn-ld-me-bn-hr-se-wd-bk,
1259
- var(--_ctm-tab-dn-ld-me-bn-hr-se-wd-bk, var(--_ctm-dn-ld-me-bn-hr-se-wd-bk))
1260
- );
1261
- --_sf-hr-ft-se: var(
1262
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
1263
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se))
1264
- );
1265
- --_sf-hr-ft-wt: var(
1266
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
1267
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt))
1268
- );
1269
- --_sf-hr-ft-se-ic: var(
1270
- --_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
1271
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic))
1272
- );
1273
- --_sf-hr-tt-an: var(
1274
- --_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
1275
- var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an))
1276
- );
1277
- --_sf-hr-lr-sg: var(
1278
- --_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
1279
- var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg))
1280
- );
1281
- --_sf-hr-le-ht: var(
1282
- --_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
1283
- var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht))
1284
- );
1285
-
1286
- --_sf-hr-in-se: var(
1287
- --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
1288
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
1289
- );
1290
- --_sf-hr-in-se: var(
1291
- --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
1292
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
1293
- );
1294
- --_sf-hr-in-c1: var(
1295
- --_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
1296
- var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1))
1297
- );
1298
- --_sf-hr-ue: var(
1299
- --_ctm-mob-dn-ld-me-bn-hr-se-ue,
1300
- var(--_ctm-tab-dn-ld-me-bn-hr-se-ue, var(--_ctm-dn-ld-me-bn-hr-se-ue))
1301
- );
955
+ --_sf-hr-cr: var(--_ctm-mob-dn-ld-me-bn-hr-se-cr,
956
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr)));
957
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
958
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy)));
959
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-ld-me-bn-hr-se-tt-tm,
960
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-tm, var(--_ctm-dn-ld-me-bn-hr-se-tt-tm)));
961
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-ld-me-bn-hr-se-wd-wp,
962
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-wd-wp, var(--_ctm-dn-ld-me-bn-hr-se-wd-wp)));
963
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-ld-me-bn-hr-se-wd-bk,
964
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-wd-bk, var(--_ctm-dn-ld-me-bn-hr-se-wd-bk)));
965
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
966
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se)));
967
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
968
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt)));
969
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
970
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic)));
971
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
972
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an)));
973
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
974
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg)));
975
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
976
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht)));
977
+
978
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ld-me-bn-hr-se-in-se,
979
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se)));
980
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ld-me-bn-hr-se-in-se,
981
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se)));
982
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
983
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1)));
984
+ --_sf-hr-ue: var(--_ctm-mob-dn-ld-me-bn-hr-se-ue,
985
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ue, var(--_ctm-dn-ld-me-bn-hr-se-ue)));
1302
986
 
1303
987
  // for pading and width
1304
- --_sf-hr-pg: var(
1305
- --_ctm-mob-dn-ld-me-bn-hr-pg,
1306
- var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg))
1307
- );
1308
- --_sf-hr-wh: var(
1309
- --_ctm-mob-dn-ld-me-bn-hr-wh,
1310
- var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh))
1311
- );
988
+ --_sf-hr-pg: var(--_ctm-mob-dn-ld-me-bn-hr-pg,
989
+ var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg)));
990
+ --_sf-hr-wh: var(--_ctm-mob-dn-ld-me-bn-hr-wh,
991
+ var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh)));
1312
992
 
1313
993
  &[data-hover-show-shadow="false"] {
1314
994
  --_hover-show-shadow: none;
1315
995
  }
996
+
1316
997
  &[data-hover-show-icon="false"] {
1317
998
  --_hover-show-icon: none;
1318
999
  }
1319
1000
  }
1001
+
1320
1002
  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr));
1321
1003
 
1322
1004
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-pg));
@@ -1330,10 +1012,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1330
1012
 
1331
1013
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-rs));
1332
1014
 
1333
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae))
1334
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br))
1335
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd))
1336
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr));
1015
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr));
1337
1016
 
1338
1017
  &[data-show-border="true"] {
1339
1018
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-cr));
@@ -1352,6 +1031,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1352
1031
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-tm));
1353
1032
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wd-wp));
1354
1033
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wd-bk));
1034
+
1355
1035
  &.flex__overflow {
1356
1036
  white-space: normal;
1357
1037
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -1361,10 +1041,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1361
1041
 
1362
1042
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-wt));
1363
1043
 
1364
- font-style: var(
1365
- --_sf-hr-ft-se-ic,
1366
- prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic)
1367
- );
1044
+ font-style: var(--_sf-hr-ft-se-ic,
1045
+ prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic));
1368
1046
 
1369
1047
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-an));
1370
1048
 
@@ -1377,6 +1055,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1377
1055
 
1378
1056
  .icon {
1379
1057
  display: var(--_hover-show-icon, var(--_show-icon, flex));
1058
+
1380
1059
  svg {
1381
1060
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
1382
1061
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
@@ -1388,6 +1067,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1388
1067
  }
1389
1068
  }
1390
1069
  }
1070
+
1391
1071
  [data-element-style="Text"] {
1392
1072
  display: inline-block;
1393
1073
  width: 100%;
@@ -1422,16 +1102,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1422
1102
  width: 100%;
1423
1103
  flex-direction: column;
1424
1104
  height: auto;
1105
+
1425
1106
  .slider_header_wrapper {
1426
1107
  display: flex;
1427
1108
  align-items: center;
1428
1109
  gap: 12px;
1429
1110
  justify-content: space-between;
1430
1111
  width: 100%;
1112
+
1431
1113
  .slider_header_wrapper_left {
1432
1114
  display: flex;
1433
1115
  align-items: center;
1434
1116
  gap: 12px;
1117
+
1435
1118
  // Stands in for the profile dropdown when there is only one
1436
1119
  // profile. Matches the heading beside it so the row reads as one line.
1437
1120
  .allocation_single_profile_name {
@@ -1458,6 +1141,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1458
1141
  display: flex;
1459
1142
  }
1460
1143
  }
1144
+
1461
1145
  .redeem_now_wrapper {
1462
1146
  .redeem_now_btn {
1463
1147
  display: flex;
@@ -1485,6 +1169,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1485
1169
  }
1486
1170
 
1487
1171
  .allocations_slider_slide_wrapper {
1172
+
1488
1173
  // Clicking an allocation selects it and its profile (it replaced the
1489
1174
  // Redeem button), so the whole slide is the hit area.
1490
1175
  &[data-is-clickable="true"] {
@@ -1538,6 +1223,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1538
1223
  }
1539
1224
  }
1540
1225
  }
1226
+
1541
1227
  .est__dropdown__main {
1542
1228
  position: relative;
1543
1229
  min-width: 150px;
@@ -1552,6 +1238,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1552
1238
 
1553
1239
  .est__dropdown {
1554
1240
  position: relative;
1241
+
1555
1242
  .est__dropdown__button {
1556
1243
  display: flex;
1557
1244
  align-items: center;
@@ -1592,7 +1279,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1592
1279
  --_sf-bmm-cr: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-cr)};
1593
1280
  }
1594
1281
 
1595
- & > span {
1282
+ &>span {
1596
1283
  display: var(--_d-flex);
1597
1284
 
1598
1285
  &:nth-of-type(1) {
@@ -1607,15 +1294,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1607
1294
  word-break: var(--_sf-bmm-wd-bk, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-wd-bk));
1608
1295
  font-size: var(--_sf-bmm-ft-se, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se));
1609
1296
  font-weight: var(--_sf-bmm-ft-wt, (--_ctm-dn-dn-st-dt-se-ft-wt));
1610
- font-style: var(
1611
- --_sf-bmm-ft-se-ic,
1612
- prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se-ic)
1613
- );
1297
+ font-style: var(--_sf-bmm-ft-se-ic,
1298
+ prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se-ic));
1614
1299
  text-align: var(--_sf-bmm-tt-an, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-tt-an));
1615
- letter-spacing: var(
1616
- --_sf-bmm-lr-sg,
1617
- prepareMediaVariable(--_ctm-dn-dn-st-dt-se-lr-sg)
1618
- );
1300
+ letter-spacing: var(--_sf-bmm-lr-sg,
1301
+ prepareMediaVariable(--_ctm-dn-dn-st-dt-se-lr-sg));
1619
1302
  line-height: var(--_sf-bmm-le-ht, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-le-ht));
1620
1303
  text-decoration: var(--_sf-bmm-ue, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ue));
1621
1304
 
@@ -1677,75 +1360,44 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1677
1360
  // padding: 12px;
1678
1361
  cursor: pointer;
1679
1362
  // text-align: left;
1680
- border-color: var(
1681
- --_sf-bmm-v1-br-clr,
1682
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-cr)}
1683
- );
1684
- border-width: var(
1685
- --_sf-bmm-v1-br-wh,
1686
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-wh)}
1687
- );
1688
- border-style: var(
1689
- --_sf-bmm-v1-br-se,
1690
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-se)}
1691
- );
1692
- border-radius: var(
1693
- --_sf-bmm-v1-br-rs,
1694
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-rs)}
1695
- );
1696
-
1697
- background: var(
1698
- --_sf-bmm-v1-bd-cr,
1699
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-bd-cr)}
1700
- );
1701
-
1702
- padding: var(
1703
- --_sf-bmm-v1-pg,
1704
- #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-pg, 12px)}
1705
- );
1706
-
1707
- font-family: var(
1708
- --_sf-bmm-v1-ft-fy,
1709
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-fy)
1710
- );
1711
- text-transform: var(
1712
- --_sf-bmm-v1-tt-tm,
1713
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-tt-tm)
1714
- );
1715
- word-wrap: var(
1716
- --_sf-bmm-v1-wd-wp,
1717
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-wd-wp)
1718
- );
1719
- word-break: var(
1720
- --_sf-bmm-v1-wd-bk,
1721
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-wd-bk)
1722
- );
1363
+ border-color: var(--_sf-bmm-v1-br-clr,
1364
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-cr)});
1365
+ border-width: var(--_sf-bmm-v1-br-wh,
1366
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-wh)});
1367
+ border-style: var(--_sf-bmm-v1-br-se,
1368
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-se)});
1369
+ border-radius: var(--_sf-bmm-v1-br-rs,
1370
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-rs)});
1371
+
1372
+ background: var(--_sf-bmm-v1-bd-cr,
1373
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-bd-cr)});
1374
+
1375
+ padding: var(--_sf-bmm-v1-pg,
1376
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-pg, 12px)});
1377
+
1378
+ font-family: var(--_sf-bmm-v1-ft-fy,
1379
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-fy));
1380
+ text-transform: var(--_sf-bmm-v1-tt-tm,
1381
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-tt-tm));
1382
+ word-wrap: var(--_sf-bmm-v1-wd-wp,
1383
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-wd-wp));
1384
+ word-break: var(--_sf-bmm-v1-wd-bk,
1385
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-wd-bk));
1723
1386
  color: var(--_sf-bmm-v1-cr, prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-cr));
1724
- font-size: var(
1725
- --_sf-bmm-v1-ft-se,
1726
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se)
1727
- );
1387
+ font-size: var(--_sf-bmm-v1-ft-se,
1388
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se));
1728
1389
  font-weight: var(--_sf-bmm-v1-ft-wt, (--_ctm-dn-dn-lt-im-dt-se-ft-wt));
1729
- font-style: var(
1730
- --_sf-bmm-v1-ft-se-ic,
1731
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se-ic)
1732
- );
1733
- text-align: var(
1734
- --_sf-bmm-v1-tt-an,
1735
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-tt-an)
1736
- );
1737
- letter-spacing: var(
1738
- --_sf-bmm-v1-lr-sg,
1739
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-lr-sg)
1740
- );
1741
- line-height: var(
1742
- --_sf-bmm-v1-le-ht,
1743
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-le-ht)
1744
- );
1745
- text-decoration: var(
1746
- --_sf-bmm-v1-ue,
1747
- prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ue)
1748
- );
1390
+ font-style: var(--_sf-bmm-v1-ft-se-ic,
1391
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se-ic));
1392
+ text-align: var(--_sf-bmm-v1-tt-an,
1393
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-tt-an));
1394
+ letter-spacing: var(--_sf-bmm-v1-lr-sg,
1395
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-lr-sg));
1396
+ line-height: var(--_sf-bmm-v1-le-ht,
1397
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-le-ht));
1398
+ text-decoration: var(--_sf-bmm-v1-ue,
1399
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ue));
1400
+
1749
1401
  &.selected {
1750
1402
  // background-color: var(--_primary-25);
1751
1403
  // color: var(--_primary-400);
@@ -1769,6 +1421,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1769
1421
 
1770
1422
  --_sf-bmm-v1-cr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-cr)};
1771
1423
  }
1424
+
1772
1425
  &:hover {
1773
1426
  // background-color: var(--_primary-25);
1774
1427
  // color: var(--_primary-400);
@@ -1798,6 +1451,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1798
1451
  }
1799
1452
  }
1800
1453
  }
1454
+
1801
1455
  .embla {
1802
1456
  width: 100%;
1803
1457
  height: 100%;
@@ -1832,9 +1486,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1832
1486
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
1833
1487
  height: calc(100% - calc(var(--_ctm-dn-pn-as-aw-se) + 8px));
1834
1488
  }
1489
+
1835
1490
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
1836
1491
  height: calc(100% - calc(var(--_ctm-dn-pn-le-le-ht) + 20px));
1837
1492
  }
1493
+
1838
1494
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
1839
1495
  height: calc(100% - calc(var(--_ctm-dn-pn-ds-dt-se) + 20px));
1840
1496
  }
@@ -1854,20 +1510,25 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1854
1510
  width: 100%;
1855
1511
  justify-content: space-between;
1856
1512
  transform: translate(-50%, -50%);
1513
+
1857
1514
  // padding-left: 20px;
1858
1515
  &[data-control-type="Side"] {
1516
+
1859
1517
  .left-button,
1860
1518
  .right-button {
1861
1519
  background-color: transparent;
1862
1520
  }
1863
1521
  }
1522
+
1864
1523
  &[data-background-shape="Round"] {
1524
+
1865
1525
  .left-button,
1866
1526
  .right-button {
1867
1527
  background-color: #f2f5f5;
1868
1528
  box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
1869
1529
  }
1870
1530
  }
1531
+
1871
1532
  &[data-control-type="Bottom-Overflow"] {
1872
1533
  transform: translateX(-50%);
1873
1534
  width: 100%;
@@ -1876,6 +1537,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1876
1537
  top: unset;
1877
1538
  bottom: 6px;
1878
1539
  }
1540
+
1879
1541
  &[data-control-type="Bottom"] {
1880
1542
  transform: unset;
1881
1543
  position: static;
@@ -1884,6 +1546,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1884
1546
  gap: 12px;
1885
1547
  margin-top: 10px;
1886
1548
  }
1549
+
1887
1550
  .left-button {
1888
1551
  padding: 10px;
1889
1552
  border-radius: 50%;
@@ -1896,6 +1559,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1896
1559
  cursor: pointer;
1897
1560
  outline: none;
1898
1561
  margin-left: 12px;
1562
+
1899
1563
  &:disabled {
1900
1564
  & svg {
1901
1565
  path {
@@ -1904,6 +1568,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1904
1568
  }
1905
1569
  }
1906
1570
  }
1571
+
1907
1572
  .right-button {
1908
1573
  border-radius: 50%;
1909
1574
  border: none;
@@ -1925,11 +1590,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1925
1590
  }
1926
1591
  }
1927
1592
  }
1593
+
1928
1594
  .icon {
1929
1595
  display: flex;
1596
+
1930
1597
  svg {
1931
1598
  width: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1932
1599
  height: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
1600
+
1933
1601
  path {
1934
1602
  stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-dn-pn-as-aw-cr));
1935
1603
  }
@@ -1940,9 +1608,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1940
1608
  &[data-thumbnail-placement="top"] {
1941
1609
  flex-direction: column-reverse;
1942
1610
  }
1611
+
1943
1612
  &[data-thumbnail-placement="bottom"] {
1944
1613
  flex-direction: column;
1945
1614
  }
1615
+
1946
1616
  &[data-thumbnail-placement="left"] {
1947
1617
  flex-direction: row-reverse;
1948
1618
 
@@ -1956,8 +1626,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1956
1626
  }
1957
1627
  }
1958
1628
  }
1629
+
1959
1630
  &[data-thumbnail-placement="right"] {
1960
1631
  flex-direction: row;
1632
+
1961
1633
  .embla__thumbs {
1962
1634
  width: var(--_ctm-lt-tl-se);
1963
1635
  height: 100%;
@@ -1968,16 +1640,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1968
1640
  }
1969
1641
  }
1970
1642
  }
1643
+
1971
1644
  &[data-control-type="Side"] {
1972
1645
  display: flex;
1973
1646
  align-self: center;
1974
1647
  gap: 16px;
1975
1648
  flex-direction: row;
1649
+
1976
1650
  .left-button:disabled,
1977
1651
  .right-button:disabled {
1978
1652
  display: none;
1979
1653
  }
1980
1654
  }
1655
+
1981
1656
  .embla__dots {
1982
1657
  display: flex;
1983
1658
  flex-wrap: wrap;
@@ -1994,6 +1669,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1994
1669
  transform: translateX(-50%);
1995
1670
  width: 75%;
1996
1671
  }
1672
+
1997
1673
  .embla__dot {
1998
1674
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
1999
1675
  -webkit-appearance: none;
@@ -2015,6 +1691,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2015
1691
  justify-content: center;
2016
1692
  border-radius: 50%;
2017
1693
  }
1694
+
2018
1695
  .embla__dot:after {
2019
1696
  // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
2020
1697
  width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
@@ -2024,10 +1701,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2024
1701
  align-items: center;
2025
1702
  content: "";
2026
1703
  }
1704
+
2027
1705
  .embla__dot--selected:after {
2028
1706
  box-shadow: inset 0 0 0 1px var(--text-body);
2029
1707
  background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
2030
1708
  }
1709
+
2031
1710
  &[data-slider-control="Pagination Line"] {
2032
1711
  .embla__dot {
2033
1712
  width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
@@ -2036,6 +1715,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2036
1715
 
2037
1716
  border-radius: 6px;
2038
1717
  }
1718
+
2039
1719
  .embla__dot--selected:after {
2040
1720
  box-shadow: inset 0 0 0 1px var(--text-body);
2041
1721
  border-radius: 6px;
@@ -2066,6 +1746,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2066
1746
 
2067
1747
  overflow: hidden;
2068
1748
  }
1749
+
2069
1750
  .embla__thumbs__container {
2070
1751
  display: flex;
2071
1752
  flex-direction: row;
@@ -2079,6 +1760,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2079
1760
  min-width: var(--_ctm-lt-tl-se);
2080
1761
  max-width: var(--_ctm-lt-tl-se);
2081
1762
  height: var(--_ctm-lt-tl-se);
1763
+
2082
1764
  & img {
2083
1765
  width: 100%;
2084
1766
  height: 100%;
@@ -2088,4 +1770,4 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2088
1770
  }
2089
1771
  }
2090
1772
  }
2091
- }
1773
+ }