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

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 (141) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2143 -1661
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/builderLite.js +1 -1
  16. package/dist/bulk-variant-picker.scss +2027 -1128
  17. package/dist/bundle.scss +1477 -841
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +103 -79
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1012 -481
  23. package/dist/cart-summary.scss +1149 -557
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +735 -416
  27. package/dist/category-groups-element.scss +108 -127
  28. package/dist/category-groups-product-grid.scss +147 -120
  29. package/dist/category-groups-product-image.scss +1457 -1162
  30. package/dist/category-groups-product-options.scss +680 -613
  31. package/dist/category-groups-product-price.scss +3244 -1966
  32. package/dist/category-groups-quota-details.scss +464 -210
  33. package/dist/category.scss +50 -26
  34. package/dist/checkout.scss +16 -24
  35. package/dist/confirm-modal.scss +2 -22
  36. package/dist/container.scss +54 -32
  37. package/dist/countdown.scss +443 -255
  38. package/dist/coupon.scss +710 -351
  39. package/dist/default-dropdown.scss +1 -12
  40. package/dist/embroider-template-1-v2.scss +172 -123
  41. package/dist/embroider-template-1.scss +104 -68
  42. package/dist/embroidery.scss +31 -30
  43. package/dist/employee-bulk-order.scss +142 -418
  44. package/dist/faq.scss +408 -228
  45. package/dist/filter-results.scss +265 -125
  46. package/dist/filters.scss +1797 -900
  47. package/dist/gallery-slider-temp.scss +750 -432
  48. package/dist/global-styles.scss +7 -23
  49. package/dist/grid.scss +33 -25
  50. package/dist/hotspot.scss +115 -68
  51. package/dist/icons-builder.js +1 -1
  52. package/dist/icons-website.js +1 -1
  53. package/dist/icons.js +1 -1
  54. package/dist/image-temp.scss +20 -21
  55. package/dist/index.js +1 -1
  56. package/dist/item-stock.scss +16 -9
  57. package/dist/kitDetails.scss +4301 -2721
  58. package/dist/kits.scss +19 -24
  59. package/dist/language-selector.scss +361 -211
  60. package/dist/last-x-orders.scss +174 -95
  61. package/dist/layouter-item.scss +103 -75
  62. package/dist/layouter-pro-item.scss +95 -89
  63. package/dist/layouter-pro.scss +92 -87
  64. package/dist/layouter.scss +445 -383
  65. package/dist/light-box-v2.scss +104 -89
  66. package/dist/login.scss +566 -287
  67. package/dist/map.scss +368 -221
  68. package/dist/marchandiserSets.scss +104 -95
  69. package/dist/mega-menu-container.scss +109 -96
  70. package/dist/mega-menu.scss +731 -624
  71. package/dist/menu-item.scss +2 -2
  72. package/dist/menu-v2.scss +619 -507
  73. package/dist/multi-select-dropdown.scss +3 -27
  74. package/dist/my-templates.scss +9 -38
  75. package/dist/option-bar.scss +375 -215
  76. package/dist/option-families.scss +252 -0
  77. package/dist/order-status.scss +1117 -646
  78. package/dist/overflow-module.scss +7 -6
  79. package/dist/past-orders.scss +149 -118
  80. package/dist/payment-methods.scss +30 -46
  81. package/dist/pickup-locations.scss +1118 -558
  82. package/dist/position-module.scss +17 -20
  83. package/dist/prefix-list.scss +10 -21
  84. package/dist/product-actions.scss +2425 -1625
  85. package/dist/product-basic-elements.scss +169 -108
  86. package/dist/product-highlights.scss +152 -107
  87. package/dist/product-image-bundles.scss +642 -337
  88. package/dist/product-inventory.scss +1357 -673
  89. package/dist/product-labels.scss +105 -84
  90. package/dist/product-options.scss +1274 -1117
  91. package/dist/product-price.scss +2561 -1283
  92. package/dist/product-promotions.scss +2830 -1388
  93. package/dist/product-sizechart.scss +905 -516
  94. package/dist/product.scss +61 -28
  95. package/dist/productDetails.scss +39 -19
  96. package/dist/profile.scss +447 -207
  97. package/dist/quantity-selector.scss +550 -313
  98. package/dist/quick-inventory-check.scss +174 -95
  99. package/dist/quick-links.scss +133 -55
  100. package/dist/quick-order-pad.scss +271 -218
  101. package/dist/quota-details.scss +282 -152
  102. package/dist/quotes.scss +122 -89
  103. package/dist/repeater-embla-controls.scss +15 -35
  104. package/dist/repeater-grid-toggle.scss +166 -156
  105. package/dist/repeater-item.scss +64 -41
  106. package/dist/repeater.scss +814 -671
  107. package/dist/request-for-quotes.scss +16 -66
  108. package/dist/responsive-behaviour.scss +1 -3
  109. package/dist/rfqs.scss +181 -118
  110. package/dist/scroll.scss +172 -93
  111. package/dist/search.scss +326 -179
  112. package/dist/section.scss +51 -27
  113. package/dist/shipping-payments.scss +58 -198
  114. package/dist/simple-list.scss +164 -74
  115. package/dist/social.scss +145 -80
  116. package/dist/sort.scss +19 -11
  117. package/dist/stack.scss +34 -23
  118. package/dist/static-global.scss +26 -44
  119. package/dist/stockStatus.scss +19 -11
  120. package/dist/store-locations.scss +1105 -577
  121. package/dist/tab-container.scss +108 -81
  122. package/dist/table-common.scss +408 -217
  123. package/dist/table.scss +502 -271
  124. package/dist/text-temp.scss +7 -8
  125. package/dist/theme-classes.scss +13 -17
  126. package/dist/types/builder/enums/data-connectors.d.ts +3 -1
  127. package/dist/types/builder/enums/index.d.ts +3 -1
  128. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  129. package/dist/types/builder/tools/element-edit/optionFamilies.d.ts +20 -0
  130. package/dist/types/builder/tools/element-edit/productActions.d.ts +3 -0
  131. package/dist/types/website/constants/data-connector-souces.d.ts +40 -8
  132. package/dist/types/website/constants/data-connectors.d.ts +12 -1
  133. package/dist/types/website/helper/ssr-functions.d.ts +8 -0
  134. package/dist/uom-selector.scss +949 -489
  135. package/dist/uploadMedia.js +1 -1
  136. package/dist/user-elements.scss +837 -529
  137. package/dist/variant-picker.scss +2555 -1281
  138. package/dist/volume-pricing.scss +1037 -541
  139. package/dist/website.js +1 -1
  140. package/dist/widget.scss +1 -0
  141. package/package.json +1 -1
