@sc-360-v2/storefront-cms-library 0.5.49 → 0.5.51

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 (48) hide show
  1. package/dist/brand-basic-elements.scss +109 -46
  2. package/dist/brand.scss +6 -0
  3. package/dist/breadcrumbs.scss +144 -51
  4. package/dist/builder.js +1 -1
  5. package/dist/bundle.scss +74 -48
  6. package/dist/bundleDetails.scss +1360 -275
  7. package/dist/button copy.scss +271 -271
  8. package/dist/cart.scss +85 -4
  9. package/dist/category.scss +25 -4
  10. package/dist/container.scss +20 -17
  11. package/dist/embed-temp.scss +2 -2
  12. package/dist/hotspot.scss +12 -3
  13. package/dist/language-selector.scss +42 -0
  14. package/dist/line.scss +54 -36
  15. package/dist/login.scss +225 -69
  16. package/dist/map.scss +354 -147
  17. package/dist/marchandiserSets.scss +34 -0
  18. package/dist/product-actions.scss +53 -0
  19. package/dist/product-basic-elements.scss +50 -4
  20. package/dist/productDetails.scss +33 -0
  21. package/dist/quick-links.scss +23 -2
  22. package/dist/repeater copy.scss +635 -635
  23. package/dist/repeater-grid-toggle.scss +93 -3
  24. package/dist/repeater-item.scss +5 -1
  25. package/dist/review-cart.scss +7 -1
  26. package/dist/search.scss +45 -5
  27. package/dist/styles.css +1 -1
  28. package/dist/tab-v2.scss +724 -583
  29. package/dist/text-temp-v2.scss +7 -1
  30. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +26 -0
  31. package/dist/types/builder/tools/element-edit/bundle.d.ts +104 -4
  32. package/dist/types/builder/tools/element-edit/cart.d.ts +7 -0
  33. package/dist/types/builder/tools/element-edit/map.d.ts +0 -1
  34. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +6 -0
  35. package/dist/types/builder/tools/element-edit/search.d.ts +4 -61
  36. package/dist/types/builder/tools/element-edit/tabsV2.d.ts +110 -1
  37. package/dist/upload-media.scss +14 -2
  38. package/package.json +1 -1
  39. package/dist/add-products-tab copy.scss +0 -1122
  40. package/dist/allocationDetails copy.scss +0 -757
  41. package/dist/bulk-variant-picker copy.scss +0 -1121
  42. package/dist/bundleDetails copy.scss +0 -1431
  43. package/dist/product-actions copy.scss +0 -2765
  44. package/dist/product-highlights copy.scss +0 -217
  45. package/dist/product-image copy.scss +0 -787
  46. package/dist/user-elements copy.scss +0 -1437
  47. package/dist/volume-pricing copy 2.scss +0 -1468
  48. package/dist/volume-pricing copy.scss +0 -1076
package/dist/bundleDetails.scss CHANGED
@@ -1,10 +1,32 @@
1
- @use "sass:map";
1
+ @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "sass:string";
3
4
  @use "./functions.scss" as *;
4
5
  $overflowSelector: ".flex__overflow";
5
6
  $resizerId: "[data-cms-tool='cms-element-resizer']";
6
7
  $resizeActive: '[data-cms-element-resizer="true"]';
7
8
 
9
+ // Select button responsive chain for its selected state, falling through to the
10
+ // default state when a selected-state property is left unconfigured in the builder.
11
+ // prepareMediaVariable tails with `inherit`, so routing this through an intermediate
12
+ // custom property would not work: the property is then always "set" and a var()
13
+ // fallback on it never fires, leaving padding/width/gap collapsed once selected.
14
+ // Variant-picker dropdown "Item Style" node, per state: dt (default), hr (hover),
15
+ // sd (selected). Keeps the long `--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-*`
16
+ // paths readable at the ~20 call sites in the option-row rules.
17
+ @function itemState($state, $suffix) {
18
+ @return prepareMediaVariable(
19
+ string.unquote("--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-#{$state}-se-#{$suffix}")
20
+ );
21
+ }
22
+
23
+ @function selectButtonSelectedOrDefault($suffix) {
24
+ $base: "--_ctm-dn-pt-pl-dn-st-bn-dn-";
25
+ $selected: string.unquote("#{$base}sd-se-#{$suffix}");
26
+ $default: string.unquote("#{$base}dt-se-#{$suffix}");
27
+ @return prepareMediaVariable($selected, prepareMediaVariable($default));
28
+ }
29
+
8
30
  $defaultValues: (
9
31
  --_sf-flex-direckdaka-coldds: getListOfResponsive(row, column, column),
10
32
  --_sf-flex-direckdaka-mobile: getListOfResponsive(row, column),
@@ -613,6 +635,15 @@ $defaultValues: (
613
635
  padding: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-hr-pg, 24px 96px);
614
636
  // border-bottom: 1px solid #d0d5dd;
615
637
  gap: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-hr-im-gp, 16px);
638
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-sw-ae)
639
+ prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-sw-br)
640
+ prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-sw-br)
641
+ prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-sw-cr);
642
+ background-color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-bd-cr);
643
+ border-color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-br-cr);
644
+ border-radius: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-br-rs);
645
+ border-style: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-br-se);
646
+ border-width: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-hr-wr-br-wh);
616
647
 
617
648
  .bundle_details_heading_text_wrapper {
618
649
  display: flex;
@@ -664,49 +695,141 @@ $defaultValues: (
664
695
  }
665
696
  }
666
697
 
698
+ // Outer box around the whole category card row (Category Container). Its item gap
699
+ // controls the spacing between cards, applied to the Embla track inside it.
700
+ .category_container {
701
+ width: 100%;
702
+ padding: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-pg);
703
+ background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-bd-cr);
704
+ border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-br-cr);
705
+ border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-br-se);
706
+ border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-br-wh);
707
+ border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-br-rs);
708
+ box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-sw-ae)
709
+ prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-sw-br)
710
+ prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-sw-sd)
711
+ prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-sw-cr);
712
+
713
+ // Show Border toggle (CONTROLS -> data-show-border on the element). Off removes
714
+ // the border in every state; radius is untouched so shape stays.
715
+ &[data-show-border="false"] {
716
+ border: none;
717
+ }
718
+
719
+ // Gap between cards: the cards live in Embla's flex/grid track, so the
720
+ // container's item gap is forwarded there.
721
+ .embla__container {
722
+ gap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cr-im-gp);
723
+ }
724
+
725
+ // Slider arrows (Category Widget > Pagination Arrows). The icon glyph is chosen
726
+ // in JS (getCMSSVG); everything else is CSS. Defaults preserve the previous
727
+ // 20px / grey arrows with no background or border.
728
+ .left-button,
729
+ .right-button {
730
+ background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-bd-cr);
731
+ padding: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-pg);
732
+ border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-br-cr);
733
+ border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-br-se);
734
+ border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-br-wh);
735
+ // Fall back to 0, NOT prepareMediaVariable's `inherit` tail — otherwise, with
736
+ // no configured radius, "None" shape inherits the container's border-radius
737
+ // and the arrows look rounded when they shouldn't.
738
+ border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-br-rs, 0);
739
+
740
+ // Show Border toggle for the arrow buttons.
741
+ &[data-show-border="false"] {
742
+ border: none;
743
+ }
744
+
745
+ // Shape option overrides the configured radius when set. "None" leaves it.
746
+ &[data-background-shape="Round"] {
747
+ border-radius: 50%;
748
+ }
749
+ &[data-background-shape="Square"] {
750
+ border-radius: 0;
751
+ }
752
+
753
+ svg {
754
+ width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-aw-se, 20px);
755
+ height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-aw-se, 20px);
756
+
757
+ path {
758
+ stroke: prepareMediaVariable(
759
+ --_ctm-dn-cy-sr-cd-dn-cy-wt-pn-as-aw-cr,
760
+ var(--_gray-500)
761
+ );
762
+ }
763
+ }
764
+ }
765
+ }
766
+
667
767
  .category_card_wrapper {
668
768
  cursor: pointer;
669
769
 
670
770
  display: flex;
671
- padding: 16px;
672
- gap: 12px;
673
- background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-bd-cr);
674
- border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-cr);
675
- border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-rs);
676
- border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-se);
677
- border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-wh);
678
- box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-ae)
679
- prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-br)
680
- prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-sd)
681
- prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-cr);
771
+ // padding + gap now configurable (Category Card > Layout). Fall back to the
772
+ // previous hardcoded 16px / 12px so unconfigured cards look unchanged.
773
+ padding: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-pg, 16px);
774
+ gap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-im-gp, 12px);
775
+ background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-bd-cr);
776
+ border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-br-cr);
777
+ border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-br-rs);
778
+ border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-br-se);
779
+ border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-br-wh);
780
+ box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-sw-ae)
781
+ prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-sw-br)
782
+ prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-sw-sd)
783
+ prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-dt-se-sw-cr);
682
784
 
