@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/option-bar.scss CHANGED
@@ -4,16 +4,9 @@
4
4
 
5
5
  [data-div-type="element"] {
6
6
  &[data-element-type="optionBar"] {
7
- width: var(
8
- --_sf-el-wh-st-mx,
9
- calc(
10
- 1% *
11
- var(
12
- --_ctm-mob-ele-nw-wh-vl,
13
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
14
- )
15
- )
16
- );
7
+ width: var(--_sf-el-wh-st-mx,
8
+ calc(1% * var(--_ctm-mob-ele-nw-wh-vl,
9
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
17
10
 
18
11
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
19
12
 
@@ -27,7 +20,7 @@
27
20
  // )
28
21
  // );
29
22
 
30
- & > .wrapper {
23
+ &>.wrapper {
31
24
  width: 100%;
32
25
  height: 100%;
33
26
  // background-color: var(--_ctm-dn-fl-ad-bd-bd-cr, var(--_tst-dn-fl-ad-bd-bd-cr));
@@ -35,9 +28,11 @@
35
28
  // justify-content: var(--_justify-center);
36
29
  // align-items: var(--_align-center);
37
30
  }
31
+
38
32
  &[data-show-shadow="false"] {
39
33
  --_show-shadow: none;
40
34
  }
35
+
41
36
  .empty__view {
42
37
  width: 100%;
43
38
  display: flex;
@@ -46,186 +41,119 @@
46
41
 
47
42
  .allocation__profile__tabs {
48
43
  width: 100%;
49
- background-color: var(
50
- --_ctm-mob-dn-wt-se-bd-cr,
51
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
52
- );
44
+ background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
45
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
53
46
  // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
54
47
  display: flex;
55
48
  flex-direction: column;
56
- --_sf-gp: var(
57
- --_ctm-mob-lt-im-sg,
58
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
59
- );
49
+ --_sf-gp: var(--_ctm-mob-lt-im-sg,
50
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px)));
60
51
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
61
52
  row-gap: var(--_sf-gp);
62
53
  width: 100%;
63
54
  height: 100%;
64
- border-color: var(
65
- --_ctm-mob-dn-wt-se-br-cr,
66
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
67
- );
68
- border-style: var(
69
- --_ctm-mob-dn-wt-se-br-se,
70
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
71
- );
72
- border-width: var(
73
- --_ctm-mob-dn-wt-se-br-wh,
74
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
75
- );
76
- border-radius: var(
77
- --_ctm-mob-dn-wt-se-br-rs,
78
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
79
- );
80
- box-shadow: var(
81
- --_show-shadow,
82
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
83
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
84
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
85
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
86
- );
55
+ border-color: var(--_ctm-mob-dn-wt-se-br-cr,
56
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
57
+ border-style: var(--_ctm-mob-dn-wt-se-br-se,
58
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
59
+ border-width: var(--_ctm-mob-dn-wt-se-br-wh,
60
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
61
+ border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
62
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
63
+ box-shadow: var(--_show-shadow,
64
+ 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))));
65
+
87
66
  .profile__button {
88
67
  &[data-show-shadow="false"] {
89
68
  --_show-shadow: none;
90
69
  }
70
+
91
71
  &[data-icon-position="left"] {
92
72
  --_sf-fd-bn: row;
93
73
  }
74
+
94
75
  &[data-icon-position="right"] {
95
76
  --_sf-fd-bn: row-reverse;
96
77
  }
78
+
97
79
  &[data-icon-position="center"] {
98
80
  --_sf-fd-bn: row;
99
81
  }
100
82
 
101
83
  &:hover {
102
- --_sf-hr-bd-cr: var(
103
- --_ctm-mob-dn-tb-hr-se-bd-cr,
104
- var(--_ctm-tab-dn-tb-hr-se-bd-cr, var(--_ctm-dn-tb-hr-se-bd-cr))
105
- );
106
- --_sf-hr-br-cr: var(
107
- --_ctm-mob-dn-tb-hr-se-br-cr,
108
- var(--_ctm-tab-dn-tb-hr-se-br-cr, var(--_ctm-dn-tb-hr-se-br-cr))
109
- );
110
- --_sf-hr-br-se: var(
111
- --_ctm-mob-dn-tb-hr-se-br-se,
112
- var(--_ctm-tab-dn-tb-hr-se-br-se, var(--_ctm-dn-tb-hr-se-br-se))
113
- );
114
- --_sf-hr-br-wh: var(
115
- --_ctm-mob-dn-tb-hr-se-br-wh,
116
- var(--_ctm-tab-dn-tb-hr-se-br-wh, var(--_ctm-dn-tb-hr-se-br-wh))
117
- );
118
- --_sf-hr-br-rs: var(
119
- --_ctm-mob-dn-tb-hr-se-br-rs,
120
- var(--_ctm-tab-dn-tb-hr-se-br-rs, var(--_ctm-dn-tb-hr-se-br-rs))
121
- );
122
- --_sf-hr-at: var(
123
- --_ctm-mob-dn-tb-hr-se-at,
124
- var(--_ctm-tab-dn-tb-hr-se-at, var(--_ctm-dn-tb-hr-se-at))
125
- );
126
- --_sf-hr-in-ad-tt-sg: var(
127
- --_ctm-mob-dn-tb-hr-se-in-ad-tt-sg,
128
- var(--_ctm-tab-dn-tb-hr-se-in-ad-tt-sg, var(--_ctm-dn-tb-hr-se-in-ad-tt-sg))
129
- );
84
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-tb-hr-se-bd-cr,
85
+ var(--_ctm-tab-dn-tb-hr-se-bd-cr, var(--_ctm-dn-tb-hr-se-bd-cr)));
86
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-tb-hr-se-br-cr,
87
+ var(--_ctm-tab-dn-tb-hr-se-br-cr, var(--_ctm-dn-tb-hr-se-br-cr)));
88
+ --_sf-hr-br-se: var(--_ctm-mob-dn-tb-hr-se-br-se,
89
+ var(--_ctm-tab-dn-tb-hr-se-br-se, var(--_ctm-dn-tb-hr-se-br-se)));
90
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-tb-hr-se-br-wh,
91
+ var(--_ctm-tab-dn-tb-hr-se-br-wh, var(--_ctm-dn-tb-hr-se-br-wh)));
92
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-tb-hr-se-br-rs,
93
+ var(--_ctm-tab-dn-tb-hr-se-br-rs, var(--_ctm-dn-tb-hr-se-br-rs)));
94
+ --_sf-hr-at: var(--_ctm-mob-dn-tb-hr-se-at,
95
+ var(--_ctm-tab-dn-tb-hr-se-at, var(--_ctm-dn-tb-hr-se-at)));
96
+ --_sf-hr-in-ad-tt-sg: var(--_ctm-mob-dn-tb-hr-se-in-ad-tt-sg,
97
+ var(--_ctm-tab-dn-tb-hr-se-in-ad-tt-sg, var(--_ctm-dn-tb-hr-se-in-ad-tt-sg)));
130
98
 
131
99
  // for shadow
132
- --_sf-hr-sw-ae: var(
133
- --_ctm-mob-dn-tb-hr-se-sw-ae,
134
- var(--_ctm-tab-dn-tb-hr-se-sw-ae, var(--_ctm-dn-tb-hr-se-sw-ae))
135
- );
136
- --_sf-hr-sw-br: var(
137
- --_ctm-mob-dn-tb-hr-se-sw-br,
138
- var(--_ctm-tab-dn-tb-hr-se-sw-br, var(--_ctm-dn-tb-hr-se-sw-br))
139
- );
140
- --_sf-hr-sw-hr: var(
141
- --_ctm-mob-dn-tb-hr-se-sw-hr,
142
- var(--_ctm-tab-dn-tb-hr-se-sw-hr, var(--_ctm-dn-tb-hr-se-sw-hr))
143
- );
144
- --_sf-hr-sw-cr: var(
145
- --_ctm-mob-dn-tb-hr-se-sw-cr,
146
- var(--_ctm-tab-dn-tb-hr-se-sw-cr, var(--_ctm-dn-tb-hr-se-sw-cr))
147
- );
100
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-tb-hr-se-sw-ae,
101
+ var(--_ctm-tab-dn-tb-hr-se-sw-ae, var(--_ctm-dn-tb-hr-se-sw-ae)));
102
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-tb-hr-se-sw-br,
103
+ var(--_ctm-tab-dn-tb-hr-se-sw-br, var(--_ctm-dn-tb-hr-se-sw-br)));
104
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-tb-hr-se-sw-hr,
105
+ var(--_ctm-tab-dn-tb-hr-se-sw-hr, var(--_ctm-dn-tb-hr-se-sw-hr)));
106
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-tb-hr-se-sw-cr,
107
+ var(--_ctm-tab-dn-tb-hr-se-sw-cr, var(--_ctm-dn-tb-hr-se-sw-cr)));
148
108
 