package/dist/option-bar.scss CHANGED
@@ -4,9 +4,16 @@
4
4
 
5
5
  [data-div-type="element"] {
6
6
  &[data-element-type="optionBar"] {
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))))));
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
+ );
10
17
 
11
18
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
12
19
 
@@ -20,7 +27,7 @@
20
27
  // )
21
28
  // );
22
29
 
23
- &>.wrapper {
30
+ & > .wrapper {
24
31
  width: 100%;
25
32
  height: 100%;
26
33
  // background-color: var(--_ctm-dn-fl-ad-bd-bd-cr, var(--_tst-dn-fl-ad-bd-bd-cr));
@@ -28,11 +35,9 @@
28
35
  // justify-content: var(--_justify-center);
29
36
  // align-items: var(--_align-center);
30
37
  }
31
-
32
38
  &[data-show-shadow="false"] {
33
39
  --_show-shadow: none;
34
40
  }
35
-
36
41
  .empty__view {
37
42
  width: 100%;
38
43
  display: flex;
@@ -41,119 +46,186 @@
41
46
 
42
47
  .allocation__profile__tabs {
43
48
  width: 100%;
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)));
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
+ );
46
53
  // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
47
54
  display: flex;
48
55
  flex-direction: column;
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)));
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
+ );
51
60
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
52
61
  row-gap: var(--_sf-gp);
53
62
  width: 100%;
54
63
  height: 100%;
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
-
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
+ );
66
87
  .profile__button {
67
88
  &[data-show-shadow="false"] {
68
89
  --_show-shadow: none;
69
90
  }
70
-
71
91
  &[data-icon-position="left"] {
72
92
  --_sf-fd-bn: row;
73
93
  }
74
-
75
94
  &[data-icon-position="right"] {
76
95
  --_sf-fd-bn: row-reverse;
77
96
  }
78
-
79
97
  &[data-icon-position="center"] {
80
98
  --_sf-fd-bn: row;
81
99
  }
82
100
 
83
101
  &:hover {
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)));
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
+ );
98
130
 