683
785
  &:hover {
684
- background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-bd-cr);
685
- border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-cr);
686
- border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-rs);
687
- border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-se);
688
- border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-wh);
689
- box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-ae)
690
- prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-br)
691
- prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-sd)
692
- prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-cr);
786
+ padding: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-pg, 16px);
787
+ gap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-im-gp, 12px);
788
+ background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-bd-cr);
789
+ border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-br-cr);
790
+ border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-br-rs);
791
+ border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-br-se);
792
+ border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-br-wh);
793
+ box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-sw-ae)
794
+ prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-sw-br)
795
+ prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-sw-sd)
796
+ prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-hr-se-sw-cr);
693
797
  }
694
798
 
695
799
  &.active {
696
- background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-bd-cr);
697
- border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-cr);
698
- border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-rs);
699
- border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-se);
700
- border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-wh);
701
- box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-ae)
702
- prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-br)
703
- prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-sd)
704
- prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-cr);
800
+ padding: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-pg, 16px);
801
+ gap: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-im-gp, 12px);
802
+ background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-bd-cr);
803
+ border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-br-cr);
804
+ border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-br-rs);
805
+ border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-br-se);
806
+ border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-br-wh);
807
+ box-shadow: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-sw-ae)
808
+ prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-sw-br)
809
+ prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-sw-sd)
810
+ prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-sd-se-sw-cr);
811
+ }
812
+
813
+ // Show Border toggle for the card. Placed after :hover/.active so it wins in
814
+ // every state when off (equal specificity, later source order).
815
+ &[data-show-border="false"] {
816
+ border: none;
705
817
  }
706
818
 
707
819
  .category_image {
708
- width: 48px;
709
- height: 72px;
820
+ // Sizing + border/radius configurable (Category Image). Defaults preserve the
821
+ // previous fixed 48x72 thumbnail.
822
+ width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ie-wh, 48px);
823
+ height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ie-ht, 72px);
824
+ object-fit: cover;
825
+ border-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ie-br-cr);
826
+ border-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ie-br-se);
827
+ border-width: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ie-br-wh);
828
+ border-radius: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ie-br-rs);
829
+
830
+ &[data-show-border="false"] {
831
+ border: none;
832
+ }
710
833
  }
711
834
 
712
835
  .category_card_info_wrapper {
@@ -717,42 +840,42 @@ $defaultValues: (
717
840
  white-space: nowrap;
718
841
 
719
842
  .category_card_category_name {
720
- // background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-bd-cr);
721
- color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-cr);
722
- font-family: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-fy);
723
- font-size: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se);
724
- font-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se-ic);
725
- font-weight: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-wt);
726
- line-height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-le-ht);
727
- letter-spacing: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-lr-sg);
728
- text-align: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-tt-an);
729
- text-decoration: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ue);
843
+ // background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-bd-cr);
844
+ color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-cr);
845
+ font-family: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-ft-fy);
846
+ font-size: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-ft-se);
847
+ font-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-ft-se-ic);
848
+ font-weight: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-ft-wt);
849
+ line-height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-le-ht);
850
+ letter-spacing: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-lr-sg);
851
+ text-align: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-tt-an);
852
+ text-decoration: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-ne-dn-ue);
730
853
  }
731
854
 
732
855
  .category_card_product_count {
733
- // background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr);
734
- color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr);
735
- font-family: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy);
736
- font-size: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se);
737
- font-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic);
738
- font-weight: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt);
739
- line-height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht);
740
- letter-spacing: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg);
741
- text-align: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an);
742
- text-decoration: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue);
856
+ // background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-bd-cr);
857
+ color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-cr);
858
+ font-family: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-fy);
859
+ font-size: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-se);
860
+ font-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-se-ic);
861
+ font-weight: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-wt);
862
+ line-height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-le-ht);
863
+ letter-spacing: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-lr-sg);
864
+ text-align: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-tt-an);
865
+ text-decoration: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ue);
743
866
  }
744
867
 
745
868
  .category_card_product_select_count {
746
- // background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr);
747
- color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr);
748
- font-family: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy);
749
- font-size: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se);
750
- font-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic);
751
- font-weight: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt);
752
- line-height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht);
753
- letter-spacing: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg);
754
- text-align: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an);
755
- text-decoration: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue);
869
+ // background-color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-bd-cr);
870
+ color: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-cr);
871
+ font-family: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-fy);
872
+ font-size: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-se);
873
+ font-style: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-se-ic);
874
+ font-weight: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ft-wt);
875
+ line-height: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-le-ht);
876
+ letter-spacing: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-lr-sg);
877
+ text-align: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-tt-an);
878
+ text-decoration: prepareMediaVariable(--_ctm-dn-cy-sr-cd-dn-cy-wt-cy-cd-io-dn-ue);
756
879
  }
757
880
  }
758
881
  }
@@ -763,7 +886,7 @@ $defaultValues: (
763
886
 
764
887
  display: flex;
765
888
  flex-direction: column;
766
- gap: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-by-im-gp, 16px);
889
+ gap: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-hr-im-gp, 16px);
767
890
  padding: prepareMediaVariable(--_ctm-dn-be-ds-lt-dn-by-pg, 36px 96px);
768
891
  width: 100%;
769
892
 
@@ -824,9 +947,14 @@ $defaultValues: (
824
947
  line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-le-ht);
825
948
 
826
949
  padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-pg);
827
- border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-cr);
828
- border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-wh);
829
- border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-se);
950
+
951
+ &[data-show-border="true"] {
952
+ border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-cr);
953
+
954
+ border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-se);
955
+
956
+ border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-wh);
957
+ }
830
958
  border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-br-rs);
831
959
 
832
960
  background: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-lt-it-bd-cr);
@@ -883,80 +1011,225 @@ $defaultValues: (
883
1011
  }
884
1012
  }
885
1013
 
886
- .add_to_cart_btn {
1014
+ // Add to cart renders through ButtonComponent, so it carries `btn__with__text`
1015
+ // and the `.txt` / `.icon` children rather than a bare label. Default and hover
1016
+ // only — unlike the select button this is a transient action with no selected
1017
+ // state, so there is no `-sd-se-` set to fall through to.
1018
+ .btn__with__text[data-btn-name="addToCartButton"] {
1019
+ &[data-show-shadow="false"] {
1020
+ --_show-shadow: none;
1021
+ }
1022
+ &[data-icon-position="left"] {
1023
+ --_sf-fd-bn: row;
1024
+ }
1025
+ &[data-icon-position="right"] {
1026
+ --_sf-fd-bn: row-reverse;
1027
+ }
1028
+ &[data-icon-position="center"] {
1029
+ --_sf-fd-bn: row;
1030
+ }
1031
+
1032
+ &:hover {
1033
+ --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-bd-cr)};
1034
+ --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-cr)};
1035
+ --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-se)};
1036
+ --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-wh)};
1037
+ --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-rs)};
1038
+ --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-at)};
1039
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-gp)};
1040
+
1041
+ // for shadow
1042
+ --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-ae)};
1043
+ --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-br)};
1044
+ --_sf-hr-sw-sd: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-sd)};
1045
+ --_sf-hr-sw-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-cr)};
1046
+
1047
+ // for font
1048
+ --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-cr)};
1049
+ --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-fy)};
1050
+ --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se)};
1051
+ --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-wt)};
1052
+ --_sf-hr-ft-se-ic: #{prepareMediaVariable(
1053
+ --_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se-ic
1054
+ )};
1055
+ --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-tt-an)};
1056
+ --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-lr-sg)};
1057
+ --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-le-ht)};
1058
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ue)};
1059
+
1060
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-in-se)};
1061
+ --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-in-c1)};
1062
+
1063
+ // for padding and width
1064
+ --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-pg)};
1065
+ --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-wh)};
1066
+
1067
+ &[data-hover-show-shadow="false"] {
1068
+ --_hover-show-shadow: none;
1069
+ }
1070
+
1071
+ &[data-hover-show-icon="false"] {
1072
+ --_hover-show-icon: none;
1073
+ }
1074
+ }
1075
+
887
1076
  display: flex;
888
- justify-content: center;
889
1077
  align-items: center;
890
- padding: 10px 16px;
1078
+ flex-direction: var(--_sf-fd-bn);
891
1079
  transition: all 0.3s ease;