149
109
  // for font
150
110
 
151
- --_sf-hr-cr: var(
152
- --_ctm-mob-dn-tb-hr-se-cr,
153
- var(--_ctm-tab-dn-tb-hr-se-cr, var(--_ctm-dn-tb-hr-se-cr))
154
- );
155
- --_sf-hr-ft-fy: var(
156
- --_ctm-mob-dn-tb-hr-se-ft-fy,
157
- var(--_ctm-tab-dn-tb-hr-se-ft-fy, var(--_ctm-dn-tb-hr-se-ft-fy))
158
- );
159
- --_sf-hr-tt-tm: var(
160
- --_ctm-mob-dn-tb-hr-se-tt-tm,
161
- var(--_ctm-tab-dn-tb-hr-se-tt-tm, var(--_ctm-dn-tb-hr-se-tt-tm))
162
- );
163
- --_sf-hr-wd-wp: var(
164
- --_ctm-mob-dn-tb-hr-se-wd-wp,
165
- var(--_ctm-tab-dn-tb-hr-se-wd-wp, var(--_ctm-dn-tb-hr-se-wd-wp))
166
- );
167
- --_sf-hr-wd-bk: var(
168
- --_ctm-mob-dn-tb-hr-se-wd-bk,
169
- var(--_ctm-tab-dn-tb-hr-se-wd-bk, var(--_ctm-dn-tb-hr-se-wd-bk))
170
- );
171
- --_sf-hr-ft-se: var(
172
- --_ctm-mob-dn-tb-hr-se-ft-se,
173
- var(--_ctm-tab-dn-tb-hr-se-ft-se, var(--_ctm-dn-tb-hr-se-ft-se))
174
- );
175
- --_sf-hr-ft-wt: var(
176
- --_ctm-mob-dn-tb-hr-se-ft-wt,
177
- var(--_ctm-tab-dn-tb-hr-se-ft-wt, var(--_ctm-dn-tb-hr-se-ft-wt))
178
- );
179
- --_sf-hr-ft-se-ic: var(
180
- --_ctm-mob-dn-tb-hr-se-ft-se-ic,
181
- var(--_ctm-tab-dn-tb-hr-se-ft-se-ic, var(--_ctm-dn-tb-hr-se-ft-se-ic))
182
- );
183
- --_sf-hr-tt-an: var(
184
- --_ctm-mob-dn-tb-hr-se-tt-an,
185
- var(--_ctm-tab-dn-tb-hr-se-tt-an, var(--_ctm-dn-tb-hr-se-tt-an))
186
- );
187
- --_sf-hr-lr-sg: var(
188
- --_ctm-mob-dn-tb-hr-se-lr-sg,
189
- var(--_ctm-tab-dn-tb-hr-se-lr-sg, var(--_ctm-dn-tb-hr-se-lr-sg))
190
- );
191
- --_sf-hr-le-ht: var(
192
- --_ctm-mob-dn-tb-hr-se-le-ht,
193
- var(--_ctm-tab-dn-tb-hr-se-le-ht, var(--_ctm-dn-tb-hr-se-le-ht))
194
- );
195
-
196
- --_sf-hr-in-se: var(
197
- --_ctm-mob-dn-tb-hr-se-in-se,
198
- var(--_ctm-tab-dn-tb-hr-se-in-se, var(--_ctm-dn-tb-hr-se-in-se))
199
- );
200
- --_sf-hr-in-se: var(
201
- --_ctm-mob-dn-tb-hr-se-in-se,
202
- var(--_ctm-tab-dn-tb-hr-se-in-se, var(--_ctm-dn-tb-hr-se-in-se))
203
- );
204
- --_sf-hr-in-c1: var(
205
- --_ctm-mob-dn-tb-hr-se-in-c1,
206
- var(--_ctm-tab-dn-tb-hr-se-in-c1, var(--_ctm-dn-tb-hr-se-in-c1))
207
- );
208
- --_sf-hr-ue: var(
209
- --_ctm-mob-dn-tb-hr-se-ue,
210
- var(--_ctm-tab-dn-tb-hr-se-ue, var(--_ctm-dn-tb-hr-se-ue))
211
- );
111
+ --_sf-hr-cr: var(--_ctm-mob-dn-tb-hr-se-cr,
112
+ var(--_ctm-tab-dn-tb-hr-se-cr, var(--_ctm-dn-tb-hr-se-cr)));
113
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-tb-hr-se-ft-fy,
114
+ var(--_ctm-tab-dn-tb-hr-se-ft-fy, var(--_ctm-dn-tb-hr-se-ft-fy)));
115
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-tb-hr-se-tt-tm,
116
+ var(--_ctm-tab-dn-tb-hr-se-tt-tm, var(--_ctm-dn-tb-hr-se-tt-tm)));
117
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-tb-hr-se-wd-wp,
118
+ var(--_ctm-tab-dn-tb-hr-se-wd-wp, var(--_ctm-dn-tb-hr-se-wd-wp)));
119
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-tb-hr-se-wd-bk,
120
+ var(--_ctm-tab-dn-tb-hr-se-wd-bk, var(--_ctm-dn-tb-hr-se-wd-bk)));
121
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-tb-hr-se-ft-se,
122
+ var(--_ctm-tab-dn-tb-hr-se-ft-se, var(--_ctm-dn-tb-hr-se-ft-se)));
123
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-tb-hr-se-ft-wt,
124
+ var(--_ctm-tab-dn-tb-hr-se-ft-wt, var(--_ctm-dn-tb-hr-se-ft-wt)));
125
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-tb-hr-se-ft-se-ic,
126
+ var(--_ctm-tab-dn-tb-hr-se-ft-se-ic, var(--_ctm-dn-tb-hr-se-ft-se-ic)));
127
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-tb-hr-se-tt-an,
128
+ var(--_ctm-tab-dn-tb-hr-se-tt-an, var(--_ctm-dn-tb-hr-se-tt-an)));
129
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-tb-hr-se-lr-sg,
130
+ var(--_ctm-tab-dn-tb-hr-se-lr-sg, var(--_ctm-dn-tb-hr-se-lr-sg)));
131
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-tb-hr-se-le-ht,
132
+ var(--_ctm-tab-dn-tb-hr-se-le-ht, var(--_ctm-dn-tb-hr-se-le-ht)));
133
+
134
+ --_sf-hr-in-se: var(--_ctm-mob-dn-tb-hr-se-in-se,
135
+ var(--_ctm-tab-dn-tb-hr-se-in-se, var(--_ctm-dn-tb-hr-se-in-se)));
136
+ --_sf-hr-in-se: var(--_ctm-mob-dn-tb-hr-se-in-se,
137
+ var(--_ctm-tab-dn-tb-hr-se-in-se, var(--_ctm-dn-tb-hr-se-in-se)));
138
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-tb-hr-se-in-c1,
139
+ var(--_ctm-tab-dn-tb-hr-se-in-c1, var(--_ctm-dn-tb-hr-se-in-c1)));
140
+ --_sf-hr-ue: var(--_ctm-mob-dn-tb-hr-se-ue,
141
+ var(--_ctm-tab-dn-tb-hr-se-ue, var(--_ctm-dn-tb-hr-se-ue)));
212
142
 
