@sc-360-v2/storefront-cms-library 0.1.94 → 0.1.95

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 (41) hide show
  1. package/README.md +12 -12
  2. package/dist/amount-estimator.scss +438 -4
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-variant-picker.scss +725 -19
  5. package/dist/gallery-slider-temp.scss +455 -340
  6. package/dist/globals.scss +94 -94
  7. package/dist/menu.scss +89 -0
  8. package/dist/payment-methods.scss +170 -11
  9. package/dist/pickup-locations.scss +437 -11
  10. package/dist/product-actions.scss +881 -77
  11. package/dist/product-highlights.scss +108 -4
  12. package/dist/product-image.scss +466 -338
  13. package/dist/product-inventory.scss +550 -14
  14. package/dist/product-options.scss +156 -0
  15. package/dist/product-price.scss +686 -284
  16. package/dist/product-promotions.scss +1112 -17
  17. package/dist/product.scss +18 -172
  18. package/dist/quantity-selector.scss +52 -4
  19. package/dist/repeater-item.scss +21 -0
  20. package/dist/repeater.scss +106 -0
  21. package/dist/shipping-estimator.scss +7 -5
  22. package/dist/stack.scss +7 -2
  23. package/dist/store-locations.scss +436 -14
  24. package/dist/tooltip.scss +276 -0
  25. package/dist/types/builder/enums/index.d.ts +9 -2
  26. package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +2 -1
  27. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  28. package/dist/types/builder/tools/element-edit/productActions.d.ts +1 -0
  29. package/dist/types/builder/tools/element-edit/productDetails.d.ts +6 -31
  30. package/dist/types/builder/tools/element-edit/productDetailsOLd.d.ts +42 -0
  31. package/dist/types/builder/tools/element-edit/productOptions.d.ts +59 -0
  32. package/dist/types/builder/tools/element-edit/repeater.d.ts +2 -1
  33. package/dist/uom-selector.scss +495 -4
  34. package/dist/variant-picker.scss +767 -19
  35. package/dist/volume-pricing.scss +468 -19
  36. package/dist/widget.scss +24 -3
  37. package/package.json +1 -1
  38. package/dist/App.scss +0 -31
  39. package/dist/mixin.scss +0 -9
  40. package/dist/modal.module.scss +0 -121
  41. package/dist/range-slider.module.scss +0 -85
@@ -12,10 +12,10 @@
12
12
  margin: var(--_ctm-lt-mn, --_tst-lt-mn);
13
13
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
14
14
  // height: ;
15
- aspect-ratio: 1 / var(--_sf-aspect-ratio);
16
- --_aspect-ratio: calc(
17
- 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
18
- );
15
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
16
+ // --_aspect-ratio: calc(
17
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
18
+ // );
19
19
 
20
20
  & > .wrapper {
21
21
  width: 100%;
@@ -30,7 +30,7 @@
30
30
  padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
31
31
  display: flex;
32
32
  flex-direction: column;
33
- --_sf-gp: 16px;
33
+ gap: 10px;
34
34
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
35
35
  // row-gap: var(--_sf-gp);
36
36
  width: 100%;
@@ -64,152 +64,40 @@
64
64
  text-underline-position: from-font;
65
65
  text-decoration-skip-ink: none;
66
66
  }
