@sc-360-v2/storefront-cms-library 0.4.85 → 0.4.88

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.
@@ -1,13 +1,19 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
3
  @use "./functions.scss" as *;
4
+ $overflowSelector: ".flex__overflow";
4
5
 
5
6
  $resizerId: "[data-cms-tool='cms-element-resizer']";
6
7
  $resizeActive: '[data-cms-element-resizer="true"]';
8
+ $defaultValues: (
9
+ --_sf-flex-direckdaka-mobile: getListOfResponsive(row, column),
10
+ --_sf-flex-embla-pd-daka-mobile: getListOfResponsive(10px, 10px 0px),
11
+ --_sf-sc-pt-lt-we-se: getListOfResponsive(nowrap, break-spaces),
12
+ );
7
13
  [data-div-type="element"] {
8
14
  &[data-element-type="allocationDetails"] {
9
15
  // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
10
-
16
+ @include prepareMediaQueries($defaultValues);
11
17
  width: var(
12
18
  --_sf-el-wh-st-mx,
13
19
  calc(
@@ -161,7 +167,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
161
167
  width: 100%;
162
168
  display: flex;
163
169
  flex-direction: column;
164
- gap: 18px;
170
+ gap: prepareMediaVariable(--_ctm-lt-an-im-gp, 18px);
165
171
 
166
172
  // height: 100vh;/
167
173
  // overflow-y: auto;
@@ -169,6 +175,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
169
175
  .allocation__item {
170
176
  @import "./product-image-allocation.scss";
171
177
 
178
+ .product__image_element {
179
+ flex: 0 0 prepareMediaVariable(--_ctm-dn-ie-lt-wh);
180
+ }
181
+
172
182
  display: flex;
173
183
  flex-direction: column;
174
184
  gap: 10px;
@@ -578,37 +588,98 @@ $resizeActive: '[data-cms-element-resizer="true"]';
578
588
  }
579
589
  .product__views {
580
590
  display: flex;
581
- background-color: #fff;
582
- border: 1px solid var(--_gray-300);
583
- border-radius: 6px;
584
- height: 40px;
585
- overflow: hidden;
591
+ // background-color: #fff;
592
+ // border: 1px solid var(--_gray-300);
593
+ border-radius: 4px;
594
+ border-style: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-se, solid);
595
+ border-width: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-wh, 1px);
596
+ border-color: prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-lt-se-br-cr, var(--_gray-200));
597
+ background-color: prepareMediaVariable(
598
+ --_ctm-dn-gd-vw-cl-se-lt-se-bd-cr,
599
+ var(--_base-white)
600
+ );
601
+ // height: 40px;
602
+ // overflow: hidden;
586
603
 
587
604
  .btn {
588
- display: inline-block;
589
- padding: 8px;
590
- display: flex;
605
+ // display: inline-block;
606
+ // // padding: 8px;
607
+ // display: flex;
608
+ // align-items: center;
609
+ // justify-content: center;
610
+
611
+ display: var(--_d-flex);
612
+ padding: 0px;
613
+ --_width-20: 20px;
614
+ // $size: var(--_width-40);
615
+ $size: #{var(
616
+ --_sf-at-btn-size,
617
+ #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-in-se, var(--_width-20))}
618
+ )};
619
+ width: calc(#{$size} * 2);
620
+ height: calc(#{$size} * 2);
591
621
  align-items: center;
592
622
  justify-content: center;
623
+ background: var(
624
+ --_sf-at-btn-bd,
625
+ #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-bd-cr)}
626
+ );
627
+
593
628
  cursor: pointer;
594
629
  button {
595
630
  display: flex;
596
631
  }
597
- &:hover {
598
- background-color: var(--_gray-100);
599
- }
632
+ // &:hover {
633
+ // background-color: var(--_gray-100);
634
+ // }
635
+
600
636
  &.active {
601
- background-color: #ced4f6;
602
- button {
603
- svg {
604
- path {
605
- stroke: var(--_primary-500);
606
- }
607
- }
637
+ // --_sf-at-pt-cl: var(--_gray-700);
638
+ --_sf-at-btn-size: #{prepareMediaVariable(
639
+ --_ctm-dn-gd-vw-cl-se-bn-sd-se-in-se,
640
+ var(--_width-20)
641
+ )};
642
+ --_sf-at-pt-cl: #{prepareMediaVariable(
643
+ --_ctm-dn-gd-vw-cl-se-bn-sd-se-in-c1,
644
+ var(--_gray-700)
645
+ )};
646
+ --_sf-at-btn-bd: #{prepareMediaVariable(
647
+ --_ctm-dn-gd-vw-cl-se-bn-sd-se-bd-cr,
648
+ var(--_gray-200)
649
+ )};
650
+ // background: var(--_gray-200);
651
+ }
652
+ // &.active {
653
+ // background-color: #ced4f6;
654
+ // button {
655
+ // svg {
656
+ // path {
657
+ // stroke: var(--_primary-500);
658
+ // }
659
+ // }
660
+ // }
661
+ // }
662
+ // &:first-child {
663
+ // border-right: 1px solid var(--_gray-200);
664
+ // }
665
+
666
+ svg {
667
+ width: calc(#{$size} * 1);
668
+ height: calc(#{$size} * 1);
669
+
670
+ path {
671
+ stroke: var(
672
+ --_sf-at-pt-cl,
673
+ #{prepareMediaVariable(--_ctm-dn-gd-vw-cl-se-bn-dt-se-in-c1, var(--_gray-500))}
674
+ );
608
675
  }
609
676
  }
610
- &:first-child {
611
- border-right: 1px solid var(--_gray-200);
677
+
678
+ &:first-of-type {
679
+ border-radius: 4px 0 0 4px;
680
+ }
681
+ &:last-of-type {
682
+ border-radius: 0 4px 4px 0;
612
683
  }
613
684
  }
614
685
  }
@@ -701,13 +772,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
701
772
  }