213
143
  // for pading and width
214
- --_sf-hr-pg: var(
215
- --_ctm-mob-dn-tb-hr-se-pg,
216
- var(--_ctm-tab-dn-tb-hr-se-pg, var(--_ctm-dn-tb-hr-se-pg))
217
- );
218
- --_sf-hr-wh: var(
219
- --_ctm-mob-dn-tb-hr-se-wh,
220
- var(--_ctm-tab-dn-tb-hr-se-wh, var(--_ctm-dn-tb-hr-se-wh))
221
- );
144
+ --_sf-hr-pg: var(--_ctm-mob-dn-tb-hr-se-pg,
145
+ var(--_ctm-tab-dn-tb-hr-se-pg, var(--_ctm-dn-tb-hr-se-pg)));
146
+ --_sf-hr-wh: var(--_ctm-mob-dn-tb-hr-se-wh,
147
+ var(--_ctm-tab-dn-tb-hr-se-wh, var(--_ctm-dn-tb-hr-se-wh)));
222
148
 
223
149
  &[data-hover-show-shadow="false"] {
224
150
  --_hover-show-shadow: none;
225
151
  }
152
+
226
153
  &[data-hover-show-icon="false"] {
227
154
  --_hover-show-icon: none;
228
155
  }
156
+
229
157
  &[data-hover-show-border="false"] {
230
158
  border: none;
231
159
  }
