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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (135) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2143 -1661
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/builderLite.js +1 -1
  16. package/dist/bulk-variant-picker.scss +2027 -1128
  17. package/dist/bundle.scss +1477 -841
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +103 -79
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1012 -481
  23. package/dist/cart-summary.scss +1149 -557
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +735 -416
  27. package/dist/category-groups-element.scss +108 -127
  28. package/dist/category-groups-product-grid.scss +147 -120
  29. package/dist/category-groups-product-image.scss +1457 -1162
  30. package/dist/category-groups-product-options.scss +680 -613
  31. package/dist/category-groups-product-price.scss +3244 -1966
  32. package/dist/category-groups-quota-details.scss +464 -210
  33. package/dist/category.scss +50 -26
  34. package/dist/checkout.scss +16 -24
  35. package/dist/confirm-modal.scss +2 -22
  36. package/dist/container.scss +54 -32
  37. package/dist/countdown.scss +443 -255
  38. package/dist/coupon.scss +710 -351
  39. package/dist/default-dropdown.scss +1 -12
  40. package/dist/embroider-template-1-v2.scss +172 -123
  41. package/dist/embroider-template-1.scss +104 -68
  42. package/dist/embroidery.scss +31 -30
  43. package/dist/employee-bulk-order.scss +142 -418
  44. package/dist/faq.scss +408 -228
  45. package/dist/filter-results.scss +265 -125
  46. package/dist/filters.scss +1797 -900
  47. package/dist/gallery-slider-temp.scss +750 -432
  48. package/dist/global-styles.scss +7 -23
  49. package/dist/grid.scss +33 -25
  50. package/dist/hotspot.scss +115 -68
  51. package/dist/image-temp.scss +20 -21
  52. package/dist/item-stock.scss +16 -9
  53. package/dist/kitDetails.scss +4301 -2721
  54. package/dist/kits.scss +19 -24
  55. package/dist/language-selector.scss +361 -211
  56. package/dist/last-x-orders.scss +174 -95
  57. package/dist/layouter-item.scss +103 -75
  58. package/dist/layouter-pro-item.scss +95 -89
  59. package/dist/layouter-pro.scss +92 -87
  60. package/dist/layouter.scss +445 -383
  61. package/dist/light-box-v2.scss +104 -89
  62. package/dist/login.scss +566 -287
  63. package/dist/map.scss +368 -221
  64. package/dist/marchandiserSets.scss +104 -95
  65. package/dist/mega-menu-container.scss +109 -96
  66. package/dist/mega-menu.scss +731 -624
  67. package/dist/menu-item.scss +2 -2
  68. package/dist/menu-v2.scss +619 -507
  69. package/dist/multi-select-dropdown.scss +3 -27
  70. package/dist/my-templates.scss +9 -38
  71. package/dist/option-bar.scss +375 -215
  72. package/dist/option-families.scss +252 -0
  73. package/dist/order-status.scss +1117 -646
  74. package/dist/overflow-module.scss +7 -6
  75. package/dist/past-orders.scss +149 -118
  76. package/dist/payment-methods.scss +30 -46
  77. package/dist/pickup-locations.scss +1118 -558
  78. package/dist/position-module.scss +17 -20
  79. package/dist/prefix-list.scss +10 -21
  80. package/dist/product-actions.scss +2316 -1610
  81. package/dist/product-basic-elements.scss +169 -108
  82. package/dist/product-highlights.scss +152 -107
  83. package/dist/product-image-bundles.scss +642 -337
  84. package/dist/product-inventory.scss +1357 -673
  85. package/dist/product-labels.scss +105 -84
  86. package/dist/product-options.scss +1274 -1117
  87. package/dist/product-price.scss +2561 -1283
  88. package/dist/product-promotions.scss +2830 -1388
  89. package/dist/product-sizechart.scss +905 -516
  90. package/dist/product.scss +61 -28
  91. package/dist/productDetails.scss +39 -19
  92. package/dist/profile.scss +447 -207
  93. package/dist/quantity-selector.scss +550 -313
  94. package/dist/quick-inventory-check.scss +174 -95
  95. package/dist/quick-links.scss +133 -55
  96. package/dist/quick-order-pad.scss +271 -218
  97. package/dist/quota-details.scss +282 -152
  98. package/dist/quotes.scss +122 -89
  99. package/dist/repeater-embla-controls.scss +15 -35
  100. package/dist/repeater-grid-toggle.scss +166 -156
  101. package/dist/repeater-item.scss +64 -41
  102. package/dist/repeater.scss +814 -671
  103. package/dist/request-for-quotes.scss +16 -66
  104. package/dist/responsive-behaviour.scss +1 -3
  105. package/dist/rfqs.scss +181 -118
  106. package/dist/scroll.scss +172 -93
  107. package/dist/search.scss +326 -179
  108. package/dist/section.scss +51 -27
  109. package/dist/shipping-payments.scss +58 -198
  110. package/dist/simple-list.scss +164 -74
  111. package/dist/social.scss +145 -80
  112. package/dist/sort.scss +19 -11
  113. package/dist/stack.scss +34 -23
  114. package/dist/static-global.scss +26 -44
  115. package/dist/stockStatus.scss +19 -11
  116. package/dist/store-locations.scss +1105 -577
  117. package/dist/tab-container.scss +108 -81
  118. package/dist/table-common.scss +408 -217
  119. package/dist/table.scss +502 -271
  120. package/dist/text-temp.scss +7 -8
  121. package/dist/theme-classes.scss +13 -17
  122. package/dist/types/builder/enums/data-connectors.d.ts +3 -1
  123. package/dist/types/builder/enums/index.d.ts +3 -1
  124. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  125. package/dist/types/builder/tools/element-edit/optionFamilies.d.ts +20 -0
  126. package/dist/types/website/constants/data-connector-souces.d.ts +40 -8
  127. package/dist/types/website/constants/data-connectors.d.ts +12 -1
  128. package/dist/types/website/helper/ssr-functions.d.ts +8 -0
  129. package/dist/uom-selector.scss +949 -489
  130. package/dist/user-elements.scss +837 -529
  131. package/dist/variant-picker.scss +2555 -1281
  132. package/dist/volume-pricing.scss +1037 -541
  133. package/dist/website.js +1 -1
  134. package/dist/widget.scss +1 -0
  135. package/package.json +1 -1