67
- .element-container {
67
+ .price-container {
68
68
  display: flex;
69
69
  align-items: center;
70
- gap: 10px;
71
- .product-price {
72
- .price-span {
73
- background-color: var(--_ctm-dn-pt-pe-bd-cr);
74
- color: var(--_ctm-dn-pt-pe-cr, var(--_tst-dn-dt-se-cr));
75
- font-family: var(--_ctm-dn-pt-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
76
- font-size: var(--_ctm-dn-pt-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
77
- font-weight: var(--_ctm-dn-pt-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
78
- font-style: var(--_ctm-dn-pt-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
79
- text-align: var(--_ctm-dn-pt-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
80
- letter-spacing: var(--_ctm-dn-pt-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
81
- line-height: var(--_ctm-dn-pt-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
82
- text-decoration: var(--_ctm-dn-pt-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
83
- border-color: var(--_show-border, var(--_ctm-dn-pt-pe-br-cr, var(--_tst-dn-br-cr)));
84
- border-style: var(--_show-border, var(--_ctm-dn-pt-pe-br-se, var(--_tst-dn-br-se)));
85
- border-width: var(--_show-border, var(--_ctm-dn-pt-pe-br-wh, var(--_tst-dn-br-wh)));
86
- border-radius: var(--_ctm-dn-pt-pe-br-rs, var(--_tst-dn-br-rs));
87
- box-shadow: var(
88
- --_show-shadow,
89
- var(--_ctm-dn-pt-pe-sw-ae, var(--_tst-dn-sw-ae))
90
- var(--_ctm-dn-pt-pe-sw-br, var(--_tst-dn-sw-br))
91
- var(--_ctm-dn-pt-pe-sw-sd, var(--_tst-dn-sw-sd))
92
- var(--_ctm-dn-pt-pe-sw-cr, var(--_tst-dn-sw-cr))
93
- );
94
- }
95
- .code-span {
96
- background-color: var(--_ctm-dn-cy-ce-se-bd-cr);
97
- color: var(--_ctm-dn-cy-ce-se-cr, var(--_tst-dn-dt-se-cr));
98
- font-family: var(--_ctm-dn-cy-ce-se-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
99
- font-size: var(--_ctm-dn-cy-ce-se-ft-se, var(--_tst-dn-dt-se-ft-se));
100
- font-weight: var(--_ctm-dn-cy-ce-se-ft-wt, var(--_tst-dn-dt-se-ft-wt));
101
- font-style: var(--_ctm-dn-cy-ce-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
102
- text-align: var(--_ctm-dn-cy-ce-se-tt-an, var(--_tst-dn-dt-se-tt-an));
103
- letter-spacing: var(--_ctm-dn-cy-ce-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
104
- line-height: var(--_ctm-dn-cy-ce-se-le-ht, var(--_tst-dn-dt-se-le-ht));
105
- text-decoration: var(--_ctm-dn-cy-ce-se-tt-de, var(--_tst-dn-dt-se-tt-de));
106
- border-color: var(--_show-border, var(--_ctm-dn-cy-ce-se-br-cr, var(--_tst-dn-br-cr)));
107
- border-style: var(--_show-border, var(--_ctm-dn-cy-ce-se-br-se, var(--_tst-dn-br-se)));
108
- border-width: var(--_show-border, var(--_ctm-dn-cy-ce-se-br-wh, var(--_tst-dn-br-wh)));
109
- border-radius: var(--_ctm-dn-cy-ce-se-br-rs, var(--_tst-dn-br-rs));
110
- box-shadow: var(
111
- --_show-shadow,
112
- var(--_ctm-dn-cy-ce-se-sw-ae, var(--_tst-dn-sw-ae))
113
- var(--_ctm-dn-cy-ce-se-sw-br, var(--_tst-dn-sw-br))
114
- var(--_ctm-dn-cy-ce-se-sw-sd, var(--_tst-dn-sw-sd))
115
- var(--_ctm-dn-cy-ce-se-sw-cr, var(--_tst-dn-sw-cr))
116
- );
117
- }
118
- .uom-span {
119
- background-color: var(--_ctm-dn-um-se-bd-cr);
120
- color: var(--_ctm-dn-um-se-cr, var(--_tst-dn-dt-se-cr));
121
- font-family: var(--_ctm-dn-um-se-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
122
- font-size: var(--_ctm-dn-um-se-ft-se, var(--_tst-dn-dt-se-ft-se));
123
- font-weight: var(--_ctm-dn-um-se-ft-wt, var(--_tst-dn-dt-se-ft-wt));
124
- font-style: var(--_ctm-dn-um-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
125
- text-align: var(--_ctm-dn-um-se-tt-an, var(--_tst-dn-dt-se-tt-an));
126
- letter-spacing: var(--_ctm-dn-um-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
127
- line-height: var(--_ctm-dn-um-se-le-ht, var(--_tst-dn-dt-se-le-ht));
128
- text-decoration: var(--_ctm-dn-um-se-tt-de, var(--_tst-dn-dt-se-tt-de));
129
- border-color: var(--_show-border, var(--_ctm-dn-um-se-br-cr, var(--_tst-dn-br-cr)));
130
- border-style: var(--_show-border, var(--_ctm-dn-um-se-br-se, var(--_tst-dn-br-se)));
131
- border-width: var(--_show-border, var(--_ctm-dn-um-se-br-wh, var(--_tst-dn-br-wh)));
132
- border-radius: var(--_ctm-dn-um-se-br-rs, var(--_tst-dn-br-rs));
133
- box-shadow: var(
134
- --_show-shadow,
135
- var(--_ctm-dn-um-se-sw-ae, var(--_tst-dn-sw-ae))
136
- var(--_ctm-dn-um-se-sw-br, var(--_tst-dn-sw-br))
137
- var(--_ctm-dn-um-se-sw-sd, var(--_tst-dn-sw-sd))
138
- var(--_ctm-dn-um-se-sw-cr, var(--_tst-dn-sw-cr))
139
- );
70
+ gap: 5px;
71
+ .element-container {
72
+ display: flex;
73
+ align-items: center;
74
+ gap: 10px;
75
+ &.tootip-extend {
76
+ flex-direction: column;
77
+ align-items: flex-start;
140
78
  }
141
- }
142
- .product-actual-price-container {
143
- .product-actual-discount {
144
- .discount-percentage {
145
- background-color: var(--_ctm-dn-dt-bd-cr);
146
- color: var(--_ctm-dn-dt-cr, var(--_tst-dn-dt-se-cr));
147
- font-family: var(--_ctm-dn-dt-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
148
- font-size: var(--_ctm-dn-dt-ft-se, var(--_tst-dn-dt-se-ft-se));
149
- font-weight: var(--_ctm-dn-dt-ft-wt, var(--_tst-dn-dt-se-ft-wt));
150
- font-style: var(--_ctm-dn-dt-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
151
- text-align: var(--_ctm-dn-dt-tt-an, var(--_tst-dn-dt-se-tt-an));
152
- letter-spacing: var(--_ctm-dn-dt-lr-sg, var(--_tst-dn-dt-se-lr-sg));
153
- line-height: var(--_ctm-dn-dt-le-ht, var(--_tst-dn-dt-se-le-ht));
154
- text-decoration: var(--_ctm-dn-dt-tt-de, var(--_tst-dn-dt-se-tt-de));
155
- border-color: var(--_show-border, var(--_ctm-dn-dt-br-cr, var(--_tst-dn-br-cr)));
156
- border-style: var(--_show-border, var(--_ctm-dn-dt-br-se, var(--_tst-dn-br-se)));
157
- border-width: var(--_show-border, var(--_ctm-dn-dt-br-wh, var(--_tst-dn-br-wh)));
158
- border-radius: var(--_ctm-dn-dt-br-rs, var(--_tst-dn-br-rs));
159
- box-shadow: var(
160
- --_show-shadow,
161
- var(--_ctm-dn-dt-sw-ae, var(--_tst-dn-sw-ae))
162
- var(--_ctm-dn-dt-sw-br, var(--_tst-dn-sw-br))
163
- var(--_ctm-dn-dt-sw-sd, var(--_tst-dn-sw-sd))
164
- var(--_ctm-dn-dt-sw-cr, var(--_tst-dn-sw-cr))
165
- );
166
- }
167
- .discount-value-percentage {
168
- background-color: var(--_ctm-dn-dt-ve-bd-cr);
169
- color: var(--_ctm-dn-dt-ve-cr, var(--_tst-dn-dt-se-cr));
170
- font-family: var(--_ctm-dn-dt-ve-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
171
- font-size: var(--_ctm-dn-dt-ve-ft-se, var(--_tst-dn-dt-se-ft-se));
172
- font-weight: var(--_ctm-dn-dt-ve-ft-wt, var(--_tst-dn-dt-se-ft-wt));
173
- font-style: var(--_ctm-dn-dt-ve-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
174
- text-align: var(--_ctm-dn-dt-ve-tt-an, var(--_tst-dn-dt-se-tt-an));
175
- letter-spacing: var(--_ctm-dn-dt-ve-lr-sg, var(--_tst-dn-dt-se-lr-sg));
176
- line-height: var(--_ctm-dn-dt-ve-le-ht, var(--_tst-dn-dt-se-le-ht));
177
- text-decoration: var(--_ctm-dn-dt-ve-tt-de, var(--_tst-dn-dt-se-tt-de));
178
- border-color: var(--_show-border, var(--_ctm-dn-dt-ve-br-cr, var(--_tst-dn-br-cr)));
179
- border-style: var(--_show-border, var(--_ctm-dn-dt-ve-br-se, var(--_tst-dn-br-se)));
180
- border-width: var(--_show-border, var(--_ctm-dn-dt-ve-br-wh, var(--_tst-dn-br-wh)));
181
- border-radius: var(--_ctm-dn-dt-ve-br-rs, var(--_tst-dn-br-rs));
182
- box-shadow: var(
183
- --_show-shadow,
184
- var(--_ctm-dn-dt-ve-sw-ae, var(--_tst-dn-sw-ae))
185
- var(--_ctm-dn-dt-ve-sw-br, var(--_tst-dn-sw-br))
186
- var(--_ctm-dn-dt-ve-sw-sd, var(--_tst-dn-sw-sd))
187
- var(--_ctm-dn-dt-ve-sw-cr, var(--_tst-dn-sw-cr))
188
- );
189
- }
190
- }
191
- .product-actual-price {
192
- .actual-price-span {
193
- background-color: var(--_ctm-dn-al-pe-bd-cr);
194
- color: var(--_ctm-dn-al-pe-cr, var(--_tst-dn-dt-se-cr));
195
- font-family: var(--_ctm-dn-al-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
196
- font-size: var(--_ctm-dn-al-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
197
- font-weight: var(--_ctm-dn-al-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
198
- font-style: var(--_ctm-dn-al-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
199
- text-align: var(--_ctm-dn-al-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
200
- letter-spacing: var(--_ctm-dn-al-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
201
- line-height: var(--_ctm-dn-al-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
202
- text-decoration: var(--_ctm-dn-al-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
203
- border-color: var(--_show-border, var(--_ctm-dn-al-pe-br-cr, var(--_tst-dn-br-cr)));
204
- border-style: var(--_show-border, var(--_ctm-dn-al-pe-br-se, var(--_tst-dn-br-se)));
205
- border-width: var(--_show-border, var(--_ctm-dn-al-pe-br-wh, var(--_tst-dn-br-wh)));
206
- border-radius: var(--_ctm-dn-al-pe-br-rs, var(--_tst-dn-br-rs));
79
+ .product-price {
80
+ .price-span {
81
+ background-color: var(--_ctm-dn-pt-pe-bd-cr);
82
+ color: var(--_ctm-dn-pt-pe-cr, var(--_tst-dn-dt-se-cr));
83
+ font-family: var(--_ctm-dn-pt-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
84
+ font-size: var(--_ctm-dn-pt-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
85
+ font-weight: var(--_ctm-dn-pt-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
86
+ font-style: var(--_ctm-dn-pt-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
87
+ text-align: var(--_ctm-dn-pt-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
88
+ letter-spacing: var(--_ctm-dn-pt-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
89
+ line-height: var(--_ctm-dn-pt-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
90
+ text-decoration: var(--_ctm-dn-pt-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
91
+ border-color: var(--_show-border, var(--_ctm-dn-pt-pe-br-cr, var(--_tst-dn-br-cr)));
92
+ border-style: var(--_show-border, var(--_ctm-dn-pt-pe-br-se, var(--_tst-dn-br-se)));
93
+ border-width: var(--_show-border, var(--_ctm-dn-pt-pe-br-wh, var(--_tst-dn-br-wh)));
94
+ border-radius: var(--_ctm-dn-pt-pe-br-rs, var(--_tst-dn-br-rs));
207
95
  box-shadow: var(
208
96
  --_show-shadow,
209
- var(--_ctm-dn-al-pe-sw-ae, var(--_tst-dn-sw-ae))
210
- var(--_ctm-dn-al-pe-sw-br, var(--_tst-dn-sw-br))
211
- var(--_ctm-dn-al-pe-sw-sd, var(--_tst-dn-sw-sd))
212
- var(--_ctm-dn-al-pe-sw-cr, var(--_tst-dn-sw-cr))
97
+ var(--_ctm-dn-pt-pe-sw-ae, var(--_tst-dn-sw-ae))
98
+ var(--_ctm-dn-pt-pe-sw-br, var(--_tst-dn-sw-br))
99
+ var(--_ctm-dn-pt-pe-sw-sd, var(--_tst-dn-sw-sd))
100
+ var(--_ctm-dn-pt-pe-sw-cr, var(--_tst-dn-sw-cr))
213
101
  );
214
102
  }
215
103
  .code-span {
@@ -268,169 +156,683 @@
268
156
  );
269
157
  }
270
158
  }
271
- }
272
- .product-savings {
273
- .product-savings-wrapper {
274
- .savings-percent-span {
275
- background-color: var(--_ctm-dn-ss-bd-cr);
276
- color: var(--_ctm-dn-ss-cr, var(--_tst-dn-dt-se-cr));
277
- font-family: var(--_ctm-dn-ss-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
278
- font-size: var(--_ctm-dn-ss-ft-se, var(--_tst-dn-dt-se-ft-se));
279
- font-weight: var(--_ctm-dn-ss-ft-wt, var(--_tst-dn-dt-se-ft-wt));
280
- font-style: var(--_ctm-dn-ss-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
281
- text-align: var(--_ctm-dn-ss-tt-an, var(--_tst-dn-dt-se-tt-an));
282
- letter-spacing: var(--_ctm-dn-ss-lr-sg, var(--_tst-dn-dt-se-lr-sg));
283
- line-height: var(--_ctm-dn-ss-le-ht, var(--_tst-dn-dt-se-le-ht));
284
- text-decoration: var(--_ctm-dn-ss-tt-de, var(--_tst-dn-dt-se-tt-de));
285
- border-color: var(--_show-border, var(--_ctm-dn-ss-br-cr, var(--_tst-dn-br-cr)));
286
- border-style: var(--_show-border, var(--_ctm-dn-ss-br-se, var(--_tst-dn-br-se)));
287
- border-width: var(--_show-border, var(--_ctm-dn-ss-br-wh, var(--_tst-dn-br-wh)));
288
- border-radius: var(--_ctm-dn-ss-br-rs, var(--_tst-dn-br-rs));
159
+ .product-actual-price-container {
160
+ .product-actual-discount {
161
+ .discount-percentage {
162
+ background-color: var(--_ctm-dn-dt-bd-cr);
163
+ color: var(--_ctm-dn-dt-cr, var(--_tst-dn-dt-se-cr));
164
+ font-family: var(--_ctm-dn-dt-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
165
+ font-size: var(--_ctm-dn-dt-ft-se, var(--_tst-dn-dt-se-ft-se));
166
+ font-weight: var(--_ctm-dn-dt-ft-wt, var(--_tst-dn-dt-se-ft-wt));
167
+ font-style: var(--_ctm-dn-dt-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
168
+ text-align: var(--_ctm-dn-dt-tt-an, var(--_tst-dn-dt-se-tt-an));
169
+ letter-spacing: var(--_ctm-dn-dt-lr-sg, var(--_tst-dn-dt-se-lr-sg));
170
+ line-height: var(--_ctm-dn-dt-le-ht, var(--_tst-dn-dt-se-le-ht));
171
+ text-decoration: var(--_ctm-dn-dt-tt-de, var(--_tst-dn-dt-se-tt-de));
172
+ border-color: var(--_show-border, var(--_ctm-dn-dt-br-cr, var(--_tst-dn-br-cr)));
173
+ border-style: var(--_show-border, var(--_ctm-dn-dt-br-se, var(--_tst-dn-br-se)));
174
+ border-width: var(--_show-border, var(--_ctm-dn-dt-br-wh, var(--_tst-dn-br-wh)));
175
+ border-radius: var(--_ctm-dn-dt-br-rs, var(--_tst-dn-br-rs));
176
+ box-shadow: var(
177
+ --_show-shadow,
178
+ var(--_ctm-dn-dt-sw-ae, var(--_tst-dn-sw-ae))
179
+ var(--_ctm-dn-dt-sw-br, var(--_tst-dn-sw-br))
180
+ var(--_ctm-dn-dt-sw-sd, var(--_tst-dn-sw-sd))
181
+ var(--_ctm-dn-dt-sw-cr, var(--_tst-dn-sw-cr))
182
+ );
183
+ }
184
+ .discount-value-percentage {
185
+ background-color: var(--_ctm-dn-dt-ve-bd-cr);
186
+ color: var(--_ctm-dn-dt-ve-cr, var(--_tst-dn-dt-se-cr));
187
+ font-family: var(--_ctm-dn-dt-ve-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
188
+ font-size: var(--_ctm-dn-dt-ve-ft-se, var(--_tst-dn-dt-se-ft-se));
189
+ font-weight: var(--_ctm-dn-dt-ve-ft-wt, var(--_tst-dn-dt-se-ft-wt));
190
+ font-style: var(--_ctm-dn-dt-ve-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
191
+ text-align: var(--_ctm-dn-dt-ve-tt-an, var(--_tst-dn-dt-se-tt-an));
192
+ letter-spacing: var(--_ctm-dn-dt-ve-lr-sg, var(--_tst-dn-dt-se-lr-sg));
193
+ line-height: var(--_ctm-dn-dt-ve-le-ht, var(--_tst-dn-dt-se-le-ht));
194
+ text-decoration: var(--_ctm-dn-dt-ve-tt-de, var(--_tst-dn-dt-se-tt-de));
195
+ border-color: var(--_show-border, var(--_ctm-dn-dt-ve-br-cr, var(--_tst-dn-br-cr)));
196
+ border-style: var(--_show-border, var(--_ctm-dn-dt-ve-br-se, var(--_tst-dn-br-se)));
197
+ border-width: var(--_show-border, var(--_ctm-dn-dt-ve-br-wh, var(--_tst-dn-br-wh)));
198
+ border-radius: var(--_ctm-dn-dt-ve-br-rs, var(--_tst-dn-br-rs));
199
+ box-shadow: var(
200
+ --_show-shadow,
201
+ var(--_ctm-dn-dt-ve-sw-ae, var(--_tst-dn-sw-ae))
202
+ var(--_ctm-dn-dt-ve-sw-br, var(--_tst-dn-sw-br))
203
+ var(--_ctm-dn-dt-ve-sw-sd, var(--_tst-dn-sw-sd))
204
+ var(--_ctm-dn-dt-ve-sw-cr, var(--_tst-dn-sw-cr))
205
+ );
206
+ }
207
+ }
208
+ .product-actual-price {
209
+ .actual-price-span {
210
+ background-color: var(--_ctm-dn-al-pe-bd-cr);
211
+ color: var(--_ctm-dn-al-pe-cr, var(--_tst-dn-dt-se-cr));
212
+ font-family: var(--_ctm-dn-al-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
213
+ font-size: var(--_ctm-dn-al-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
214
+ font-weight: var(--_ctm-dn-al-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
215
+ font-style: var(--_ctm-dn-al-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
216
+ text-align: var(--_ctm-dn-al-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
217
+ letter-spacing: var(--_ctm-dn-al-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
218
+ line-height: var(--_ctm-dn-al-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
219
+ text-decoration: var(--_ctm-dn-al-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
220
+ border-color: var(--_show-border, var(--_ctm-dn-al-pe-br-cr, var(--_tst-dn-br-cr)));
221
+ border-style: var(--_show-border, var(--_ctm-dn-al-pe-br-se, var(--_tst-dn-br-se)));
222
+ border-width: var(--_show-border, var(--_ctm-dn-al-pe-br-wh, var(--_tst-dn-br-wh)));
223
+ border-radius: var(--_ctm-dn-al-pe-br-rs, var(--_tst-dn-br-rs));
224
+ box-shadow: var(
225
+ --_show-shadow,
226
+ var(--_ctm-dn-al-pe-sw-ae, var(--_tst-dn-sw-ae))
227
+ var(--_ctm-dn-al-pe-sw-br, var(--_tst-dn-sw-br))
228
+ var(--_ctm-dn-al-pe-sw-sd, var(--_tst-dn-sw-sd))
229
+ var(--_ctm-dn-al-pe-sw-cr, var(--_tst-dn-sw-cr))
230
+ );
231
+ }
232
+ .code-span {
233
+ background-color: var(--_ctm-dn-cy-ce-se-bd-cr);
234
+ color: var(--_ctm-dn-cy-ce-se-cr, var(--_tst-dn-dt-se-cr));
235
+ font-family: var(--_ctm-dn-cy-ce-se-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
236
+ font-size: var(--_ctm-dn-cy-ce-se-ft-se, var(--_tst-dn-dt-se-ft-se));
237
+ font-weight: var(--_ctm-dn-cy-ce-se-ft-wt, var(--_tst-dn-dt-se-ft-wt));
238
+ font-style: var(--_ctm-dn-cy-ce-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
239
+ text-align: var(--_ctm-dn-cy-ce-se-tt-an, var(--_tst-dn-dt-se-tt-an));
240
+ letter-spacing: var(--_ctm-dn-cy-ce-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
241
+ line-height: var(--_ctm-dn-cy-ce-se-le-ht, var(--_tst-dn-dt-se-le-ht));
242
+ text-decoration: var(--_ctm-dn-cy-ce-se-tt-de, var(--_tst-dn-dt-se-tt-de));
243
+ border-color: var(
244
+ --_show-border,
245
+ var(--_ctm-dn-cy-ce-se-br-cr, var(--_tst-dn-br-cr))
246
+ );
247
+ border-style: var(
248
+ --_show-border,
249
+ var(--_ctm-dn-cy-ce-se-br-se, var(--_tst-dn-br-se))
250
+ );
251
+ border-width: var(
252
+ --_show-border,
253
+ var(--_ctm-dn-cy-ce-se-br-wh, var(--_tst-dn-br-wh))
254
+ );
255
+ border-radius: var(--_ctm-dn-cy-ce-se-br-rs, var(--_tst-dn-br-rs));
256
+ box-shadow: var(
257
+ --_show-shadow,
258
+ var(--_ctm-dn-cy-ce-se-sw-ae, var(--_tst-dn-sw-ae))
259
+ var(--_ctm-dn-cy-ce-se-sw-br, var(--_tst-dn-sw-br))
260
+ var(--_ctm-dn-cy-ce-se-sw-sd, var(--_tst-dn-sw-sd))
261
+ var(--_ctm-dn-cy-ce-se-sw-cr, var(--_tst-dn-sw-cr))
262
+ );
263
+ }
264
+ .uom-span {
265
+ background-color: var(--_ctm-dn-um-se-bd-cr);
266
+ color: var(--_ctm-dn-um-se-cr, var(--_tst-dn-dt-se-cr));
267
+ font-family: var(--_ctm-dn-um-se-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
268
+ font-size: var(--_ctm-dn-um-se-ft-se, var(--_tst-dn-dt-se-ft-se));
269
+ font-weight: var(--_ctm-dn-um-se-ft-wt, var(--_tst-dn-dt-se-ft-wt));
270
+ font-style: var(--_ctm-dn-um-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
271
+ text-align: var(--_ctm-dn-um-se-tt-an, var(--_tst-dn-dt-se-tt-an));
272
+ letter-spacing: var(--_ctm-dn-um-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
273
+ line-height: var(--_ctm-dn-um-se-le-ht, var(--_tst-dn-dt-se-le-ht));
274
+ text-decoration: var(--_ctm-dn-um-se-tt-de, var(--_tst-dn-dt-se-tt-de));
275
+ border-color: var(--_show-border, var(--_ctm-dn-um-se-br-cr, var(--_tst-dn-br-cr)));
276
+ border-style: var(--_show-border, var(--_ctm-dn-um-se-br-se, var(--_tst-dn-br-se)));
277
+ border-width: var(--_show-border, var(--_ctm-dn-um-se-br-wh, var(--_tst-dn-br-wh)));
278
+ border-radius: var(--_ctm-dn-um-se-br-rs, var(--_tst-dn-br-rs));
279
+ box-shadow: var(
280
+ --_show-shadow,
281
+ var(--_ctm-dn-um-se-sw-ae, var(--_tst-dn-sw-ae))
282
+ var(--_ctm-dn-um-se-sw-br, var(--_tst-dn-sw-br))
283
+ var(--_ctm-dn-um-se-sw-sd, var(--_tst-dn-sw-sd))
284
+ var(--_ctm-dn-um-se-sw-cr, var(--_tst-dn-sw-cr))
285
+ );
286
+ }
287
+ }
288
+ }
289
+ .product-savings {
290
+ .product-savings-wrapper {
291
+ .savings-percent-span {
292
+ background-color: var(--_ctm-dn-ss-bd-cr);
293
+ color: var(--_ctm-dn-ss-cr, var(--_tst-dn-dt-se-cr));
294
+ font-family: var(--_ctm-dn-ss-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
295
+ font-size: var(--_ctm-dn-ss-ft-se, var(--_tst-dn-dt-se-ft-se));
296
+ font-weight: var(--_ctm-dn-ss-ft-wt, var(--_tst-dn-dt-se-ft-wt));
297
+ font-style: var(--_ctm-dn-ss-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
298
+ text-align: var(--_ctm-dn-ss-tt-an, var(--_tst-dn-dt-se-tt-an));
299
+ letter-spacing: var(--_ctm-dn-ss-lr-sg, var(--_tst-dn-dt-se-lr-sg));
300
+ line-height: var(--_ctm-dn-ss-le-ht, var(--_tst-dn-dt-se-le-ht));
301
+ text-decoration: var(--_ctm-dn-ss-tt-de, var(--_tst-dn-dt-se-tt-de));
302
+ border-color: var(--_show-border, var(--_ctm-dn-ss-br-cr, var(--_tst-dn-br-cr)));
303
+ border-style: var(--_show-border, var(--_ctm-dn-ss-br-se, var(--_tst-dn-br-se)));
304
+ border-width: var(--_show-border, var(--_ctm-dn-ss-br-wh, var(--_tst-dn-br-wh)));
305
+ border-radius: var(--_ctm-dn-ss-br-rs, var(--_tst-dn-br-rs));
306
+ box-shadow: var(
307
+ --_show-shadow,
308
+ var(--_ctm-dn-ss-sw-ae, var(--_tst-dn-sw-ae))
309
+ var(--_ctm-dn-ss-sw-br, var(--_tst-dn-sw-br))
310
+ var(--_ctm-dn-ss-sw-sd, var(--_tst-dn-sw-sd))
311
+ var(--_ctm-dn-ss-sw-cr, var(--_tst-dn-sw-cr))
312
+ );
313
+ }
314
+ .savings-value-span {
315
+ background-color: var(--_ctm-dn-ss-ve-bd-cr);
316
+ color: var(--_ctm-dn-ss-ve-cr, var(--_tst-dn-dt-se-cr));
317
+ font-family: var(--_ctm-dn-ss-ve-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
318
+ font-size: var(--_ctm-dn-ss-ve-ft-se, var(--_tst-dn-dt-se-ft-se));
319
+ font-weight: var(--_ctm-dn-ss-ve-ft-wt, var(--_tst-dn-dt-se-ft-wt));
320
+ font-style: var(--_ctm-dn-ss-ve-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
321
+ text-align: var(--_ctm-dn-ss-ve-tt-an, var(--_tst-dn-dt-se-tt-an));
322
+ letter-spacing: var(--_ctm-dn-ss-ve-lr-sg, var(--_tst-dn-dt-se-lr-sg));
323
+ line-height: var(--_ctm-dn-ss-ve-le-ht, var(--_tst-dn-dt-se-le-ht));
324
+ text-decoration: var(--_ctm-dn-ss-ve-tt-de, var(--_tst-dn-dt-se-tt-de));
325
+ border-color: var(--_show-border, var(--_ctm-dn-ss-ve-br-cr, var(--_tst-dn-br-cr)));
326
+ border-style: var(--_show-border, var(--_ctm-dn-ss-ve-br-se, var(--_tst-dn-br-se)));
327
+ border-width: var(--_show-border, var(--_ctm-dn-ss-ve-br-wh, var(--_tst-dn-br-wh)));
328
+ border-radius: var(--_ctm-dn-ss-ve-br-rs, var(--_tst-dn-br-rs));
329
+ box-shadow: var(
330
+ --_show-shadow,
331
+ var(--_ctm-dn-ss-ve-sw-ae, var(--_tst-dn-sw-ae))
332
+ var(--_ctm-dn-ss-ve-sw-br, var(--_tst-dn-sw-br))
333
+ var(--_ctm-dn-ss-ve-sw-sd, var(--_tst-dn-sw-sd))
334
+ var(--_ctm-dn-ss-ve-sw-cr, var(--_tst-dn-sw-cr))
335
+ );
336
+ }
337
+ .code-span {
338
+ background-color: var(--_ctm-dn-cy-ce-se-bd-cr);
339
+ color: var(--_ctm-dn-cy-ce-se-cr, var(--_tst-dn-dt-se-cr));
340
+ font-family: var(--_ctm-dn-cy-ce-se-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
341
+ font-size: var(--_ctm-dn-cy-ce-se-ft-se, var(--_tst-dn-dt-se-ft-se));
342
+ font-weight: var(--_ctm-dn-cy-ce-se-ft-wt, var(--_tst-dn-dt-se-ft-wt));
343
+ font-style: var(--_ctm-dn-cy-ce-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
344
+ text-align: var(--_ctm-dn-cy-ce-se-tt-an, var(--_tst-dn-dt-se-tt-an));
345
+ letter-spacing: var(--_ctm-dn-cy-ce-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
346
+ line-height: var(--_ctm-dn-cy-ce-se-le-ht, var(--_tst-dn-dt-se-le-ht));
347
+ text-decoration: var(--_ctm-dn-cy-ce-se-tt-de, var(--_tst-dn-dt-se-tt-de));
348
+ border-color: var(
349
+ --_show-border,
350
+ var(--_ctm-dn-cy-ce-se-br-cr, var(--_tst-dn-br-cr))
351
+ );
352
+ border-style: var(
353
+ --_show-border,
354
+ var(--_ctm-dn-cy-ce-se-br-se, var(--_tst-dn-br-se))
355
+ );
356
+ border-width: var(
357
+ --_show-border,
358
+ var(--_ctm-dn-cy-ce-se-br-wh, var(--_tst-dn-br-wh))
359
+ );
360
+ border-radius: var(--_ctm-dn-cy-ce-se-br-rs, var(--_tst-dn-br-rs));
361
+ box-shadow: var(
362
+ --_show-shadow,
363
+ var(--_ctm-dn-cy-ce-se-sw-ae, var(--_tst-dn-sw-ae))
364
+ var(--_ctm-dn-cy-ce-se-sw-br, var(--_tst-dn-sw-br))
365
+ var(--_ctm-dn-cy-ce-se-sw-sd, var(--_tst-dn-sw-sd))
366
+ var(--_ctm-dn-cy-ce-se-sw-cr, var(--_tst-dn-sw-cr))
367
+ );
368
+ }
369
+ }
370
+ }
371
+ .total-price-container {
372
+ .tax-box {
373
+ display: flex;
374
+ align-items: center;
375
+ justify-content: space-between;
376
+ gap: 5px;
377
+ background-color: var(--_ctm-dn-pt-tx-bd-cr);
378
+ color: var(--_ctm-dn-pt-tx-cr, var(--_tst-dn-dt-se-cr));
379
+ font-family: var(--_ctm-dn-pt-tx-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
380
+ font-size: var(--_ctm-dn-pt-tx-ft-se, var(--_tst-dn-dt-se-ft-se));
381
+ font-weight: var(--_ctm-dn-pt-tx-ft-wt, var(--_tst-dn-dt-se-ft-wt));
382
+ font-style: var(--_ctm-dn-pt-tx-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
383
+ text-align: var(--_ctm-dn-pt-tx-tt-an, var(--_tst-dn-dt-se-tt-an));
384
+ letter-spacing: var(--_ctm-dn-pt-tx-lr-sg, var(--_tst-dn-dt-se-lr-sg));
385
+ line-height: var(--_ctm-dn-pt-tx-le-ht, var(--_tst-dn-dt-se-le-ht));
386
+ text-decoration: var(--_ctm-dn-pt-tx-tt-de, var(--_tst-dn-dt-se-tt-de));
387
+ border-color: var(--_show-border, var(--_ctm-dn-pt-tx-br-cr, var(--_tst-dn-br-cr)));
388
+ border-style: var(--_show-border, var(--_ctm-dn-pt-tx-br-se, var(--_tst-dn-br-se)));
389
+ border-width: var(--_show-border, var(--_ctm-dn-pt-tx-br-wh, var(--_tst-dn-br-wh)));
390
+ border-radius: var(--_ctm-dn-pt-tx-br-rs, var(--_tst-dn-br-rs));
289
391
  box-shadow: var(
290
392
  --_show-shadow,
291
- var(--_ctm-dn-ss-sw-ae, var(--_tst-dn-sw-ae))
292
- var(--_ctm-dn-ss-sw-br, var(--_tst-dn-sw-br))
293
- var(--_ctm-dn-ss-sw-sd, var(--_tst-dn-sw-sd))
294
- var(--_ctm-dn-ss-sw-cr, var(--_tst-dn-sw-cr))
393
+ var(--_ctm-dn-pt-tx-sw-ae, var(--_tst-dn-sw-ae))
394
+ var(--_ctm-dn-pt-tx-sw-br, var(--_tst-dn-sw-br))
395
+ var(--_ctm-dn-pt-tx-sw-sd, var(--_tst-dn-sw-sd))
396
+ var(--_ctm-dn-pt-tx-sw-cr, var(--_tst-dn-sw-cr))
295
397
  );
296
398
  }
297
- .savings-value-span {
298
- background-color: var(--_ctm-dn-ss-ve-bd-cr);
299
- color: var(--_ctm-dn-ss-ve-cr, var(--_tst-dn-dt-se-cr));
300
- font-family: var(--_ctm-dn-ss-ve-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
301
- font-size: var(--_ctm-dn-ss-ve-ft-se, var(--_tst-dn-dt-se-ft-se));
302
- font-weight: var(--_ctm-dn-ss-ve-ft-wt, var(--_tst-dn-dt-se-ft-wt));
303
- font-style: var(--_ctm-dn-ss-ve-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
304
- text-align: var(--_ctm-dn-ss-ve-tt-an, var(--_tst-dn-dt-se-tt-an));
305
- letter-spacing: var(--_ctm-dn-ss-ve-lr-sg, var(--_tst-dn-dt-se-lr-sg));
306
- line-height: var(--_ctm-dn-ss-ve-le-ht, var(--_tst-dn-dt-se-le-ht));
307
- text-decoration: var(--_ctm-dn-ss-ve-tt-de, var(--_tst-dn-dt-se-tt-de));
308
- border-color: var(--_show-border, var(--_ctm-dn-ss-ve-br-cr, var(--_tst-dn-br-cr)));
309
- border-style: var(--_show-border, var(--_ctm-dn-ss-ve-br-se, var(--_tst-dn-br-se)));
310
- border-width: var(--_show-border, var(--_ctm-dn-ss-ve-br-wh, var(--_tst-dn-br-wh)));
311
- border-radius: var(--_ctm-dn-ss-ve-br-rs, var(--_tst-dn-br-rs));
399
+ .shipping-box {
400
+ display: flex;
401
+ align-items: center;
402
+ justify-content: space-between;
403
+ gap: 5px;
404
+ background-color: var(--_ctm-dn-pt-sg-pe-bd-cr);
405
+ color: var(--_ctm-dn-pt-sg-pe-cr, var(--_tst-dn-dt-se-cr));
406
+ font-family: var(--_ctm-dn-pt-sg-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
407
+ font-size: var(--_ctm-dn-pt-sg-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
408
+ font-weight: var(--_ctm-dn-pt-sg-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
409
+ font-style: var(--_ctm-dn-pt-sg-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
410
+ text-align: var(--_ctm-dn-pt-sg-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
411
+ letter-spacing: var(--_ctm-dn-pt-sg-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
412
+ line-height: var(--_ctm-dn-pt-sg-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
413
+ text-decoration: var(--_ctm-dn-pt-sg-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
414
+ border-color: var(
415
+ --_show-border,
416
+ var(--_ctm-dn-pt-sg-pe-br-cr, var(--_tst-dn-br-cr))
417
+ );
418
+ border-style: var(
419
+ --_show-border,
420
+ var(--_ctm-dn-pt-sg-pe-br-se, var(--_tst-dn-br-se))
421
+ );
422
+ border-width: var(
423
+ --_show-border,
424
+ var(--_ctm-dn-pt-sg-pe-br-wh, var(--_tst-dn-br-wh))
425
+ );
426
+ border-radius: var(--_ctm-dn-pt-sg-pe-br-rs, var(--_tst-dn-br-rs));
312
427
  box-shadow: var(
313
428
  --_show-shadow,
314
- var(--_ctm-dn-ss-ve-sw-ae, var(--_tst-dn-sw-ae))
315
- var(--_ctm-dn-ss-ve-sw-br, var(--_tst-dn-sw-br))
316
- var(--_ctm-dn-ss-ve-sw-sd, var(--_tst-dn-sw-sd))
317
- var(--_ctm-dn-ss-ve-sw-cr, var(--_tst-dn-sw-cr))
429
+ var(--_ctm-dn-pt-sg-pe-sw-ae, var(--_tst-dn-sw-ae))
430
+ var(--_ctm-dn-pt-sg-pe-sw-br, var(--_tst-dn-sw-br))
431
+ var(--_ctm-dn-pt-sg-pe-sw-sd, var(--_tst-dn-sw-sd))
432
+ var(--_ctm-dn-pt-sg-pe-sw-cr, var(--_tst-dn-sw-cr))
318
433
  );
319
434
  }
320
- .code-span {
321
- background-color: var(--_ctm-dn-cy-ce-se-bd-cr);
322
- color: var(--_ctm-dn-cy-ce-se-cr, var(--_tst-dn-dt-se-cr));
323
- font-family: var(--_ctm-dn-cy-ce-se-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
324
- font-size: var(--_ctm-dn-cy-ce-se-ft-se, var(--_tst-dn-dt-se-ft-se));
325
- font-weight: var(--_ctm-dn-cy-ce-se-ft-wt, var(--_tst-dn-dt-se-ft-wt));
326
- font-style: var(--_ctm-dn-cy-ce-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
327
- text-align: var(--_ctm-dn-cy-ce-se-tt-an, var(--_tst-dn-dt-se-tt-an));
328
- letter-spacing: var(--_ctm-dn-cy-ce-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
329
- line-height: var(--_ctm-dn-cy-ce-se-le-ht, var(--_tst-dn-dt-se-le-ht));
330
- text-decoration: var(--_ctm-dn-cy-ce-se-tt-de, var(--_tst-dn-dt-se-tt-de));
435
+ .embellishment-box {
436
+ display: flex;
437
+ align-items: center;
438
+ justify-content: space-between;
439
+ gap: 5px;
440
+ background-color: var(--_ctm-dn-et-pe-bd-cr);
441
+ color: var(--_ctm-dn-et-pe-cr, var(--_tst-dn-dt-se-cr));
442
+ font-family: var(--_ctm-dn-et-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
443
+ font-size: var(--_ctm-dn-et-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
444
+ font-weight: var(--_ctm-dn-et-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
445
+ font-style: var(--_ctm-dn-et-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
446
+ text-align: var(--_ctm-dn-et-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
447
+ letter-spacing: var(--_ctm-dn-et-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
448
+ line-height: var(--_ctm-dn-et-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
449
+ text-decoration: var(--_ctm-dn-et-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
450
+ border-color: var(--_show-border, var(--_ctm-dn-et-pe-br-cr, var(--_tst-dn-br-cr)));
451
+ border-style: var(--_show-border, var(--_ctm-dn-et-pe-br-se, var(--_tst-dn-br-se)));
452
+ border-width: var(--_show-border, var(--_ctm-dn-et-pe-br-wh, var(--_tst-dn-br-wh)));
453
+ border-radius: var(--_ctm-dn-et-pe-br-rs, var(--_tst-dn-br-rs));
454
+ box-shadow: var(
455
+ --_show-shadow,
456
+ var(--_ctm-dn-et-pe-sw-ae, var(--_tst-dn-sw-ae))
457
+ var(--_ctm-dn-et-pe-sw-br, var(--_tst-dn-sw-br))
458
+ var(--_ctm-dn-et-pe-sw-sd, var(--_tst-dn-sw-sd))
459
+ var(--_ctm-dn-et-pe-sw-cr, var(--_tst-dn-sw-cr))
460
+ );
461
+ }
462
+ }
463
+ }
464
+
465
+ // Tooltip SCSS Style Starts Here -
466
+ .tooltipWrapper {
467
+ position: relative;
468
+ display: inline-block;
469
+ cursor: pointer;
470
+ &:hover {
471
+ .tooltipBox {
472
+ opacity: 1;
473
+ }
474
+ }
475
+ }
476
+
477
+ .tooltipBox {
478
+ position: absolute;
479
+ z-index: 1000;
480
+ background-color: #333;
481
+ color: #fff;
482
+ padding: 8px 12px;
483
+ border-radius: 4px;
484
+ font-size: 12px;
485
+ white-space: nowrap;
486
+ visibility: visible;
487
+ opacity: 0;
488
+ transition: opacity 0.2s ease;
489
+
490
+ max-width: 250px;
491
+ width: max-content;
492
+ max-height: 100px;
493
+ word-wrap: break-word;
494
+ white-space: normal;
495
+
496
+ &.top {
497
+ bottom: 100%;
498
+ left: 50%;
499
+ transform: translateX(-50%);
500
+ margin-bottom: 8px;
501
+ }
502
+
503
+ &.top-left {
504
+ bottom: 100%;
505
+ left: 0;
506
+ transform: translateX(0);
507
+ margin-bottom: 8px;
508
+ }
509
+
510
+ &.top-right {
511
+ bottom: 100%;
512
+ right: 0;
513
+ transform: translateX(0);
514
+ margin-bottom: 8px;
515
+ }
516
+
517
+ &.top-center {
518
+ bottom: 100%;
519
+ left: 50%;
520
+ transform: translateX(-50%);
521
+ margin-bottom: 8px;
522
+ }
523
+
524
+ &.bottom {
525
+ top: 100%;
526
+ left: 50%;
527
+ transform: translateX(-50%);
528
+ margin-top: 8px;
529
+ }
530
+
531
+ &.bottom-left {
532
+ top: 100%;
533
+ left: 0;
534
+ transform: translateX(0);
535
+ margin-top: 8px;
536
+ }
537
+
538
+ &.bottom-right {
539
+ top: 100%;
540
+ right: 0;
541
+ transform: translateX(0);
542
+ margin-top: 8px;
543
+ }
544
+
545
+ &.bottom-center {
546
+ top: 100%;
547
+ left: 50%;
548
+ transform: translateX(-50%);
549
+ margin-top: 8px;
550
+ }
551
+
552
+ &.left {
553
+ right: 100%;
554
+ top: 50%;
555
+ transform: translateY(-50%);
556
+ margin-right: 8px;
557
+ }
558
+
559
+ &.left-top {
560
+ right: 100%;
561
+ top: 0;
562
+ transform: translateY(0);
563
+ margin-right: 8px;
564
+ }
565
+
566
+ &.left-center {
567
+ right: 100%;
568
+ top: 50%;
569
+ transform: translateY(-50%);
570
+ margin-right: 8px;
571
+ }
572
+
573
+ &.left-bottom {
574
+ right: 100%;
575
+ bottom: 0;
576
+ transform: translateY(0);
577
+ margin-right: 8px;
578
+ }
579
+
580
+ &.right {
581
+ left: 100%;
582
+ top: 50%;
583
+ transform: translateY(-50%);
584
+ margin-left: 8px;
585
+ }
586
+
587
+ &.right-top {
588
+ left: 100%;
589
+ top: 0;
590
+ transform: translateY(0);
591
+ margin-left: 8px;
592
+ }
593
+
594
+ &.right-center {
595
+ left: 100%;
596
+ top: 50%;
597
+ transform: translateY(-50%);
598
+ margin-left: 8px;
599
+ }
600
+
601
+ &.right-bottom {
602
+ left: 100%;
603
+ bottom: 0;
604
+ transform: translateY(0);
605
+ margin-left: 8px;
606
+ }
607
+ .total-price-container {
608
+ .tax-box {
609
+ display: flex;
610
+ align-items: center;
611
+ justify-content: space-between;
612
+ gap: 5px;
613
+ background-color: var(--_ctm-dn-pt-tx-bd-cr);
614
+ color: var(--_ctm-dn-pt-tx-cr, var(--_tst-dn-dt-se-cr));
615
+ font-family: var(--_ctm-dn-pt-tx-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
616
+ font-size: var(--_ctm-dn-pt-tx-ft-se, var(--_tst-dn-dt-se-ft-se));
617
+ font-weight: var(--_ctm-dn-pt-tx-ft-wt, var(--_tst-dn-dt-se-ft-wt));
618
+ font-style: var(--_ctm-dn-pt-tx-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
619
+ text-align: var(--_ctm-dn-pt-tx-tt-an, var(--_tst-dn-dt-se-tt-an));
620
+ letter-spacing: var(--_ctm-dn-pt-tx-lr-sg, var(--_tst-dn-dt-se-lr-sg));
621
+ line-height: var(--_ctm-dn-pt-tx-le-ht, var(--_tst-dn-dt-se-le-ht));
622
+ text-decoration: var(--_ctm-dn-pt-tx-tt-de, var(--_tst-dn-dt-se-tt-de));
623
+ border-color: var(--_show-border, var(--_ctm-dn-pt-tx-br-cr, var(--_tst-dn-br-cr)));
624
+ border-style: var(--_show-border, var(--_ctm-dn-pt-tx-br-se, var(--_tst-dn-br-se)));
625
+ border-width: var(--_show-border, var(--_ctm-dn-pt-tx-br-wh, var(--_tst-dn-br-wh)));
626
+ border-radius: var(--_ctm-dn-pt-tx-br-rs, var(--_tst-dn-br-rs));
627
+ box-shadow: var(
628
+ --_show-shadow,
629
+ var(--_ctm-dn-pt-tx-sw-ae, var(--_tst-dn-sw-ae))
630
+ var(--_ctm-dn-pt-tx-sw-br, var(--_tst-dn-sw-br))
631
+ var(--_ctm-dn-pt-tx-sw-sd, var(--_tst-dn-sw-sd))
632
+ var(--_ctm-dn-pt-tx-sw-cr, var(--_tst-dn-sw-cr))
633
+ );
634
+ }
635
+ .shipping-box {
636
+ display: flex;
637
+ align-items: center;
638
+ justify-content: space-between;
639
+ gap: 5px;
640
+ background-color: var(--_ctm-dn-pt-sg-pe-bd-cr);
641
+ color: var(--_ctm-dn-pt-sg-pe-cr, var(--_tst-dn-dt-se-cr));
642
+ font-family: var(--_ctm-dn-pt-sg-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
643
+ font-size: var(--_ctm-dn-pt-sg-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
644
+ font-weight: var(--_ctm-dn-pt-sg-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
645
+ font-style: var(--_ctm-dn-pt-sg-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
646
+ text-align: var(--_ctm-dn-pt-sg-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
647
+ letter-spacing: var(--_ctm-dn-pt-sg-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
648
+ line-height: var(--_ctm-dn-pt-sg-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
649
+ text-decoration: var(--_ctm-dn-pt-sg-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
331
650
  border-color: var(
332
651
  --_show-border,
333
- var(--_ctm-dn-cy-ce-se-br-cr, var(--_tst-dn-br-cr))
652
+ var(--_ctm-dn-pt-sg-pe-br-cr, var(--_tst-dn-br-cr))
334
653
  );
335
654
  border-style: var(
336
655
  --_show-border,
337
- var(--_ctm-dn-cy-ce-se-br-se, var(--_tst-dn-br-se))
656
+ var(--_ctm-dn-pt-sg-pe-br-se, var(--_tst-dn-br-se))
338
657
  );
339
658
  border-width: var(
340
659
  --_show-border,
341
- var(--_ctm-dn-cy-ce-se-br-wh, var(--_tst-dn-br-wh))
660
+ var(--_ctm-dn-pt-sg-pe-br-wh, var(--_tst-dn-br-wh))
342
661
  );
343
- border-radius: var(--_ctm-dn-cy-ce-se-br-rs, var(--_tst-dn-br-rs));
662
+ border-radius: var(--_ctm-dn-pt-sg-pe-br-rs, var(--_tst-dn-br-rs));
344
663
  box-shadow: var(
345
664
  --_show-shadow,
346
- var(--_ctm-dn-cy-ce-se-sw-ae, var(--_tst-dn-sw-ae))
347
- var(--_ctm-dn-cy-ce-se-sw-br, var(--_tst-dn-sw-br))
348
- var(--_ctm-dn-cy-ce-se-sw-sd, var(--_tst-dn-sw-sd))
349
- var(--_ctm-dn-cy-ce-se-sw-cr, var(--_tst-dn-sw-cr))
665
+ var(--_ctm-dn-pt-sg-pe-sw-ae, var(--_tst-dn-sw-ae))
666
+ var(--_ctm-dn-pt-sg-pe-sw-br, var(--_tst-dn-sw-br))
667
+ var(--_ctm-dn-pt-sg-pe-sw-sd, var(--_tst-dn-sw-sd))
668
+ var(--_ctm-dn-pt-sg-pe-sw-cr, var(--_tst-dn-sw-cr))
669
+ );
670
+ }
671
+ .embellishment-box {
672
+ display: flex;
673
+ align-items: center;
674
+ justify-content: space-between;
675
+ gap: 5px;
676
+ background-color: var(--_ctm-dn-et-pe-bd-cr);
677
+ color: var(--_ctm-dn-et-pe-cr, var(--_tst-dn-dt-se-cr));
678
+ font-family: var(--_ctm-dn-et-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
679
+ font-size: var(--_ctm-dn-et-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
680
+ font-weight: var(--_ctm-dn-et-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
681
+ font-style: var(--_ctm-dn-et-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
682
+ text-align: var(--_ctm-dn-et-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
683
+ letter-spacing: var(--_ctm-dn-et-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
684
+ line-height: var(--_ctm-dn-et-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
685
+ text-decoration: var(--_ctm-dn-et-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
686
+ border-color: var(--_show-border, var(--_ctm-dn-et-pe-br-cr, var(--_tst-dn-br-cr)));
687
+ border-style: var(--_show-border, var(--_ctm-dn-et-pe-br-se, var(--_tst-dn-br-se)));
688
+ border-width: var(--_show-border, var(--_ctm-dn-et-pe-br-wh, var(--_tst-dn-br-wh)));
689
+ border-radius: var(--_ctm-dn-et-pe-br-rs, var(--_tst-dn-br-rs));
690
+ box-shadow: var(
691
+ --_show-shadow,
692
+ var(--_ctm-dn-et-pe-sw-ae, var(--_tst-dn-sw-ae))
693
+ var(--_ctm-dn-et-pe-sw-br, var(--_tst-dn-sw-br))
694
+ var(--_ctm-dn-et-pe-sw-sd, var(--_tst-dn-sw-sd))
695
+ var(--_ctm-dn-et-pe-sw-cr, var(--_tst-dn-sw-cr))
350
696
  );
351
697
  }
352
698
  }
353
699
  }
354
- .total-price-container {
355
- .tax-box {
356
- display: flex;
357
- align-items: center;
358
- gap: 5px;
359
- background-color: var(--_ctm-dn-pt-tx-bd-cr);
360
- color: var(--_ctm-dn-pt-tx-cr, var(--_tst-dn-dt-se-cr));
361
- font-family: var(--_ctm-dn-pt-tx-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
362
- font-size: var(--_ctm-dn-pt-tx-ft-se, var(--_tst-dn-dt-se-ft-se));
363
- font-weight: var(--_ctm-dn-pt-tx-ft-wt, var(--_tst-dn-dt-se-ft-wt));
364
- font-style: var(--_ctm-dn-pt-tx-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
365
- text-align: var(--_ctm-dn-pt-tx-tt-an, var(--_tst-dn-dt-se-tt-an));
366
- letter-spacing: var(--_ctm-dn-pt-tx-lr-sg, var(--_tst-dn-dt-se-lr-sg));
367
- line-height: var(--_ctm-dn-pt-tx-le-ht, var(--_tst-dn-dt-se-le-ht));
368
- text-decoration: var(--_ctm-dn-pt-tx-tt-de, var(--_tst-dn-dt-se-tt-de));
369
- border-color: var(--_show-border, var(--_ctm-dn-pt-tx-br-cr, var(--_tst-dn-br-cr)));
370
- border-style: var(--_show-border, var(--_ctm-dn-pt-tx-br-se, var(--_tst-dn-br-se)));
371
- border-width: var(--_show-border, var(--_ctm-dn-pt-tx-br-wh, var(--_tst-dn-br-wh)));
372
- border-radius: var(--_ctm-dn-pt-tx-br-rs, var(--_tst-dn-br-rs));
373
- box-shadow: var(
374
- --_show-shadow,
375
- var(--_ctm-dn-pt-tx-sw-ae, var(--_tst-dn-sw-ae))
376
- var(--_ctm-dn-pt-tx-sw-br, var(--_tst-dn-sw-br))
377
- var(--_ctm-dn-pt-tx-sw-sd, var(--_tst-dn-sw-sd))
378
- var(--_ctm-dn-pt-tx-sw-cr, var(--_tst-dn-sw-cr))
379
- );
380
- }
381
- .shipping-box {
382
- display: flex;
383
- align-items: center;
384
- gap: 5px;
385
- background-color: var(--_ctm-dn-pt-sg-pe-bd-cr);
386
- color: var(--_ctm-dn-pt-sg-pe-cr, var(--_tst-dn-dt-se-cr));
387
- font-family: var(--_ctm-dn-pt-sg-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
388
- font-size: var(--_ctm-dn-pt-sg-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
389
- font-weight: var(--_ctm-dn-pt-sg-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
390
- font-style: var(--_ctm-dn-pt-sg-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
391
- text-align: var(--_ctm-dn-pt-sg-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
392
- letter-spacing: var(--_ctm-dn-pt-sg-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
393
- line-height: var(--_ctm-dn-pt-sg-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
394
- text-decoration: var(--_ctm-dn-pt-sg-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
395
- border-color: var(--_show-border, var(--_ctm-dn-pt-sg-pe-br-cr, var(--_tst-dn-br-cr)));
396
- border-style: var(--_show-border, var(--_ctm-dn-pt-sg-pe-br-se, var(--_tst-dn-br-se)));
397
- border-width: var(--_show-border, var(--_ctm-dn-pt-sg-pe-br-wh, var(--_tst-dn-br-wh)));
398
- border-radius: var(--_ctm-dn-pt-sg-pe-br-rs, var(--_tst-dn-br-rs));
399
- box-shadow: var(
400
- --_show-shadow,
401
- var(--_ctm-dn-pt-sg-pe-sw-ae, var(--_tst-dn-sw-ae))
402
- var(--_ctm-dn-pt-sg-pe-sw-br, var(--_tst-dn-sw-br))
403
- var(--_ctm-dn-pt-sg-pe-sw-sd, var(--_tst-dn-sw-sd))
404
- var(--_ctm-dn-pt-sg-pe-sw-cr, var(--_tst-dn-sw-cr))
405
- );
406
- }
407
- .embellishment-box {
408
- display: flex;
409
- align-items: center;
410
- gap: 5px;
411
- background-color: var(--_ctm-dn-et-pe-bd-cr);
412
- color: var(--_ctm-dn-et-pe-cr, var(--_tst-dn-dt-se-cr));
413
- font-family: var(--_ctm-dn-et-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
414
- font-size: var(--_ctm-dn-et-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
415
- font-weight: var(--_ctm-dn-et-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
416
- font-style: var(--_ctm-dn-et-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
417
- text-align: var(--_ctm-dn-et-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
418
- letter-spacing: var(--_ctm-dn-et-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
419
- line-height: var(--_ctm-dn-et-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
420
- text-decoration: var(--_ctm-dn-et-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
421
- border-color: var(--_show-border, var(--_ctm-dn-et-pe-br-cr, var(--_tst-dn-br-cr)));
422
- border-style: var(--_show-border, var(--_ctm-dn-et-pe-br-se, var(--_tst-dn-br-se)));
423
- border-width: var(--_show-border, var(--_ctm-dn-et-pe-br-wh, var(--_tst-dn-br-wh)));
424
- border-radius: var(--_ctm-dn-et-pe-br-rs, var(--_tst-dn-br-rs));
425
- box-shadow: var(
426
- --_show-shadow,
427
- var(--_ctm-dn-et-pe-sw-ae, var(--_tst-dn-sw-ae))
428
- var(--_ctm-dn-et-pe-sw-br, var(--_tst-dn-sw-br))
429
- var(--_ctm-dn-et-pe-sw-sd, var(--_tst-dn-sw-sd))
430
- var(--_ctm-dn-et-pe-sw-cr, var(--_tst-dn-sw-cr))
431
- );
700
+
701
+ .tooltipArrow {
702
+ position: absolute;
703
+ width: 0;
704
+ height: 0;
705
+ border-style: solid;
706
+
707
+ &.top {
708
+ bottom: -4px;
709
+ left: 50%;
710
+ transform: translateX(-50%);
711
+ border-width: 4px 4px 0 4px;
712
+ border-color: #333 transparent transparent transparent;
713
+ }
714
+
715
+ &.top-left {
716
+ bottom: -4px;
717
+ left: 10px;
718
+ transform: translateX(0);
719
+ border-width: 4px 4px 0 4px;
720
+ border-color: #333 transparent transparent transparent;
721
+ }
722
+
723
+ &.top-right {
724
+ bottom: -4px;
725
+ right: 10px;
726
+ transform: translateX(0);
727
+ border-width: 4px 4px 0 4px;
728
+ border-color: #333 transparent transparent transparent;
729
+ }
730
+
731
+ &.top-center {
732
+ bottom: -4px;
733
+ left: 50%;
734
+ transform: translateX(-50%);
735
+ border-width: 4px 4px 0 4px;
736
+ border-color: #333 transparent transparent transparent;
737
+ }
738
+
739
+ &.bottom {
740
+ top: -4px;
741
+ left: 50%;
742
+ transform: translateX(-50%);
743
+ border-width: 0 4px 4px 4px;
744
+ border-color: transparent transparent #333 transparent;
745
+ }
746
+
747
+ &.bottom-left {
748
+ top: -4px;
749
+ left: 10px;
750
+ transform: translateX(0);
751
+ border-width: 0 4px 4px 4px;
752
+ border-color: transparent transparent #333 transparent;
753
+ }
754
+
755
+ &.bottom-right {
756
+ top: -4px;
757
+ right: 10px;
758
+ transform: translateX(0);
759
+ border-width: 0 4px 4px 4px;
760
+ border-color: transparent transparent #333 transparent;
761
+ }
762
+
763
+ &.bottom-center {
764
+ top: -4px;
765
+ left: 50%;
766
+ transform: translateX(-50%);
767
+ border-width: 0 4px 4px 4px;
768
+ border-color: transparent transparent #333 transparent;
769
+ }
770
+
771
+ &.left {
772
+ right: -4px;
773
+ top: 50%;
774
+ transform: translateY(-50%);
775
+ border-width: 4px 0 4px 4px;
776
+ border-color: transparent transparent transparent #333;
777
+ }
778
+
779
+ &.left-top {
780
+ right: -4px;
781
+ top: 10px;
782
+ transform: translateY(0);
783
+ border-width: 4px 0 4px 4px;
784
+ border-color: transparent transparent transparent #333;
785
+ }
786
+
787
+ &.left-center {
788
+ right: -4px;
789
+ top: 50%;
790
+ transform: translateY(-50%);
791
+ border-width: 4px 0 4px 4px;
792
+ border-color: transparent transparent transparent #333;
793
+ }
794
+
795
+ &.left-bottom {
796
+ right: -4px;
797
+ bottom: 10px;
798
+ transform: translateY(0);
799
+ border-width: 4px 0 4px 4px;
800
+ border-color: transparent transparent transparent #333;
801
+ }
802
+
803
+ &.right {
804
+ left: -4px;
805
+ top: 50%;
806
+ transform: translateY(-50%);
807
+ border-width: 4px 4px 4px 0;
808
+ border-color: transparent #333 transparent transparent;
809
+ }
810
+
811
+ &.right-top {
812
+ left: -4px;
813
+ top: 10px;
814
+ transform: translateY(0);
815
+ border-width: 4px 4px 4px 0;
816
+ border-color: transparent #333 transparent transparent;
817
+ }
818
+
819
+ &.right-center {
820
+ left: -4px;
821
+ top: 50%;
822
+ transform: translateY(-50%);
823
+ border-width: 4px 4px 4px 0;
824
+ border-color: transparent #333 transparent transparent;
825
+ }
826
+
827
+ &.right-bottom {
828
+ left: -4px;
829
+ bottom: 10px;
830
+ transform: translateY(0);
831
+ border-width: 4px 4px 4px 0;
832
+ border-color: transparent #333 transparent transparent;
432
833
  }
433
834
  }
835
+ // Tooltip SCSS Style Ends Here -
434
836
  }
435
837
  }
436
838
  }