@@ -243,10 +171,7 @@
243
171
 
244
172
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-rs));
245
173
 
246
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-ae))
247
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-br))
248
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-sd))
249
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-cr));
174
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-cr));
250
175
 
251
176
  &[data-show-border="true"] {
252
177
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-cr));
@@ -264,6 +189,7 @@
264
189
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-tb-dt-se-tt-tm));
265
190
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-wp));
266
191
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-bk));
192
+
267
193
  &.flex__overflow {
268
194
  white-space: normal;
269
195
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -289,130 +215,75 @@
289
215
  }
290
216
 
291
217
  &[data-is-selected="true"] {
292
- --_sf-sd-bd-cr: var(
293
- --_ctm-mob-dn-me-sd-se-bd-cr,
294
- var(--_ctm-tab-dn-tb-sd-se-bd-cr, var(--_ctm-dn-tb-sd-se-bd-cr))
295
- );
296
- --_sf-sd-br-cr: var(
297
- --_ctm-mob-dn-tb-sd-se-br-cr,
298
- var(--_ctm-tab-dn-tb-sd-se-br-cr, var(--_ctm-dn-tb-sd-se-br-cr))
299
- );
300
- --_sf-sd-br-se: var(
301
- --_ctm-mob-dn-tb-sd-se-br-se,
302
- var(--_ctm-tab-dn-tb-sd-se-br-se, var(--_ctm-dn-tb-sd-se-br-se))
303
- );
304
- --_sf-sd-br-wh: var(
305
- --_ctm-mob-dn-tb-sd-se-br-wh,
306
- var(--_ctm-tab-dn-tb-sd-se-br-wh, var(--_ctm-dn-tb-sd-se-br-wh))
307
- );
308
- --_sf-sd-br-rs: var(
309
- --_ctm-mob-dn-tb-sd-se-br-rs,
310
- var(--_ctm-tab-dn-tb-sd-se-br-rs, var(--_ctm-dn-tb-sd-se-br-rs))
311
- );
312
- --_sf-sd-at: var(
313
- --_ctm-mob-dn-tb-sd-se-at,
314
- var(--_ctm-tab-dn-tb-sd-se-at, var(--_ctm-dn-tb-sd-se-at))
315
- );
316
- --_sf-sd-in-ad-tt-sg: var(
317
- --_ctm-mob-dn-tb-sd-se-in-ad-tt-sg,
318
- var(--_ctm-tab-dn-tb-sd-se-in-ad-tt-sg, var(--_ctm-dn-tb-sd-se-in-ad-tt-sg))
319
- );
218
+ --_sf-sd-bd-cr: var(--_ctm-mob-dn-me-sd-se-bd-cr,
219
+ var(--_ctm-tab-dn-tb-sd-se-bd-cr, var(--_ctm-dn-tb-sd-se-bd-cr)));
220
+ --_sf-sd-br-cr: var(--_ctm-mob-dn-tb-sd-se-br-cr,
221
+ var(--_ctm-tab-dn-tb-sd-se-br-cr, var(--_ctm-dn-tb-sd-se-br-cr)));
222
+ --_sf-sd-br-se: var(--_ctm-mob-dn-tb-sd-se-br-se,
223
+ var(--_ctm-tab-dn-tb-sd-se-br-se, var(--_ctm-dn-tb-sd-se-br-se)));
224
+ --_sf-sd-br-wh: var(--_ctm-mob-dn-tb-sd-se-br-wh,
225
+ var(--_ctm-tab-dn-tb-sd-se-br-wh, var(--_ctm-dn-tb-sd-se-br-wh)));
226
+ --_sf-sd-br-rs: var(--_ctm-mob-dn-tb-sd-se-br-rs,
227
+ var(--_ctm-tab-dn-tb-sd-se-br-rs, var(--_ctm-dn-tb-sd-se-br-rs)));
228
+ --_sf-sd-at: var(--_ctm-mob-dn-tb-sd-se-at,
229
+ var(--_ctm-tab-dn-tb-sd-se-at, var(--_ctm-dn-tb-sd-se-at)));
230
+ --_sf-sd-in-ad-tt-sg: var(--_ctm-mob-dn-tb-sd-se-in-ad-tt-sg,
231
+ var(--_ctm-tab-dn-tb-sd-se-in-ad-tt-sg, var(--_ctm-dn-tb-sd-se-in-ad-tt-sg)));
320
232
 
321
233
  // for shadow
322
- --_sf-sd-sw-ae: var(
323
- --_ctm-mob-dn-tb-sd-se-sw-ae,
324
- var(--_ctm-tab-dn-tb-sd-se-sw-ae, var(--_ctm-dn-tb-sd-se-sw-ae))
325
- );
326
- --_sf-sd-sw-br: var(
327
- --_ctm-mob-dn-tb-sd-se-sw-br,
328
- var(--_ctm-tab-dn-tb-sd-se-sw-br, var(--_ctm-dn-tb-sd-se-sw-br))
329
- );
330
- --_sf-sd-sw-hr: var(
331
- --_ctm-mob-dn-tb-sd-se-sw-hr,
332
- var(--_ctm-tab-dn-tb-sd-se-sw-hr, var(--_ctm-dn-tb-sd-se-sw-hr))
333
- );
334
- --_sf-sd-sw-cr: var(
335
- --_ctm-mob-dn-tb-sd-se-sw-cr,
336
- var(--_ctm-tab-dn-tb-sd-se-sw-cr, var(--_ctm-dn-tb-sd-se-sw-cr))
337
- );
234
+ --_sf-sd-sw-ae: var(--_ctm-mob-dn-tb-sd-se-sw-ae,
235
+ var(--_ctm-tab-dn-tb-sd-se-sw-ae, var(--_ctm-dn-tb-sd-se-sw-ae)));
236
+ --_sf-sd-sw-br: var(--_ctm-mob-dn-tb-sd-se-sw-br,
237
+ var(--_ctm-tab-dn-tb-sd-se-sw-br, var(--_ctm-dn-tb-sd-se-sw-br)));
238
+ --_sf-sd-sw-hr: var(--_ctm-mob-dn-tb-sd-se-sw-hr,
239
+ var(--_ctm-tab-dn-tb-sd-se-sw-hr, var(--_ctm-dn-tb-sd-se-sw-hr)));
240
+ --_sf-sd-sw-cr: var(--_ctm-mob-dn-tb-sd-se-sw-cr,
241
+ var(--_ctm-tab-dn-tb-sd-se-sw-cr, var(--_ctm-dn-tb-sd-se-sw-cr)));
338
242
 
339
243
  // for font
340
244
 
341
- --_sf-sd-cr: var(
342
- --_ctm-mob-dn-tb-sd-se-cr,
343
- var(--_ctm-tab-dn-tb-sd-se-cr, var(--_ctm-dn-tb-sd-se-cr))
344
- );
345
- --_sf-sd-ft-fy: var(
346
- --_ctm-mob-dn-tb-sd-se-ft-fy,
347
- var(--_ctm-tab-dn-tb-sd-se-ft-fy, var(--_ctm-dn-tb-sd-se-ft-fy))
348
- );
349
- --_sf-sd-tt-tm: var(
350
- --_ctm-mob-dn-tb-sd-se-tt-tm,
351
- var(--_ctm-tab-dn-tb-sd-se-tt-tm, var(--_ctm-dn-tb-sd-se-tt-tm))
352
- );
353
- --_sf-sd-wd-wp: var(
354
- --_ctm-mob-dn-tb-sd-se-wd-wp,
355
- var(--_ctm-tab-dn-tb-sd-se-wd-wp, var(--_ctm-dn-tb-sd-se-wd-wp))
356
- );
357
- --_sf-sd-wd-bk: var(
358
- --_ctm-mob-dn-tb-sd-se-wd-bk,
359
- var(--_ctm-tab-dn-tb-sd-se-wd-bk, var(--_ctm-dn-tb-sd-se-wd-bk))
360
- );
361
- --_sf-sd-ft-se: var(
362
- --_ctm-mob-dn-tb-sd-se-ft-se,
363
- var(--_ctm-tab-dn-tb-sd-se-ft-se, var(--_ctm-dn-tb-sd-se-ft-se))
364
- );
365
- --_sf-sd-ft-wt: var(
366
- --_ctm-mob-dn-tb-sd-se-ft-wt,
367
- var(--_ctm-tab-dn-tb-sd-se-ft-wt, var(--_ctm-dn-tb-sd-se-ft-wt))
368
- );
369
- --_sf-sd-ft-se-ic: var(
370
- --_ctm-mob-dn-tb-sd-se-ft-se-ic,
371
- var(--_ctm-tab-dn-tb-sd-se-ft-se-ic, var(--_ctm-dn-tb-sd-se-ft-se-ic))
372
- );
373
- --_sf-sd-tt-an: var(
374
- --_ctm-mob-dn-tb-sd-se-tt-an,
375
- var(--_ctm-tab-dn-tb-sd-se-tt-an, var(--_ctm-dn-tb-sd-se-tt-an))
376
- );
377
- --_sf-sd-lr-sg: var(
378
- --_ctm-mob-dn-tb-sd-se-lr-sg,
379
- var(--_ctm-tab-dn-tb-sd-se-lr-sg, var(--_ctm-dn-tb-sd-se-lr-sg))
380
- );
381
- --_sf-sd-le-ht: var(
382
- --_ctm-mob-dn-tb-sd-se-le-ht,
383
- var(--_ctm-tab-dn-tb-sd-se-le-ht, var(--_ctm-dn-tb-sd-se-le-ht))
384
- );
385
-
386
- --_sf-sd-in-se: var(
387
- --_ctm-mob-dn-tb-sd-se-in-se,
388
- var(--_ctm-tab-dn-tb-sd-se-in-se, var(--_ctm-dn-tb-sd-se-in-se))
389
- );
390
- --_sf-sd-in-se: var(
391
- --_ctm-mob-dn-tb-sd-se-in-se,
392
- var(--_ctm-tab-dn-tb-sd-se-in-se, var(--_ctm-dn-tb-sd-se-in-se))
393
- );
394
- --_sf-sd-in-c1: var(
395
- --_ctm-mob-dn-tb-sd-se-in-c1,
396
- var(--_ctm-tab-dn-tb-sd-se-in-c1, var(--_ctm-dn-tb-sd-se-in-c1))
397
- );
398
- --_sf-sd-ue: var(
399
- --_ctm-mob-dn-tb-hr-ue,
400
- var(--_ctm-tab-dn-tb-hr-ue, var(--_ctm-dn-tb-hr-ue))
401
- );
245
+ --_sf-sd-cr: var(--_ctm-mob-dn-tb-sd-se-cr,
246
+ var(--_ctm-tab-dn-tb-sd-se-cr, var(--_ctm-dn-tb-sd-se-cr)));
247
+ --_sf-sd-ft-fy: var(--_ctm-mob-dn-tb-sd-se-ft-fy,
248
+ var(--_ctm-tab-dn-tb-sd-se-ft-fy, var(--_ctm-dn-tb-sd-se-ft-fy)));
249
+ --_sf-sd-tt-tm: var(--_ctm-mob-dn-tb-sd-se-tt-tm,
250
+ var(--_ctm-tab-dn-tb-sd-se-tt-tm, var(--_ctm-dn-tb-sd-se-tt-tm)));
251
+ --_sf-sd-wd-wp: var(--_ctm-mob-dn-tb-sd-se-wd-wp,
252
+ var(--_ctm-tab-dn-tb-sd-se-wd-wp, var(--_ctm-dn-tb-sd-se-wd-wp)));
253
+ --_sf-sd-wd-bk: var(--_ctm-mob-dn-tb-sd-se-wd-bk,
254
+ var(--_ctm-tab-dn-tb-sd-se-wd-bk, var(--_ctm-dn-tb-sd-se-wd-bk)));
255
+ --_sf-sd-ft-se: var(--_ctm-mob-dn-tb-sd-se-ft-se,
256
+ var(--_ctm-tab-dn-tb-sd-se-ft-se, var(--_ctm-dn-tb-sd-se-ft-se)));
257
+ --_sf-sd-ft-wt: var(--_ctm-mob-dn-tb-sd-se-ft-wt,
258
+ var(--_ctm-tab-dn-tb-sd-se-ft-wt, var(--_ctm-dn-tb-sd-se-ft-wt)));
259
+ --_sf-sd-ft-se-ic: var(--_ctm-mob-dn-tb-sd-se-ft-se-ic,
260
+ var(--_ctm-tab-dn-tb-sd-se-ft-se-ic, var(--_ctm-dn-tb-sd-se-ft-se-ic)));
261
+ --_sf-sd-tt-an: var(--_ctm-mob-dn-tb-sd-se-tt-an,
262
+ var(--_ctm-tab-dn-tb-sd-se-tt-an, var(--_ctm-dn-tb-sd-se-tt-an)));
263
+ --_sf-sd-lr-sg: var(--_ctm-mob-dn-tb-sd-se-lr-sg,
264
+ var(--_ctm-tab-dn-tb-sd-se-lr-sg, var(--_ctm-dn-tb-sd-se-lr-sg)));
265
+ --_sf-sd-le-ht: var(--_ctm-mob-dn-tb-sd-se-le-ht,
266
+ var(--_ctm-tab-dn-tb-sd-se-le-ht, var(--_ctm-dn-tb-sd-se-le-ht)));
267
+
268
+ --_sf-sd-in-se: var(--_ctm-mob-dn-tb-sd-se-in-se,
269
+ var(--_ctm-tab-dn-tb-sd-se-in-se, var(--_ctm-dn-tb-sd-se-in-se)));
270
+ --_sf-sd-in-se: var(--_ctm-mob-dn-tb-sd-se-in-se,
271
+ var(--_ctm-tab-dn-tb-sd-se-in-se, var(--_ctm-dn-tb-sd-se-in-se)));
272
+ --_sf-sd-in-c1: var(--_ctm-mob-dn-tb-sd-se-in-c1,
273
+ var(--_ctm-tab-dn-tb-sd-se-in-c1, var(--_ctm-dn-tb-sd-se-in-c1)));
274
+ --_sf-sd-ue: var(--_ctm-mob-dn-tb-hr-ue,
275
+ var(--_ctm-tab-dn-tb-hr-ue, var(--_ctm-dn-tb-hr-ue)));
402
276
 
403
277
  // for pading and width
404
- --_sf-sd-pg: var(
405
- --_ctm-mob-dn-tb-sd-se-pg,
406
- var(--_ctm-tab-dn-tb-sd-se-pg, var(--_ctm-dn-tb-sd-se-pg))
407
- );
408
- --_sf-sd-wh: var(
409
- --_ctm-mob-dn-tb-sd-se-wh,
410
- var(--_ctm-tab-dn-tb-sd-se-wh, var(--_ctm-dn-tb-sd-se-wh))
411
- );
278
+ --_sf-sd-pg: var(--_ctm-mob-dn-tb-sd-se-pg,
279
+ var(--_ctm-tab-dn-tb-sd-se-pg, var(--_ctm-dn-tb-sd-se-pg)));
280
+ --_sf-sd-wh: var(--_ctm-mob-dn-tb-sd-se-wh,
281
+ var(--_ctm-tab-dn-tb-sd-se-wh, var(--_ctm-dn-tb-sd-se-wh)));
412
282
 
413
283
  &[data-hover-show-shadow="false"] {
414
284
  --_hover-show-shadow: none;
415
285
  }
286
+
416
287
  &[data-hover-show-icon="false"] {
417
288
  --_hover-show-icon: none;
418
289
  }
@@ -429,10 +300,7 @@
429
300
 
430
301
  border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-rs));