892
- background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-bd-cr);
893
- border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-cr);
894
- border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-rs);
895
- border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-se);
896
- border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-wh);
897
- color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-cr);
898
- font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-fy);
899
- font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se);
900
- font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se-ic);
901
- font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-wt);
902
- line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-le-ht);
903
- letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-lr-sg);
904
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-ae)
905
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-br)
906
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-sd)
907
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-cr);
908
- text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-tt-an);
909
- text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ue);
1080
+
1081
+ background-color: var(
1082
+ --_sf-hr-bd-cr,
1083
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-bd-cr)
1084
+ );
1085
+
1086
+ padding: var(
1087
+ --_sf-hr-pg,
1088
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-pg, 10px 16px)
1089
+ );
1090
+
1091
+ width: var(
1092
+ --_sf-hr-wh,
1093
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-wh)
1094
+ );
1095
+
1096
+ justify-content: var(
1097
+ --_sf-hr-at,
1098
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-at, center)
1099
+ );
1100
+
1101
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-gp));
1102
+
1103
+ border-radius: var(
1104
+ --_sf-hr-br-rs,
1105
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-rs)
1106
+ );
1107
+
1108
+ box-shadow: var(
1109
+ --_sf-hr-sw-ae,
1110
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-ae)
1111
+ )
1112
+ var(
1113
+ --_sf-hr-sw-br,
1114
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-br)
1115
+ )
1116
+ var(
1117
+ --_sf-hr-sw-sd,
1118
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-sd)
1119
+ )
1120
+ var(
1121
+ --_sf-hr-sw-cr,
1122
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-cr)
1123
+ );
910
1124
 
911
1125
  &:disabled {
912
1126
  cursor: not-allowed;
913
1127
  }
914
1128
 
915
- &:hover {
916
- background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-bd-cr);
917
- border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-cr);
918
- border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-rs);
919
- border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-se);
920
- border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-wh);
921
- color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-cr);
922
- font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-fy);
923
- font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se);
924
- font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se-ic);
925
- font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-wt);
926
- line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-le-ht);
927
- letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-lr-sg);
928
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-ae)
929
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-br)
930
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-sd)
931
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-cr);
932
- text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-tt-an);
933
- text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ue);
1129
+ &[data-show-border="true"] {
1130
+ border-color: var(
1131
+ --_sf-hr-br-cr,
1132
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-cr)
1133
+ );
1134
+
1135
+ border-style: var(
1136
+ --_sf-hr-br-se,
1137
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-se)
1138
+ );
1139
+
1140
+ border-width: var(
1141
+ --_sf-hr-br-wh,
1142
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-wh)
1143
+ );
934
1144
  }
935
1145
 
936
- &.selected {
937
- background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-bd-cr);
938
- border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-cr);
939
- border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-rs);
940
- border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-se);
941
- border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-wh);
942
- color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-cr);
943
- font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-fy);
944
- font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se);
945
- font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se-ic);
946
- font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-wt);
947
- line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-le-ht);
948
- letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-lr-sg);
949
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-ae)
950
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-br)
951
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-sd)
952
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-cr);
953
- text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-tt-an);
954
- text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ue);
955
-
956
- .icon {
957
- color: white;
1146
+ .txt {
1147
+ display: flex;
1148
+
1149
+ color: var(
1150
+ --_sf-hr-cr,
1151
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-cr)
1152
+ );
1153
+
1154
+ font-family: var(
1155
+ --_sf-hr-ft-fy,
1156
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-fy)
1157
+ );
1158
+
1159
+ font-size: var(
1160
+ --_sf-hr-ft-se,
1161
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se)
1162
+ );
1163
+
1164
+ font-weight: var(
1165
+ --_sf-hr-ft-wt,
1166
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-wt)
1167
+ );
1168
+
1169
+ font-style: var(
1170
+ --_sf-hr-ft-se-ic,
1171
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se-ic)
1172
+ );
1173
+
1174
+ text-align: var(
1175
+ --_sf-hr-tt-an,
1176
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-tt-an)
1177
+ );
1178
+
1179
+ letter-spacing: var(
1180
+ --_sf-hr-lr-sg,
1181
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-lr-sg)
1182
+ );
1183
+
1184
+ line-height: var(
1185
+ --_sf-hr-le-ht,
1186
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-le-ht)
1187
+ );
1188
+
1189
+ text-decoration: var(
1190
+ --_sf-hr-ue,
1191
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ue)
1192
+ );
1193
+ }
1194
+
1195
+ .icon {
1196
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1197
+ svg {
1198
+ width: var(
1199
+ --_sf-hr-in-se,
1200
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-in-se)
1201
+ );
1202
+ height: var(
1203
+ --_sf-hr-in-se,
1204
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-in-se)
1205
+ );
1206
+
1207
+ path {
1208
+ stroke: var(
1209
+ --_sf-hr-in-c1,
1210
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-in-c1)
1211
+ );
1212
+ }
958
1213
  }
959
1214
  }
1215
+
1216
+ [data-element-style="Text"] {
1217
+ display: inline-block;
1218
+ width: 100%;
1219
+ }
1220
+
1221
+ .icon--hover {
1222
+ display: none;
1223
+ transition: opacity 0.2s ease;
1224
+ }
1225
+
1226
+ &:hover .icon--hover {
1227
+ display: flex;
1228
+ }
1229
+
1230
+ &:hover .icon--default {
1231
+ display: none;
1232
+ }
960
1233
  }
961
1234
  }
962
1235
 
@@ -1350,6 +1623,15 @@ $defaultValues: (
1350
1623
  )
1351
1624
  );
1352
1625
  white-space: nowrap;
1626
+ background-color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-bd-cr);
1627
+ border-color: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-cr);
1628
+ border-radius: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-rs);
1629
+ border-style: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-se);
1630
+ border-width: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-wh);
1631
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-ae)
1632
+ prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-br)
1633
+ prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-sd)
1634
+ prepareMediaVariable(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-cr);
1353
1635
 
1354
1636
  .standard_wrapper {
1355
1637
  // Select Colors
@@ -2758,8 +3040,17 @@ $defaultValues: (
2758
3040
  &:not(:last-child)::after {
2759
3041
  content: "";
2760
3042
  position: relative;
2761
- background-color: #000;
2762
- height: 1px;
3043
+ // Colour and thickness come from the variant picker's widgetStyle
3044
+ // node (dividerColor / dividerWidth), which already existed in the
3045
+ // schema but was never read here — the line was hardcoded black 1px.
3046
+ background-color: #{prepareMediaVariable(
3047
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dr-cr,
3048
+ #000
3049
+ )};
3050
+ height: #{prepareMediaVariable(
3051
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-wt-se-dr-wh,
3052
+ 1px
3053
+ )};
2763
3054
  width: 100%;
2764
3055
  display: flex;
2765
3056
  top: calc(
@@ -2848,7 +3139,12 @@ $defaultValues: (
2848
3139
  //Dropdown
2849
3140
  .est__dropdown__main {
2850
3141
  position: relative;
2851
- width: 100%;
3142
+ // Widget width; falls back to 100% so an unconfigured picker keeps
3143
+ // filling the product card.
3144
+ width: #{prepareMediaVariable(
3145
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-wh,
3146
+ 100%
3147
+ )};
2852
3148
  display: flex;
2853
3149
  flex-direction: column;
2854
3150
  gap: var(
@@ -2888,7 +3184,9 @@ $defaultValues: (
2888
3184
  --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
2889
3185
  var(
2890
3186
  --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
2891
- var(--_gray-700, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr))
3187
+ // Was `var(--_gray-700, <configured>)` — inverted, so the theme
3188
+ // token always won and the configured colour was unreachable.
3189
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr, var(--_gray-700))
2892
3190
  )
2893
3191
  );