702
773
  &[data-list-view="grid"] {
703
774
  // grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
704
- grid-template-columns: repeat(
705
- var(
706
- --_ctm-mob-dn-an-an-im-is-pr-rw,
707
- var(--_ctm-tab-dn-an-an-im-is-pr-rw, var(--_ctm-dn-an-an-im-is-pr-rw))
708
- ),
709
- 1fr
710
- );
775
+ // grid-template-columns: repeat(
776
+ // var(
777
+ // --_ctm-mob-dn-an-an-im-is-pr-rw,
778
+ // var(--_ctm-tab-dn-an-an-im-is-pr-rw, var(--_ctm-dn-an-an-im-is-pr-rw))
779
+ // ),
780
+ // 1fr
781
+ // );
782
+ --_sf-cl-count: #{prepareMediaVariable(--_ctm-dn-an-an-im-is-pr-rw, 1)};
783
+ --_sf-cl-gp: #{prepareMediaVariable(--_ctm-dn-an-an-im-im-gp, 0px)};
784
+ grid-template-columns: getRepeatColWidth(--_sf-cl-count, --_sf-cl-gp);
711
785
  // gap: 24px;
712
786
  .product__card {
713
787
  flex-direction: column;
@@ -721,7 +795,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
721
795
  grid-template-columns: auto;
722
796
  .product__card {
723
797
  flex-direction: row;
724
- align-items: center;
798
+ align-items: prepareMediaVariable(--_ctm-lt-an-is, start);
725
799
  // gap: 24px;
726
800
  .card__img__container {
727
801
  width: 250px;
@@ -731,7 +805,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
731
805
  display: grid;
732
806
  gap: var(
733
807
  --_ctm-mob-dn-an-an-im-im-gp,
734
- var(--_ctm-tab-dn-an-an-im-im-gp, var(--_ctm-dn-an-an-im-im-gp))
808
+ var(--_ctm-tab-dn-an-an-im-im-gp, var(--_ctm-dn-an-an-im-im-gp, 0px))
735
809
  );
736
810
 
737
811
  .product__card {
@@ -807,6 +881,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
807
881
  display: flex;
808
882
  flex-direction: column;
809
883
  gap: 8px;
884
+ align-items: prepareMediaVariable(--_ctm-lt-jy-ct, start);
810
885
 
811
886
  .product__name {
812
887
  background-color: var(
@@ -850,7 +925,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
850
925
  var(--_ctm-tab-dn-ne-sw-cr, var(--_ctm-dn-ne-sw-cr))
851
926
  )
852
927
  );
853
- white-space: nowrap;
928
+ white-space: var(--_sf-sc-pt-lt-we-se, nowrap);
854
929
 
855
930
  height: 100%;
856
931
 
@@ -888,6 +963,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
888
963
  var(--_ctm-tab-dn-ne-ue, var(--_ctm-dn-ne-ue))
889
964
  );
890
965
  padding: prepareMediaVariable(--_ctm-dn-ne-pg);
966
+ text-transform: prepareMediaVariable(--_ctm-dn-ne-tt-tm);
967
+
968
+ & > span {
969
+ width: 100%;
970
+ &#{$overflowSelector} {
971
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
972
+ }
973
+ }
891
974
  &[data-has-link="true"] {
892
975
  cursor: pointer;
893
976
  &:hover {
@@ -897,6 +980,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
897
980
  }
898
981
  .brand__container {
899
982
  display: flex;
983
+ flex-wrap: wrap;
900
984
  align-items: center;
901
985
  gap: 8px;
902
986
  color: var(--_gray-600);
@@ -1861,7 +1945,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1861
1945
  }
1862
1946
  .embla {
1863
1947
  height: auto;
1864
- padding: 10px;
1948
+ padding: var(--_sf-flex-embla-pd-daka-mobile, 10px);
1865
1949
 
1866
1950
  .embla__viewport {
1867
1951
  .embla__container {
@@ -340,7 +340,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
340
340
  width: 100%;
341
341
  .table__wrapper,
342
342
  .table__container {
343
- overflow: visible !important;
343
+ // overflow: visible !important;
344
+ overflow-x: auto;
345
+ scrollbar-width: none;
344
346
  }
345
347
  thead th {
346
348
  overflow: visible;
@@ -630,6 +632,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
630
632
  --_ctm-mob-dn-hr-tt-le-ht,
631
633
  var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
632
634
  );
635
+
636
+ &:has(.est__dropdown__main) {
637
+ max-width: 200px;
638
+ }
633
639
  }
634
640
  }
635
641
  }
@@ -887,9 +893,32 @@ $resizeActive: '[data-cms-element-resizer="true"]';
887
893
  min-height: 76px;
888
894
 
889
895
  .note {
890
- color: var(--_gray-600);
891
- font-weight: 400;
892
- line-height: 24px;
896
+ // color: var(--_gray-600);
897
+ // font-weight: 400;
898
+ // line-height: 24px;
899
+ width: 100%;
900
+ &:nth-of-type(1) {
901
+ color: prepareMediaVariable(--_ctm-dn-te-cr);
902
+ font-family: prepareMediaVariable(--_ctm-dn-te-ft-fy);
903
+ font-size: prepareMediaVariable(--_ctm-dn-te-ft-se);
904
+ font-weight: prepareMediaVariable(--_ctm-dn-te-ft-wt);
905
+ font-style: prepareMediaVariable(--_ctm-dn-te-ft-se-ic);
906
+ text-align: prepareMediaVariable(--_ctm-dn-te-tt-an);
907
+ letter-spacing: prepareMediaVariable(--_ctm-dn-te-lr-sg);
908
+ line-height: prepareMediaVariable(--_ctm-dn-te-le-ht);
909
+ text-decoration: prepareMediaVariable(--_ctm-dn-te-ue);
910
+ }
911
+ &:nth-of-type(2) {
912
+ color: prepareMediaVariable(--_ctm-dn-dn-cr);
913
+ font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy);
914
+ font-size: prepareMediaVariable(--_ctm-dn-dn-ft-se);
915
+ font-weight: prepareMediaVariable(--_ctm-dn-dn-ft-wt);
916
+ font-style: prepareMediaVariable(--_ctm-dn-dn-ft-se-ic);
917
+ text-align: prepareMediaVariable(--_ctm-dn-dn-tt-an);
918
+ letter-spacing: prepareMediaVariable(--_ctm-dn-dn-lr-sg);
919
+ line-height: prepareMediaVariable(--_ctm-dn-dn-le-ht);
920
+ text-decoration: prepareMediaVariable(--_ctm-dn-dn-ue);
921
+ }
893
922
  }
894
923
 
895
924
  .redeem_now_wrapper {
@@ -1255,6 +1284,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1255
1284
  .est__dropdown__main {
1256
1285
  position: relative;
1257
1286
  min-width: 150px;
1287
+ max-width: 300px;
1258
1288
 
1259
1289
  label {
1260
1290
  font-size: 14px;
@@ -1268,36 +1298,113 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1268
1298
  .est__dropdown__button {
1269
1299
  display: flex;
1270
1300
  align-items: center;
1301
+ justify-content: space-between;
1271
1302
  width: 100%;
1272
- border: 1px solid var(--_gray-200);
1273
- border-radius: 6px;
1303
+ // border: 1px solid var(--_gray-200);
1304
+ border-color: var(--_sf-bmm-br-clr, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-br-cr)});
1305
+ border-width: var(--_sf-bmm-br-wh, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-br-wh)});
1306
+ border-style: var(--_sf-bmm-br-se, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-br-se)});
1307
+ border-radius: var(--_sf-bmm-br-rs, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-br-rs)});
1308
+
1309
+ background: var(--_sf-bmm-bd-cr, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-bd-cr)});
1310
+ gap: var(--_sf-bmm-im-gp, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-in-gp)});
1311
+
1312
+ padding: var(--_sf-bmm-pg, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-pg)});
1313
+ // border-radius: 6px;
1314
+
1315
+ &:hover {
1316
+ --_sf-bmm-br-clr: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-br-cr)};
1317
+ --_sf-bmm-br-wh: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-br-wh)};
1318
+ --_sf-bmm-br-se: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-br-se)};
1319
+ --_sf-bmm-br-rs: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-br-rs)};
1320
+ --_sf-bmm-bd-cr: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-bd-cr)};
1321
+ --_sf-bmm-im-gp: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-in-gp)};
1322
+ --_sf-bmm-pg: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-pg)};
1323
+
1324
+ --_sf-bmm-ft-fy: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-ft-fy)};
1325
+ --_sf-bmm-ft-se: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-ft-se)};
1326
+ --_sf-bmm-ft-wt: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-ft-wt)};
1327
+ --_sf-bmm-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-ft-se-ic)};
1328
+ --_sf-bmm-tt-an: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-tt-an)};
1329
+ --_sf-bmm-lr-sg: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-lr-sg)};
1330
+ --_sf-bmm-le-ht: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-le-ht)};
1331
+ --_sf-bmm-ue: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-ue)};
1332
+
1333
+ --_sf-bmm-icn-str: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-in-c1)};
1334
+ --_sf-bmm-icn-sz: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-in-se)};
1335
+ --_sf-bmm-cr: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-cr)};
1336
+ }
1337
+
1338
+ & > span {
1339
+ display: var(--_d-flex);
1340
+
1341
+ &:nth-of-type(1) {
1342
+ padding: 0px;
1343
+ border: none;
1344
+ border-radius: 0px;
1345
+ background: transparent;
1346
+ color: var(--_sf-bmm-cr, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-cr));
1347
+ font-family: var(--_sf-bmm-ft-fy, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-fy));
1348
+ font-size: var(--_sf-bmm-ft-se, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se));
1349
+ font-weight: var(--_sf-bmm-ft-wt, (--_ctm-dn-dn-st-dt-se-ft-wt));
1350
+ font-style: var(
1351
+ --_sf-bmm-ft-se-ic,
1352
+ prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se-ic)
1353
+ );
1354
+ text-align: var(--_sf-bmm-tt-an, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-tt-an));
1355
+ letter-spacing: var(
1356
+ --_sf-bmm-lr-sg,
1357
+ prepareMediaVariable(--_ctm-dn-dn-st-dt-se-lr-sg)
1358
+ );
1359
+ line-height: var(--_sf-bmm-le-ht, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-le-ht));
1360
+ text-decoration: var(--_sf-bmm-ue, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ue));
1361
+
1362
+ @include restrictToLinesShow(1);
1363
+ }
1364
+
1365
+ &:nth-of-type(2) {
1366
+ svg {
1367
+ width: var(--_sf-bmm-icn-sz, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-in-se));
1368
+ height: var(--_sf-bmm-icn-sz, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-in-se));
1369
+
1370
+ path {
1371
+ stroke: var(--_sf-bmm-icn-str, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-in-c1));
1372
+ }
1373
+ }
1374
+ }
1375
+ }
1274
1376
 