431
302
 
432
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-ae))
433
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-br))
434
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-sd))
435
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-cr));
303
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-cr));
436
304
 
437
305
  &[data-show-border="true"] {
438
306
  border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-cr));
@@ -450,6 +318,7 @@
450
318
  text-transform: var(--_sf-sd-tt-tm, prepareMediaVariable(--_ctm-dn-tb-dt-se-tt-tm));
451
319
  word-wrap: var(--_sf-sd-wd-wp, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-wp));
452
320
  word-break: var(--_sf-sd-wd-bk, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-bk));
321
+
453
322
  &.flex__overflow {
454
323
  white-space: normal;
455
324
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -475,12 +344,15 @@
475
344
  }
476
345
  }
477
346
  }
347
+
478
348
  .embla {
479
349
  height: auto;
350
+
480
351
  .embla__viewport {
481
352
  .embla__container {
482
353
  display: flex;
483
354
  gap: prepareMediaVariable(--_ctm-dn-tb-dt-se-im-gp);
355
+
484
356
  .embla__slide {
485
357
  width: unset;
486
358
  }
@@ -488,6 +360,7 @@
488
360
  }
489
361
  }
490
362
  }
363
+
491
364
  .embla {
492
365
  width: 100%;
493
366
  height: 100%;
@@ -512,13 +385,8 @@
512
385
  display: grid;
513
386
  grid-template-rows: 100%;
514
387
 
515
- grid-template-columns: repeat(
516
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
517
- calc(
518
- 100% /
519
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
520
- )
521
- );
388
+ grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
389
+ calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))));
522
390
 