2894
3192
  font-weight: var(
@@ -2934,8 +3232,6 @@ $defaultValues: (
2934
3232
  position: relative;
2935
3233
  color: var(--_gray-700);
2936
3234
 
2937
- border-radius: 6px;
2938
- background-color: #fff;
2939
3235
  display: flex;
2940
3236
  justify-content: space-between;
2941
3237
  align-items: center;
@@ -2944,33 +3240,268 @@ $defaultValues: (
2944
3240
  width: 100%;
2945
3241
  }
2946
3242
 
3243
+ // Trigger box — builder panel "Dropdown Style > Widget Style".
3244
+ // A hardcoded `border-radius: 6px` / white background used to sit on
3245
+ // .est__dropdown and mask every one of these settings.
3246
+ .est__dropdown__button {
3247
+ display: flex;
3248
+ align-items: center;
3249
+ width: 100%;
3250
+ position: relative;
3251
+ gap: #{prepareMediaVariable(
3252
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-im-gp
3253
+ )};
3254
+ padding: #{prepareMediaVariable(
3255
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-pg
3256
+ )};
3257
+ background-color: #{prepareMediaVariable(
3258
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-bd-cr
3259
+ )};
3260
+ // Border only when the widget style's showBorder toggle is on.
3261
+ // Radius stays outside the gate — it applies to the background too.
3262
+ &[data-show-border="true"] {
3263
+ border-color: #{prepareMediaVariable(
3264
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-br-cr
3265
+ )};
3266
+ border-style: #{prepareMediaVariable(
3267
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-br-se
3268
+ )};
3269
+ border-width: #{prepareMediaVariable(
3270
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-br-wh
3271
+ )};
3272
+ }
3273
+ border-radius: #{prepareMediaVariable(
3274
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-br-rs
3275
+ )};
3276
+ box-shadow: #{prepareMediaVariable(
3277
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-sw-ae
3278
+ )}
3279
+ #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-sw-br)}
3280
+ #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-sw-sd)}
3281
+ #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-sw-cr)};
3282
+ color: #{prepareMediaVariable(
3283
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-cr
3284
+ )};
3285
+ font-family: #{prepareMediaVariable(
3286
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-ft-fy
3287
+ )};
3288
+ font-size: #{prepareMediaVariable(
3289
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-ft-se
3290
+ )};
3291
+ font-weight: #{prepareMediaVariable(
3292
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-ft-wt
3293
+ )};
3294
+ font-style: #{prepareMediaVariable(
3295
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-ft-se-ic
3296
+ )};
3297
+ text-decoration: #{prepareMediaVariable(
3298
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-ue
3299
+ )};
3300
+ text-align: #{prepareMediaVariable(
3301
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-tt-an
3302
+ )};
3303
+ letter-spacing: #{prepareMediaVariable(
3304
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-lr-sg
3305
+ )};
3306
+ line-height: #{prepareMediaVariable(
3307
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-se-le-ht
3308
+ )};
3309
+
3310
+ .option_select,
3311
+ .value__selected__new {
3312
+ width: 100%;
3313
+ overflow: hidden;
3314
+ text-overflow: ellipsis;
3315
+ white-space: nowrap;
3316
+ }
3317
+
3318
+ // Placeholder shown until a variant is picked — builder panel
3319
+ // "Dropdown Style > Widget Placeholder Text".
3320
+ .value__selected__new {
3321
+ color: #{prepareMediaVariable(
3322
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-cr
3323
+ )};
3324
+ font-family: #{prepareMediaVariable(
3325
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-ft-fy
3326
+ )};
3327
+ font-size: #{prepareMediaVariable(
3328
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-ft-se
3329
+ )};
3330
+ font-weight: #{prepareMediaVariable(
3331
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-ft-wt
3332
+ )};
3333
+ font-style: #{prepareMediaVariable(
3334
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-ft-se-ic
3335
+ )};
3336
+ text-decoration: #{prepareMediaVariable(
3337
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-ue
3338
+ )};
3339
+ text-align: #{prepareMediaVariable(
3340
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-tt-an
3341
+ )};
3342
+ letter-spacing: #{prepareMediaVariable(
3343
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-lr-sg
3344
+ )};
3345
+ line-height: #{prepareMediaVariable(
3346
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-le-ht
3347
+ )};
3348
+ padding: #{prepareMediaVariable(
3349
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-pr-tt-pg
3350
+ )};
3351
+ }
3352
+ }
3353
+
3354
+ // Option rows — builder panel "Dropdown Style > Item Style".
3355
+ // Hover/selected override via the `--_sf-hr-*` layer, the same
3356
+ // pattern the buttons in this stylesheet use.
3357
+ .option {
3358
+ width: 100%;
3359
+ display: flex;
3360
+ align-items: center;
3361
+ cursor: pointer;
3362
+ position: relative;
3363
+ box-sizing: border-box;
3364
+
3365
+ // Item divider. The row carries `data-show-divider` from the widget
3366
+ // style panel; the existing `.list__option` rules in this file never
3367
+ // matched anything, because the DOM renders `.option`.
3368
+ // Divider colour/width come from DividerStylesInstance on widgetStyle
3369
+ // (dividerWeight / dividerColor), with defaults so the line still
3370
+ // renders when nothing is configured.
3371
+ &[data-show-divider="true"]:not(:last-child)::after {
3372
+ content: "";
3373
+ position: absolute;
3374
+ left: 0;
3375
+ bottom: 0;
3376
+ width: 100%;
3377
+ height: #{prepareMediaVariable(
3378
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-wt-se-dr-wh,
3379
+ 1px
3380
+ )};
3381
+ background-color: #{prepareMediaVariable(
3382
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dr-cr,
3383
+ var(--_gray-200)
3384
+ )};
3385
+ }
3386
+
3387
+ &:hover {
3388
+ --_sf-hr-bd-cr: #{prepareMediaVariable(
3389
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-hr-se-bd-cr
3390
+ )};
3391
+ --_sf-hr-br-cr: #{prepareMediaVariable(
3392
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-hr-se-br-cr
3393
+ )};
3394
+ --_sf-hr-cr: #{prepareMediaVariable(
3395
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-hr-se-cr
3396
+ )};
3397
+ --_sf-hr-br-se: #{itemState(hr, br-se)};
3398
+ --_sf-hr-br-wh: #{itemState(hr, br-wh)};
3399
+ --_sf-hr-br-rs: #{itemState(hr, br-rs)};
3400
+ --_sf-hr-pg: #{itemState(hr, pg)};
3401
+ --_sf-hr-ft-fy: #{itemState(hr, ft-fy)};
3402
+ --_sf-hr-ft-se: #{itemState(hr, ft-se)};
3403
+ --_sf-hr-ft-wt: #{itemState(hr, ft-wt)};
3404
+ --_sf-hr-ft-se-ic: #{itemState(hr, ft-se-ic)};
3405
+ --_sf-hr-ue: #{itemState(hr, ue)};
3406
+ --_sf-hr-tt-an: #{itemState(hr, tt-an)};
3407
+ --_sf-hr-lr-sg: #{itemState(hr, lr-sg)};
3408
+ --_sf-hr-le-ht: #{itemState(hr, le-ht)};
3409
+ --_sf-hr-sw-ae: #{itemState(hr, sw-ae)};
3410
+ --_sf-hr-sw-br: #{itemState(hr, sw-br)};
3411
+ --_sf-hr-sw-sd: #{itemState(hr, sw-sd)};
3412
+ --_sf-hr-sw-cr: #{itemState(hr, sw-cr)};
3413
+ }
3414
+
3415
+ &.selected,
3416
+ &[aria-selected="true"] {
3417
+ --_sf-hr-bd-cr: #{prepareMediaVariable(
3418
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-sd-se-bd-cr
3419
+ )};
3420
+ --_sf-hr-br-cr: #{prepareMediaVariable(
3421
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-sd-se-br-cr
3422
+ )};
3423
+ --_sf-hr-cr: #{prepareMediaVariable(
3424
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-im-se-sd-se-cr
3425
+ )};
3426
+ --_sf-hr-br-se: #{itemState(sd, br-se)};
3427
+ --_sf-hr-br-wh: #{itemState(sd, br-wh)};
3428
+ --_sf-hr-pg: #{itemState(sd, pg)};
3429
+ --_sf-hr-ft-fy: #{itemState(sd, ft-fy)};
3430
+ --_sf-hr-ft-se: #{itemState(sd, ft-se)};
3431
+ --_sf-hr-ft-wt: #{itemState(sd, ft-wt)};
3432
+ --_sf-hr-ft-se-ic: #{itemState(sd, ft-se-ic)};
3433
+ --_sf-hr-ue: #{itemState(sd, ue)};
3434
+ --_sf-hr-tt-an: #{itemState(sd, tt-an)};
3435
+ --_sf-hr-lr-sg: #{itemState(sd, lr-sg)};
3436
+ --_sf-hr-le-ht: #{itemState(sd, le-ht)};
3437
+ --_sf-hr-sw-ae: #{itemState(sd, sw-ae)};
3438
+ --_sf-hr-sw-br: #{itemState(sd, sw-br)};
3439
+ --_sf-hr-sw-sd: #{itemState(sd, sw-sd)};
3440
+ --_sf-hr-sw-cr: #{itemState(sd, sw-cr)};
3441
+ }
3442
+
3443
+ background-color: var(--_sf-hr-bd-cr, #{itemState(dt, bd-cr)});
3444
+ color: var(--_sf-hr-cr, #{itemState(dt, cr)});
3445
+ border-radius: var(--_sf-hr-br-rs, #{itemState(dt, br-rs)});
3446
+
3447
+ // Each item state carries its own showBorder toggle, so the border
3448
+ // is gated per state rather than once on the row.
3449
+ &[data-show-border="true"],
3450
+ &[data-hover-show-border="true"]:hover,
3451
+ &[data-selected-show-border="true"][aria-selected="true"] {
3452
+ border-color: var(--_sf-hr-br-cr, #{itemState(dt, br-cr)});
3453
+ border-style: var(--_sf-hr-br-se, #{itemState(dt, br-se)});
3454
+ border-width: var(--_sf-hr-br-wh, #{itemState(dt, br-wh)});
3455
+ }
3456
+ padding: var(--_sf-hr-pg, #{itemState(dt, pg)});
3457
+ font-family: var(--_sf-hr-ft-fy, #{itemState(dt, ft-fy)});
3458
+ font-size: var(--_sf-hr-ft-se, #{itemState(dt, ft-se)});
3459
+ font-weight: var(--_sf-hr-ft-wt, #{itemState(dt, ft-wt)});
3460
+ font-style: var(--_sf-hr-ft-se-ic, #{itemState(dt, ft-se-ic)});
3461
+ text-decoration: var(--_sf-hr-ue, #{itemState(dt, ue)});
3462
+ text-align: var(--_sf-hr-tt-an, #{itemState(dt, tt-an)});
3463
+ letter-spacing: var(--_sf-hr-lr-sg, #{itemState(dt, lr-sg)});
3464
+ line-height: var(--_sf-hr-le-ht, #{itemState(dt, le-ht)});
3465
+ box-shadow: var(--_sf-hr-sw-ae, #{itemState(dt, sw-ae)})
3466
+ var(--_sf-hr-sw-br, #{itemState(dt, sw-br)})
3467
+ var(--_sf-hr-sw-sd, #{itemState(dt, sw-sd)})
3468
+ var(--_sf-hr-sw-cr, #{itemState(dt, sw-cr)});
3469
+ }
3470
+
3471
+ // `.open` is set on .est__dropdown by CommonDropdown when isOpen.
3472
+ // This rule (0,3,0) outranks the closed default on `.list` below.
2947
3473
  &.open .list {
2948
- display: none;
2949
- margin-top: var(
2950
- --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-on-ad-lt-sg,
2951
- var(
2952
- --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-on-ad-lt-sg,
2953
- var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-on-ad-lt-sg)
2954
- )
3474
+ display: flex;
3475
+ // Gap between the trigger box (Widget Style) and this panel, from
3476
+ // Widget Dropdown > Top Spacing. Falls back to the layout's
3477
+ // option/label spacing, which this rule borrowed before the
3478
+ // dedicated field existed, so saved configs keep their offset.
3479
+ margin-top: prepareMediaVariable(
3480
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-tp-sg
2955
3481
  );
2956
- gap: var(
2957
- --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
2958
- var(
2959
- --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
2960
- var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg)
2961
- )
3482
+ // Panel's own padding, from "Widget Dropdown".
3483
+ padding: #{prepareMediaVariable(
3484
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-pg
3485
+ )};
3486
+ // Panel gap prefers its own Widget Dropdown setting, falling back to
3487
+ // the layout-level item spacing this rule used before.
3488
+ gap: prepareMediaVariable(
3489
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-im-gp
2962
3490
  );
2963
3491
  background-color: var(
2964
- --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr,
3492
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-bd-cr,
2965
3493
  var(
2966
- --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr,
2967
- var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr)
3494
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-bd-cr,
3495
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-bd-cr)
2968
3496
  )
2969
3497
  );
2970
3498
  }
2971
3499
 
2972
3500
  .list {
2973
- display: flex !important;
3501
+ // Closed by default; the `.open` rule above reveals it. This was
3502
+ // `display: flex !important`, which beat the open/closed rules
3503
+ // outright and left the panel permanently on screen.
3504
+ display: none;
2974
3505
  flex-direction: column;
2975
3506
  gap: var(
2976
3507
  --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
@@ -2979,65 +3510,56 @@ $defaultValues: (
2979
3510
  var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg)
2980
3511
  )
2981
3512
  );
2982
- border: var(
2983
- --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-wh,
2984
- var(
2985
- --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-wh,
2986
- var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-wh)
2987
- )
2988
- )
2989
- var(
2990
- --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-se,
2991
- var(
2992
- --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-se,
2993
- var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-se)
2994
- )
2995
- )
2996
- var(
2997
- --_gray-200,
2998
- var(
2999
- --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-cr,
3000
- var(
3001
- --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-cr,
3002
- var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-cr)
3003
- )
3004
- )
3005
- );
3513
+ // Border only when the Widget Dropdown showBorder toggle is on.
3514
+ // The colour previously read `var(--_gray-200, <configured>)`, which
3515
+ // is inverted: --_gray-200 is globally defined, so it always won and
3516
+ // the configured colour was unreachable.
3517
+ &[data-show-border="true"] {
3518
+ border-width: #{prepareMediaVariable(
3519
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-wh
3520
+ )};
3521
+ border-style: #{prepareMediaVariable(
3522
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-se
3523
+ )};
3524
+ border-color: #{prepareMediaVariable(
3525
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-cr
3526
+ )};
3527
+ }
3006
3528
  border-radius: var(
3007
- --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-rs,
3529
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-rs,
3008
3530
  var(
3009
- --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-rs,
3010
- var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-rs)
3531
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-rs,
3532
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-rs)
3011
3533
  )
3012
3534
  );
3013
3535
  box-shadow: var(
3014
3536
  --_show-shadow-dn-se,
3015
3537
  var(
3016
- --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-ae,
3538
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-ae,
3017
3539
  var(
3018
- --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-ae,
3019
- var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-ae)
3540
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-ae,
3541
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-ae)
3020
3542
  )
3021
3543
  )
3022
3544
  var(
3023
- --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-br,
3545
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-br,
3024
3546
  var(
3025
- --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-br,
3026
- var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-br)
3547
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-br,
3548
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-br)
3027
3549
  )
3028
3550
  )