package/dist/search.scss CHANGED
@@ -4,16 +4,23 @@
4
4
 
5
5
  [data-div-type="element"] {
6
6
  &[data-element-type="search"] {
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
  height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
11
18
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn)));
12
19
 
13
20
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
14
21
  position: relative;
15
22
 
16
- &>.wrapper {
23
+ & > .wrapper {
17
24
  display: flex;
18
25
  align-items: center;
19
26
  justify-content: center;
@@ -23,12 +30,18 @@
23
30
 
24
31
  &[data-widget-border="true"] {
25
32
  .search-wrapper {
26
- border-color: var(--_ctm-mob-dn-sh-br-br-cr,
27
- var(--_ctm-tab-dn-sh-br-br-cr, var(--_ctm-dn-sh-br-br-cr)));
28
- border-style: var(--_ctm-mob-dn-sh-br-br-se,
29
- var(--_ctm-tab-dn-sh-br-br-se, var(--_ctm-dn-sh-br-br-se)));
30
- border-width: var(--_ctm-mob-dn-sh-br-br-wh,
31
- var(--_ctm-tab-dn-sh-br-br-wh, var(--_ctm-dn-sh-br-br-wh)));
33
+ border-color: var(
34
+ --_ctm-mob-dn-sh-br-br-cr,
35
+ var(--_ctm-tab-dn-sh-br-br-cr, var(--_ctm-dn-sh-br-br-cr))
36
+ );
37
+ border-style: var(
38
+ --_ctm-mob-dn-sh-br-br-se,
39
+ var(--_ctm-tab-dn-sh-br-br-se, var(--_ctm-dn-sh-br-br-se))
40
+ );
41
+ border-width: var(
42
+ --_ctm-mob-dn-sh-br-br-wh,
43
+ var(--_ctm-tab-dn-sh-br-br-wh, var(--_ctm-dn-sh-br-br-wh))
44
+ );
32
45
  gap: prepareMediaVariable(--_ctm-dn-sh-br-im-gp);
33
46
  padding: prepareMediaVariable(--_ctm-lt-pg);
34
47
  }
@@ -44,14 +57,15 @@
44
57
  height: 100%;
45
58
  padding: var(--_ctm-mob-dn-sh-cr-pg, var(--_ctm-tab-dn-sh-cr-pg, var(--_ctm-dn-sh-cr-pg)));
46
59
  display: flex;
47
- gap: var(--_ctm-mob-dn-sh-cr-im-gp,
48
- var(--_ctm-tab-dn-sh-cr-im-gp, var(--_ctm-dn-sh-cr-im-gp)));
60
+ gap: var(
61
+ --_ctm-mob-dn-sh-cr-im-gp,
62
+ var(--_ctm-tab-dn-sh-cr-im-gp, var(--_ctm-dn-sh-cr-im-gp))
63
+ );
49
64
  transition:
50
65
  background-color 0.2s,
51
66
  color 0.2s,
52
67
  border-color 0.2s,
53
68
  box-shadow 0.2s;
54
-
55
69
  // &:focus-within {
56
70
  // outline: 2px solid
57
71
  // color-mix(in srgb, prepareMediaVariable(--_ctm-dn-sh-br-fs-br-cr) 10%, transparent);
@@ -70,7 +84,6 @@
70
84
  background: var(--_gray-100);
71
85
  color: var(--_gray-600);
72
86
  }
73
-
74
87
  &.dropdown {
75
88
  &:focus-within {
76
89
  .dropdown__options {
@@ -78,100 +91,150 @@
78
91
  }
79
92
  }
80
93
  }
81
-
82
94
  // .btn__with__text[data-btn-name="buttonStyles"] {
83
95
  .btn__with__text {
84
96
  &[data-show-shadow="false"] {
85
97
  --_show-shadow: none;
86
98
  }
87
-
88
99
  &[data-icon-position="left"] {
89
100
  --_sf-fd-bn: row;
90
101
  }
91
-
92
102
  &[data-icon-position="right"] {
93
103
  --_sf-fd-bn: row-reverse;
94
104
  }
95
-
96
105
  &[data-icon-position="center"] {
97
106
  --_sf-fd-bn: row;
98
107
  }
99
108
 
100
109
  &:hover {
101
- --_sf-hr-bd-cr: var(--_ctm-mob-dn-rm-bn-hr-se-bd-cr,
102
- var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr)));
103
- --_sf-hr-br-cr: var(--_ctm-mob-dn-rm-bn-hr-se-br-cr,
104
- var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr)));
105
- --_sf-hr-br-se: var(--_ctm-mob-dn-rm-bn-hr-se-br-se,
106
- var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se)));
107
- --_sf-hr-br-wh: var(--_ctm-mob-dn-rm-bn-hr-se-br-wh,
108
- var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh)));
109
- --_sf-hr-br-rs: var(--_ctm-mob-dn-rm-bn-hr-se-br-rs,
110
- var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs)));
111
- --_sf-hr-at: var(--_ctm-mob-dn-rm-bn-hr-se-at,
112
- var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at)));
113
- --_sf-hr-gp: var(--_ctm-mob-dn-rm-bn-hr-se-gp,
114
- var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp)));
110
+ --_sf-hr-bd-cr: var(
111
+ --_ctm-mob-dn-rm-bn-hr-se-bd-cr,
112
+ var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr))
113
+ );
114
+ --_sf-hr-br-cr: var(
115
+ --_ctm-mob-dn-rm-bn-hr-se-br-cr,
116
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr))
117
+ );
118
+ --_sf-hr-br-se: var(
119
+ --_ctm-mob-dn-rm-bn-hr-se-br-se,
120
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se))
121
+ );
122
+ --_sf-hr-br-wh: var(
123
+ --_ctm-mob-dn-rm-bn-hr-se-br-wh,
124
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh))
125
+ );
126
+ --_sf-hr-br-rs: var(
127
+ --_ctm-mob-dn-rm-bn-hr-se-br-rs,
128
+ var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs))
129
+ );
130
+ --_sf-hr-at: var(
131
+ --_ctm-mob-dn-rm-bn-hr-se-at,
132
+ var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at))
133
+ );
134
+ --_sf-hr-gp: var(
135
+ --_ctm-mob-dn-rm-bn-hr-se-gp,
136
+ var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp))
137
+ );
115
138
 