523
391
  grid-auto-flow: column;
524
392
  gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
@@ -532,32 +400,25 @@
532
400
  }
533
401
 
534
402
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
535
- height: calc(
536
- 100% - calc(
537
- var(
538
- --_ctm-mob-dn-pn-ds-dt-se,
539
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
540
- ) +
541
- 20px
542
- )
543
- );
403
+ height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
404
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
544
405
  }
545
406
 
546
407
  .embla__slide {
547
408
  width: 100%;
548
409
  height: 100%;
549
- & > img {
410
+
411
+ &>img {
550
412
  width: 100%;
551
413
  height: 100%;
552
414
  }
553
415
  }
554
416
  }
555
417
  }
418
+
556
419
  &:not([data-display-style="Column"]) {
557
420
  .embla__container {
558
- grid-auto-columns: calc(
559
- 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
560
- );
421
+ grid-auto-columns: calc(100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))));
561
422
  }
562
423
  }
563
424
 
@@ -579,6 +440,7 @@
579
440
  top: unset;
580
441
  bottom: 6px;
581
442
  }
443
+
582
444
  &[data-control-type="Bottom"] {
583
445
  transform: unset;
584
446
  position: static;
@@ -588,31 +450,32 @@
588
450
  margin-top: 10px;
589
451
  }