3029
3551
  var(
3030
- --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-sd,
3552
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-sd,
3031
3553
  var(
3032
- --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-sd,
3033
- var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-sd)
3554
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-sd,
3555
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-sd)
3034
3556
  )
3035
3557
  )
3036
3558
  var(
3037
- --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-cr,
3559
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-cr,
3038
3560
  var(
3039
- --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-cr,
3040
- var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-cr)
3561
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-cr,
3562
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-sw-cr)
3041
3563
  )
3042
3564
  )
3043
3565
  );
@@ -3046,13 +3568,15 @@ $defaultValues: (
3046
3568
  left: 0;
3047
3569
  width: 100%;
3048
3570
  background-color: var(
3049
- --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr,
3571
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-bd-cr,
3050
3572
  var(
3051
- --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr,
3052
- var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr)
3573
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-bd-cr,
3574
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-bd-cr)
3053
3575
  )
3054
3576
  );
3055
- border-radius: 4px;
3577
+ // `border-radius: 4px` used to sit here. It came after the
3578
+ // configured radius above and silently won, so the Widget Dropdown
3579
+ // radius setting could never take effect.
3056
3580
  z-index: var(--_higher-zIndex);
3057
3581
  max-height: 200px;
3058
3582
  overflow-y: auto;
@@ -3104,6 +3628,34 @@ $defaultValues: (
3104
3628
  flex-direction: row;
3105
3629
  &[data-dropdown-style="Vertical List"] {
3106
3630
  flex-direction: column;
3631
+
3632
+ // Vertical list: horizontal rule under each item. Uses the same in-flow
3633
+ // `::after` as the standard items — position: relative with a `top`
3634
+ // offset that centres it in the gap — so it lays out identically.
3635
+ .dropdown_wrapper[data-show-divider="true"]:not(:last-child)::after {
3636
+ position: relative;
3637
+ left: auto;
3638
+ right: auto;
3639
+ bottom: auto;
3640
+ top: calc(
3641
+ calc(
3642
+ var(
3643
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3644
+ var(
3645
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3646
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, 0px)
3647
+ )
3648
+ ) +
3649
+ 10px
3650
+ ) /
3651
+ 2
3652
+ );
3653
+ width: 100%;
3654
+ height: #{prepareMediaVariable(
3655
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-wt-se-dr-wh,
3656
+ 1px
3657
+ )};
3658
+ }
3107
3659
  gap: var(
3108
3660
  --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3109
3661
  var(
@@ -3114,26 +3666,50 @@ $defaultValues: (
3114
3666
  }
3115
3667
  .dropdown_wrapper {
3116
3668
  position: relative;
3669
+ // Separator between variant option groups. Driven by the layout's
3670
+ // `dividerBetweenItems` toggle, NOT by showBorder — so it persists
3671
+ // when borders are turned off. Colour/width were hardcoded to a solid
3672
+ // black 1px; they now follow the widget style's border settings.
3673
+ //
3674
+ // The line has to run across the flow, so its geometry depends on the
3675
+ // list direction: a full-width horizontal rule under each item in a
3676
+ // vertical list, and a full-height vertical rule beside each item in a
3677
+ // horizontal one. Only the vertical case existed before, which is why
3678
+ // the divider appeared to work in one direction only.
3117
3679
  &[data-show-divider="true"] {
3118
3680
  &:not(:last-child)::after {
3119
3681
  content: "";
3120
- position: relative;
3121
- background-color: #000;
3122
- height: 1px;
3123
- width: 100%;
3124
- display: flex;
3125
- top: calc(
3126
- calc(
3682
+ position: absolute;
3683
+ // Divider has its own controls (DividerStylesInstance:
3684
+ // dividerWeight / dividerColor, now on widgetDropdown). It used to
3685
+ // borrow the border colour+width, so it only appeared when a
3686
+ // border happened to be configured. Defaults keep it visible when
3687
+ // nothing is set.
3688
+ background-color: #{prepareMediaVariable(
3689
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dr-cr,
3690
+ var(--_gray-200)
3691
+ )};
3692
+
3693
+ // Horizontal list (the default): vertical rule centred in the gap.
3694
+ // This one has to be absolutely positioned — an in-flow ::after
3695
+ // sits *below* its own item, so it cannot draw a line *between*
3696
+ // items in a row. top/bottom rather than height:100% so it does
3697
+ // not depend on the wrapper stretching.
3698
+ top: 0;
3699
+ bottom: 0;
3700
+ width: #{prepareMediaVariable(
3701
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-wt-se-dr-wh,
3702
+ 1px
3703
+ )};
3704
+ right: calc(
3705
+ var(
3706
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3127
3707
  var(
3128
- --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3129
- var(
3130
- --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3131
- var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
3132
- )
3133
- ) +
3134
- 10px
3708
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3709
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, 0px)
3710
+ )
3135
3711
  ) /
3136
- 2
3712
+ -2
3137
3713
  );
3138
3714
  }