99
131
  // for shadow
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)));
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
+ );
108
148
 
109
149
  // for font
110
150
 
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)));
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
+ );
142
212
 
143
213
  // for pading and width
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)));
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
+ );
148
222
 
149
223
  &[data-hover-show-shadow="false"] {
150
224
  --_hover-show-shadow: none;
151
225
  }
152
-
153
226
  &[data-hover-show-icon="false"] {
154
227
  --_hover-show-icon: none;
155
228
  }
156
-
157
229
  &[data-hover-show-border="false"] {
158
230
  border: none;
159
231
  }
@@ -171,7 +243,10 @@
171
243
 
172
244
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-rs));
173
245
 
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));
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));
175
250
 
176
251
  &[data-show-border="true"] {
177
252
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-cr));
@@ -189,7 +264,6 @@
189
264
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-tb-dt-se-tt-tm));
190
265
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-wp));
191
266
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-bk));
192
-
193
267
  &.flex__overflow {
194
268
  white-space: normal;
195
269
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -215,75 +289,130 @@
215
289
  }
216
290
 
217
291
  &[data-is-selected="true"] {
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)));
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
+ );
232
320
 
233
321
  // for shadow
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)));
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
+ );
242
338
 
243
339
  // for font
244
340
 
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)));
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
+ );
276
402
 
277
403
  // for pading and width
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)));
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
+ );
282
412
 
283
413
  &[data-hover-show-shadow="false"] {
284
414
  --_hover-show-shadow: none;
285
415
  }
286
-
287
416
  &[data-hover-show-icon="false"] {
288
417
  --_hover-show-icon: none;
289
418
  }
@@ -300,7 +429,10 @@
300
429
 
301
430
  border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-rs));
302
431
 
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));
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));
304
436
 
305
437
  &[data-show-border="true"] {
306
438
  border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-cr));
@@ -318,7 +450,6 @@
318
450
  text-transform: var(--_sf-sd-tt-tm, prepareMediaVariable(--_ctm-dn-tb-dt-se-tt-tm));
319
451
  word-wrap: var(--_sf-sd-wd-wp, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-wp));
320
452
  word-break: var(--_sf-sd-wd-bk, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-bk));
321
-
322
453
  &.flex__overflow {
323
454
  white-space: normal;
324
455
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -344,15 +475,12 @@
344
475
  }
345
476
  }
346
477
  }
347
-
348
478
  .embla {
349
479
  height: auto;
350
-
351
480
  .embla__viewport {
352
481
  .embla__container {
353
482
  display: flex;
354
483
  gap: prepareMediaVariable(--_ctm-dn-tb-dt-se-im-gp);
355
-
356
484
  .embla__slide {
357
485
  width: unset;
358
486
  }
@@ -360,7 +488,6 @@
360
488
  }
361
489
  }
362
490
  }
363
-
364
491
  .embla {
365
492
  width: 100%;
366
493
  height: 100%;
@@ -385,8 +512,13 @@
385
512
  display: grid;
386
513
  grid-template-rows: 100%;
387
514
 
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)))));
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
+ );
390
522
 
391
523
  grid-auto-flow: column;
392
524
  gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
@@ -400,25 +532,32 @@
400
532
  }
401
533
 
402
534
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
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));
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
+ );
405
544
  }
406
545
 
407
546
  .embla__slide {
408
547
  width: 100%;
409
548
  height: 100%;
410
-
411
- &>img {
549
+ & > img {
412
550
  width: 100%;
413
551
  height: 100%;
414
552
  }
415
553
  }
416
554
  }
417
555
  }
418
-
419
556
  &:not([data-display-style="Column"]) {
420
557
  .embla__container {
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))));
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
+ );
422
561
  }
423
562
  }
424
563
 
@@ -440,7 +579,6 @@
440
579
  top: unset;
441
580
  bottom: 6px;
442
581
  }
443
-
444
582
  &[data-control-type="Bottom"] {
445
583
  transform: unset;
446
584
  position: static;
@@ -450,32 +588,31 @@
450
588
  margin-top: 10px;
451
589
  }
452
590
  }
453
-
454
591
  &[data-control-type="Side"] {
455
-
456
592
  .left-button,
457
593
  .right-button {
458
594
  background-color: transparent;
459
595
  }
460
596
  }