116
139
  // for shadow
117
- --_sf-hr-sw-ae: var(--_ctm-mob-dn-rm-bn-hr-se-sw-ae,
118
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-ae, var(--_ctm-dn-rm-bn-hr-se-sw-ae)));
119
- --_sf-hr-sw-br: var(--_ctm-mob-dn-rm-bn-hr-se-sw-br,
120
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-br, var(--_ctm-dn-rm-bn-hr-se-sw-br)));
121
- --_sf-hr-sw-hr: var(--_ctm-mob-dn-rm-bn-hr-se-sw-hr,
122
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-hr, var(--_ctm-dn-rm-bn-hr-se-sw-hr)));
123
- --_sf-hr-sw-cr: var(--_ctm-mob-dn-rm-bn-hr-se-sw-cr,
124
- var(--_ctm-tab-dn-rm-bn-hr-se-sw-cr, var(--_ctm-dn-rm-bn-hr-se-sw-cr)));
140
+ --_sf-hr-sw-ae: var(
141
+ --_ctm-mob-dn-rm-bn-hr-se-sw-ae,
142
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-ae, var(--_ctm-dn-rm-bn-hr-se-sw-ae))
143
+ );
144
+ --_sf-hr-sw-br: var(
145
+ --_ctm-mob-dn-rm-bn-hr-se-sw-br,
146
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-br, var(--_ctm-dn-rm-bn-hr-se-sw-br))
147
+ );
148
+ --_sf-hr-sw-hr: var(
149
+ --_ctm-mob-dn-rm-bn-hr-se-sw-hr,
150
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-hr, var(--_ctm-dn-rm-bn-hr-se-sw-hr))
151
+ );
152
+ --_sf-hr-sw-cr: var(
153
+ --_ctm-mob-dn-rm-bn-hr-se-sw-cr,
154
+ var(--_ctm-tab-dn-rm-bn-hr-se-sw-cr, var(--_ctm-dn-rm-bn-hr-se-sw-cr))
155
+ );
125
156
 
126
157
  // for font
127
158
 
128
- --_sf-hr-cr: var(--_ctm-mob-dn-rm-bn-hr-se-cr,
129
- var(--_ctm-tab-dn-rm-bn-hr-se-cr, var(--_ctm-dn-rm-bn-hr-se-cr)));
130
- --_sf-hr-ft-fy: var(--_ctm-mob-dn-rm-bn-hr-se-ft-fy,
131
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-fy, var(--_ctm-dn-rm-bn-hr-se-ft-fy)));
132
- --_sf-hr-tt-tm: var(--_ctm-mob-dn-rm-bn-hr-se-tt-tm,
133
- var(--_ctm-tab-dn-rm-bn-hr-se-tt-tm, var(--_ctm-dn-rm-bn-hr-se-tt-tm)));
134
- --_sf-hr-wd-wp: var(--_ctm-mob-dn-rm-bn-hr-se-wd-wp,
135
- var(--_ctm-tab-dn-rm-bn-hr-se-wd-wp, var(--_ctm-dn-rm-bn-hr-se-wd-wp)));
136
- --_sf-hr-wd-bk: var(--_ctm-mob-dn-rm-bn-hr-se-wd-bk,
137
- var(--_ctm-tab-dn-rm-bn-hr-se-wd-bk, var(--_ctm-dn-rm-bn-hr-se-wd-bk)));
138
- --_sf-hr-ft-se: var(--_ctm-mob-dn-rm-bn-hr-se-ft-se,
139
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se)));
140
- --_sf-hr-ft-wt: var(--_ctm-mob-dn-rm-bn-hr-se-ft-wt,
141
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt)));
142
- --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-rm-bn-hr-se-ft-se-ic,
143
- var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic)));
144
- --_sf-hr-tt-an: var(--_ctm-mob-dn-rm-bn-hr-se-tt-an,
145
- var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an)));
146
- --_sf-hr-lr-sg: var(--_ctm-mob-dn-rm-bn-hr-se-lr-sg,
147
- var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg)));
148
- --_sf-hr-le-ht: var(--_ctm-mob-dn-rm-bn-hr-se-le-ht,
149
- var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht)));
150
-
151
- --_sf-hr-in-se: var(--_ctm-mob-dn-rm-bn-hr-se-in-se,
152
- var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se)));
153
- --_sf-hr-in-se: var(--_ctm-mob-dn-rm-bn-hr-se-in-se,
154
- var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se)));
155
- --_sf-hr-in-c1: var(--_ctm-mob-dn-rm-bn-hr-se-in-c1,
156
- var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1)));
157
- --_sf-hr-ue: var(--_ctm-mob-dn-rm-bn-hr-se-ue,
158
- var(--_ctm-tab-dn-rm-bn-hr-se-ue, var(--_ctm-dn-rm-bn-hr-se-ue)));
159
+ --_sf-hr-cr: var(
160
+ --_ctm-mob-dn-rm-bn-hr-se-cr,
161
+ var(--_ctm-tab-dn-rm-bn-hr-se-cr, var(--_ctm-dn-rm-bn-hr-se-cr))
162
+ );
163
+ --_sf-hr-ft-fy: var(
164
+ --_ctm-mob-dn-rm-bn-hr-se-ft-fy,
165
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-fy, var(--_ctm-dn-rm-bn-hr-se-ft-fy))
166
+ );
167
+ --_sf-hr-tt-tm: var(
168
+ --_ctm-mob-dn-rm-bn-hr-se-tt-tm,
169
+ var(--_ctm-tab-dn-rm-bn-hr-se-tt-tm, var(--_ctm-dn-rm-bn-hr-se-tt-tm))
170
+ );
171
+ --_sf-hr-wd-wp: var(
172
+ --_ctm-mob-dn-rm-bn-hr-se-wd-wp,
173
+ var(--_ctm-tab-dn-rm-bn-hr-se-wd-wp, var(--_ctm-dn-rm-bn-hr-se-wd-wp))
174
+ );
175
+ --_sf-hr-wd-bk: var(
176
+ --_ctm-mob-dn-rm-bn-hr-se-wd-bk,
177
+ var(--_ctm-tab-dn-rm-bn-hr-se-wd-bk, var(--_ctm-dn-rm-bn-hr-se-wd-bk))
178
+ );
179
+ --_sf-hr-ft-se: var(
180
+ --_ctm-mob-dn-rm-bn-hr-se-ft-se,
181
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se))
182
+ );
183
+ --_sf-hr-ft-wt: var(
184
+ --_ctm-mob-dn-rm-bn-hr-se-ft-wt,
185
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt))
186
+ );
187
+ --_sf-hr-ft-se-ic: var(
188
+ --_ctm-mob-dn-rm-bn-hr-se-ft-se-ic,
189
+ var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic))
190
+ );
191
+ --_sf-hr-tt-an: var(
192
+ --_ctm-mob-dn-rm-bn-hr-se-tt-an,
193
+ var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an))
194
+ );
195
+ --_sf-hr-lr-sg: var(
196
+ --_ctm-mob-dn-rm-bn-hr-se-lr-sg,
197
+ var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg))
198
+ );
199
+ --_sf-hr-le-ht: var(
200
+ --_ctm-mob-dn-rm-bn-hr-se-le-ht,
201
+ var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht))
202
+ );
203
+
204
+ --_sf-hr-in-se: var(
205
+ --_ctm-mob-dn-rm-bn-hr-se-in-se,
206
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
207
+ );
208
+ --_sf-hr-in-se: var(
209
+ --_ctm-mob-dn-rm-bn-hr-se-in-se,
210
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
211
+ );
212
+ --_sf-hr-in-c1: var(
213
+ --_ctm-mob-dn-rm-bn-hr-se-in-c1,
214
+ var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1))
215
+ );
216
+ --_sf-hr-ue: var(
217
+ --_ctm-mob-dn-rm-bn-hr-se-ue,
218
+ var(--_ctm-tab-dn-rm-bn-hr-se-ue, var(--_ctm-dn-rm-bn-hr-se-ue))
219
+ );
159
220
 
