@sc-360-v2/storefront-cms-library 0.3.61 → 0.3.63

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 (47) hide show
  1. package/dist/add-products-tab copy.scss +9 -8
  2. package/dist/add-products-tab.scss +9 -8
  3. package/dist/badge.scss +87 -83
  4. package/dist/builder.js +1 -1
  5. package/dist/buyForHeaders.scss +6086 -1184
  6. package/dist/cart-details.scss +26 -22
  7. package/dist/cart-summary.scss +17 -143
  8. package/dist/cart-wrapper.scss +127 -0
  9. package/dist/cartDropdownOverlay.scss +23 -4
  10. package/dist/checkout.scss +96 -573
  11. package/dist/dropdownTemplate.scss +58 -4
  12. package/dist/icon-list.scss +25 -19
  13. package/dist/icons.js +1 -1
  14. package/dist/image-for-product.scss +19 -0
  15. package/dist/index.js +1 -1
  16. package/dist/item-stock.scss +27 -26
  17. package/dist/mega-menu-container.scss +96 -0
  18. package/dist/mega-menu.scss +832 -0
  19. package/dist/menu-v2.scss +30 -5
  20. package/dist/modal.scss +168 -8
  21. package/dist/order-status.scss +18 -15
  22. package/dist/past-orders.scss +279 -271
  23. package/dist/payment-methods.scss +72 -69
  24. package/dist/position-module.scss +2 -1
  25. package/dist/prefix-list.scss +3 -0
  26. package/dist/quick-links.scss +49 -46
  27. package/dist/quick-order-pad.scss +3 -0
  28. package/dist/quotes.scss +123 -117
  29. package/dist/rfqs.scss +123 -117
  30. package/dist/simple-list.scss +264 -0
  31. package/dist/table.scss +3 -9
  32. package/dist/templates.scss +299 -0
  33. package/dist/types/builder/elements/cart-wrapper/index.d.ts +44 -0
  34. package/dist/types/builder/elements/mega-menu/index.d.ts +47 -0
  35. package/dist/types/builder/elements/mega-menu-container/index.d.ts +44 -0
  36. package/dist/types/builder/elements/simple-list/index.d.ts +47 -0
  37. package/dist/types/builder/enums/index.d.ts +7 -1
  38. package/dist/types/builder/index.d.ts +5 -1
  39. package/dist/types/builder/tools/element-edit/cart-wrapper.d.ts +16 -0
  40. package/dist/types/builder/tools/element-edit/index.d.ts +5 -1
  41. package/dist/types/builder/tools/element-edit/mega-menu.d.ts +41 -0
  42. package/dist/types/builder/tools/element-edit/megaMenuContainer.d.ts +9 -0
  43. package/dist/types/builder/tools/element-edit/simple-list.d.ts +37 -0
  44. package/dist/types/website/constants/data-connectors.d.ts +18 -0
  45. package/dist/website.js +1 -1
  46. package/dist/widget.scss +4 -0
  47. package/package.json +1 -1
@@ -250,11 +250,21 @@ $resizeActive: '[data-cms-element-resizer="true"]';
250
250
  display: flex;
251
251
  flex-direction: column;
252
252
  gap: 12px;
253
+ font-weight: normal;
253
254
 
254
255
  .radio-label {
255
- display: flex;
256
+ display: inline-flex;
256
257
  align-items: center;
257
258
  gap: 8px;
259
+ cursor: pointer;
260
+ width: fit-content;
261
+ span {
262
+ color: var(--_gray-500);
263
+ span {
264
+ color: var(--_gray-900);
265
+ font-weight: 500;
266
+ }
267
+ }
258
268
  }
259
269
  }
260
270
 
@@ -273,6 +283,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
273
283
  align-items: center;
274
284
  gap: 1rem;
275
285
 
286
+ .dropdown {
287
+ display: flex;
288
+ flex-direction: column;
289
+ gap: 6px;
290
+ }
291
+
276
292
  // .dropdown {
277
293
  // flex: 1;
278
294
  // display: flex;
@@ -353,6 +369,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
353
369
  white-space: nowrap;