461
-
462
597
  &[data-background-shape="Round"] {
463
-
464
598
  .left-button,
465
599
  .right-button {
466
600
  background-color: #f2f5f5;
467
601
  box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
468
602
  }
469
603
  }
470
-
471
604
  .left-button {
472
605
  padding: 10px;
473
606
  border-radius: 50%;
474
607
  border: none;
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)));
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
+ );
479
616
 
480
617
  display: flex;
481
618
  align-items: center;
@@ -483,7 +620,6 @@
483
620
  cursor: pointer;
484
621
  outline: none;
485
622
  margin-left: 12px;
486
-
487
623
  &:disabled {
488
624
  & svg {
489
625
  path {
@@ -492,14 +628,17 @@
492
628
  }
493
629
  }
494
630
  }
495
-
496
631
  .right-button {
497
632
  border-radius: 50%;
498
633
  border: none;
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)));
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
+ );
503
642
 
504
643
  display: flex;
505
644
  align-items: center;
@@ -517,15 +656,24 @@
517
656
  }
518
657
  }
519
658
  }
520
-
521
659
  .icon {
522
660
  display: flex;
523
661
 
524
662
  svg {
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);
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
+ );
529
677
 
530
678
  path {
531
679
  stroke: #514949;
@@ -538,14 +686,12 @@
538
686
  width: calc(100% - 85px);
539
687
  margin-inline: auto;
540
688
  }
541
-
542
689
  .left-button {
543
690
  position: absolute;
544
691
  left: 0;
545
692
  top: 50%;
546
693
  transform: translateY(-50%);
547
694
  }
548
-
549
695
  .right-button {
550
696
  position: absolute;
551
697
 
@@ -558,11 +704,9 @@
558
704
  &[data-thumbnail-placement="top"] {
559
705
  flex-direction: column-reverse;
560
706
  }
561
-
562
707
  &[data-thumbnail-placement="bottom"] {
563
708
  flex-direction: column;
564
709
  }
565
-
566
710
  &[data-thumbnail-placement="left"] {
567
711
  flex-direction: row-reverse;
568
712
 
@@ -576,10 +720,8 @@
576
720
  }
577
721
  }
578
722
  }
579
-
580
723
  &[data-thumbnail-placement="right"] {
581
724
  flex-direction: row;
582
-
583
725
  .embla__thumbs {
584
726
  width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
585
727
 
@@ -591,7 +733,6 @@
591
733
  }
592
734
  }
593
735
  }
594
-
595
736
  .embla__dots {
596
737
  display: flex;
597
738
  flex-wrap: wrap;
@@ -607,13 +748,14 @@
607
748
  transform: translateX(-50%);
608
749
  width: 75%;
609
750
  }
610
-
611
751
  .embla__dot {
612
752
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
613
753
  -webkit-appearance: none;
614
754
  appearance: none;
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)));
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
+ );
617
759
 
618
760
  touch-action: manipulation;
619
761
  display: inline-flex;
@@ -624,56 +766,75 @@
624
766
  margin: 0;
625
767
  // width: 0.6rem;
626
768
  // height: 0.6rem;
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)));
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
+ );
631
777
 
632
778
  display: flex;
633
779
  align-items: center;
634
780
  justify-content: center;
635
781
  border-radius: 50%;
636
782
  }
637
-
638
783
  .embla__dot:after {
639
784
  // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
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)));
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
+ );
644
793
 
645
794
  border-radius: 50%;
646
795
  display: flex;
647
796
  align-items: center;
648
797
  content: "";
649
798
  }
650
-
651
799
  .embla__dot--selected:after {
652
800
  box-shadow: inset 0 0 0 1px var(--text-body);
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)));
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
+ );
655
805
  }
656
-
657
806
  &[data-slider-control="Pagination Line"] {
658
807
  .embla__dot {
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)));
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
+ );
665
820
  border-radius: 6px;
666
821
  }
667
822
 
668
823
  .embla__dot--selected:after {
669
824
  box-shadow: inset 0 0 0 1px var(--text-body);
670
825
  border-radius: 6px;
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)));
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
+ );
677
838
  }
678
839
  }
679
840
  }
@@ -698,7 +859,6 @@
698
859
 
699
860
  overflow: hidden;
700
861
  }
701
-
702
862
  .embla__thumbs__container {
703
863
  display: flex;
704
864
  flex-direction: row;
@@ -723,4 +883,4 @@
723
883
  }
724
884
  }
725
885
  }
726
- }
886
+ }