3139
3715
  }
@@ -3142,12 +3718,21 @@ $defaultValues: (
3142
3718
  .est__dropdown__main {
3143
3719
  .est__dropdown {
3144
3720
  .list {
3721
+ // NOTE: CommonDropdown (used by the variant picker) renders
3722
+ // option rows as `.option`, not `.list__option`, so this rule
3723
+ // does not apply there — the working divider lives on `.option`
3724
+ // above. Kept for the other dropdown components that do render
3725
+ // `.list__option`, with the hardcoded black 1px variablised.
3145
3726
  :not(:last-child).list__option {
3146
3727
  &::after {
3147
3728
  content: "";
3148
3729
  position: relative;
3149
- background-color: #000;
3150
- height: 1px;
3730
+ background-color: #{prepareMediaVariable(
3731
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-cr
3732
+ )};
3733
+ height: #{prepareMediaVariable(
3734
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-wt-dn-br-wh
3735
+ )};
3151
3736
  width: 100%;
3152
3737
  display: flex;
3153
3738
  top: calc(
@@ -4445,83 +5030,583 @@ $defaultValues: (
4445
5030
  small {
4446
5031
  color: red;
4447
5032
  }
5033
+ // .btn__with__text[data-btn-name="selectButton"] {
5034
+ // &[data-show-shadow="false"] {
5035
+ // --_show-shadow: none;
5036
+ // }
5037
+ // &[data-icon-position="left"] {
5038
+ // --_sf-fd-bn: row;
5039
+ // }
5040
+ // &[data-icon-position="right"] {
5041
+ // --_sf-fd-bn: row-reverse;
5042
+ // }
5043
+ // &[data-icon-position="center"] {
5044
+ // --_sf-fd-bn: row;
5045
+ // }
5046
+
5047
+ // &:hover {
5048
+ // --_sf-hr-bd-cr: var(
5049
+ // --_ctm-mob-dn-rm-bn-hr-se-bd-cr,
5050
+ // var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr))
5051
+ // );
5052
+ // --_sf-hr-br-cr: var(
5053
+ // --_ctm-mob-dn-rm-bn-hr-se-br-cr,
5054
+ // var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr))
5055
+ // );
5056
+ // --_sf-hr-br-se: var(
5057
+ // --_ctm-mob-dn-rm-bn-hr-se-br-se,
5058
+ // var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se))
5059
+ // );
5060
+ // --_sf-hr-br-wh: var(
5061
+ // --_ctm-mob-dn-rm-bn-hr-se-br-wh,
5062
+ // var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh))
5063
+ // );
5064
+ // --_sf-hr-br-rs: var(
5065
+ // --_ctm-mob-dn-rm-bn-hr-se-br-rs,
5066
+ // var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs))
5067
+ // );
5068
+ // --_sf-hr-at: var(
5069
+ // --_ctm-mob-dn-rm-bn-hr-se-at,
5070
+ // var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at))
5071
+ // );
5072
+ // --_sf-hr-gp: var(
5073
+ // --_ctm-mob-dn-rm-bn-hr-se-gp,
5074
+ // var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp))
5075
+ // );
5076
+
5077
+ // // for shadow
5078
+ // --_sf-hr-sw-ae: var(
5079
+ // --_ctm-mob-dn-rm-bn-hr-se-sw-ae,
5080
+ // var(--_ctm-tab-dn-rm-bn-hr-se-sw-ae, var(--_ctm-dn-rm-bn-hr-se-sw-ae))
5081
+ // );
5082
+ // --_sf-hr-sw-br: var(
5083
+ // --_ctm-mob-dn-rm-bn-hr-se-sw-br,
5084
+ // var(--_ctm-tab-dn-rm-bn-hr-se-sw-br, var(--_ctm-dn-rm-bn-hr-se-sw-br))
5085
+ // );
5086
+ // --_sf-hr-sw-hr: var(
5087
+ // --_ctm-mob-dn-rm-bn-hr-se-sw-hr,
5088
+ // var(--_ctm-tab-dn-rm-bn-hr-se-sw-hr, var(--_ctm-dn-rm-bn-hr-se-sw-hr))
5089
+ // );
5090
+ // --_sf-hr-sw-cr: var(
5091
+ // --_ctm-mob-dn-rm-bn-hr-se-sw-cr,
5092
+ // var(--_ctm-tab-dn-rm-bn-hr-se-sw-cr, var(--_ctm-dn-rm-bn-hr-se-sw-cr))
5093
+ // );
5094
+
5095
+ // // for font
5096
+
5097
+ // --_sf-hr-cr: var(
5098
+ // --_ctm-mob-dn-rm-bn-hr-se-cr,
5099
+ // var(--_ctm-tab-dn-rm-bn-hr-se-cr, var(--_ctm-dn-rm-bn-hr-se-cr))
5100
+ // );
5101
+ // --_sf-hr-ft-fy: var(
5102
+ // --_ctm-mob-dn-rm-bn-hr-se-ft-fy,
5103
+ // var(--_ctm-tab-dn-rm-bn-hr-se-ft-fy, var(--_ctm-dn-rm-bn-hr-se-ft-fy))
5104
+ // );
5105
+ // --_sf-hr-ft-se: var(
5106
+ // --_ctm-mob-dn-rm-bn-hr-se-ft-se,
5107
+ // var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se))
5108
+ // );
5109
+ // --_sf-hr-ft-wt: var(
5110
+ // --_ctm-mob-dn-rm-bn-hr-se-ft-wt,
5111
+ // var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt))
5112
+ // );
5113
+ // --_sf-hr-ft-se-ic: var(
5114
+ // --_ctm-mob-dn-rm-bn-hr-se-ft-se-ic,
5115
+ // var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic))
5116
+ // );
5117
+ // --_sf-hr-tt-an: var(
5118
+ // --_ctm-mob-dn-rm-bn-hr-se-tt-an,
5119
+ // var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an))
5120
+ // );
5121
+ // --_sf-hr-lr-sg: var(
5122
+ // --_ctm-mob-dn-rm-bn-hr-se-lr-sg,
5123
+ // var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg))
5124
+ // );
5125
+ // --_sf-hr-le-ht: var(
5126
+ // --_ctm-mob-dn-rm-bn-hr-se-le-ht,
5127
+ // var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht))
5128
+ // );
5129
+
5130
+ // --_sf-hr-in-se: var(
5131
+ // --_ctm-mob-dn-rm-bn-hr-se-in-se,
5132
+ // var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
5133
+ // );
5134
+ // --_sf-hr-in-se: var(
5135
+ // --_ctm-mob-dn-rm-bn-hr-se-in-se,
5136
+ // var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
5137
+ // );
5138
+ // --_sf-hr-in-c1: var(
5139
+ // --_ctm-mob-dn-rm-bn-hr-se-in-c1,
5140
+ // var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1))
5141
+ // );
5142
+ // --_sf-hr-ue: var(
5143
+ // --_ctm-mob-dn-rm-bn-hr-se-ue,
5144
+ // var(--_ctm-tab-dn-rm-bn-hr-se-ue, var(--_ctm-dn-rm-bn-hr-se-ue))
5145
+ // );
5146
+
5147
+ // // for pading and width
5148
+ // --_sf-hr-pg: var(
5149
+ // --_ctm-mob-dn-rm-bn-hr-pg,
5150
+ // var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg))
5151
+ // );
5152
+ // --_sf-hr-wh: var(
5153
+ // --_ctm-mob-dn-rm-bn-hr-wh,
5154
+ // var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh))
5155
+ // );
5156
+
5157
+ // &[data-hover-show-shadow="false"] {
5158
+ // --_hover-show-shadow: none;
5159
+ // }
5160
+ // &[data-hover-show-icon="false"] {
5161
+ // --_hover-show-icon: none;
5162
+ // }
5163
+ // }
5164
+ // background-color: prepareMediaVariable(
5165
+ // --_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-bd-cr
5166
+ // );
5167
+
5168
+ // padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-pg));
5169
+ // width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wh));
5170
+ // display: flex;
5171
+ // flex-direction: var(--_sf-fd-bn);
5172
+ // align-items: center;
5173
+
5174
+ // justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-at));
5175
+ // gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-gp));
5176
+
5177
+ // border-radius: var(
5178
+ // --_sf-hr-br-rs,
5179
+ // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-rs)
5180
+ // );
5181
+
5182
+ // box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-ae))
5183
+ // var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-br))
5184
+ // var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-sd))
5185
+ // var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-sw-cr));
5186
+
5187
+ // &[data-show-border="true"] {
5188
+ // border-color: var(
5189
+ // prepareMediaVariable(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-cr)
5190
+ // );
5191
+
5192
+ // border-style: var(
5193
+ // --_sf-hr-br-se,
5194
+ // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-se)
5195
+ // );
5196
+
5197
+ // border-width: var(
5198
+ // --_sf-hr-br-wh,
5199
+ // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-br-wh)
5200
+ // );
5201
+ // }
5202
+
5203
+ // .txt {
5204
+ // display: flex;
5205
+
5206
+ // color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-cr));
5207
+
5208
+ // font-family: var(
5209
+ // --_sf-hr-ft-fy,
5210
+ // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-fy)
5211
+ // );
5212
+
5213
+ // font-size: var(
5214
+ // --_sf-hr-ft-se,
5215
+ // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se)
5216
+ // );
5217
+
5218
+ // font-weight: var(
5219
+ // --_sf-hr-ft-wt,
5220
+ // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-wt)
5221
+ // );
5222
+
5223
+ // font-style: var(
5224
+ // --_sf-hr-ft-se-ic,
5225
+ // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-se-ic)
5226
+ // );
5227
+
5228
+ // text-align: var(
5229
+ // --_sf-hr-tt-an,
5230
+ // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-tt-an)
5231
+ // );
5232
+
5233
+ // letter-spacing: var(
5234
+ // --_sf-hr-lr-sg,
5235
+ // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-lr-sg)
5236
+ // );
5237
+
5238
+ // line-height: var(
5239
+ // --_sf-hr-le-ht,
5240
+ // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-le-ht)
5241
+ // );
5242
+
5243
+ // text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
5244
+ // }
5245
+
5246
+ // .icon {
5247
+ // display: var(--_hover-show-icon, var(--_show-icon, flex));
5248
+ // svg {
5249
+ // width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
5250
+ // height: var(
5251
+ // --_sf-hr-in-se,
5252
+ // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se)
5253
+ // );
5254
+
5255
+ // path {
5256
+ // stroke: var(
5257
+ // --_sf-hr-in-c1,
5258
+ // prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-c1)
5259
+ // );
5260
+ // }
5261
+ // }
5262
+ // }
5263
+ // [data-element-style="Text"] {
5264
+ // display: inline-block;
5265
+ // width: 100%;
5266
+ // }
5267
+
5268
+ // .icon--hover {
5269
+ // // position: absolute;
5270
+ // // inset: 0;
5271
+ // // opacity: 0;
5272
+ // display: none;
5273
+ // transition: opacity 0.2s ease;
5274
+ // }
5275
+
5276
+ // &:hover .icon--hover {
5277
+ // // opacity: 1;
5278
+ // display: flex;
5279
+ // }
5280
+
5281
+ // &:hover .icon--default {
5282
+ // // opacity: 0;
5283
+ // display: none;
5284
+ // }
5285
+ // }
4448
5286
  }
5287
+ .btn__with__text[data-btn-name="selectButton"] {
5288
+ &[data-show-shadow="false"] {
5289
+ --_show-shadow: none;
5290
+ }
5291
+ &[data-icon-position="left"] {
5292
+ --_sf-fd-bn: row;
5293
+ }
5294
+ &[data-icon-position="right"] {
5295
+ --_sf-fd-bn: row-reverse;
5296
+ }
5297
+ &[data-icon-position="center"] {
5298
+ --_sf-fd-bn: row;
5299
+ }
5300
+
5301
+ &:hover {
5302
+ --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-bd-cr)};
5303
+ --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-cr)};
5304
+ --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-se)};
5305
+ --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-wh)};
5306
+ --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-rs)};
5307
+ --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-at)};
5308
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-gp)};
5309
+
5310
+ // for shadow
5311
+ --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-ae)};
5312
+ --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-br)};
5313
+ --_sf-hr-sw-sd: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-sd)};
5314
+ --_sf-hr-sw-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-cr)};
5315
+
5316
+ // for font
5317
+ --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-cr)};
5318
+ --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-fy)};
5319
+ --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se)};
5320
+ --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-wt)};
5321
+ --_sf-hr-ft-se-ic: #{prepareMediaVariable(
5322
+ --_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se-ic
5323
+ )};
5324
+ --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-tt-an)};
5325
+ --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-lr-sg)};
5326
+ --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-le-ht)};
5327
+
5328
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-in-se)};
5329
+ --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-in-c1)};
5330
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ue)};
5331
+
5332
+ // for padding and width
5333
+ --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-pg)};
5334
+ --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-wh)};
5335
+
5336
+ &[data-hover-show-shadow="false"] {
5337
+ --_hover-show-shadow: none;
5338
+ }
4449
5339
 