354
370
  align-self: stretch;
355
371
  align-items: flex-start;
372
+ margin-left: 130px;
356
373
 
357
374
  .delete-icon-container {
358
375
  display: flex;
@@ -468,29 +485,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
468
485
 
469
486
  .product_image {
470
487
  width: 130px;
471
- background-size: 100%;
488
+ background-size: contain;
472
489
  height: 130px;
490
+ background-color: var(--_gray-50);
491
+ border-radius: 4px;
473
492
  background-repeat: no-repeat;
474
493
  background-position: center;
475
- background-color: #eaeaea;
476
-
477
- border-style: var(
478
- --_ctm-mob-dn-pt-ie-ss-br-se,
479
- var(--_ctm-tab-dn-pt-ie-ss-br-se, var(--_ctm-dn-pt-ie-ss-br-se))
480
- );
481
- border-width: var(
482
- --_ctm-mob-dn-pt-ie-ss-br-wh,
483
- var(--_ctm-tab-dn-pt-ie-ss-br-wh, var(--_ctm-dn-pt-ie-ss-br-wh))
484
- );
485
- // border: ;
486
- border-radius: var(
487
- --_ctm-mob-dn-pt-ie-ss-br-rs,
488
- var(--_ctm-tab-dn-pt-ie-ss-br-rs, var(--_ctm-dn-pt-ie-ss-br-rs))
489
- );
490
- border-color: var(
491
- --_ctm-mob-dn-pt-ie-ss-br-cr,
492
- var(--_ctm-tab-dn-pt-ie-ss-br-cr, var(--_ctm-dn-pt-ie-ss-br-cr))
493
- );
494
+ border: 1px solid var(--_gray-200);
494
495
  }
495
496
 
496
497
  .product_info_wrapper {
@@ -565,7 +566,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
565
566
  .product_code {
566
567
  display: flex;
567
568
  align-items: center;
568
- gap: 6px;
569
569
  align-self: stretch;
570
570
  flex-wrap: wrap;
571
571
 
@@ -905,6 +905,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
905
905
  display: flex;
906
906
  align-items: center;
907
907
  gap: 16px;
908
+ & > a,
909
+ span {
910
+ cursor: pointer;
911
+ }
908
912
  & > * {
909
913
  display: flex;
910
914
  align-items: center;
@@ -248,46 +248,18 @@ $resizeActive: '[data-cms-element-resizer="true"]';
248
248
  var(--_ctm-tab-dn-pt-wt-pt-wt-im-im-gp, var(--_ctm-dn-pt-wt-pt-wt-im-im-gp))
249
249
  );
250
250
  align-items: flex-start;
251
-
252
- .cart_summary_product_img {
251
+ .cart_summary_pro_container {
253
252
  width: 80px;
254
253
  height: 80px;
255
- background-color: var(
256
- --_ctm-mob-dn-pt-wt-pt-ie-bd-cr,
257
- var(--_ctm-tab-dn-pt-wt-pt-ie-bd-cr, var(--_ctm-dn-pt-wt-pt-ie-bd-cr))
258
- );
259
- border-color: var(
260
- --_ctm-mob-dn-pt-wt-pt-ie-br-cr,
261
- var(--_ctm-tab-dn-pt-wt-pt-ie-br-cr, var(--_ctm-dn-pt-wt-pt-ie-br-cr))
262
- );
263
- border-style: var(
264
- --_ctm-mob-dn-pt-wt-pt-ie-br-se,
265
- var(--_ctm-tab-dn-pt-wt-pt-ie-br-se, var(--_ctm-dn-pt-wt-pt-ie-br-se))
266
- );
267
- border-width: var(
268
- --_ctm-mob-dn-pt-wt-pt-ie-br-wh,
269
- var(--_ctm-tab-dn-pt-wt-pt-ie-br-wh, var(--_ctm-dn-pt-wt-pt-ie-br-wh))
270
- );
271
- border-radius: var(
272
- --_ctm-mob-dn-pt-wt-pt-ie-br-rs,
273
- var(--_ctm-tab-dn-pt-wt-pt-ie-br-rs, var(--_ctm-dn-pt-wt-pt-ie-br-rs))
274
- );
275
- box-shadow: var(
276
- --_ctm-mob-dn-pt-wt-pt-ie-sw-ae,
277
- var(--_ctm-tab-dn-pt-wt-pt-ie-sw-ae, var(--_ctm-dn-pt-wt-pt-ie-sw-ae))
278
- )
279
- var(
280
- --_ctm-mob-dn--pt-wt-pt-ie-sw-br,
281
- var(--_ctm-tab-dn--pt-wt-pt-ie-sw-br, var(--_ctm-dn--pt-wt-pt-ie-sw-br))
282
- )
283
- var(
284
- --_ctm-mob-dn-pt-wt-pt-ie-sw-sd,
285
- var(--_ctm-tab-dn-pt-wt-pt-ie-sw-sd, var(--_ctm-dn-pt-wt-pt-ie-sw-sd))
286
- )
287
- var(
288
- --_ctm-mob-dn-pt-wt-pt-ie-sw-cr,
289
- var(--_ctm-tab-dn-pt-wt-pt-ie-sw-cr, var(--_ctm-dn-pt-wt-pt-ie-sw-cr))
290
- );
254
+ display: flex;
255
+ justify-content: center;
256
+ align-items: center;
257
+ border: 1px solid var(--_gray-200);
258
+ border-radius: 4px;
259
+ .cart_summary_product_img {
260
+ max-width: 100%;
261
+ max-height: 100%;
262
+ }
291
263
  }
292
264
 
293
265
  .cart_summary_product_content_wrapper {
@@ -535,42 +507,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
535
507
  align-self: stretch;
536
508
  justify-content: space-between;
537
509
  .cart_summary_number_text {
538
- font-family: var(
539
- --_ctm-mob-dn-nr-of-is-ft-fy,
540
- var(--_ctm-tab-dn-nr-of-is-ft-fy, var(--_ctm-dn-nr-of-is-ft-fy))
541
- );
542
- color: var(
543
- --_ctm-mob-dn-nr-of-is-cr,
544
- var(--_ctm-tab-dn-nr-of-is-cr, var(--_ctm-dn-nr-of-is-cr))
545
- );
546
- font-weight: var(
547
- --_ctm-mob-dn-nr-of-is-ft-wt,
548
- var(--_ctm-tab-dn-nr-of-is-ft-wt, var(--_ctm-dn-nr-of-is-ft-wt))
549
- );
550
- font-size: var(
551
- --_ctm-mob-dn-nr-of-is-ft-se,
552
- var(--_ctm-tab-dn-nr-of-is-ft-se, var(--_ctm-dn-nr-of-is-ft-se))
553
- );
554
- text-decoration: var(
555
- --_ctm-mob-dn-nr-of-is-ue,
556
- var(--_ctm-tab-dn-nr-of-is-ue, var(--_ctm-dn-nr-of-is-ue))
557
- );
558
- letter-spacing: var(
559
- --_ctm-mob-dn-nr-of-is-lr-sg,
560
- var(--_ctm-tab-dn-nr-of-is-lr-sg, var(--_ctm-dn-nr-of-is-lr-sg))
561
- );
562
- line-height: var(
563
- --_ctm-mob-dn-nr-of-is-le-ht,
564
- var(--_ctm-tab-dn-nr-of-is-le-ht, var(--_ctm-dn-nr-of-is-le-ht))
565
- );
566
- font-style: var(
567
- --_ctm-mob-dn-nr-of-is-ft-se-ic,
568
- var(--_ctm-tab-dn-nr-of-is-ft-se-ic, var(--_ctm-dn-nr-of-is-ft-se-ic))
569
- );
570
- text-align: var(
571
- --_ctm-mob-dn-nr-of-is-tt-an,
572
- var(--_ctm-tab-dn-nr-of-is-tt-an, var(--_ctm-dn-nr-of-is-tt-an))
573
- );
510
+ color: var(--_gray-500);
511
+ font-size: 14px;
512
+ font-weight: 400;
574
513
  }
575
514
  .cart_summary_number_value {
576
515
  font-family: var(
@@ -616,42 +555,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
616
555
  flex-direction: column;
617
556
  gap: 8px;
618
557
  .cart_summary_shippingLabel_text {
619
- font-family: var(
620
- --_ctm-mob-dn-sg-cs-ft-fy,
621
- var(--_ctm-tab-dn-sg-cs-ft-fy, var(--_ctm-dn-sg-cs-ft-fy))
622
- );
623
- color: var(
624
- --_ctm-mob-dn-sg-cs-cr,
625
- var(--_ctm-tab-dn-sg-cs-cr, var(--_ctm-dn-sg-cs-cr))
626
- );
627
- font-weight: var(
628
- --_ctm-mob-dn-sg-cs-ft-wt,
629
- var(--_ctm-tab-dn-sg-cs-ft-wt, var(--_ctm-dn-sg-cs-ft-wt))
630
- );
631
- font-size: var(
632
- --_ctm-mob-dn-sg-cs-ft-se,
633
- var(--_ctm-tab-dn-sg-cs-ft-se, var(--_ctm-dn-sg-cs-ft-se))
634
- );
635
- text-decoration: var(
636
- --_ctm-mob-dn-sg-cs-ue,
637
- var(--_ctm-tab-dn-sg-cs-ue, var(--_ctm-dn-sg-cs-ue))
638
- );
639
- letter-spacing: var(
640
- --_ctm-mob-dn-sg-cs-lr-sg,
641
- var(--_ctm-tab-dn-sg-cs-lr-sg, var(--_ctm-dn-sg-cs-lr-sg))
642
- );
643
- line-height: var(
644
- --_ctm-mob-dn-sg-cs-le-ht,
645
- var(--_ctm-tab-dn-sg-cs-le-ht, var(--_ctm-dn-sg-cs-le-ht))
646
- );
647
- font-style: var(
648
- --_ctm-mob-dn-sg-cs-ft-se-ic,
649
- var(--_ctm-tab-dn-sg-cs-ft-se-ic, var(--_ctm-dn-sg-cs-ft-se-ic))
650
- );
651
- text-align: var(
652
- --_ctm-mob-dn-sg-cs-tt-an,
653
- var(--_ctm-tab-dn-sg-cs-tt-an, var(--_ctm-dn-sg-cs-tt-an))
654
- );
558
+ font-size: 14px;
559
+ color: var(--_gray-500);
655
560
  }
656
561
  .cart_summary_shippingLabel_value {
657
562
  font-family: var(
@@ -692,39 +597,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
692
597
  );
693
598
  }
694
599
  .cart_summary_tax_text {
695
- font-family: var(
696
- --_ctm-mob-dn-tx-ft-fy,
697
- var(--_ctm-tab-dn-tx-ft-fy, var(--_ctm-dn-tx-ft-fy))
698
- );
699
- color: var(--_ctm-mob-dn-tx-cr, var(--_ctm-tab-dn-tx-cr, var(--_ctm-dn-tx-cr)));
700
- font-weight: var(
701
- --_ctm-mob-dn-tx-ft-wt,
702
- var(--_ctm-tab-dn-tx-ft-wt, var(--_ctm-dn-tx-ft-wt))
703
- );
704
- font-size: var(
705
- --_ctm-mob-dn-tx-ft-se,
706
- var(--_ctm-tab-dn-tx-ft-se, var(--_ctm-dn-tx-ft-se))
707
- );
708
- text-decoration: var(
709
- --_ctm-mob-dn-tx-ue,
710
- var(--_ctm-tab-dn-tx-ue, var(--_ctm-dn-tx-ue))
711
- );
712
- letter-spacing: var(
713
- --_ctm-mob-dn-tx-lr-sg,
714
- var(--_ctm-tab-dn-tx-lr-sg, var(--_ctm-dn-tx-lr-sg))
715
- );
716
- line-height: var(
717
- --_ctm-mob-dn-tx-le-ht,
718
- var(--_ctm-tab-dn-tx-le-ht, var(--_ctm-dn-tx-le-ht))
719
- );
720
- font-style: var(
721
- --_ctm-mob-dn-tx-ft-se-ic,
722
- var(--_ctm-tab-dn-tx-ft-se-ic, var(--_ctm-dn-tx-ft-se-ic))
723
- );
724
- text-align: var(
725
- --_ctm-mob-dn-tx-tt-an,
726
- var(--_ctm-tab-dn-tx-tt-an, var(--_ctm-dn-tx-tt-an))
727
- );
600
+ font-size: 14px;
601
+ color: var(--_gray-500);
728
602
  }
729
603
  .cart_summary_tax_value {
730
604
  font-family: var(
@@ -0,0 +1,127 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $activeElementSelector: "[data-has-clicked='true']";
5
+ [data-div-type="element"] {
6
+ &[data-element-type="cartWrapper"] {
7
+ // width: var(--_sf-cartw-nw-wh);
8
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
9
+ // width: calc(
10
+ // 1% *
11
+ // var(
12
+ // --_ctm-mob-cartw-ele-nw-wh-vl,
13
+ // var(--_ctm-tab-cartw-ele-nw-wh-vl, var(--_ctm-cartw-ele-nw-wh-vl)),
14
+ // auto
15
+ // )
16
+ // );
17
+ // width: 100%;
18
+ // height: var(--_ctm-cartw-lt-ht);
19
+
20
+ width: calc(
21
+ 1% *
22
+ var(
23
+ --_ctm-mob-cartw-ele-nw-wh-vl,
24
+ var(--_ctm-tab-cartw-ele-nw-wh-vl, var(--_ctm-cartw-ele-nw-wh-vl, auto))
25
+ )
26
+ );
27
+ margin: var(
28
+ --_ctm-mob-cartw-lt-mn,
29
+ var(--_ctm-tab-cartw-lt-mn, var(--_ctm-cartw-lt-mn, var(--_ctm-lt-mn)))
30
+ );
31
+
32
+ &[data-view-state="full"] {
33
+ & > .wrapper {
34
+ grid-template-rows: auto !important;
35
+ }
36
+ }
37
+ & > div {
38
+ &.wrapper {
39
+ width: 100%;
40
+ min-height: prepareMediaVariable(--_ctm-cartw-lt-mn-ht);
41
+ padding: var(--_ctm-mob-cartw-lt-pg, var(--_ctm-tab-cartw-lt-pg, var(--_ctm-cartw-lt-pg)));
42
+
43
+ background-color: var(
44
+ --_ctm-mob-cartw-dn-bd-cr,
45
+ var(--_ctm-tab-cartw-dn-bd-cr, var(--_ctm-cartw-dn-bd-cr))
46
+ );
47
+ background-image: var(
48
+ --_ctm-mob-cartw-dn-bd-ie,
49
+ var(--_ctm-tab-cartw-dn-bd-ie, var(--_ctm-cartw-dn-bd-ie))
50
+ );
51
+ background-attachment: var(
52
+ --_ctm-mob-cartw-dn-bd-at,
53
+ var(--_ctm-tab-cartw-dn-bd-at, var(--_ctm-cartw-dn-bd-at))
54
+ );
55
+ background-position: var(
56
+ --_ctm-mob-cartw-dn-bd-pn,
57
+ var(--_ctm-tab-cartw-dn-bd-pn, var(--_ctm-cartw-dn-bd-pn))
58
+ );
59
+ background-repeat: var(
60
+ --_ctm-mob-cartw-dn-bd-rt,
61
+ var(--_ctm-tab-cartw-dn-bd-rt, var(--_ctm-cartw-dn-bd-rt))
62
+ );
63
+ background-size: var(
64
+ --_ctm-mob-cartw-dn-bd-se,
65
+ var(--_ctm-tab-cartw-dn-bd-se, var(--_ctm-cartw-dn-bd-se))
66
+ );
67
+ border-radius: var(
68
+ --_ctm-mob-cartw-dn-br-rs,
69
+ var(--_ctm-tab-cartw-dn-br-rs, var(--_ctm-cartw-dn-br-rs))
70
+ );
71
+ border-color: var(
72
+ --_ctm-mob-cartw-dn-br-cr,
73
+ var(--_ctm-tab-cartw-dn-br-cr, var(--_ctm-cartw-dn-br-cr))
74
+ );
75
+ border-style: var(
76
+ --_ctm-mob-cartw-dn-br-se,
77
+ var(--_ctm-tab-cartw-dn-br-se, var(--_ctm-cartw-dn-br-se))
78
+ );
79
+ border-width: var(
80
+ --_ctm-mob-cartw-dn-br-wh,
81
+ var(--_ctm-tab-cartw-dn-br-wh, var(--_ctm-cartw-dn-br-wh))
82
+ );
83
+ box-shadow: var(
84
+ --_hover-show-shadow,
85
+ var(
86
+ --_sf-hr-bx-sw,
87
+ var(
88
+ --_show-shadow,
89
+ var(
90
+ --_ctm-mob-dn-dt-se-sw-ae,
91
+ var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
92
+ )
93
+ var(
94
+ --_ctm-mob-dn-dt-se-sw-br,
95
+ var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
96
+ )
97
+ var(
98
+ --_ctm-mob-dn-dt-se-sw-sd,
99
+ var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
100
+ )
101
+ var(
102
+ --_ctm-mob-dn-dt-se-sw-cr,
103
+ var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
104
+ )
105
+ )
106
+ )
107
+ );
108
+ }
109
+ }
110
+
111
+ // &[data-view-state="full"] {
112
+ // width: auto;
113
+ // margin: 0;
114
+ // justify-self: stretch !important;
115
+ // align-self: stretch !important;
116
+ // cursor: auto;
117
+ // &:is(#{$activeElementSelector}) {
118
+ // & > div {
119
+ // &[data-div-type="wrapper__layer"] {
120
+ // --_sf-vt-zz: visible;
121
+ // --_sf-op-zz: 1;
122
+ // }
123
+ // }
124
+ // }
125
+ // }
126
+ }
127
+ }
@@ -16,6 +16,7 @@ $button-padding: 6px 12px;
16
16
  .cart-dropdown-container {
17
17
  position: relative;
18
18
  display: inline-block;
19
+
19
20
  .overlay-panel {
20
21
  margin-top: 10px;
21
22
  }
@@ -120,6 +121,23 @@ $button-padding: 6px 12px;
120
121
  max-height: 250px;
121
122
  padding: 4px;
122
123
  overflow-y: auto;
124
+ display: flex;
125
+ flex-direction: column;
126
+ gap: 2px;
127
+ &.empty_message {
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ font-size: 14px;
132
+ font-weight: 500;
133
+ height: 100%;
134
+ .option {
135
+ cursor: auto;
136
+ &:hover {
137
+ background-color: none !important;
138
+ }
139
+ }
140
+ }
123
141
 
124
142
  .option {
125
143
  display: flex;
@@ -161,6 +179,7 @@ $button-padding: 6px 12px;
161
179
  margin-right: 8px;
162
180
  width: auto;
163
181
  cursor: pointer;
182
+ accent-color: var(--_primary-400);
164
183
  }
165
184
 
166
185
  input[type="radio"] {
@@ -184,18 +203,18 @@ $button-padding: 6px 12px;
184
203
  .dropdown_overlay_secondary_button {
185
204
  background: transparent;
186
205
  border: 1px solid transparent;
187
- color: $text-color;
206
+ color: var(--_gray-600);
188
207
  cursor: pointer;
189
208
  display: flex;
190
209
  align-items: center;
191
210
  justify-content: center;
192
211
  flex: 1 0 0;
193
212
  margin: $spacing-md 0px;
213
+ border-radius: 4px;
194
214
 
195
215
  &:hover {
196
- border: 1px solid $primary-color;
197
- border-radius: 4px;
198
- color: $primary-color;
216
+ color: var(--_primary-400);
217
+ background-color: var(--_gray-100);
199
218
  }
200
219
  }
201
220