590
452
  }
453
+
591
454
  &[data-control-type="Side"] {
455
+
592
456
  .left-button,
593
457
  .right-button {
594
458
  background-color: transparent;
595
459
  }
596
460
  }
461
+
597
462
  &[data-background-shape="Round"] {
463
+
598
464
  .left-button,
599
465
  .right-button {
600
466
  background-color: #f2f5f5;
601
467
  box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
602
468
  }
603
469
  }
470
+
604
471
  .left-button {
605
472
  padding: 10px;
606
473
  border-radius: 50%;
607
474
  border: none;
608
- width: var(
609
- --_ctm-mob-dn-pn-as-aw-se,
610
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
611
- );
612
- height: var(
613
- --_ctm-mob-dn-pn-as-aw-se,
614
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
615
- );
475
+ width: var(--_ctm-mob-dn-pn-as-aw-se,
476
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
477
+ height: var(--_ctm-mob-dn-pn-as-aw-se,
478
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
616
479
 
617
480
  display: flex;
618
481
  align-items: center;
@@ -620,6 +483,7 @@
620
483
  cursor: pointer;
621
484
  outline: none;
622
485
  margin-left: 12px;
486
+
623
487
  &:disabled {
624
488
  & svg {
625
489
  path {
@@ -628,17 +492,14 @@
628
492
  }
629
493
  }
630
494
  }
495
+
631
496
  .right-button {
632
497
  border-radius: 50%;
633
498
  border: none;
634
- width: var(
635
- --_ctm-mob-dn-pn-as-aw-se,
636
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
637
- );
638
- height: var(
639
- --_ctm-mob-dn-pn-as-aw-se,
640
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
641
- );
499
+ width: var(--_ctm-mob-dn-pn-as-aw-se,
500
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
501
+ height: var(--_ctm-mob-dn-pn-as-aw-se,
502
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
642
503
 
643
504
  display: flex;
644
505
  align-items: center;
@@ -656,24 +517,15 @@
656
517
  }
657
518
  }
658
519
  }
520
+
659
521
  .icon {
660
522
  display: flex;
661
523
 
662
524
  svg {
663
- width: calc(
664
- var(
665
- --_ctm-mob-dn-pn-as-aw-se,
666
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
667
- ) *
668
- 0.5
669
- );
670
- height: calc(
671
- var(
672
- --_ctm-mob-dn-pn-as-aw-se,
673
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
674
- ) *
675
- 0.5
676
- );
525
+ width: calc(var(--_ctm-mob-dn-pn-as-aw-se,
526
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
527
+ height: calc(var(--_ctm-mob-dn-pn-as-aw-se,
528
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
677
529
 
678
530
  path {
679
531
  stroke: #514949;
@@ -686,12 +538,14 @@
686
538
  width: calc(100% - 85px);
687
539
  margin-inline: auto;
688
540
  }
541
+
689
542
  .left-button {
690
543
  position: absolute;
691
544
  left: 0;
692
545
  top: 50%;
693
546
  transform: translateY(-50%);
694
547
  }
548
+
695
549
  .right-button {
696
550
  position: absolute;
697
551
 
@@ -704,9 +558,11 @@
704
558
  &[data-thumbnail-placement="top"] {
705
559
  flex-direction: column-reverse;
706
560
  }
561
+
707
562
  &[data-thumbnail-placement="bottom"] {
708
563
  flex-direction: column;
709
564
  }
565
+
710
566
  &[data-thumbnail-placement="left"] {
711
567
  flex-direction: row-reverse;
712
568
 
@@ -720,8 +576,10 @@
720
576
  }
721
577
  }
722
578
  }
579
+
723
580
  &[data-thumbnail-placement="right"] {
724
581
  flex-direction: row;
582
+
725
583
  .embla__thumbs {
726
584
  width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
727
585
 
@@ -733,6 +591,7 @@
733
591
  }
734
592
  }
735
593
  }
594
+
736
595
  .embla__dots {
737
596
  display: flex;
738
597
  flex-wrap: wrap;
@@ -748,14 +607,13 @@
748
607
  transform: translateX(-50%);
749
608
  width: 75%;
750
609
  }
610
+
751
611
  .embla__dot {
752
612
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
753
613
  -webkit-appearance: none;
754
614
  appearance: none;
755
- background-color: var(
756
- --_ctm-mob-dn-pn-ds-or-dt-cr,
757
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
758
- );
615
+ background-color: var(--_ctm-mob-dn-pn-ds-or-dt-cr,
616
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr)));
759
617
 
760
618
  touch-action: manipulation;
761
619
  display: inline-flex;
@@ -766,75 +624,56 @@
766
624
  margin: 0;
767
625
  // width: 0.6rem;
768
626
  // height: 0.6rem;
769
- width: var(
770
- --_ctm-mob-dn-pn-ds-dt-se,
771
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
772
- );
773
- height: var(
774
- --_ctm-mob-dn-pn-ds-dt-se,
775
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
776
- );
627
+ width: var(--_ctm-mob-dn-pn-ds-dt-se,
628
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
629
+ height: var(--_ctm-mob-dn-pn-ds-dt-se,
630
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
777
631
 
778
632
  display: flex;
779
633
  align-items: center;
780
634
  justify-content: center;
781
635
  border-radius: 50%;
782
636
  }
637
+
783
638
  .embla__dot:after {
784
639
  // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
785
- width: var(
786
- --_ctm-mob-dn-pn-ds-dt-se,
787
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
788
- );
789
- height: var(
790
- --_ctm-mob-dn-pn-ds-dt-se,
791
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
792
- );
640
+ width: var(--_ctm-mob-dn-pn-ds-dt-se,
641
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
642
+ height: var(--_ctm-mob-dn-pn-ds-dt-se,
643
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se)));
793
644
 
794
645
  border-radius: 50%;
795
646
  display: flex;
796
647
  align-items: center;
797
648
  content: "";
798
649
  }
650
+
799
651
  .embla__dot--selected:after {
800
652
  box-shadow: inset 0 0 0 1px var(--text-body);
801
- background-color: var(
802
- --_ctm-mob-dn-pn-ds-ct-dt-cr,
803
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
804
- );
653
+ background-color: var(--_ctm-mob-dn-pn-ds-ct-dt-cr,
654
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr)));
805
655
  }
656
+
806
657
  &[data-slider-control="Pagination Line"] {
807
658
  .embla__dot {
808
- width: var(
809
- --_ctm-mob-dn-pn-le-le-wh,
810
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
811
- );
812
- height: var(
813
- --_ctm-mob-dn-pn-le-le-ht,
814
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
815
- );
816
- background-color: var(
817
- --_ctm-mob-dn-pn-le-or-le-cr,
818
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
819
- );
659
+ width: var(--_ctm-mob-dn-pn-le-le-wh,
660
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
661
+ height: var(--_ctm-mob-dn-pn-le-le-ht,
662
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
663
+ background-color: var(--_ctm-mob-dn-pn-le-or-le-cr,
664
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr)));
820
665
  border-radius: 6px;
821
666
  }
822
667
 
823
668
  .embla__dot--selected:after {
824
669
  box-shadow: inset 0 0 0 1px var(--text-body);
825
670
  border-radius: 6px;
826
- width: var(
827
- --_ctm-mob-dn-pn-le-le-wh,
828
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
829
- );
830
- height: var(
831
- --_ctm-mob-dn-pn-le-le-ht,
832
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
833
- );
834
- background-color: var(
835
- --_ctm-mob-dn-pn-le-ct-le-cr,
836
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
837
- );
671
+ width: var(--_ctm-mob-dn-pn-le-le-wh,
672
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh)));
673
+ height: var(--_ctm-mob-dn-pn-le-le-ht,
674
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht)));
675
+ background-color: var(--_ctm-mob-dn-pn-le-ct-le-cr,
676
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr)));
838
677
  }
839
678
  }
840
679
  }
@@ -859,6 +698,7 @@
859
698
 
860
699
  overflow: hidden;
861
700
  }
701
+
862
702
  .embla__thumbs__container {
863
703
  display: flex;
864
704
  flex-direction: row;
@@ -883,4 +723,4 @@
883
723
  }
884
724
  }
885
725
  }
886
- }
726
+ }