160
221
  // for pading and width
161
- --_sf-hr-pg: var(--_ctm-mob-dn-rm-bn-hr-pg,
162
- var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg)));
163
- --_sf-hr-wh: var(--_ctm-mob-dn-rm-bn-hr-wh,
164
- var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh)));
222
+ --_sf-hr-pg: var(
223
+ --_ctm-mob-dn-rm-bn-hr-pg,
224
+ var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg))
225
+ );
226
+ --_sf-hr-wh: var(
227
+ --_ctm-mob-dn-rm-bn-hr-wh,
228
+ var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh))
229
+ );
165
230
 
166
231
  &[data-hover-show-shadow="false"] {
167
232
  --_hover-show-shadow: none;
168
233
  }
169
-
170
234
  &[data-hover-show-icon="false"] {
171
235
  --_hover-show-icon: none;
172
236
  }
173
237
  }
174
-
175
238
  background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-bd-cr));
176
239
  white-space: nowrap;
177
240
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-pg));
@@ -185,7 +248,10 @@
185
248
 
186
249
  border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-br-rs));
187
250
 
188
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-sw-cr));
251
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-sw-ae))
252
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-sw-br))
253
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-sw-sd))
254
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-sw-cr));
189
255
 
190
256
  &[data-show-border="true"] {
191
257
  border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-br-cr));
@@ -204,7 +270,6 @@
204
270
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-tt-tm));
205
271
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-wd-wp));
206
272
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-wd-bk));
207
-
208
273
  &.flex__overflow {
209
274
  white-space: normal;
210
275
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -227,7 +292,6 @@
227
292
 
228
293
  .icon {
229
294
  display: var(--_hover-show-icon, var(--_show-icon, flex));
230
-
231
295
  svg {
232
296
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-in-se));
233
297
  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-in-se));
@@ -239,7 +303,6 @@
239
303
  }
240
304
  }
241
305
  }
242
-
243
306
  [data-element-style="Text"] {
244
307
  display: inline-block;
245
308
  width: 100%;
@@ -264,7 +327,6 @@
264
327
  }
265
328
  }
266
329
  }