4450
- .select-button {
5340
+ &[data-hover-show-icon="false"] {
5341
+ --_hover-show-icon: none;
5342
+ }
5343
+ }
5344
+ background-color: var(
5345
+ --_sf-hr-bd-cr,
5346
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-bd-cr)
5347
+ );
5348
+ white-space: nowrap;
5349
+ padding: var(
5350
+ --_sf-hr-pg,
5351
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-pg)
5352
+ );
5353
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-wh));
4451
5354
  display: flex;
5355
+ flex-direction: var(--_sf-fd-bn);
4452
5356
  align-items: center;
4453
- padding: 10px 16px;
4454
- transition: all 0.3s ease;
4455
- background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-bd-cr);
4456
- border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-cr);
4457
- border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-rs);
4458
- border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-se);
4459
- border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-wh);
4460
- color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-cr);
4461
- font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-fy);
4462
- font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se);
4463
- font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se-ic);
4464
- font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-wt);
4465
- line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-le-ht);
4466
- letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-lr-sg);
4467
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-ae)
4468
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-br)
4469
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-sd)
4470
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-cr);
4471
- text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-tt-an);
4472
- text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ue);
4473
5357
 
4474
- &:hover {
4475
- background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-bd-cr);
4476
- border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-cr);
4477
- border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-rs);
4478
- border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-se);
4479
- border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-wh);
4480
- color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-cr);
4481
- font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-fy);
4482
- font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se);
4483
- font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se-ic);
4484
- font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-wt);
4485
- line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-le-ht);
4486
- letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-lr-sg);
4487
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-ae)
4488
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-br)
4489
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-sd)
4490
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-cr);
4491
- text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-tt-an);
4492
- text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ue);
5358
+ justify-content: var(
5359
+ --_sf-hr-at,
5360
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-at)
5361
+ );
5362
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-gp));
5363
+
5364
+ border-radius: var(
5365
+ --_sf-hr-br-rs,
5366
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-rs)
5367
+ );
5368
+
5369
+ box-shadow: var(
5370
+ --_sf-hr-sw-ae,
5371
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-ae)
5372
+ )
5373
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-br))
5374
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-sd))
5375
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-cr));
5376
+
5377
+ &[data-show-border="true"] {
5378
+ border-color: var(
5379
+ --_sf-hr-br-cr,
5380
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-cr)
5381
+ );
5382
+
5383
+ border-style: var(
5384
+ --_sf-hr-br-se,
5385
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-se)
5386
+ );
5387
+
5388
+ border-width: var(
5389
+ --_sf-hr-br-wh,
5390
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-wh)
5391
+ );
5392
+ }
5393
+
5394
+ .txt {
5395
+ display: flex;
5396
+
5397
+ color: var(
5398
+ --_sf-hr-cr,
5399
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-cr)
5400
+ );
5401
+
5402
+ font-family: var(
5403
+ --_sf-hr-ft-fy,
5404
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-fy)
5405
+ );
5406
+
5407
+ font-size: var(
5408
+ --_sf-hr-ft-se,
5409
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se)
5410
+ );
5411
+
5412
+ font-weight: var(
5413
+ --_sf-hr-ft-wt,
5414
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-wt)
5415
+ );
5416
+
5417
+ font-style: var(
5418
+ --_sf-hr-ft-se-ic,
5419
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se-ic)
5420
+ );
5421
+
5422
+ text-align: var(
5423
+ --_sf-hr-tt-an,
5424
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-tt-an)
5425
+ );
5426
+
5427
+ letter-spacing: var(
5428
+ --_sf-hr-lr-sg,
5429
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-lr-sg)
5430
+ );
5431
+
5432
+ line-height: var(
5433
+ --_sf-hr-le-ht,
5434
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-le-ht)
5435
+ );
5436
+
5437
+ text-decoration: var(
5438
+ --_sf-hr-ue,
5439
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ue)
5440
+ );
4493
5441
  }