1275
1377
  .value__selected {
1276
- width: 100%;
1277
- border: none;
1278
- background-color: transparent;
1378
+ // width: 100%;
1379
+ // border: none;
1380
+ // background-color: transparent;
1279
1381
  }
1280
1382
  }
1281
1383
 
1282
1384
  &.open .list {
1283
1385
  display: flex;
1284
- padding: 4px;
1386
+ // padding: 4px;
1387
+ padding: prepareMediaVariable(--_ctm-dn-dn-lt-oy-pg, 4px);
1285
1388
  }
1286
1389
 
1287
1390
  .list {
1288
1391
  display: none;
1289
1392
  flex-direction: column;
1290
- border: 1px solid var(--_gray-200);
1291
- border-radius: 6px;
1393
+ // border: 1px solid var(--_gray-200);
1394
+ // border-radius: 6px;
1395
+ border-color: prepareMediaVariable(--_ctm-dn-dn-lt-oy-br-cr, var(--_gray-200));
1396
+ border-width: prepareMediaVariable(--_ctm-dn-dn-lt-oy-br-wh, 1px);
1397
+ border-style: prepareMediaVariable(--_ctm-dn-dn-lt-oy-br-se, solid);
1292
1398
  position: absolute;
1293
1399
  top: 100%;
1294
1400
  left: 0;
1295
1401
  width: 100%;
1296
- background-color: #fff;
1297
- border-radius: 4px;
1402
+ background-color: prepareMediaVariable(--_ctm-dn-dn-lt-oy-bd-cr);
1403
+ border-radius: prepareMediaVariable(--_ctm-dn-dn-lt-oy-br-rs, 4px);
1298
1404
  z-index: var(--_higher-zIndex);
1299
1405
  max-height: 200px;
1300
1406
  overflow-y: auto;
1407
+ gap: prepareMediaVariable(--_ctm-lt-dn-lt-gp, 0px);
1301
1408
 
1302
1409
  &.top {
1303
1410
  bottom: 100%;
@@ -1305,16 +1412,113 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1305
1412
  }
1306
1413
 
1307
1414
  .list__option {
1308
- padding: 12px;
1415
+ // padding: 12px;
1309
1416
  cursor: pointer;
1310
- text-align: left;
1417
+ // text-align: left;
1418
+ border-color: var(
1419
+ --_sf-bmm-v1-br-clr,
1420
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-cr)}
1421
+ );
1422
+ border-width: var(
1423
+ --_sf-bmm-v1-br-wh,
1424
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-wh)}
1425
+ );
1426
+ border-style: var(
1427
+ --_sf-bmm-v1-br-se,
1428
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-se)}
1429
+ );
1430
+ border-radius: var(
1431
+ --_sf-bmm-v1-br-rs,
1432
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-rs)}
1433
+ );
1434
+
1435
+ background: var(
1436
+ --_sf-bmm-v1-bd-cr,
1437
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-bd-cr)}
1438
+ );
1439
+
1440
+ padding: var(
1441
+ --_sf-bmm-v1-pg,
1442
+ #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-pg, 12px)}
1443
+ );
1444
+
1445
+ font-family: var(
1446
+ --_sf-bmm-v1-ft-fy,
1447
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-fy)
1448
+ );
1449
+ color: var(--_sf-bmm-v1-cr, prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-cr));
1450
+ font-size: var(
1451
+ --_sf-bmm-v1-ft-se,
1452
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se)
1453
+ );
1454
+ font-weight: var(--_sf-bmm-v1-ft-wt, (--_ctm-dn-dn-lt-im-dt-se-ft-wt));
1455
+ font-style: var(
1456
+ --_sf-bmm-v1-ft-se-ic,
1457
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se-ic)
1458
+ );
1459
+ text-align: var(
1460
+ --_sf-bmm-v1-tt-an,
1461
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-tt-an)
1462
+ );
1463
+ letter-spacing: var(
1464
+ --_sf-bmm-v1-lr-sg,
1465
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-lr-sg)
1466
+ );
1467
+ line-height: var(
1468
+ --_sf-bmm-v1-le-ht,
1469
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-le-ht)
1470
+ );
1471
+ text-decoration: var(
1472
+ --_sf-bmm-v1-ue,
1473
+ prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ue)
1474
+ );
1311
1475
  &.selected {
1312
- background-color: var(--_primary-25);
1313
- color: var(--_primary-400);
1476
+ // background-color: var(--_primary-25);
1477
+ // color: var(--_primary-400);
1478
+
1479
+ --_sf-bmm-v1-br-clr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-br-cr)};
1480
+ --_sf-bmm-v1-br-wh: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-br-wh)};
1481
+ --_sf-bmm-v1-br-se: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-br-se)};
1482
+ --_sf-bmm-v1-br-rs: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-br-rs)};
1483
+ --_sf-bmm-v1-bd-cr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-bd-cr)};
1484
+ --_sf-bmm-v1-im-gp: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-in-gp)};
1485
+ --_sf-bmm-v1-pg: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-pg)};
1486
+
1487
+ --_sf-bmm-v1-ft-fy: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-ft-fy)};
1488
+ --_sf-bmm-v1-ft-se: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-ft-se)};
1489
+ --_sf-bmm-v1-ft-wt: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-ft-wt)};
1490
+ --_sf-bmm-v1-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-ft-se-ic)};
1491
+ --_sf-bmm-v1-tt-an: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-tt-an)};
1492
+ --_sf-bmm-v1-lr-sg: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-lr-sg)};
1493
+ --_sf-bmm-v1-le-ht: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-le-ht)};
1494
+ --_sf-bmm-v1-ue: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-ue)};
1495
+
1496
+ --_sf-bmm-v1-cr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-cr)};
1314
1497
  }