267
-
268
330
  .search__button {
269
331
  background-color: blue;
270
332
  color: white;
@@ -280,18 +342,26 @@
280
342
  width: 100%;
281
343
  height: 100%;
282
344
  // border: 1px solid var(--_gray-200);
283
- background-color: var(--_ctm-mob-dn-sh-br-bd-cr,
284
- var(--_ctm-tab-dn-sh-br-bd-cr, var(--_ctm-dn-sh-br-bd-cr)));
285
- box-shadow: var(--_show-shadow,
286
- var(--_ctm-mob-dn-sh-br-sw-ae, var(--_ctm-tab-dn-sh-br-sw-ae, var(--_ctm-dn-sh-br-sw-ae))) var(--_ctm-mob-dn-sh-br-sw-br, var(--_ctm-tab-dn-sh-br-sw-br, var(--_ctm-dn-sh-br-sw-br))) var(--_ctm-mob-dn-sh-br-sw-sd, var(--_ctm-tab-dn-sh-br-sw-sd, var(--_ctm-dn-sh-br-sw-sd))) var(--_ctm-mob-dn-sh-br-sw-cr, var(--_ctm-tab-dn-sh-br-sw-cr, var(--_ctm-dn-sh-br-sw-cr))));
287
- border-radius: var(--_ctm-mob-dn-sh-br-br-rs,
288
- var(--_ctm-tab-dn-sh-br-br-rs, var(--_ctm-dn-sh-br-br-rs)));
345
+ background-color: var(
346
+ --_ctm-mob-dn-sh-br-bd-cr,
347
+ var(--_ctm-tab-dn-sh-br-bd-cr, var(--_ctm-dn-sh-br-bd-cr))
348
+ );
349
+ box-shadow: var(
350
+ --_show-shadow,
351
+ var(--_ctm-mob-dn-sh-br-sw-ae, var(--_ctm-tab-dn-sh-br-sw-ae, var(--_ctm-dn-sh-br-sw-ae)))
352
+ var(--_ctm-mob-dn-sh-br-sw-br, var(--_ctm-tab-dn-sh-br-sw-br, var(--_ctm-dn-sh-br-sw-br)))
353
+ var(--_ctm-mob-dn-sh-br-sw-sd, var(--_ctm-tab-dn-sh-br-sw-sd, var(--_ctm-dn-sh-br-sw-sd)))
354
+ var(--_ctm-mob-dn-sh-br-sw-cr, var(--_ctm-tab-dn-sh-br-sw-cr, var(--_ctm-dn-sh-br-sw-cr)))
355
+ );
356
+ border-radius: var(
357
+ --_ctm-mob-dn-sh-br-br-rs,
358
+ var(--_ctm-tab-dn-sh-br-br-rs, var(--_ctm-dn-sh-br-br-rs))
359
+ );
289
360
  transition:
290
361
  background-color 0.2s,
291
362
  color 0.2s,
292
363
  border-color 0.2s,
293
364
  box-shadow 0.2s;
294
-
295
365
  &:focus-within {
296
366
  // outline: 2px solid
297
367
  // color-mix(in srgb, prepareMediaVariable(--_ctm-dn-sh-br-fs-br-cr) 10%, transparent);
@@ -300,12 +370,25 @@
300
370
  border-style: prepareMediaVariable(--_ctm-dn-sh-br-fs-br-se);
301
371
  border-width: prepareMediaVariable(--_ctm-dn-sh-br-fs-br-wh);
302
372
  border-radius: prepareMediaVariable(--_ctm-dn-sh-br-fs-br-rs);
303
- box-shadow: var(--_show-shadow,
304
- var(--_ctm-mob-dn-sh-br-fs-sw-ae,
305
- var(--_ctm-tab-dn-sh-br-fs-sw-ae, var(--_ctm-dn-sh-br-fs-sw-ae))) var(--_ctm-mob-dn-sh-br-fs-sw-br,
306
- var(--_ctm-tab-dn-sh-br-fs-sw-br, var(--_ctm-dn-sh-br-fs-sw-br))) var(--_ctm-mob-dn-sh-br-fs-sw-sd,
307
- var(--_ctm-tab-dn-sh-br-fs-sw-sd, var(--_ctm-dn-sh-br-fs-sw-sd))) var(--_ctm-mob-dn-sh-br-fs-sw-cr,
308
- var(--_ctm-tab-dn-sh-br-fs-sw-cr, var(--_ctm-dn-sh-br-fs-sw-cr))));
373
+ box-shadow: var(
374
+ --_show-shadow,
375
+ var(
376
+ --_ctm-mob-dn-sh-br-fs-sw-ae,
377
+ var(--_ctm-tab-dn-sh-br-fs-sw-ae, var(--_ctm-dn-sh-br-fs-sw-ae))
378
+ )
379
+ var(
380
+ --_ctm-mob-dn-sh-br-fs-sw-br,
381
+ var(--_ctm-tab-dn-sh-br-fs-sw-br, var(--_ctm-dn-sh-br-fs-sw-br))
382
+ )
383
+ var(
384
+ --_ctm-mob-dn-sh-br-fs-sw-sd,
385
+ var(--_ctm-tab-dn-sh-br-fs-sw-sd, var(--_ctm-dn-sh-br-fs-sw-sd))
386
+ )
387
+ var(
388
+ --_ctm-mob-dn-sh-br-fs-sw-cr,
389
+ var(--_ctm-tab-dn-sh-br-fs-sw-cr, var(--_ctm-dn-sh-br-fs-sw-cr))
390
+ )
391
+ );
309
392
  transition: all 400ms ease;
310
393
  }
311
394
 
@@ -317,57 +400,105 @@
317
400
  // padding: 8px;
318
401
  background: transparent;
319
402
  padding: var(--_ctm-mob-dn-sh-br-pg, var(--_ctm-tab-dn-sh-br-pg, var(--_ctm-dn-sh-br-pg)));
320
- color: var(--_ctm-mob-dn-sh-br-cr,
321
- var(--_ctm-tab-dn-sh-br-cr, var(--_ctm-dn-sh-br-cr, #333)));
322
- font-family: var(--_ctm-mob-dn-sh-br-ft-fy,
323
- var(--_ctm-tab-dn-sh-br-ft-fy, var(--_ctm-dn-sh-br-ft-fy)));
324
- text-transform: var(--_ctm-mob-dn-sh-br-tt-tm,
325
- var(--_ctm-tab-dn-sh-br-tt-tm, var(--_ctm-dn-sh-br-tt-tm)));
326
- word-wrap: var(--_ctm-mob-dn-sh-br-wd-wp,
327
- var(--_ctm-tab-dn-sh-br-wd-wp, var(--_ctm-dn-sh-br-wd-wp)));
328
- word-break: var(--_ctm-mob-dn-sh-br-wd-bk,
329
- var(--_ctm-tab-dn-sh-br-wd-bk, var(--_ctm-dn-sh-br-wd-bk)));
330
- font-size: var(--_ctm-mob-dn-sh-br-ft-se,
331
- var(--_ctm-tab-dn-sh-br-ft-se, var(--_ctm-dn-sh-br-ft-se, 14px)));
332
- font-weight: var(--_ctm-mob-dn-sh-br-ft-wt,
333
- var(--_ctm-tab-dn-sh-br-ft-wt, var(--_ctm-dn-sh-br-ft-wt)));
334
- font-style: var(--_ctm-mob-dn-sh-br-ft-se-ic,
335
- var(--_ctm-tab-dn-sh-br-ft-se-ic, var(--_ctm-dn-sh-br-ft-se-ic)));
336
- text-align: var(--_ctm-mob-dn-sh-br-tt-an,
337
- var(--_ctm-tab-dn-sh-br-tt-an, var(--_ctm-dn-sh-br-tt-an)));
338
- letter-spacing: var(--_ctm-mob-dn-sh-br-lr-sg,
339
- var(--_ctm-tab-dn-sh-br-lr-sg, var(--_ctm-dn-sh-br-lr-sg)));
340
- line-height: var(--_ctm-mob-dn-sh-br-le-ht,
341
- var(--_ctm-tab-dn-sh-br-le-ht, var(--_ctm-dn-sh-br-le-ht)));
342
- text-decoration: var(--_ctm-mob-dn-sh-br-ue,
343
- var(--_ctm-tab-dn-sh-br-ue, var(--_ctm-dn-sh-br-ue)));
403
+ color: var(
404
+ --_ctm-mob-dn-sh-br-cr,
405
+ var(--_ctm-tab-dn-sh-br-cr, var(--_ctm-dn-sh-br-cr, #333))
406
+ );
407
+ font-family: var(
408
+ --_ctm-mob-dn-sh-br-ft-fy,
409
+ var(--_ctm-tab-dn-sh-br-ft-fy, var(--_ctm-dn-sh-br-ft-fy))
410
+ );
411
+ text-transform: var(
412
+ --_ctm-mob-dn-sh-br-tt-tm,
413
+ var(--_ctm-tab-dn-sh-br-tt-tm, var(--_ctm-dn-sh-br-tt-tm))
414
+ );
415
+ word-wrap: var(
416
+ --_ctm-mob-dn-sh-br-wd-wp,
417
+ var(--_ctm-tab-dn-sh-br-wd-wp, var(--_ctm-dn-sh-br-wd-wp))
418
+ );
419
+ word-break: var(
420
+ --_ctm-mob-dn-sh-br-wd-bk,
421
+ var(--_ctm-tab-dn-sh-br-wd-bk, var(--_ctm-dn-sh-br-wd-bk))
422
+ );
423
+ font-size: var(
424
+ --_ctm-mob-dn-sh-br-ft-se,
425
+ var(--_ctm-tab-dn-sh-br-ft-se, var(--_ctm-dn-sh-br-ft-se, 14px))
426
+ );
427
+ font-weight: var(
428
+ --_ctm-mob-dn-sh-br-ft-wt,
429
+ var(--_ctm-tab-dn-sh-br-ft-wt, var(--_ctm-dn-sh-br-ft-wt))
430
+ );
431
+ font-style: var(
432
+ --_ctm-mob-dn-sh-br-ft-se-ic,
433
+ var(--_ctm-tab-dn-sh-br-ft-se-ic, var(--_ctm-dn-sh-br-ft-se-ic))
434
+ );
435
+ text-align: var(
436
+ --_ctm-mob-dn-sh-br-tt-an,
437
+ var(--_ctm-tab-dn-sh-br-tt-an, var(--_ctm-dn-sh-br-tt-an))
438
+ );
439
+ letter-spacing: var(
440
+ --_ctm-mob-dn-sh-br-lr-sg,
441
+ var(--_ctm-tab-dn-sh-br-lr-sg, var(--_ctm-dn-sh-br-lr-sg))
442
+ );
443
+ line-height: var(
444
+ --_ctm-mob-dn-sh-br-le-ht,
445
+ var(--_ctm-tab-dn-sh-br-le-ht, var(--_ctm-dn-sh-br-le-ht))
446
+ );
447
+ text-decoration: var(
448
+ --_ctm-mob-dn-sh-br-ue,
449
+ var(--_ctm-tab-dn-sh-br-ue, var(--_ctm-dn-sh-br-ue))
450
+ );
344
451
 
345
452
  &::placeholder {
346
453
  opacity: 0.6;
347
- color: var(--_ctm-mob-dn-pr-tt-cr,
348
- var(--_ctm-tab-dn-pr-tt-cr, var(--_ctm-dn-pr-tt-cr, #333)));
349
- font-family: var(--_ctm-mob-dn-pr-tt-ft-fy,
350
- var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy)));
351
- text-transform: var(--_ctm-mob-dn-pr-tt-tt-tm,
352
- var(--_ctm-tab-dn-pr-tt-tt-tm, var(--_ctm-dn-pr-tt-tt-tm)));
353
- word-wrap: var(--_ctm-mob-dn-pr-tt-wd-wp,
354
- var(--_ctm-tab-dn-pr-tt-wd-wp, var(--_ctm-dn-pr-tt-wd-wp)));
355
- word-break: var(--_ctm-mob-dn-pr-tt-wd-bk,
356
- var(--_ctm-tab-dn-pr-tt-wd-bk, var(--_ctm-dn-pr-tt-wd-bk)));
357
- font-size: var(--_ctm-mob-dn-pr-tt-ft-se,
358
- var(--_ctm-tab-dn-pr-tt-ft-se, var(--_ctm-dn-pr-tt-ft-se, 14px)));
359
- font-weight: var(--_ctm-mob-dn-pr-tt-ft-wt,
360
- var(--_ctm-tab-dn-pr-tt-ft-wt, var(--_ctm-dn-pr-tt-ft-wt)));
361
- font-style: var(--_ctm-mob-dn-pr-tt-ft-se-ic,
362
- var(--_ctm-tab-dn-pr-tt-ft-se-ic, var(--_ctm-dn-pr-tt-ft-se-ic)));
363
- text-align: var(--_ctm-mob-dn-pr-tt-tt-an,
364
- var(--_ctm-tab-dn-pr-tt-tt-an, var(--_ctm-dn-pr-tt-tt-an)));
365
- letter-spacing: var(--_ctm-mob-dn-pr-tt-lr-sg,
366
- var(--_ctm-tab-dn-pr-tt-lr-sg, var(--_ctm-dn-pr-tt-lr-sg)));
367
- line-height: var(--_ctm-mob-dn-pr-tt-le-ht,
368
- var(--_ctm-tab-dn-pr-tt-le-ht, var(--_ctm-dn-pr-tt-le-ht)));
369
- text-decoration: var(--_ctm-mob-dn-pr-tt-ue,
370
- var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue)));
454
+ color: var(
455
+ --_ctm-mob-dn-pr-tt-cr,
456
+ var(--_ctm-tab-dn-pr-tt-cr, var(--_ctm-dn-pr-tt-cr, #333))
457
+ );
458
+ font-family: var(
459
+ --_ctm-mob-dn-pr-tt-ft-fy,
460
+ var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy))
461
+ );
462
+ text-transform: var(
463
+ --_ctm-mob-dn-pr-tt-tt-tm,
464
+ var(--_ctm-tab-dn-pr-tt-tt-tm, var(--_ctm-dn-pr-tt-tt-tm))
465
+ );
466
+ word-wrap: var(
467
+ --_ctm-mob-dn-pr-tt-wd-wp,
468
+ var(--_ctm-tab-dn-pr-tt-wd-wp, var(--_ctm-dn-pr-tt-wd-wp))
469
+ );
470
+ word-break: var(
471
+ --_ctm-mob-dn-pr-tt-wd-bk,
472
+ var(--_ctm-tab-dn-pr-tt-wd-bk, var(--_ctm-dn-pr-tt-wd-bk))
473
+ );
474
+ font-size: var(
475
+ --_ctm-mob-dn-pr-tt-ft-se,
476
+ var(--_ctm-tab-dn-pr-tt-ft-se, var(--_ctm-dn-pr-tt-ft-se, 14px))
477
+ );
478
+ font-weight: var(
479
+ --_ctm-mob-dn-pr-tt-ft-wt,
480
+ var(--_ctm-tab-dn-pr-tt-ft-wt, var(--_ctm-dn-pr-tt-ft-wt))
481
+ );
482
+ font-style: var(
483
+ --_ctm-mob-dn-pr-tt-ft-se-ic,
484
+ var(--_ctm-tab-dn-pr-tt-ft-se-ic, var(--_ctm-dn-pr-tt-ft-se-ic))
485
+ );
486
+ text-align: var(
487
+ --_ctm-mob-dn-pr-tt-tt-an,
488
+ var(--_ctm-tab-dn-pr-tt-tt-an, var(--_ctm-dn-pr-tt-tt-an))
489
+ );
490
+ letter-spacing: var(
491
+ --_ctm-mob-dn-pr-tt-lr-sg,
492
+ var(--_ctm-tab-dn-pr-tt-lr-sg, var(--_ctm-dn-pr-tt-lr-sg))
493
+ );
494
+ line-height: var(
495
+ --_ctm-mob-dn-pr-tt-le-ht,
496
+ var(--_ctm-tab-dn-pr-tt-le-ht, var(--_ctm-dn-pr-tt-le-ht))
497
+ );
498
+ text-decoration: var(
499
+ --_ctm-mob-dn-pr-tt-ue,
500
+ var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue))
501
+ );
371
502
  }
372
503
  }
373
504
 
@@ -377,37 +508,64 @@
377
508
  display: flex;
378
509
  align-items: center;
379
510
 
380
- background-color: var(--_ctm-mob-dn-sh-in-bd-cr,
381
- var(--_ctm-tab-dn-sh-in-bd-cr, var(--_ctm-dn-sh-in-bd-cr)));
382
- border-color: var(--_ctm-mob-dn-sh-in-br-cr,
383
- var(--_ctm-tab-dn-sh-in-br-cr, var(--_ctm-dn-sh-in-br-cr)));
384
- border-style: var(--_ctm-mob-dn-sh-in-br-se,
385
- var(--_ctm-tab-dn-sh-in-br-se, var(--_ctm-dn-sh-in-br-se)));
386
- border-width: var(--_ctm-mob-dn-sh-in-br-wh,
387
- var(--_ctm-tab-dn-sh-in-br-wh, var(--_ctm-dn-sh-in-br-wh)));
388
- border-radius: var(--_ctm-mob-dn-sh-in-br-rs,
389
- var(--_ctm-tab-dn-sh-in-br-rs, var(--_ctm-dn-sh-in-br-rs)));
390
- box-shadow: var(--_show-text-content-shadow,
391
- var(--_ctm-mob-dn-sh-in-sw-ae,
392
- var(--_ctm-tab-dn-sh-in-sw-ae, var(--_ctm-dn-sh-in-sw-ae, none))) var(--_ctm-mob-dn-sh-in-sw-br,
393
- var(--_ctm-tab-dn-sh-in-sw-br, var(--_ctm-dn-sh-in-sw-br, none))) var(--_ctm-mob-dn-sh-in-sw-sd,
394
- var(--_ctm-tab-dn-sh-in-sw-sd, var(--_ctm-dn-sh-in-sw-sd, none))) var(--_ctm-mob-dn-sh-in-sw-cr,
395
- var(--_ctm-tab-dn-sh-in-sw-cr, var(--_ctm-dn-sh-in-sw-cr, none))));
511
+ background-color: var(
512
+ --_ctm-mob-dn-sh-in-bd-cr,
513
+ var(--_ctm-tab-dn-sh-in-bd-cr, var(--_ctm-dn-sh-in-bd-cr))
514
+ );
515
+ border-color: var(
516
+ --_ctm-mob-dn-sh-in-br-cr,
517
+ var(--_ctm-tab-dn-sh-in-br-cr, var(--_ctm-dn-sh-in-br-cr))
518
+ );
519
+ border-style: var(
520
+ --_ctm-mob-dn-sh-in-br-se,
521
+ var(--_ctm-tab-dn-sh-in-br-se, var(--_ctm-dn-sh-in-br-se))
522
+ );
523
+ border-width: var(
524
+ --_ctm-mob-dn-sh-in-br-wh,
525
+ var(--_ctm-tab-dn-sh-in-br-wh, var(--_ctm-dn-sh-in-br-wh))
526
+ );
527
+ border-radius: var(
528
+ --_ctm-mob-dn-sh-in-br-rs,
529
+ var(--_ctm-tab-dn-sh-in-br-rs, var(--_ctm-dn-sh-in-br-rs))
530
+ );
531
+ box-shadow: var(
532
+ --_show-text-content-shadow,
533
+ var(
534
+ --_ctm-mob-dn-sh-in-sw-ae,
535
+ var(--_ctm-tab-dn-sh-in-sw-ae, var(--_ctm-dn-sh-in-sw-ae, none))
536
+ )
537
+ var(
538
+ --_ctm-mob-dn-sh-in-sw-br,
539
+ var(--_ctm-tab-dn-sh-in-sw-br, var(--_ctm-dn-sh-in-sw-br, none))
540
+ )
541
+ var(
542
+ --_ctm-mob-dn-sh-in-sw-sd,
543
+ var(--_ctm-tab-dn-sh-in-sw-sd, var(--_ctm-dn-sh-in-sw-sd, none))
544
+ )
545
+ var(
546
+ --_ctm-mob-dn-sh-in-sw-cr,
547
+ var(--_ctm-tab-dn-sh-in-sw-cr, var(--_ctm-dn-sh-in-sw-cr, none))
548
+ )
549
+ );
396
550
  padding: var(--_ctm-mob-dn-sh-in-pg, var(--_ctm-tab-dn-sh-in-pg, var(--_ctm-dn-sh-in-pg)));
397
-
398
551
  .icon {
399
552
  display: flex;
400
553
  }
401
-
402
554
  svg {
403
- width: var(--_ctm-mob-dn-sh-in-in-se,
404
- var(--_ctm-tab-dn-sh-in-in-se, var(--_ctm-dn-sh-in-in-se)));
405
- height: var(--_ctm-mob-dn-sh-in-in-se,
406
- var(--_ctm-tab-dn-sh-in-in-se, var(--_ctm-dn-sh-in-in-se)));
555
+ width: var(
556
+ --_ctm-mob-dn-sh-in-in-se,
557
+ var(--_ctm-tab-dn-sh-in-in-se, var(--_ctm-dn-sh-in-in-se))
558
+ );
559
+ height: var(
560
+ --_ctm-mob-dn-sh-in-in-se,
561
+ var(--_ctm-tab-dn-sh-in-in-se, var(--_ctm-dn-sh-in-in-se))
562
+ );
407
563
 
408
564
  path {
409
- stroke: var(--_ctm-mob-dn-sh-in-in-c1,
410
- var(--_ctm-tab-dn-sh-in-in-c1, var(--_ctm-dn-sh-in-in-c1)));
565
+ stroke: var(
566
+ --_ctm-mob-dn-sh-in-in-c1,
567
+ var(--_ctm-tab-dn-sh-in-in-c1, var(--_ctm-dn-sh-in-in-c1))
568
+ );
411
569
  // Overrides the stroke-width presentation attribute baked into the icon markup.
412
570
  stroke-width: prepareMediaVariable(--_ctm-dn-sh-in-se-wh, 1.25);
413
571
  }
@@ -417,7 +575,6 @@
417
575
  // background: #0056b3;
418
576
  // }
419
577
  }
420
-
421
578
  &[data-icon-position="Right"] {
422
579
  --_sf-fd: row-reverse;
423
580
  --_sf-jc: flex-end;
@@ -453,37 +610,31 @@
453
610
  font-size: 12px;
454
611
  text-transform: uppercase;
455
612
  }
456
-
457
613
  .dropdown_option_wrapper {
458
614
  display: flex;
459
615
  flex-direction: column;
460
616
  gap: 4px;
461
617
  padding: 4px;
462
-
463
618
  .dropdown__option {
464
619
  display: flex;
465
620
  align-items: center;
466
621
  padding: 4px;
467
622
  color: var(--_thm-cs-be-cr-1);
468
-
469
623
  &:hover {
470
624
  // background-color: var(--_primary-25);
471
625
  @include BgColorLighter(var(--_thm-cs-at-py), 5%);
472
626
  color: var(--_thm-cs-at-py);
473
627
  border-radius: 4px;
474
-
475
628
  .option__img {
476
629
  border: 1px solid var(--_gray-300);
477
630
  }
478
631
  }
479
-
480
632
  .option__img {
481
633
  %flex__center {
482
634
  display: flex;
483
635
  align-items: center;
484
636
  justify-content: center;
485
637
  }
486
-
487
638
  width: 32px;
488
639
  height: 32px;
489
640
  border: 1px solid var(--_gray-200);
@@ -492,13 +643,11 @@
492
643
  display: flex;
493
644
  justify-content: center;
494
645
  align-items: center;
495
-
496
646
  span {
497
647
  width: 32px;
498
648
  height: 32px;
499
649
  @extend %flex__center;
500
650
  }
501
-
502
651
  img {
503
652
  height: 100%;
504
653
  width: 100%;
@@ -506,7 +655,6 @@
506
655
  @extend %flex__center;
507
656
  }
508
657
  }
509
-
510
658
  .option__desc {
511
659
  display: -webkit-box;
512
660
  -webkit-line-clamp: 1;
@@ -519,7 +667,6 @@
519
667
  line-height: 22px;
520
668
  width: 100%;
521
669
  }
522
-
523
670
  .option__count {
524
671
  font-size: 12px;
525
672
  color: var(--_gray-600);
@@ -539,4 +686,4 @@
539
686
  --_show-shadow: none;
540
687
  }
541
688
  }
542
- }
689
+ }