4494
5442
 
4495
5443
  .icon {
4496
- margin-right: 8px;
4497
- color: #003366;
5444
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
5445
+ svg {
5446
+ width: var(
5447
+ --_sf-hr-in-se,
5448
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-in-se)
5449
+ );
5450
+ height: var(
5451
+ --_sf-hr-in-se,
5452
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-in-se)
5453
+ );
5454
+
5455
+ path {
5456
+ stroke: var(
5457
+ --_sf-hr-in-c1,
5458
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-in-c1)
5459
+ );
5460
+ }
5461
+ }
5462
+ }
5463
+ [data-element-style="Text"] {
5464
+ display: inline-block;
5465
+ width: 100%;
5466
+ }
5467
+
5468
+ .icon--hover {
5469
+ // position: absolute;
5470
+ // inset: 0;
5471
+ // opacity: 0;
5472
+ display: none;
5473
+ transition: opacity 0.2s ease;
5474
+ }
5475
+
5476
+ &:hover .icon--hover {
5477
+ // opacity: 1;
5478
+ display: flex;
4498
5479
  }
4499
5480
 
4500
- &.selected {
4501
- background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-bd-cr);
4502
- border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-cr);
4503
- border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-rs);
4504
- border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-se);
4505
- border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-wh);
4506
- color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-cr);
4507
- font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-fy);
4508
- font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se);
4509
- font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se-ic);
4510
- font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-wt);
4511
- line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-le-ht);
4512
- letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-lr-sg);
4513
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-ae)
4514
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-br)
4515
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-sd)
4516
- prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-cr);
4517
- text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-tt-an);
4518
- text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ue);
4519
-
4520
- .icon {
4521
- color: white;
5481
+ &:hover .icon--default {
5482
+ // opacity: 0;
5483
+ display: none;
5484
+ }
5485
+
5486
+ // Selected state. Serves the same role as `[data-is-selected]` in
5487
+ // bundle.scss, but chains the two states inside a single var() rather than
5488
+ // going through an intermediate `--_sf-sd-*`: the selected-state responsive
5489
+ // chain falls through to the DEFAULT-state chain when that state is left
5490
+ // unconfigured. An intermediate variable cannot do this — prepareMediaVariable
5491
+ // tails with `inherit`, so the variable is always "set" and a var() fallback
5492
+ // on it is dead code, leaving padding/width/gap to collapse to 0/auto.
5493
+ &[data-is-selected="true"] {
5494
+ background-color: #{selectButtonSelectedOrDefault(bd-cr)};
5495
+ padding: #{selectButtonSelectedOrDefault(pg)};
5496
+ width: #{selectButtonSelectedOrDefault(wh)};
5497
+ justify-content: #{selectButtonSelectedOrDefault(at)};
5498
+ gap: #{selectButtonSelectedOrDefault(gp)};
5499
+ border-radius: #{selectButtonSelectedOrDefault(br-rs)};
5500
+
5501
+ box-shadow: #{selectButtonSelectedOrDefault(sw-ae)}
5502
+ #{selectButtonSelectedOrDefault(sw-br)} #{selectButtonSelectedOrDefault(sw-sd)}
5503
+ #{selectButtonSelectedOrDefault(sw-cr)};
5504
+
5505
+ &[data-show-border="true"] {
5506
+ border-color: #{selectButtonSelectedOrDefault(br-cr)};
5507
+ border-style: #{selectButtonSelectedOrDefault(br-se)};
5508
+ border-width: #{selectButtonSelectedOrDefault(br-wh)};
5509
+ }
5510
+
5511
+ .txt {
5512
+ color: #{selectButtonSelectedOrDefault(cr)};
5513
+ font-family: #{selectButtonSelectedOrDefault(ft-fy)};
5514
+ font-size: #{selectButtonSelectedOrDefault(ft-se)};
5515
+ font-weight: #{selectButtonSelectedOrDefault(ft-wt)};
5516
+ font-style: #{selectButtonSelectedOrDefault(ft-se-ic)};
5517
+ text-align: #{selectButtonSelectedOrDefault(tt-an)};
5518
+ letter-spacing: #{selectButtonSelectedOrDefault(lr-sg)};
5519
+ line-height: #{selectButtonSelectedOrDefault(le-ht)};
5520
+ text-decoration: #{selectButtonSelectedOrDefault(ue)};
5521
+ }
5522
+
5523
+ .icon svg {
5524
+ width: #{selectButtonSelectedOrDefault(in-se)};
5525
+ height: #{selectButtonSelectedOrDefault(in-se)};
5526
+
5527
+ path {
5528
+ stroke: #{selectButtonSelectedOrDefault(in-c1)};
5529
+ }
4522
5530
  }
4523
5531
  }
4524
5532
  }
5533
+ // .select-button {
5534
+ // display: flex;
5535
+ // align-items: center;
5536
+ // padding: 10px 16px;
5537
+ // transition: all 0.3s ease;
5538
+ // background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-bd-cr);
5539
+ // border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-rs);
5540
+ // color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-cr);
5541
+ // font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-fy);
5542
+ // font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se);
5543
+ // font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se-ic);
5544
+ // font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-wt);
5545
+ // line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-le-ht);
5546
+ // letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-lr-sg);
5547
+ // box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-ae)
5548
+ // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-br)
5549
+ // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-sd)
5550
+ // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-cr);
5551
+ // text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-tt-an);
5552
+ // text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ue);
5553
+
5554
+ // border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-cr);
5555
+ // border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-se);
5556
+ // border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-wh);
5557
+
5558
+ // &:hover {
5559
+ // background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-bd-cr);
5560
+ // border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-rs);
5561
+ // color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-cr);
5562
+ // font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-fy);
5563
+ // font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se);
5564
+ // font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se-ic);
5565
+ // font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-wt);
5566
+ // line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-le-ht);
5567
+ // letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-lr-sg);
5568
+ // box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-ae)
5569
+ // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-br)
5570
+ // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-sd)
5571
+ // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-cr);
5572
+ // text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-tt-an);
5573
+ // text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ue);
5574
+
5575
+ // border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-cr);
5576
+ // border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-se);
5577
+ // border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-wh);
5578
+ // }
5579
+
5580
+ // .icon {
5581
+ // margin-right: 8px;
5582
+ // color: #003366;
5583
+ // }
5584
+
5585
+ // &.selected {
5586
+ // background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-bd-cr);
5587
+ // border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-cr);
5588
+ // border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-rs);
5589
+ // border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-se);
5590
+ // border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-wh);
5591
+ // color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-cr);
5592
+ // font-family: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-fy);
5593
+ // font-size: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se);
5594
+ // font-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se-ic);
5595
+ // font-weight: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-wt);
5596
+ // line-height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-le-ht);
5597
+ // letter-spacing: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-lr-sg);
5598
+ // box-shadow: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-ae)
5599
+ // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-br)
5600
+ // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-sd)
5601
+ // prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-cr);
5602
+ // text-align: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-tt-an);
5603
+ // text-decoration: prepareMediaVariable(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ue);
5604
+
5605
+ // .icon {
5606
+ // color: white;
5607
+ // }
5608
+ // }
5609
+ // }
4525
5610
  }
4526
5611
  }
4527
5612
  }