1315
1498
  &:hover {
1316
- background-color: var(--_primary-25);
1317
- color: var(--_primary-400);
1499
+ // background-color: var(--_primary-25);
1500
+ // color: var(--_primary-400);
1501
+
1502
+ --_sf-bmm-v1-br-clr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-br-cr)};
1503
+ --_sf-bmm-v1-br-wh: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-br-wh)};
1504
+ --_sf-bmm-v1-br-se: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-br-se)};
1505
+ --_sf-bmm-v1-br-rs: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-br-rs)};
1506
+ --_sf-bmm-v1-bd-cr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-bd-cr)};
1507
+ --_sf-bmm-v1-im-gp: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-in-gp)};
1508
+ --_sf-bmm-v1-pg: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-pg)};
1509
+
1510
+ --_sf-bmm-v1-ft-fy: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-ft-fy)};
1511
+ --_sf-bmm-v1-ft-se: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-ft-se)};
1512
+ --_sf-bmm-v1-ft-wt: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-ft-wt)};
1513
+ --_sf-bmm-v1-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-ft-se-ic)};
1514
+ --_sf-bmm-v1-tt-an: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-tt-an)};
1515
+ --_sf-bmm-v1-lr-sg: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-lr-sg)};
1516
+ --_sf-bmm-v1-le-ht: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-le-ht)};
1517
+ --_sf-bmm-v1-ue: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-ue)};
1518
+
1519
+ --_sf-bmm-v1-icn-str: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-in-c1)};
1520
+ --_sf-bmm-v1-icn-sz: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-in-se)};
1521
+ --_sf-bmm-v1-cr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-cr)};
1318
1522
  }
1319
1523
  }
1320
1524
  }