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

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