@sc-360-v2/storefront-cms-library 0.5.72 → 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 (124) 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/bundleDetails.scss +3774 -5072
  18. package/dist/button.scss +79 -103
  19. package/dist/buy-for-tab-container.scss +77 -106
  20. package/dist/buyForHeaders.scss +1722 -2976
  21. package/dist/cart-details.scss +481 -1012
  22. package/dist/cart-summary.scss +557 -1149
  23. package/dist/cart-wrapper.scss +37 -79
  24. package/dist/cart.scss +117 -225
  25. package/dist/cartAttributes.scss +416 -735
  26. package/dist/category-groups-element.scss +127 -108
  27. package/dist/category-groups-product-grid.scss +120 -147
  28. package/dist/category-groups-product-image.scss +1162 -1457
  29. package/dist/category-groups-product-options.scss +613 -680
  30. package/dist/category-groups-product-price.scss +1966 -3244
  31. package/dist/category-groups-quota-details.scss +210 -464
  32. package/dist/category.scss +26 -50
  33. package/dist/checkout.scss +24 -16
  34. package/dist/confirm-modal.scss +22 -2
  35. package/dist/container.scss +32 -54
  36. package/dist/countdown.scss +255 -443
  37. package/dist/coupon.scss +351 -710
  38. package/dist/default-dropdown.scss +12 -1
  39. package/dist/embroider-template-1-v2.scss +123 -172
  40. package/dist/embroider-template-1.scss +68 -104
  41. package/dist/embroidery.scss +30 -31
  42. package/dist/employee-bulk-order.scss +418 -142
  43. package/dist/faq.scss +228 -408
  44. package/dist/filter-results.scss +125 -265
  45. package/dist/filters.scss +900 -1797
  46. package/dist/gallery-slider-temp.scss +432 -750
  47. package/dist/global-styles.scss +218 -198
  48. package/dist/grid.scss +25 -33
  49. package/dist/hotspot.scss +68 -115
  50. package/dist/image-temp.scss +21 -20
  51. package/dist/item-stock.scss +9 -16
  52. package/dist/kitDetails.scss +2719 -4299
  53. package/dist/kits.scss +24 -19
  54. package/dist/language-selector.scss +211 -361
  55. package/dist/last-x-orders.scss +95 -174
  56. package/dist/layouter-item.scss +75 -103
  57. package/dist/layouter-pro-item.scss +89 -95
  58. package/dist/layouter-pro.scss +87 -92
  59. package/dist/layouter.scss +383 -445
  60. package/dist/light-box-v2.scss +89 -104
  61. package/dist/login.scss +287 -566
  62. package/dist/map.scss +221 -368
  63. package/dist/marchandiserSets.scss +95 -104
  64. package/dist/mega-menu-container.scss +96 -109
  65. package/dist/mega-menu.scss +624 -731
  66. package/dist/menu-item.scss +2 -2
  67. package/dist/menu-v2.scss +507 -619
  68. package/dist/multi-select-dropdown.scss +27 -3
  69. package/dist/my-templates.scss +38 -9
  70. package/dist/option-bar.scss +215 -375
  71. package/dist/order-status.scss +646 -1117
  72. package/dist/overflow-module.scss +6 -7
  73. package/dist/past-orders.scss +118 -149
  74. package/dist/payment-methods.scss +46 -30
  75. package/dist/pickup-locations.scss +558 -1118
  76. package/dist/position-module.scss +20 -17
  77. package/dist/prefix-list.scss +21 -10
  78. package/dist/product-actions.scss +1750 -2055
  79. package/dist/product-basic-elements.scss +108 -169
  80. package/dist/product-highlights.scss +107 -152
  81. package/dist/product-image-bundles.scss +337 -642
  82. package/dist/product-inventory.scss +673 -1357
  83. package/dist/product-labels.scss +84 -105
  84. package/dist/product-options.scss +1117 -1274
  85. package/dist/product-price.scss +1283 -2561
  86. package/dist/product-promotions.scss +1388 -2830
  87. package/dist/product-sizechart.scss +516 -905
  88. package/dist/product.scss +28 -61
  89. package/dist/productDetails.scss +19 -39
  90. package/dist/profile.scss +207 -447
  91. package/dist/quantity-selector.scss +837 -1074
  92. package/dist/quick-inventory-check.scss +95 -174
  93. package/dist/quick-links.scss +55 -133
  94. package/dist/quick-order-pad.scss +218 -271
  95. package/dist/quota-details.scss +152 -282
  96. package/dist/quotes.scss +89 -122
  97. package/dist/repeater-embla-controls.scss +35 -15
  98. package/dist/repeater-grid-toggle.scss +156 -166
  99. package/dist/repeater-item.scss +41 -64
  100. package/dist/repeater.scss +671 -814
  101. package/dist/request-for-quotes.scss +66 -16
  102. package/dist/responsive-behaviour.scss +3 -1
  103. package/dist/rfqs.scss +118 -181
  104. package/dist/scroll.scss +93 -172
  105. package/dist/search.scss +179 -326
  106. package/dist/section.scss +27 -51
  107. package/dist/shipping-payments.scss +198 -58
  108. package/dist/simple-list.scss +74 -164
  109. package/dist/social.scss +80 -145
  110. package/dist/sort.scss +11 -19
  111. package/dist/stack.scss +23 -34
  112. package/dist/static-global.scss +44 -26
  113. package/dist/stockStatus.scss +11 -19
  114. package/dist/store-locations.scss +577 -1105
  115. package/dist/tab-container.scss +81 -108
  116. package/dist/table-common.scss +217 -408
  117. package/dist/table.scss +271 -502
  118. package/dist/text-temp.scss +8 -7
  119. package/dist/theme-classes.scss +17 -13
  120. package/dist/uom-selector.scss +489 -949
  121. package/dist/user-elements.scss +529 -837
  122. package/dist/variant-picker.scss +1281 -2555
  123. package/dist/volume-pricing.scss +541 -1037
  124. package/package.json +1 -1
@@ -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
+ }