@sc-360-v2/storefront-cms-library 0.4.47 → 0.4.50

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 (185) hide show
  1. package/dist/add-existing-form.scss +66 -66
  2. package/dist/add-order.scss +377 -377
  3. package/dist/add-products-tab copy.scss +1132 -1132
  4. package/dist/add-products-tab-details.scss +3818 -0
  5. package/dist/add-products-tab.scss +968 -3031
  6. package/dist/allocationDetails.scss +2247 -2247
  7. package/dist/allocations.scss +1603 -1604
  8. package/dist/amount-estimator.scss +1083 -1083
  9. package/dist/animation-control.scss +23 -23
  10. package/dist/badge.scss +388 -388
  11. package/dist/brand-basic-elements.scss +292 -292
  12. package/dist/brand.scss +93 -93
  13. package/dist/breadcrumbs.scss +802 -802
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-order-pad.scss +677 -677
  16. package/dist/bulk-variant-picker copy.scss +1121 -1121
  17. package/dist/bulk-variant-picker.scss +3294 -3092
  18. package/dist/bundle copy.scss +2805 -2805
  19. package/dist/bundle.scss +2383 -2383
  20. package/dist/bundleDetails copy.scss +1431 -1431
  21. package/dist/bundleDetails.scss +3320 -3285
  22. package/dist/button copy.scss +271 -271
  23. package/dist/button.scss +292 -292
  24. package/dist/buy-for-tab-container.scss +90 -90
  25. package/dist/buy-for-tab.scss +3 -4
  26. package/dist/buy-for-tabs-container-item.scss +80 -80
  27. package/dist/buyForHeaders.scss +6718 -6718
  28. package/dist/buyForPopup.scss +70 -52
  29. package/dist/cart-details.scss +3207 -2386
  30. package/dist/cart-products-sidebar.scss +211 -211
  31. package/dist/cart-summary.scss +2728 -2728
  32. package/dist/cart-wrapper.scss +127 -127
  33. package/dist/cart.scss +269 -269
  34. package/dist/cartAttributes.scss +935 -903
  35. package/dist/cartDropdownOverlay.scss +514 -231
  36. package/dist/cartGrouping.scss +89 -89
  37. package/dist/category-groups-element.scss +138 -138
  38. package/dist/category.scss +73 -73
  39. package/dist/categoryDetails.scss +61 -61
  40. package/dist/categoryWidget.scss +34 -34
  41. package/dist/checkbox-radio.scss +124 -124
  42. package/dist/checkout.scss +6460 -6569
  43. package/dist/code-temp.scss +58 -58
  44. package/dist/colorpicker_v2.scss +52 -52
  45. package/dist/common-element.scss +35 -35
  46. package/dist/confirm-modal.scss +351 -351
  47. package/dist/confirmationModal.scss +139 -139
  48. package/dist/contact-us.scss +105 -105
  49. package/dist/container.scss +114 -114
  50. package/dist/countdown.scss +751 -751
  51. package/dist/coupon.scss +1254 -1254
  52. package/dist/custom-fonts.scss +100 -100
  53. package/dist/customization-tree.scss +160 -160
  54. package/dist/default-dropdown.scss +240 -240
  55. package/dist/dropdownTemplate.scss +98 -46
  56. package/dist/editCartItem.scss +111 -111
  57. package/dist/embed-temp.scss +72 -72
  58. package/dist/embroider-preview-element.scss +94 -94
  59. package/dist/embroider-template-1-v2.scss +937 -937
  60. package/dist/embroider-template-1.scss +482 -482
  61. package/dist/embroidery.scss +213 -213
  62. package/dist/employee-bulk-order.scss +4057 -4057
  63. package/dist/emtpy-templates.scss +165 -165
  64. package/dist/faq.scss +564 -564
  65. package/dist/fb-dropdown.scss +125 -125
  66. package/dist/filter-results.scss +323 -323
  67. package/dist/filters.scss +2418 -2418
  68. package/dist/flex-text-editor.scss +271 -271
  69. package/dist/form-preview.scss +290 -290
  70. package/dist/form-zindex-module.scss +24 -24
  71. package/dist/gallery-slider-temp.scss +1234 -1234
  72. package/dist/global-styles.scss +86 -86
  73. package/dist/grid.scss +119 -119
  74. package/dist/hotspot.scss +397 -397
  75. package/dist/icon-library.scss +74 -74
  76. package/dist/icon-list.scss +268 -268
  77. package/dist/image-for-product.scss +21 -21
  78. package/dist/image-temp.scss +168 -168
  79. package/dist/item-stock.scss +87 -87
  80. package/dist/language-selector.scss +528 -558
  81. package/dist/layouter-item.scss +89 -89
  82. package/dist/layouter-pro-item.scss +80 -80
  83. package/dist/layouter-pro.scss +88 -88
  84. package/dist/layouter.scss +294 -294
  85. package/dist/light-box-v2.scss +105 -105
  86. package/dist/lightbox.scss +78 -78
  87. package/dist/line.scss +166 -166
  88. package/dist/loader.scss +37 -37
  89. package/dist/login.scss +1473 -1473
  90. package/dist/map.scss +962 -962
  91. package/dist/marchandiserSets.scss +60 -60
  92. package/dist/mega-menu-container.scss +99 -99
  93. package/dist/mega-menu.scss +838 -838
  94. package/dist/menu-item.scss +19 -19
  95. package/dist/menu-v2.scss +730 -730
  96. package/dist/menu.scss +162 -162
  97. package/dist/modal.scss +2267 -2267
  98. package/dist/multi-select-dropdown.scss +282 -279
  99. package/dist/my-templates.scss +463 -463
  100. package/dist/my-wishlist.scss +17 -17
  101. package/dist/option-bar.scss +845 -845
  102. package/dist/order-processing.scss +61 -61
  103. package/dist/order-status.scss +1856 -1856
  104. package/dist/overflow-module.scss +63 -63
  105. package/dist/past-orders.scss +975 -975
  106. package/dist/payment-methods.scss +289 -289
  107. package/dist/pickup-locations.scss +1167 -1167
  108. package/dist/position-module.scss +95 -95
  109. package/dist/prefix-list.scss +86 -86
  110. package/dist/product-actions copy.scss +2765 -2765
  111. package/dist/product-actions.scss +2286 -2286
  112. package/dist/product-basic-elements.scss +770 -770
  113. package/dist/product-customizations.scss +149 -149
  114. package/dist/product-highlights copy.scss +217 -217
  115. package/dist/product-highlights.scss +311 -311
  116. package/dist/product-image copy.scss +787 -787
  117. package/dist/product-image-bundles.scss +1512 -0
  118. package/dist/product-image.scss +1 -1
  119. package/dist/product-inventory.scss +1378 -1378
  120. package/dist/product-options.scss +1144 -1144
  121. package/dist/product-price.scss +2598 -2598
  122. package/dist/product-promotions.scss +2759 -2759
  123. package/dist/product-sizechart.scss +1826 -1826
  124. package/dist/product.scss +97 -97
  125. package/dist/productDetails.scss +70 -70
  126. package/dist/profile.scss +4 -3
  127. package/dist/quantity-selector.scss +3 -2
  128. package/dist/quick-links.scss +552 -552
  129. package/dist/quick-order-pad.scss +237 -237
  130. package/dist/quota-details.scss +263 -263
  131. package/dist/quotes.scss +737 -737
  132. package/dist/repeater copy.scss +635 -635
  133. package/dist/repeater-embla-controls.scss +6 -3
  134. package/dist/repeater-grid-toggle.scss +58 -58
  135. package/dist/repeater-item.scss +90 -90
  136. package/dist/repeater.scss +915 -915
  137. package/dist/request-for-quotes.scss +746 -746
  138. package/dist/responsive-behaviour.scss +29 -29
  139. package/dist/rfqs.scss +736 -736
  140. package/dist/scroll.scss +222 -222
  141. package/dist/search-results-heading.scss +279 -279
  142. package/dist/search.scss +296 -296
  143. package/dist/section.scss +209 -209
  144. package/dist/shareCartSideBar.scss +254 -254
  145. package/dist/shipping-estimator.scss +41 -41
  146. package/dist/shipping-payments.scss +2467 -2467
  147. package/dist/simple-list.scss +259 -259
  148. package/dist/skeleton.scss +74 -74
  149. package/dist/social.scss +276 -276
  150. package/dist/sort.scss +89 -89
  151. package/dist/spotlight.scss +1663 -1663
  152. package/dist/stack.scss +129 -129
  153. package/dist/static-global.scss +198 -0
  154. package/dist/static-text.scss +52 -52
  155. package/dist/stockStatus.scss +64 -64
  156. package/dist/store-locations.scss +1398 -1398
  157. package/dist/sub-category.scss +74 -74
  158. package/dist/submit-quote.scss +275 -275
  159. package/dist/tab-container-item.scss +80 -80
  160. package/dist/tab-container.scss +89 -89
  161. package/dist/tab-v2.scss +583 -583
  162. package/dist/table-common.scss +506 -506
  163. package/dist/table.scss +685 -685
  164. package/dist/tabs.scss +395 -395
  165. package/dist/text-temp-v2.scss +139 -139
  166. package/dist/text-temp.scss +109 -109
  167. package/dist/theme-classes.scss +296 -296
  168. package/dist/toaster.scss +350 -350
  169. package/dist/toggle-button.scss +32 -32
  170. package/dist/transform-properties-module.scss +20 -20
  171. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +1945 -381
  172. package/dist/types/builder/tools/element-edit/bulkVariantPicker.d.ts +1 -1
  173. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +9 -0
  174. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +66 -0
  175. package/dist/uom-selector.scss +1169 -1169
  176. package/dist/user-elements copy.scss +1437 -1437
  177. package/dist/user-elements.scss +2471 -2471
  178. package/dist/variant-picker.scss +2384 -2384
  179. package/dist/video.scss +476 -476
  180. package/dist/volume-pricing copy 2.scss +1468 -1468
  181. package/dist/volume-pricing copy.scss +1077 -1077
  182. package/dist/volume-pricing.scss +1175 -1175
  183. package/dist/widget.scss +148 -148
  184. package/dist/wishlist-overlay.scss +48 -48
  185. package/package.json +1 -1
package/dist/add-products-tab.scss CHANGED
@@ -12,6 +12,10 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
12
12
  }
13
13
  [data-div-type="element"] {
14
14
  &[data-element-type="addProductsTab"] {
15
+ // Import additional styles from partial file
16
+ @import "./add-products-tab-details";
17
+ @import "./product-image-bundles.scss";
18
+
15
19
  // width: var(
16
20
  // --_sf-el-wh-st-mx,
17
21
  // calc(
@@ -26,13 +30,13 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
26
30
  & > div {
27
31
  &.wrapper {
28
32
  width: 100%;
29
- &:has(.buyfor_content_loader) {
30
- display: flex;
31
- justify-content: center;
32
- align-items: center;
33
- width: 100%;
34
- height: calc(100vh - 270px);
35
- }
33
+ // &:has(.buyfor_content_loader) {
34
+ // display: flex;
35
+ // justify-content: center;
36
+ // align-items: center;
37
+ // width: 100%;
38
+ // height: 100%;
39
+ // }
36
40
  }
37
41
  }
38
42
 
@@ -40,6 +44,8 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
40
44
  display: flex;
41
45
  flex-direction: column;
42
46
  align-items: center;
47
+ justify-content: center;
48
+ min-height: 350px;
43
49
  .spinner_sm {
44
50
  border: 4px solid var(--_gray-200);
45
51
  border-top: 4px solid var(--_thm-cs-at-py);
@@ -81,7 +87,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
81
87
  justify-content: space-between;
82
88
  align-items: center;
83
89
  border-bottom: 1px solid var(--_thm-cs-be-se-3);
84
- padding-bottom: 16px;
90
+ padding-bottom: 24px;
85
91
  .section-title {
86
92
  font-size: var(
87
93
  --_ctm-mob-dn-hr-te-ft-se,
@@ -115,7 +121,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
115
121
  align-items: center;
116
122
  border: 1px solid var(--_gray-300);
117
123
  border-radius: 4px;
118
- padding: 8px 12px;
124
+ padding: 12px;
119
125
  background: transparent;
120
126
  // height: 40px;
121
127
  transition:
@@ -131,6 +137,11 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
131
137
  margin-right: 8px;
132
138
  color: var(--_thm-cs-be-se-3);
133
139
  }
140
+ .close-icon {
141
+ svg {
142
+ height: 12px;
143
+ }
144
+ }
134
145
 
135
146
  input {
136
147
  border: none;
@@ -150,12 +161,13 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
150
161
  }
151
162
  }
152
163
  }
153
-
164
+ .buyforcart_empty_wrp {
165
+ height: 300px;
166
+ }
154
167
  .add-product-wrapper {
155
168
  display: grid;
156
169
  grid-template-columns: 1fr 1fr;
157
- gap: 48px;
158
- padding-top: 16px;
170
+ // gap: 48px;
159
171
  &:has(.empty_template) {
160
172
  display: flex;
161
173
  padding: 48px;
@@ -242,9 +254,11 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
242
254
  // grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
243
255
  grid-template-columns: 1fr 1fr;
244
256
  gap: 16px;
245
- max-height: 750px;
257
+ max-height: 900px;
246
258
  overflow-y: auto;
247
259
  overflow-x: hidden;
260
+ padding: 24px 24px 24px 0;
261
+ background-color: var(--_base-white);
248
262
 
249
263
  @media (max-width: 500px) {
250
264
  grid-template-columns: 1fr;
@@ -253,7 +267,11 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
253
267
  .product-card {
254
268
  display: flex;
255
269
  flex-direction: column;
270
+ }
271
+ .product-card,
272
+ .tile {
256
273
  gap: 24px;
274
+ transition: background border 400ms ease-in-out;
257
275
  // padding: 16px;
258
276
  // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-bd-cr);
259
277
  @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-bd-cr), 5%);
@@ -571,9 +589,9 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
571
589
  }
572
590
  .add-product-list-details {
573
591
  // border-left: 1px solid var(--_thm-cs-be-se-3);
574
- border-color: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-cr);
575
- border-width: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-wh);
576
- border-style: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-se);
592
+ border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-cr);
593
+ border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-wh);
594
+ border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-se);
577
595
  }
578
596
  .customizer-panel {
579
597
  display: flex;
@@ -581,13 +599,13 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
581
599
  // gap: 12px;
582
600
  // border-left: 0.5px solid #d0d5dd;
583
601
  // padding-left: 48px;
584
- padding: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-pg);
585
- gap: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-im-gp);
586
- border-radius: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-rs);
587
- background-color: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-bd-cr);
588
- // border-color: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-cr);
589
- // border-width: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-wh);
590
- // border-style: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-se);
602
+ padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-pg);
603
+ gap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-im-gp);
604
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-rs);
605
+ background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-bd-cr);
606
+ // border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-cr);
607
+ // border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-wh);
608
+ // border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-se);
591
609
 
592
610
  .product-header {
593
611
  display: flex;
@@ -659,156 +677,6 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
659
677
  }
660
678
  }
661
679
 
662
- .price-options {
663
- display: flex;
664
- align-items: center;
665
-
666
- .price {
667
- display: flex;
668
- flex-direction: column;
669
-
670
- .amount {
671
- font-family: var(
672
- --_ctm-mob-dn-pt-ds-pt-pe-ft-fy,
673
- var(--_ctm-tab-dn-pt-ds-pt-pe-ft-fy, var(--_ctm-dn-pt-ds-pt-pe-ft-fy))
674
- );
675
- font-size: var(
676
- --_ctm-mob-dn-pt-ds-pt-pe-ft-se,
677
- var(--_ctm-tab-dn-pt-ds-pt-pe-ft-se, var(--_ctm-dn-pt-ds-pt-pe-ft-se))
678
- );
679
- font-weight: var(
680
- --_ctm-mob-dn-pt-ds-pt-pe-ft-wt,
681
- var(--_ctm-tab-dn-pt-ds-pt-pe-ft-wt, var(--_ctm-dn-pt-ds-pt-pe-ft-wt))
682
- );
683
- color: var(
684
- --_ctm-mob-dn-pt-ds-pt-pe-cr,
685
- var(--_ctm-tab-dn-pt-ds-pt-pe-cr, var(--_ctm-dn-pt-ds-pt-pe-cr))
686
- );
687
- line-height: var(
688
- --_ctm-mob-dn-pt-ds-pt-pe-le-ht,
689
- var(--_ctm-tab-dn-pt-ds-pt-pe-le-ht, var(--_ctm-dn-pt-ds-pt-pe-le-ht))
690
- );
691
- letter-spacing: var(
692
- --_ctm-mob-dn-pt-ds-pt-pe-lr-sg,
693
- var(--_ctm-tab-dn-pt-ds-pt-pe-lr-sg, var(--_ctm-dn-pt-ds-pt-pe-lr-sg))
694
- );
695
- // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
696
- // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
697
- padding: var(
698
- --_ctm-dn-mob-pt-ds-pt-pe-pg,
699
- var(--_ctm-tab-dn-pt-ds-pt-pe-pg, var(--_ctm-dn-pt-ds-pt-pe-pg))
700
- );
701
- }
702
-
703
- .note {
704
- font-family: "Lato";
705
- font-weight: 500;
706
- font-size: 16px;
707
- line-height: 24px;
708
- color: var(--_success-700);
709
- }
710
- }
711
- }
712
-
713
- .color-options {
714
- display: flex;
715
- flex-direction: column;
716
- margin-top: 12px;
717
- gap: 6px;
718
-
719
- label {
720
- font-family: "Lato";
721
- font-weight: 600;
722
- font-size: 16px;
723
- line-height: 24px;
724
- color: var(--_gray-600);
725
- }
726
- .colors {
727
- display: flex;
728
- flex-wrap: wrap;
729
- gap: 6px;
730
-
731
- .color-circle {
732
- width: 28px;
733
- height: 28px;
734
- border-radius: 50%;
735
- cursor: pointer;
736
-
737
- &.selected {
738
- width: 50px;
739
- height: 28px;
740
- border-radius: 100px;
741
- //border: 0.5px solid var(--_gray-600);
742
- //padding: 6px 5px;
743
- }
744
- .color-code {
745
- width: 28px;
746
- height: 28px;
747
- border-radius: 50%;
748
- cursor: pointer;
749
- &.selected {
750
- width: 50px;
751
- height: 28px;
752
- border-radius: 100px;
753
- border: 0.5px solid var(--_gray-600);
754
- padding: 6px 5px;
755
- }
756
- }
757
- }
758
- }
759
- }
760
-
761
- .fit-size-options {
762
- display: flex;
763
- flex-direction: column;
764
- margin-top: 20px;
765
- gap: 2rem;
766
-
767
- .select_fit,
768
- .fit,
769
- .size {
770
- display: flex;
771
- flex-direction: column;
772
- gap: 6px;
773
-
774
- label {
775
- font-family: "Lato";
776
- font-weight: 600;
777
- font-size: 16px;
778
- line-height: 24px;
779
- color: var(--_gray-600);
780
- }
781
-
782
- .fit_options,
783
- .size_options {
784
- display: flex;
785
- gap: 12px;
786
- flex-wrap: wrap;
787
-
788
- button {
789
- padding: 8px 12px;
790
- border: 0.5px solid var(--_gray-300);
791
- border-radius: 4px;
792
- background: #fff;
793
- font-family: "Lato";
794
- font-weight: 400;
795
- font-size: 16px;
796
- line-height: 24px;
797
- color: var(--_gray-600);
798
- cursor: pointer;
799
-
800
- &.selected {
801
- border: 0.5px solid var(--_primary-400);
802
- background-color: var(--_thm-cs-be-se-3);
803
- font-weight: 600;
804
- font-size: 16px;
805
- color: var(--_primary-400);
806
- }
807
- }
808
- }
809
- }
810
- }
811
-
812
680
  // .product_qty_wrapper {
813
681
  // display: flex;
814
682
  // // width: 124px;
@@ -859,2945 +727,1012 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
859
727
  // }
860
728
  // }
861
729
  // }
862
- .product_qty_wrapper {
730
+ .denominations_container {
731
+ // font-size: 16px;
863
732
  display: flex;
864
- // width: 124px;
865
733
  flex-direction: column;
866
- align-items: flex-start;
867
- gap: 6px;
868
- width: 113px;
869
- margin-block: 12px;
870
-
871
- .product_qty_container {
872
- display: flex;
873
- align-items: flex-start;
874
- align-self: stretch;
875
- border-radius: 4px;
876
- border: 0.5px solid var(--_thm-cs-be-se-3);
877
- background: #fff;
878
- box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
734
+ // gap: 6px;
735
+ // padding-bottom: 14px;
879
736
 
880
- .product_qty_label {
881
- display: flex;
882
- padding: 8px 12px;
883
- align-items: center;
884
- border-radius: 8px 0px 0px 8px;
885
- p {
886
- color: var(--_thm-ty-p1-tt-cr);
887
- font-size: var(--_thm-ty-p1-ft-se);
888
- font-weight: var(--_thm-ty-p1-bd);
889
- // line-height: 24px;
890
- line-height: var(--_thm-ty-p1-le-ht);
891
- }
892
- }
893
- .product_qty_input_container {
894
- height: 40px;
895
- display: flex;
896
- // position: relative;
897
- width: 55px;
898
- border-radius: 0px 4px 4px 0px;
899
- background: transparent;
900
- border-left: 1px solid var(--_thm-cs-be-se-3);
901
- padding: 8px 12px;
902
- }
903
- .product_qty_number {
904
- // display: flex;
905
- // padding: 8px 12px;
906
- align-items: center;
907
- color: var(--_thm-ty-p2-tt-cr);
908
- font-size: var(--_thm-ty-p1-ft-se);
909
- font-weight: var(--_thm-ty-p1-bd);
910
- line-height: var(--_thm-ty-p1-le-ht);
911
- // gap: 8px;
912
- // flex: 1 0 0;
913
- // align-self: stretch;
914
- // border-radius: 0px 4px 4px 0px;
915
- // background: #fff;
916
- // border-left: 1px solid #d0d5dd;
917
- // max-width: 80px;
918
- text-align: center;
919
- width: 75%;
920
- &::-webkit-outer-spin-button,
921
- &::-webkit-inner-spin-button {
922
- -webkit-appearance: none;
923
- margin: 0;
924
- }
925
- }
926
- }
927
- }
928
- .add-to-cart {
929
- // width: 100%;
930
- // height: 56px;
931
- // opacity: 1;
932
- // display: flex;
933
- // align-items: center;
934
- // gap: 8px;
935
- padding-top: 12px;
936
- padding-right: 24px;
937
- padding-bottom: 12px;
938
- padding-left: 24px;
939
- // padding: var(
940
- // --_ctm-mob-dn-pt-ds-at-pg,
941
- // var(--_ctm-tab-dn-pt-ds-at-pg, var(--_ctm-dn-pt-ds-at-pg))
942
- // );
943
- // border-style: var(
944
- // --_ctm-mob-dn-pt-ds-at-br-se,
945
- // var(--_ctm-tab-dn-pt-ds-at-br-se, var(--_ctm-dn-pt-ds-at-br-se))
946
- // );
947
- // border-width: var(
948
- // --_ctm-mob-dn-pt-ds-at-br-wh,
949
- // var(--_ctm-tab-dn-pt-ds-at-br-wh, var(--_ctm-dn-pt-ds-at-br-wh))
950
- // );
951
- // border-radius: var(
952
- // --_ctm-mob-dn-pt-ds-at-br-rs,
953
- // var(--_ctm-tab-dn-pt-ds-at-br-rs, var(--_ctm-dn-pt-ds-at-br-rs))
954
- // );
955
- // border-color: var(
956
- // --_ctm-mob-dn-pt-ds-at-br-cr,
957
- // var(--_ctm-tab-dn-pt-ds-at-br-cr, var(--_ctm-dn-pt-ds-at-br-cr))
958
- // );
959
- // background: var(
960
- // --_ctm-mob-dn-pt-ds-at-bd-cr,
961
- // var(--_ctm-tab-dn-pt-ds-at-bd-cr, var(--_ctm-dn-pt-ds-at-bd-cr))
962
- // );
963
- // box-shadow: 0px 1px 2px 0px #1018280d;
964
- // text-align: center;
965
- // font-family: var(
966
- // --_ctm-mob-dn-pt-ds-at-ft-fy,
967
- // var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy))
968
- // );
969
- // font-weight: var(
970
- // --_ctm-mob-dn-pt-ds-at-ft-wt,
971
- // var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt))
972
- // );
973
- // font-size: var(
974
- // --_ctm-mob-dn-pt-ds-at-ft-se,
975
- // var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se))
976
- // );
977
- // line-height: var(
978
- // --_ctm-mob-dn-pt-ds-at-le-ht,
979
- // var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht))
980
- // );
981
- // letter-spacing: var(
982
- // --_ctm-mob-dn-pt-ds-at-lr-sg,
983
- // var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg))
984
- // );
985
- // color: var(
986
- // --_ctm-mob-dn-pt-ds-at-cr,
987
- // var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr))
988
- // );
989
- // span {
990
- // vertical-align: middle;
991
- // }
992
- // button {
993
- // font-family: var(
994
- // --_ctm-mob-dn-pt-ds-at-ft-fy,
995
- // var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy))
996
- // );
997
- // font-weight: var(
998
- // --_ctm-mob-dn-pt-ds-at-ft-wt,
999
- // var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt))
1000
- // );
1001
- // font-size: var(
1002
- // --_ctm-mob-dn-pt-ds-at-ft-se,
1003
- // var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se))
1004
- // );
1005
- // line-height: var(
1006
- // --_ctm-mob-dn-pt-ds-at-le-ht,
1007
- // var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht))
1008
- // );
1009
- // letter-spacing: var(
1010
- // --_ctm-mob-dn-pt-ds-at-lr-sg,
1011
- // var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg))
1012
- // );
1013
- // color: var(
1014
- // --_ctm-mob-dn-pt-ds-at-cr,
1015
- // var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr))
1016
- // );
1017
- // }
1018
- }
1019
- .variant__container {
1020
- display: flex;
1021
- flex-direction: column;
1022
- gap: var(
1023
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
1024
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg))
737
+ background-color: var(
738
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-bd-cr,
739
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-bd-cr))
740
+ );
741
+ border-color: var(
742
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-cr,
743
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-cr))
744
+ );
745
+ border-radius: var(
746
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-rs,
747
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-rs, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-rs))
748
+ );
749
+ border-style: var(
750
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-se,
751
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-se, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-se))
752
+ );
753
+ border-width: var(
754
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-wh,
755
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-wh, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-wh))
1025
756
  );
757
+ box-shadow: var(
758
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-ae,
759
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-ae, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-ae))
760
+ )
761
+ var(
762
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-br,
763
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-br, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-br))
764
+ )
765
+ var(
766
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-sd,
767
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-sd, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-sd))
768
+ )
769
+ var(
770
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-cr,
771
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-cr))
772
+ );
1026
773
  padding: var(
1027
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-pg,
1028
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-pg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-pg))
774
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-pg,
775
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-pg, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-pg))
1029
776
  );
1030
- white-space: nowrap;
1031
-
1032
- .standard_wrapper {
1033
- // Select Colors
1034
- .select__colors {
1035
- font-size: 16px;
1036
- color: var(--_gray-500);
1037
- display: flex;
1038
- flex-direction: column;
1039
- gap: var(
1040
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
1041
- var(
1042
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
1043
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg)
1044
- )
1045
- );
1046
- // padding: var(
1047
- // --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-pg,
1048
- // var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-pg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-pg))
1049
- // );
1050
-
1051
- .select__group {
1052
- display: flex;
1053
- flex-direction: row;
1054
- gap: var(
1055
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-sg,
1056
- var(
1057
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-sg,
1058
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-sg)
1059
- )
1060
- );
1061
-
1062
- &[data-swatch-dispaly="Vertically"] {
1063
- flex-direction: column;
1064
- }
1065
- &[data-swatch-overflow="Scroll"] {
1066
- flex-wrap: nowrap;
1067
- overflow-x: auto;
1068
- }
1069
- &[data-swatch-overflow="Wrap"] {
1070
- flex-wrap: wrap;
1071
- }
1072
-
1073
- .show_more_button {
1074
- background-color: var(
1075
- --_ctm-mob-dn-sw-me-is-bn-bd-cr,
1076
- var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
1077
- );
1078
- font-family: var(
1079
- --_ctm-mob-dn-sw-me-is-bn-ft-fy,
1080
- var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
1081
- );
1082
- border-color: var(
1083
- --_ctm-mob-dn-sw-me-is-bn-br-cr,
1084
- var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
1085
- );
1086
- border-radius: var(
1087
- --_ctm-mob-dn-sw-me-is-bn-br-rs,
1088
- var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
1089
- );
1090
- border-style: var(
1091
- --_ctm-mob-dn-sw-me-is-bn-br-se,
1092
- var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
1093
- );
1094
- border-width: var(
1095
- --_ctm-mob-dn-sw-me-is-bn-br-wh,
1096
- var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
1097
- );
1098
- font-size: var(
1099
- --_ctm-mob-dn-sw-me-is-bn-ft-se,
1100
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
1101
- );
1102
- font-style: var(
1103
- --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
1104
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
1105
- );
1106
- font-weight: var(
1107
- --_ctm-mob-dn-sw-me-is-bn-ft-wt,
1108
- var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
1109
- );
1110
- line-height: var(
1111
- --_ctm-mob-dn-sw-me-is-bn-le-ht,
1112
- var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
1113
- );
1114
- letter-spacing: var(
1115
- --_ctm-mob-dn-sw-me-is-bn-lr-sg,
1116
- var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
1117
- );
1118
- box-shadow: var(
1119
- --_ctm-mob-dn-sw-me-is-bn-sw-ae,
1120
- var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
1121
- )
1122
- var(
1123
- --_ctm-mob-dn-sw-me-is-bn-sw-br,
1124
- var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
1125
- )
1126
- var(
1127
- --_ctm-mob-dn-sw-me-is-bn-sw-sd,
1128
- var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
1129
- )
1130
- var(
1131
- --_ctm-mob-dn-sw-me-is-bn-sw-cr,
1132
- var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
1133
- );
1134
- text-align: var(
1135
- --_ctm-mob-dn-sw-me-is-bn-tt-an,
1136
- var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
1137
- );
1138
- color: var(
1139
- --_ctm-mob-dn-sw-me-is-bn-tt-cr,
1140
- var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
1141
- );
1142
- text-decoration: var(
1143
- --_ctm-mob-dn-sw-me-is-bn-ue,
1144
- var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
1145
- );
1146
- }
1147
-
1148
- .select__group__item {
1149
- transition: width 0.3s ease;
1150
-
1151
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se: 30px;
1152
- height: prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-se);
1153
- width: prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-se);
1154
- padding: prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-pg);
1155
-
1156
- border-color: var(
1157
- --_sf-hr-br-cr,
1158
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-cr)
1159
- );
1160
-
1161
- background-color: var(
1162
- --_sf-hr-bd-cr,
1163
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-bd-cr)
1164
- );
1165
-
1166
- border-style: var(
1167
- --_sf-hr-br-se,
1168
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-se)
1169
- );
1170
-
1171
- border-width: var(
1172
- --_sf-hr-br-wh,
1173
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-wh)
1174
- );
1175
- border-radius: var(
1176
- --_sf-hr-br-rs,
1177
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-rs)
1178
- );
1179
-
1180
- box-shadow: var(
1181
- --_sf-hr-sw-ae,
1182
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-ae)
1183
- )
1184
- var(
1185
- --_sf-hr-sw-br,
1186
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-br)
1187
- )
1188
- var(
1189
- --_sf-hr-sw-sd,
1190
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-sd)
1191
- )
1192
- var(
1193
- --_sf-hr-sw-cr,
1194
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-cr)
1195
- );
1196
-
1197
- cursor: pointer;
1198
- overflow: hidden;
1199
- .product-select-image {
1200
- object-fit: cover;
1201
- width: 100%;
1202
- height: 100%;
1203
- }
1204
- &[data-background-shape="circle"] {
1205
- border-radius: 50%;
1206
- }
1207
- &[data-background-shape="square"] {
1208
- border-radius: 5px;
1209
- }
1210
- &[data-background-shape="capsule"] {
1211
- --toggle-height: var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-se);
1212
- --toggle-width: calc(
1213
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-se) * 1.5
1214
- );
1215
-
1216
- width: var(--toggle-width);
1217
- height: var(--toggle-height);
1218
-
1219
- border-radius: var(--toggle-height); /* Full pill shape */
1220
- box-sizing: border-box;
1221
- }
1222
- &[data-swatch-shape="circle"] {
1223
- & div,
1224
- .product-select-image {
1225
- border-radius: 50%;
1226
- }
1227
- // border-radius: 50%;
1228
- }
1229
- &[data-swatch-shape="capsule"] {
1230
- & div,
1231
- .product-select-image {
1232
- // border-radius: 50%;
1233
- width: 100%;
1234
- height: 100%;
1235
- border-radius: inherit;
1236
- }
1237
- // border-radius: 50%;
1238
- }
1239
-
1240
- &[data-selected="true"] {
1241
- border-color: var(
1242
- --_sf-sd-br-cr,
1243
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-cr)
1244
- );
1245
-
1246
- background-color: var(
1247
- --_sf-sd-bd-cr,
1248
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-bd-cr)
1249
- );
1250
- border-style: var(
1251
- --_sf-sd-br-se,
1252
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-se)
1253
- );
1254
- border-width: var(
1255
- --_sf-sd-br-wh,
1256
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-wh)
1257
- );
1258
- box-shadow: var(
1259
- --_sf-sd-sw-ae,
1260
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-ae)
1261
- )
1262
- var(
1263
- --_sf-sd-sw-br,
1264
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-br)
1265
- )
1266
- var(
1267
- --_sf-sd-sw-sd,
1268
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-sd)
1269
- )
1270
- var(
1271
- --_sf-sd-sw-cr,
1272
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-cr)
1273
- );
1274
-
1275
- &[data-background-shape-selected="circle"] {
1276
- border-radius: 50%;
1277
- }
1278
- &[data-background-shape-selected="square"] {
1279
- border-radius: 5px;
1280
- }
1281
- &[data-background-shape-selected="capsule"] {
1282
- border-radius: 80%;
1283
- // width: calc(
1284
- // var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se))) +
1285
- // 8px
1286
- // );
1287
- }
1288
- &[data-swatch-shape-selected="circle"] {
1289
- & div,
1290
- .product-select-image {
1291
- border-radius: 50%;
1292
- }
1293
- }
1294
- &[data-swatch-shape-selected="capsule"] {
1295
- & div,
1296
- .product-select-image {
1297
- border-radius: 50%;
1298
- }
1299
- }
1300
- &[data-swatch-shape-selected="square"] {
1301
- & div,
1302
- .product-select-image {
1303
- border-radius: 5px;
1304
- }
1305
- }
1306
- }
1307
- &:hover {
1308
- --_sf-hr-bd-cr: var(
1309
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-bd-cr,
1310
- var(
1311
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-bd-cr,
1312
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-bd-cr)
1313
- )
1314
- );
1315
- --_sf-hr-br-cr: var(
1316
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-cr,
1317
- var(
1318
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-cr,
1319
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-cr)
1320
- )
1321
- );
1322
- --_sf-hr-br-se: var(
1323
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-se,
1324
- var(
1325
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-se,
1326
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-se)
1327
- )
1328
- );
1329
- --_sf-hr-br-wh: var(
1330
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-wh,
1331
- var(
1332
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-wh,
1333
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-wh)
1334
- )
1335
- );
1336
- --_sf-hr-br-bs: var(
1337
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-rs,
1338
- var(
1339
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-rs,
1340
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-rs)
1341
- )
1342
- );
1343
-
1344
- // new
1345
- --_sf-hr-sw-ae: var(
1346
- --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
1347
- var(
1348
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-ae,
1349
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-ae)
1350
- )
1351
- );
1352
- --_sf-hr-sw-br: var(
1353
- --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
1354
- var(
1355
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-br,
1356
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-br)
1357
- )
1358
- );
1359
- --_sf-hr-sw-hr: var(
1360
- --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
1361
- var(
1362
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-hr,
1363
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-hr)
1364
- )
1365
- );
1366
- --_sf-hr-sw-cr: var(
1367
- --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
1368
- var(
1369
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-cr,
1370
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-cr)
1371
- )
1372
- );
1373
- }
1374
-
1375
- &:hover {
1376
- &[data-background-shape-hover="circle"] {
1377
- border-radius: 50%;
1378
- }
1379
- &[data-background-shape-hover="square"] {
1380
- border-radius: 5px;
1381
- }
1382
- &[data-background-shape-hover="capsule"] {
1383
- border-radius: 80%;
1384
- // width: calc(
1385
- // var(
1386
- // --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se,
1387
- // var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se))
1388
- // ) +
1389
- // 8px
1390
- // );
1391
- }
1392
- &[data-swatch-shape-hover="circle"] {
1393
- & div,
1394
- .product-select-image {
1395
- border-radius: 50%;
1396
- }
1397
- // border-radius: 50%;
1398
- }
1399
- &[data-swatch-shape-hover="capsule"] {
1400
- & div,
1401
- .product-select-image {
1402
- border-radius: 50%;
1403
- }
1404
- }
1405
- &[data-swatch-shape-hover="square"] {
1406
- & div,
1407
- .product-select-image {
1408
- border-radius: 5px;
1409
- }
1410
- }
1411
- }
1412
-
1413
- &[data-selected="true"] {
1414
- --_sf-sd-bd-cr: var(
1415
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-bd-cr,
1416
- var(
1417
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-bd-cr,
1418
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-bd-cr)
1419
- )
1420
- );
1421
- --_sf-sd-br-cr: var(
1422
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-cr,
1423
- var(
1424
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-cr,
1425
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-cr)
1426
- )
1427
- );
1428
- --_sf-sd-br-se: var(
1429
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-se,
1430
- var(
1431
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-se,
1432
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-se)
1433
- )
1434
- );
1435
- --_sf-sd-br-wh: var(
1436
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-wh,
1437
- var(
1438
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-wh,
1439
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-wh)
1440
- )
1441
- );
1442
- --_sf-sd-br-bs: var(
1443
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-rs,
1444
- var(
1445
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-rs,
1446
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-rs)
1447
- )
1448
- );
1449
-
1450
- // new
1451
- --_sf-sd-sw-ae: var(
1452
- --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
1453
- var(
1454
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-ae,
1455
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-ae)
1456
- )
1457
- );
1458
- --_sf-sd-sw-br: var(
1459
- --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
1460
- var(
1461
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-br,
1462
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-br)
1463
- )
1464
- );
1465
- --_sf-sd-sw-sd: var(
1466
- --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
1467
- var(
1468
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-sd,
1469
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-sd)
1470
- )
1471
- );
1472
- --_sf-sd-sw-cr: var(
1473
- --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
1474
- var(
1475
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-cr,
1476
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-cr)
1477
- )
1478
- );
1479
-
1480
- border-color: var(
1481
- --_sf-sd-br-cr,
1482
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-cr)
1483
- );
1484
-
1485
- background-color: var(
1486
- --_sf-sd-bd-cr,
1487
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-bd-cr)
1488
- );
1489
-
1490
- border-style: var(
1491
- --_sf-sd-br-se,
1492
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-se)
1493
- );
1494
-
1495
- border-width: var(
1496
- --_sf-sd-br-wh,
1497
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-wh)
1498
- );
1499
- border-radius: var(
1500
- --_sf-sd-br-rs,
1501
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-rs)
1502
- );
1503
-
1504
- box-shadow: var(
1505
- --_sf-sd-sw-ae,
1506
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-ae)
1507
- )
1508
- var(
1509
- --_sf-sd-sw-br,
1510
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-br)
1511
- )
1512
- var(
1513
- --_sf-sd-sw-sd,
1514
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-sd)
1515
- )
1516
- var(
1517
- --_sf-sd-sw-cr,
1518
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-cr)
1519
- );
1520
-
1521
- &[data-background-shape-selected="circle"] {
1522
- border-radius: 50%;
1523
- }
1524
- &[data-background-shape-selected="square"] {
1525
- border-radius: 5px;
1526
- }
1527
- &[data-background-shape-selected="capsule"] {
1528
- --toggle-height: var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se);
1529
- --toggle-width: calc(var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se) * 1.5);
1530
-
1531
- width: var(--toggle-width);
1532
- height: var(--toggle-height);
1533
-
1534
- border-radius: var(--toggle-height); /* Full pill shape */
1535
- box-sizing: border-box;
1536
- padding: prepareMediaVariable(
1537
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-pg
1538
- );
1539
- }
1540
- &[data-swatch-shape-selected="circle"] {
1541
- & div,
1542
- .product-select-image {
1543
- border-radius: 50%;
1544
- }
1545
- }
1546
- &[data-swatch-shape-selected="capsule"] {
1547
- & div,
1548
- .product-select-image {
1549
- // border-radius: 50%;
1550
- width: 100%;
1551
- height: 100%;
1552
- border-radius: inherit;
1553
- }
1554
- }
1555
- &[data-swatch-shape-selected="square"] {
1556
- & div,
1557
- .product-select-image {
1558
- border-radius: 5px;
1559
- }
1560
- }
1561
- }
1562
-
1563
- // &.disabled {
1564
- // cursor: not-allowed;
1565
- // opacity: 0.4;
1566
- // &[data-swatch-type="Swatch Image"] {
1567
- // position: relative;
1568
- // overflow: hidden;
1569
- // &::after {
1570
- // content: "";
1571
- // width: 172%;
1572
- // height: 1px;
1573
- // position: absolute;
1574
- // background: #f00;
1575
- // left: -14px;
1576
- // transform: rotate(48deg);
1577
- // /* -webkit-transform: rotate(48deg); */
1578
- // -moz-transform: rotate(48deg);
1579
- // top: 14px;
1580
- // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1581
- // }
1582
- // &::before {
1583
- // content: "";
1584
- // width: 164%;
1585
- // height: 1px;
1586
- // position: absolute;
1587
- // background: #f00;
1588
- // left: -14px;
1589
- // transform: rotate(-48deg);
1590
- // -webkit-transform: rotate(-48deg);
1591
- // -moz-transform: rotate(-48deg);
1592
- // top: 14px;
1593
- // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1594
- // }
1595
- // }
1596
- // }
1597
-
1598
- position: relative;
1599
-
1600
- &.disabled {
1601
- color: var(--_gray-500);
1602
- background-color: var(--_gray-100);
1603
- border-color: var(--_gray-300);
1604
- cursor: not-allowed;
1605
- opacity: 0.3;
1606
- overflow: hidden;
1607
- }
1608
-
1609
- .cross-line {
1610
- position: absolute;
1611
- inset: 0;
1612
- background-color: var(--_gray-100);
1613
- clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
1614
- pointer-events: none;
1615
- }
1616
- .product-select-image {
1617
- width: 100%;
1618
- height: 100%;
1619
- }
1620
- }
1621
- }
1622
- }
1623
- // Select Fit and Size
1624
- .select__fit {
1625
- font-size: 16px;
1626
- color: var(--_gray-500);
1627
- display: flex;
1628
- flex-direction: column;
1629
- gap: var(
1630
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
1631
- var(
1632
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
1633
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg)
1634
- )
1635
- );
1636
-
1637
- // padding: var(
1638
- // --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-pg,
1639
- // var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-pg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-pg))
1640
- // );
1641
-
1642
- .select__group {
1643
- display: flex;
1644
- gap: 8px;
1645
- flex-wrap: wrap;
1646
- // margin-bottom: 10px;
1647
- flex-direction: row;
1648
- gap: var(
1649
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-sg,
1650
- var(
1651
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-sg,
1652
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-sg)
1653
- )
1654
- );
1655
-
1656
- &[data-single-dispaly="Vertically"] {
1657
- flex-direction: column;
1658
- }
1659
- &[data-single-overflow="Scroll"] {
1660
- overflow-x: auto;
1661
- overflow-y: hidden;
1662
- flex-wrap: nowrap;
1663
- }
1664
- &[data-swatch-overflow="Scroll"] {
1665
- overflow-x: auto;
1666
- flex-wrap: nowrap;
1667
- overflow-y: hidden;
1668
- }
1669
- .show_more_button {
1670
- background-color: var(
1671
- --_ctm-mob-dn-sw-me-is-bn-bd-cr,
1672
- var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
1673
- );
1674
- font-family: var(
1675
- --_ctm-mob-dn-sw-me-is-bn-ft-fy,
1676
- var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
1677
- );
1678
- border-color: var(
1679
- --_ctm-mob-dn-sw-me-is-bn-br-cr,
1680
- var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
1681
- );
1682
- border-radius: var(
1683
- --_ctm-mob-dn-sw-me-is-bn-br-rs,
1684
- var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
1685
- );
1686
- border-style: var(
1687
- --_ctm-mob-dn-sw-me-is-bn-br-se,
1688
- var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
1689
- );
1690
- border-width: var(
1691
- --_ctm-mob-dn-sw-me-is-bn-br-wh,
1692
- var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
1693
- );
1694
- font-size: var(
1695
- --_ctm-mob-dn-sw-me-is-bn-ft-se,
1696
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
1697
- );
1698
- font-style: var(
1699
- --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
1700
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
1701
- );
1702
- font-weight: var(
1703
- --_ctm-mob-dn-sw-me-is-bn-ft-wt,
1704
- var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
1705
- );
1706
- line-height: var(
1707
- --_ctm-mob-dn-sw-me-is-bn-le-ht,
1708
- var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
1709
- );
1710
- letter-spacing: var(
1711
- --_ctm-mob-dn-sw-me-is-bn-lr-sg,
1712
- var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
1713
- );
1714
- box-shadow: var(
1715
- --_ctm-mob-dn-sw-me-is-bn-sw-ae,
1716
- var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
1717
- )
1718
- var(
1719
- --_ctm-mob-dn-sw-me-is-bn-sw-br,
1720
- var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
1721
- )
1722
- var(
1723
- --_ctm-mob-dn-sw-me-is-bn-sw-sd,
1724
- var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
1725
- )
1726
- var(
1727
- --_ctm-mob-dn-sw-me-is-bn-sw-cr,
1728
- var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
1729
- );
1730
- text-align: var(
1731
- --_ctm-mob-dn-sw-me-is-bn-tt-an,
1732
- var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
1733
- );
1734
- color: var(
1735
- --_ctm-mob-dn-sw-me-is-bn-tt-cr,
1736
- var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
1737
- );
1738
- text-decoration: var(
1739
- --_ctm-mob-dn-sw-me-is-bn-ue,
1740
- var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
1741
- );
1742
- }
1743
- &[data-single-dispaly="Grid"] {
1744
- display: grid;
1745
- grid-template-columns: repeat(
1746
- var(
1747
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-is-pr-rw,
1748
- var(
1749
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-is-pr-rw,
1750
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-is-pr-rw)
1751
- )
1752
- ),
1753
- minmax(auto, 1fr)
1754
- );
1755
- }
1756
-
1757
- .select__group__item {
1758
- transition: color 0.3s ease;
1759
- // border-radius: 6px;
1760
- // border: 1px solid var(--_gray-200);
1761
- cursor: pointer;
1762
- display: flex;
1763
- align-items: center;
1764
- justify-content: center;
1765
-
1766
- // height: prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-se);
1767
- // width: prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-se);
1768
- // padding: prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-pg);
1769
- padding: var(
1770
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-pg,
1771
- var(
1772
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-pg,
1773
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-pg)
1774
- )
1775
- );
1776
- min-width: 20px;
1777
- min-height: 20px;
1778
- box-sizing: content-box;
1779
- border-radius: var(
1780
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-rs,
1781
- var(
1782
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-rs,
1783
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-rs)
1784
- )
1785
- );
1786
-
1787
- border-color: var(
1788
- --_sf-hr-br-cr,
1789
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-cr)
1790
- );
1791
-
1792
- background-color: var(
1793
- --_sf-hr-bd-cr,
1794
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-bd-cr)
1795
- );
1796
- border-style: var(
1797
- --_sf-hr-br-se,
1798
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-se)
1799
- );
1800
- border-width: var(
1801
- --_sf-hr-br-wh,
1802
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-wh)
1803
- );
1804
-
1805
- box-shadow: var(
1806
- --_sf-hr-sw-ae,
1807
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-ae)
1808
- )
1809
- var(
1810
- --_sf-hr-sw-br,
1811
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-br)
1812
- )
1813
- var(
1814
- --_sf-hr-sw-sd,
1815
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-sd)
1816
- )
1817
- var(
1818
- --_sf-hr-sw-cr,
1819
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-cr)
1820
- );
1821
-
1822
- // font is pending
1823
-
1824
- color: var(
1825
- --_sf-hr-cr,
1826
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-cr)
1827
- );
1828
- font-family: var(
1829
- --_sf-hr-ft-fy,
1830
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-fy)
1831
- );
1832
- font-size: var(
1833
- --_sf-hr-ft-se,
1834
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-se)
1835
- );
1836
- font-weight: var(
1837
- --_sf-hr-ft-wt,
1838
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-wt)
1839
- );
1840
- font-style: var(
1841
- --_sf-hr-ft-se-ic,
1842
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-se-ic)
1843
- );
1844
- text-align: var(
1845
- --_sf-hr-tt-an,
1846
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-tt-an)
1847
- );
1848
- letter-spacing: var(
1849
- --_sf-hr-lr-sg,
1850
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-lr-sg)
1851
- );
1852
- line-height: var(
1853
- --_sf-hr-le-ht,
1854
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-le-ht-dc)
1855
- );
1856
- text-decoration: var(
1857
- --_sf-hr-ue,
1858
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ue)
1859
- );
1860
-
1861
- &[data-background-shape="circle"] {
1862
- border-radius: 50%;
1863
- }
1864
- &[data-background-shape="square"] {
1865
- border-radius: 5px;
1866
- }
1867
- &[data-background-shape="capsule"] {
1868
- border-radius: 40px; /* Full pill shape */
1869
- box-sizing: border-box;
1870
- }
1871
-
1872
- &:hover {
1873
- --_sf-hr-bd-cr: var(
1874
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-bd-cr,
1875
- var(
1876
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-bd-cr,
1877
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-bd-cr)
1878
- )
1879
- );
1880
- --_sf-hr-br-cr: var(
1881
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-cr,
1882
- var(
1883
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-cr,
1884
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-cr)
1885
- )
1886
- );
1887
- --_sf-hr-br-se: var(
1888
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-se,
1889
- var(
1890
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-se,
1891
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-se)
1892
- )
1893
- );
1894
- --_sf-hr-br-wh: var(
1895
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-wh,
1896
- var(
1897
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-wh,
1898
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-wh)
1899
- )
1900
- );
1901
- --_sf-hr-br-bs: var(
1902
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-rs,
1903
- var(
1904
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-rs,
1905
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-rs)
1906
- )
1907
- );
1908
-
1909
- // new
1910
- --_sf-hr-sw-ae: var(
1911
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-ae,
1912
- var(
1913
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-ae,
1914
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-ae)
1915
- )
1916
- );
1917
- --_sf-hr-sw-br: var(
1918
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-br,
1919
- var(
1920
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-br,
1921
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-br)
1922
- )
1923
- );
1924
- --_sf-hr-sw-hr: var(
1925
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-hr,
1926
- var(
1927
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-hr,
1928
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-hr)
1929
- )
1930
- );
1931
- --_sf-hr-sw-cr: var(
1932
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-cr,
1933
- var(
1934
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-cr,
1935
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-cr)
1936
- )
1937
- );
1938
-
1939
- // for font
1940
-
1941
- --_sf-hr-cr: var(
1942
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-cr,
1943
- var(
1944
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-cr,
1945
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-cr)
1946
- )
1947
- );
1948
- --_sf-hr-ft-fy: var(
1949
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-fy,
1950
- var(
1951
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-fy,
1952
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-fy)
1953
- )
1954
- );
1955
- --_sf-hr-ft-se: var(
1956
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-se,
1957
- var(
1958
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-se,
1959
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-se)
1960
- )
1961
- );
1962
- --_sf-hr-ft-wt: var(
1963
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-wt,
1964
- var(
1965
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-wt,
1966
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-wt)
1967
- )
1968
- );
1969
- --_sf-hr-ft-se-ic: var(
1970
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-se-ic,
1971
- var(
1972
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-se-ic,
1973
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-se-ic)
1974
- )
1975
- );
1976
- --_sf-hr-tt-an: var(
1977
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-tt-an,
1978
- var(
1979
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-tt-an,
1980
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-tt-an)
1981
- )
1982
- );
1983
- --_sf-hr-lr-sg: var(
1984
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-lr-sg,
1985
- var(
1986
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-lr-sg,
1987
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-lr-sg)
1988
- )
1989
- );
1990
- --_sf-hr-le-ht: var(
1991
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-le-ht,
1992
- var(
1993
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-le-ht,
1994
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-le-ht)
1995
- )
1996
- );
1997
-
1998
- --_sf-hr-ue: var(
1999
- --_ctm-mob-dn-on-ve-se-hr-se-ue,
2000
- var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
2001
- );
2002
- }
2003
-
2004
- &.child {
2005
- border: 0;
2006
- border-radius: 0;
2007
- border-bottom: 2px solid var(--_thm-cs-be-se-3);
2008
- }
2009
- &[data-selected="true"] {
2010
- --_sf-sd-bd-cr: var(
2011
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-bd-cr,
2012
- var(
2013
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-bd-cr,
2014
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-bd-cr)
2015
- )
2016
- );
2017
- --_sf-sd-br-cr: var(
2018
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-cr,
2019
- var(
2020
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-cr,
2021
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-cr)
2022
- )
2023
- );
2024
- --_sf-sd-br-se: var(
2025
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-se,
2026
- var(
2027
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-se,
2028
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-se)
2029
- )
2030
- );
2031
- --_sf-sd-br-wh: var(
2032
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-wh,
2033
- var(
2034
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-wh,
2035
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-wh)
2036
- )
2037
- );
2038
- --_sf-sd-br-bs: var(
2039
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-rs,
2040
- var(
2041
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-rs,
2042
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-rs)
2043
- )
2044
- );
2045
-
2046
- // new
2047
- --_sf-sd-sw-ae: var(
2048
- --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
2049
- var(
2050
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-ae,
2051
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-ae)
2052
- )
2053
- );
2054
- --_sf-sd-sw-br: var(
2055
- --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
2056
- var(
2057
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-br,
2058
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-br)
2059
- )
2060
- );
2061
- --_sf-sd-sw-hr: var(
2062
- --_ctm-mob-dn-on-ve-se-sd-se-sw-hr,
2063
- var(
2064
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-hr,
2065
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-hr)
2066
- )
2067
- );
2068
- --_sf-sd-sw-cr: var(
2069
- --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
2070
- var(
2071
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-cr,
2072
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-cr)
2073
- )
2074
- );
2075
-
2076
- // for font
2077
-
2078
- --_sf-sd-cr: var(
2079
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-cr,
2080
- var(
2081
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-cr,
2082
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-cr)
2083
- )
2084
- );
2085
- --_sf-sd-ft-fy: var(
2086
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-fy,
2087
- var(
2088
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-fy,
2089
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-fy)
2090
- )
2091
- );
2092
- --_sf-sd-ft-se: var(
2093
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-se,
2094
- var(
2095
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-se,
2096
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-se)
2097
- )
2098
- );
2099
- --_sf-sd-ft-wt: var(
2100
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-wt,
2101
- var(
2102
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-wt,
2103
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-wt)
2104
- )
2105
- );
2106
- --_sf-sd-ft-se-ic: var(
2107
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-se-ic,
2108
- var(
2109
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-se-ic,
2110
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-se-ic)
2111
- )
2112
- );
2113
- --_sf-sd-tt-an: var(
2114
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-tt-an,
2115
- var(
2116
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-tt-an,
2117
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-tt-an)
2118
- )
2119
- );
2120
- --_sf-sd-lr-sg: var(
2121
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-lr-sg,
2122
- var(
2123
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-lr-sg,
2124
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-lr-sg)
2125
- )
2126
- );
2127
- --_sf-sd-le-ht: var(
2128
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-le-ht,
2129
- var(
2130
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-le-ht,
2131
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-le-ht)
2132
- )
2133
- );
2134
-
2135
- --_sf-sd-ue: var(
2136
- --_ctm-mob-dn-on-ve-se-sd-se-ue,
2137
- var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
2138
- );
2139
-
2140
- border-color: var(
2141
- --_sf-sd-br-cr,
2142
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-cr)
2143
- );
2144
-
2145
- background-color: var(
2146
- --_sf-sd-bd-cr,
2147
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-bd-cr)
2148
- );
2149
- border-style: var(
2150
- --_sf-sd-br-se,
2151
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-se)
2152
- );
2153
- border-width: var(
2154
- --_sf-sd-br-wh,
2155
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-wh)
2156
- );
2157
-
2158
- box-shadow: var(
2159
- --_sf-sd-sw-ae,
2160
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-ae)
2161
- )
2162
- var(
2163
- --_sf-sd-sw-br,
2164
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-br)
2165
- )
2166
- var(
2167
- --_sf-sd-sw-sd,
2168
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-sd)
2169
- )
2170
- var(
2171
- --_sf-sd-sw-cr,
2172
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-cr)
2173
- );
2174
- // font is pending
2175
-
2176
- color: var(
2177
- --_sf-sd-cr,
2178
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-cr)
2179
- );
2180
- font-family: var(
2181
- --_sf-sd-ft-fy,
2182
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-fy)
2183
- );
2184
- font-size: var(
2185
- --_sf-sd-ft-se,
2186
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-se)
2187
- );
2188
- font-weight: var(
2189
- --_sf-sd-ft-wt,
2190
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-wt)
2191
- );
2192
- font-style: var(
2193
- --_sf-sd-ft-se-ic,
2194
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-se-ic)
2195
- );
2196
- text-align: var(
2197
- --_sf-sd-tt-an,
2198
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-tt-an)
2199
- );
2200
- letter-spacing: var(
2201
- --_sf-sd-lr-sg,
2202
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-lr-sg)
2203
- );
2204
- line-height: var(
2205
- --_sf-sd-le-ht,
2206
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-le-ht-dc)
2207
- );
2208
- text-decoration: var(
2209
- --_sf-sd-ue,
2210
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ue)
2211
- );
2212
- }
2213
-
2214
- &.selected__child {
2215
- border: 0px;
2216
- border-bottom: 2px solid var(--_primary-400);
2217
- }
2218
- // &.disabled {
2219
- // cursor: not-allowed;
2220
- // opacity: 0.4;
2221
- // position: relative;
2222
- // overflow: hidden;
2223
- // &::after {
2224
- // content: "";
2225
- // width: 172%;
2226
- // height: 1px;
2227
- // position: absolute;
2228
- // background: #f00;
2229
- // left: -14px;
2230
- // transform: rotate(48deg);
2231
- // /* -webkit-transform: rotate(48deg); */
2232
- // -moz-transform: rotate(48deg);
2233
- // top: 14px;
2234
- // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
2235
- // }
2236
- // &::before {
2237
- // content: "";
2238
- // width: 164%;
2239
- // height: 1px;
2240
- // position: absolute;
2241
- // background: #f00;
2242
- // left: -14px;
2243
- // transform: rotate(-48deg);
2244
- // -webkit-transform: rotate(-48deg);
2245
- // -moz-transform: rotate(-48deg);
2246
- // top: 14px;
2247
- // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
2248
- // }
2249
- // }
2250
- position: relative;
2251
-
2252
- &.disabled {
2253
- color: var(--_gray-500);
2254
- background-color: var(--_gray-100);
2255
- border-color: var(--_gray-300);
2256
- cursor: not-allowed;
2257
- overflow: hidden;
2258
- }
2259
-
2260
- .cross-line {
2261
- position: absolute;
2262
- inset: 0;
2263
- background-color: var(--_gray-400);
2264
- clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
2265
- pointer-events: none;
2266
- }
2267
- }
2268
- }
2269
- }
2270
- &[data-show-divider="true"] {
2271
- &:not(:last-child)::after {
2272
- content: "";
2273
- position: relative;
2274
- background-color: #000;
2275
- height: 1px;
2276
- width: 100%;
2277
- display: flex;
2278
- top: calc(
2279
- calc(
2280
- var(
2281
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
2282
- var(
2283
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
2284
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg)
2285
- )
2286
- ) +
2287
- 10px
2288
- ) /
2289
- 2
2290
- );
2291
- }
2292
- }
2293
-
2294
- .title {
2295
- // margin-bottom: 4px;
2296
- color: var(
2297
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-cr,
2298
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-cr, var(--_ctm-dn-pt-ds-vt-pr-on-te-cr))
2299
- );
2300
- font-family: var(
2301
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-fy,
2302
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-fy, var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-fy))
2303
- );
2304
- font-size: var(
2305
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-se,
2306
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-se, var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-se))
2307
- );
2308
- font-weight: var(
2309
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-wt,
2310
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-wt, var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-wt))
2311
- );
2312
- font-style: var(
2313
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-se-ic,
2314
- var(
2315
- --_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-se-ic,
2316
- var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-se-ic)
2317
- )
2318
- );
2319
- text-align: var(
2320
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-tt-an,
2321
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-tt-an, var(--_ctm-dn-pt-ds-vt-pr-on-te-tt-an))
2322
- );
2323
- letter-spacing: var(
2324
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-lr-sg,
2325
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-lr-sg, var(--_ctm-dn-pt-ds-vt-pr-on-te-lr-sg))
2326
- );
2327
- line-height: var(
2328
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-le-ht,
2329
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-le-ht, var(--_ctm-dn-pt-ds-vt-pr-on-te-le-ht))
2330
- );
2331
- text-decoration: var(
2332
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ue,
2333
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ue, var(--_ctm-dn-pt-ds-vt-pr-on-te-ue))
2334
- );
2335
- max-width: 300px;
2336
- display: -webkit-box;
2337
- -webkit-box-orient: vertical;
2338
- -webkit-line-clamp: 1;
2339
- text-overflow: ellipsis;
2340
- overflow: hidden;
2341
- }
2342
- }
2343
- //Dropdown
2344
- .est__dropdown__main {
2345
- position: relative;
2346
- width: 100%;
2347
- display: flex;
2348
- flex-direction: column;
2349
- gap: var(
2350
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
2351
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg, var(--_ctm-dn-lt-on-te-ve-sg))
2352
- );
2353
-
2354
- padding: var(
2355
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-os-pg,
2356
- var(
2357
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-os-pg,
2358
- var(--_ctm-dn-lt-dn-dy-se-dn-os-pg)
2359
- )
2360
- );
2361
-
2362
- margin-top: 10px;
2363
-
2364
- label {
2365
- font-size: var(
2366
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-se,
2367
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-se, var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-se))
2368
- );
2369
- font-family: var(
2370
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-fy,
2371
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-fy, var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-fy))
2372
- );
2373
- color: var(
2374
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-cr,
2375
- var(
2376
- --_ctm-tab-dn-pt-ds-vt-pr-on-te-cr,
2377
- var(--_gray-700, var(--_ctm-dn-pt-ds-vt-pr-on-te-cr))
2378
- )
2379
- );
2380
- font-weight: var(
2381
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-wt,
2382
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-wt, var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-wt))
2383
- );
2384
- text-decoration: var(
2385
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ue,
2386
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ue, var(--_ctm-dn-pt-ds-vt-pr-on-te-ue))
2387
- );
2388
- letter-spacing: var(
2389
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-lr-sg,
2390
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-lr-sg, var(--_ctm-dn-pt-ds-vt-pr-on-te-lr-sg))
2391
- );
2392
- text-align: var(
2393
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-tt-an,
2394
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-tt-an, var(--_ctm-dn-pt-ds-vt-pr-on-te-tt-an))
2395
- );
2396
- line-height: var(
2397
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-le-ht,
2398
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-le-ht, var(--_ctm-dn-pt-ds-vt-pr-on-te-le-ht))
2399
- );
2400
- display: block;
2401
- }
2402
-
2403
- .est__dropdown {
2404
- cursor: pointer;
2405
- position: relative;
2406
- color: var(--_gray-700);
2407
-
2408
- border-radius: 6px;
2409
- background-color: #fff;
2410
- display: flex;
2411
- justify-content: space-between;
2412
- align-items: center;
2413
- width: 100%;
2414
- .value__selected {
2415
- width: 100%;
2416
- }
2417
-
2418
- &.open .list {
2419
- display: none;
2420
- margin-top: var(
2421
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-on-ad-lt-sg,
2422
- var(
2423
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-on-ad-lt-sg,
2424
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-on-ad-lt-sg)
2425
- )
2426
- );
2427
- gap: var(
2428
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
2429
- var(
2430
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
2431
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg)
2432
- )
2433
- );
2434
- background-color: var(
2435
- --_ctm-mob-dn-dn-se-bd-cr,
2436
- var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
2437
- );
2438
- }
2439
-
2440
- .list {
2441
- display: flex !important;
2442
- flex-direction: column;
2443
- gap: var(
2444
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
2445
- var(
2446
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
2447
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg)
2448
- )
2449
- );
2450
- border: var(
2451
- --_ctm-mob-dn-dn-se-br-wh,
2452
- var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
2453
- )
2454
- var(
2455
- --_ctm-mob-dn-dn-se-br-se,
2456
- var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
2457
- )
2458
- var(
2459
- --_gray-200,
2460
- var(
2461
- --_ctm-mob-dn-dn-se-br-cr,
2462
- var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
2463
- )
2464
- );
2465
- border-radius: var(
2466
- --_ctm-mob-dn-dn-se-br-rs,
2467
- var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
2468
- );
2469
- box-shadow: var(
2470
- --_show-shadow-dn-se,
2471
- var(
2472
- --_ctm-mob-dn-dn-se-sw-ae,
2473
- var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae))
2474
- )
2475
- var(
2476
- --_ctm-mob-dn-dn-se-sw-br,
2477
- var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
2478
- )
2479
- var(
2480
- --_ctm-mob-dn-dn-se-sw-sd,
2481
- var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
2482
- )
2483
- var(
2484
- --_ctm-mob-dn-dn-se-sw-cr,
2485
- var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
2486
- )
2487
- );
2488
- position: absolute;
2489
- top: 100%;
2490
- left: 0;
2491
- width: 100%;
2492
- background-color: var(
2493
- --_ctm-mob-dn-dn-se-bd-cr,
2494
- var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
2495
- );
2496
- border-radius: 4px;
2497
- z-index: var(--_higher-zIndex);
2498
- max-height: 200px;
2499
- overflow-y: auto;
2500
-
2501
- &.top {
2502
- bottom: 100%;
2503
- top: auto;
2504
- }
2505
-
2506
- .list__option {
2507
- padding: var(
2508
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-pg,
2509
- var(
2510
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-pg,
2511
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-pg)
2512
- )
2513
- );
2514
- cursor: pointer;
2515
-
2516
- &:hover {
2517
- background-color: var(--_primary-25);
2518
- color: var(--_primary-400);
2519
- }
2520
-
2521
- &.disabled {
2522
- cursor: not-allowed;
2523
- opacity: 0.4;
2524
- }
2525
- }
2526
- }
2527
- }
2528
- }
2529
-
2530
- // variant dropdown selection
2531
- .var__drop__selection {
2532
- display: flex;
2533
- width: 100%;
2534
- gap: var(
2535
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
2536
- var(
2537
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
2538
- var(
2539
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
2540
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg)
2541
- )
2542
- )
2543
- );
2544
-
2545
- flex-direction: row;
2546
- &[data-dropdown-style="Vertical List"] {
2547
- flex-direction: column;
2548
- gap: var(
2549
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
2550
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg))
2551
- );
2552
- }
2553
- .dropdown_wrapper {
2554
- position: relative;
2555
- &[data-show-divider="true"] {
2556
- &:not(:last-child)::after {
2557
- content: "";
2558
- position: relative;
2559
- background-color: #000;
2560
- height: 1px;
2561
- width: 100%;
2562
- display: flex;
2563
- top: calc(
2564
- calc(
2565
- var(
2566
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
2567
- var(
2568
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
2569
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg)
2570
- )
2571
- ) +
2572
- 10px
2573
- ) /
2574
- 2
2575
- );
2576
- }
2577
- }
2578
-
2579
- &[data-show-item-divider="true"] {
2580
- .est__dropdown__main {
2581
- .est__dropdown {
2582
- .list {
2583
- :not(:last-child).list__option {
2584
- &::after {
2585
- content: "";
2586
- position: relative;
2587
- background-color: #000;
2588
- height: 1px;
2589
- width: 100%;
2590
- display: flex;
2591
- top: calc(
2592
- var(
2593
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
2594
- var(
2595
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
2596
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg)
2597
- )
2598
- ) /
2599
- 2
2600
- );
2601
- }
2602
- }
2603
- }
2604
- }
2605
- }
2606
- }
2607
- }
2608
- & > div {
2609
- width: 100%;
2610
- }
2611
- }
2612
- // Quantity Fields
2613
- .field__group {
2614
- // display: flex;
2615
- // flex-wrap: wrap;
2616
- // gap: 8px;
2617
- display: grid;
2618
- grid-template-columns: repeat(
2619
- auto-fit,
2620
- minmax(
2621
- var(
2622
- --_ctm-mob-var-lt-mn-cn-wh,
2623
- var(--_ctm-tab-var-lt-mn-cn-wh, var(--_ctm-var-lt-mn-cn-wh))
2624
- ),
2625
- var(--_ctm-mob-var-lt-mn-cn-wh)
2626
- )
777
+ gap: var(
778
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-im-gp,
779
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-im-gp, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-im-gp))
780
+ );
781
+ .denominations_title {
782
+ // margin-bottom: 4px;
783
+ // font-size: 16px;
784
+ // color: #000000;
785
+ // font-weight: 500;
786
+ // line-height: 150%;
787
+ font-family: var(
788
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-fy,
789
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-fy))
2627
790
  );
2628
- gap: var(
2629
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-rw-sg,
2630
- var(
2631
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-rw-sg,
2632
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-rw-sg)
2633
- )
791
+ color: var(
792
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-cr,
793
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-cr, var(--_ctm-dn-pt-ds-gt-cd-ts-cr))
2634
794
  );
2635
- .field__group__item {
2636
- font-size: 16px;
2637
- display: flex;
2638
- flex-direction: column;
2639
- align-items: center;
2640
- justify-content: center;
2641
- gap: 8px;
2642
- input[type="number"] {
2643
- // width: 70px !important;
2644
- width: 100%;
2645
- border: 1px solid var(--_gray-300);
2646
- padding-inline: 10px;
2647
- border-radius: 4px;
2648
- text-align: center;
2649
- height: 40px;
2650
- &:focus-within {
2651
- border: 1px solid var(--_primary-200);
2652
- box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
2653
- }
2654
- &:disabled {
2655
- cursor: not-allowed;
2656
- opacity: 0.4;
2657
- }
2658
- }
2659
- }
2660
- }
2661
- // Enter quantity styles
2662
- .quantiy__details {
2663
- display: flex;
2664
- flex-direction: column;
2665
- gap: var(
2666
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-sg,
2667
- var(
2668
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-sg,
2669
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-sg)
2670
- )
795
+ font-weight: var(
796
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-wt,
797
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-wt))
2671
798
  );
2672
- padding: var(
2673
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-pg,
2674
- var(
2675
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-pg,
2676
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-pg)
2677
- )
799
+ font-size: var(
800
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se,
801
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se))
2678
802
  );
2679
-
2680
- .title {
2681
- display: flex;
2682
- justify-content: space-between;
2683
- align-items: center;
2684
- font-weight: 600;
2685
- font-size: 18px;
2686
- & > button {
2687
- border-bottom: 1px solid var(--_gray-400);
2688
- color: var(--_gray-600);
2689
- font-size: 14px;
2690
- }
2691
- }
2692
- .fit__details {
2693
- display: flex;
2694
- flex-direction: column;
2695
- gap: 12px;
2696
- .fit__desc {
2697
- display: flex;
2698
- flex-direction: column;
2699
- gap: var(
2700
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-hr-ad-on-sg,
2701
- var(
2702
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-hr-ad-on-sg,
2703
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-hr-ad-on-sg)
2704
- )
2705
- );
2706
-
2707
- font-size: 16px;
2708
- color: var(--_gray-900);
2709
- .each__price {
2710
- font-weight: 600;
2711
- }
2712
- }
2713
- }
2714
- }
2715
- .grouped_items {
2716
- display: flex;
2717
- flex-direction: column;
2718
- gap: var(
2719
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
2720
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg))
803
+ text-decoration: var(
804
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ue,
805
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ue, var(--_ctm-dn-pt-ds-gt-cd-ts-ue))
806
+ );
807
+ letter-spacing: var(
808
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-lr-sg,
809
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ts-lr-sg))
810
+ );
811
+ line-height: var(
812
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-le-ht,
813
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ts-le-ht))
814
+ );
815
+ font-style: var(
816
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se-ic,
817
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se-ic))
818
+ );
819
+ text-align: var(
820
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-an,
821
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-an))
2721
822
  );
2722
-
2723
- .tab__accordion {
2724
- display: flex;
2725
- flex-direction: column;
2726
- gap: var(
2727
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
2728
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg))
2729
- );
2730
-
2731
- .tab__container {
2732
- display: flex;
2733
- flex-direction: column;
2734
-
2735
- .tab {
2736
- &:first-child {
2737
- margin-bottom: var(
2738
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
2739
- var(
2740
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
2741
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg)
2742
- )
2743
- );
2744
- }
2745
- }
2746
-
2747
- .tab__content {
2748
- display: flex;
2749
- flex-direction: column;
2750
- padding: var(
2751
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-pg,
2752
- var(
2753
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-pg,
2754
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-pg)
2755
- )
2756
- );
2757
-
2758
- .field__group {
2759
- gap: var(
2760
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-sg,
2761
- var(
2762
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-sg,
2763
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-sg)
2764
- )
2765
- );
2766
-
2767
- .field__group__item {
2768
- gap: var(
2769
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-hr-ad-on-sg,
2770
- var(
2771
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-hr-ad-on-sg,
2772
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-hr-ad-on-sg)
2773
- )
2774
- );
2775
- }
2776
- }
2777
- }
2778
- }
2779
- }
2780
-
2781
- &[data-show-divider="true"] {
2782
- & > div {
2783
- &:not(:last-child)::after {
2784
- content: "";
2785
- position: relative;
2786
- background-color: #000;
2787
- height: 1px;
2788
- width: 100%;
2789
- display: flex;
2790
- top: calc(
2791
- var(
2792
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
2793
- var(
2794
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
2795
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg)
2796
- )
2797
- ) /
2798
- 2
2799
- );
2800
- }
2801
- }
2802
-
2803
- .tab__accordion {
2804
- &:not(:last-child)::after {
2805
- content: "";
2806
- position: relative;
2807
- background-color: #000;
2808
- height: 1px;
2809
- width: 100%;
2810
- display: flex;
2811
- top: calc(
2812
- var(
2813
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
2814
- var(
2815
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
2816
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg)
2817
- )
2818
- ) /
2819
- 2
2820
- );
2821
- }
2822
- }
2823
- }
2824
823
  }
2825
- // tabs
2826
- .tabs__container {
824
+ .denominations_grid {
2827
825
  display: flex;
2828
- position: relative;
2829
- .tab {
2830
- flex: 1;
2831
- padding-block: 20px;
2832
- font-weight: 600;
2833
- text-align: center;
826
+ // gap: 8px;
827
+ flex-wrap: wrap;
828
+ margin-top: 12px;
829
+ flex-direction: row;
830
+ gap: 12px;
831
+ // gap: var(
832
+ // --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-im-gp,
833
+ // var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-im-gp, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-im-gp))
834
+ // );
835
+ .amount_btn {
836
+ transition: color 0.3s ease;
2834
837
  cursor: pointer;
2835
- position: relative;
2836
- &.tab__active {
2837
- font-weight: bold;
2838
- }
2839
- }
2840
- .tab__active-indicator {
2841
- position: absolute;
2842
- bottom: 0;
2843
- left: 0;
2844
- height: 2px;
2845
- background-color: #000;
2846
- transition:
2847
- left 0.3s ease,
2848
- width 0.3s ease;
2849
- }
2850
- }
2851
-
2852
- // accordion tabs
2853
- .tab__accordion_wrapper {
2854
- .tab__accordion {
2855
838
  display: flex;
2856
- flex-direction: column;
2857
- padding: var(
2858
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-cr-pg,
839
+ align-items: center;
840
+ justify-content: center;
841
+ // padding: 4px;
842
+ min-width: 20px;
843
+ min-height: 20px;
844
+ box-sizing: content-box;
845
+ // font-size: 16px;
846
+ // font-weight: 600;
847
+ // line-height: 150%;
848
+ // background-color: #ffffff;
849
+ // border: 1px solid #d6d6d6;
850
+ background-color: var(
851
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-bd-cr,
2859
852
  var(
2860
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-cr-pg,
2861
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-cr-pg)
853
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-bd-cr,
854
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-bd-cr)
2862
855
  )
2863
856
  );
2864
-
2865
- .tab__container {
2866
- display: flex;
2867
- flex-direction: column;
2868
- gap: var(
2869
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-sg,
857
+ font-family: var(
858
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-fy,
859
+ var(
860
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-fy,
861
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-fy)
862
+ )
863
+ );
864
+ color: var(
865
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-cr,
866
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-cr))
867
+ );
868
+ font-weight: var(
869
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-wt,
870
+ var(
871
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-wt,
872
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-wt)
873
+ )
874
+ );
875
+ font-size: var(
876
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-se,
877
+ var(
878
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-se,
879
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-se)
880
+ )
881
+ );
882
+ text-decoration: var(
883
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ue,
884
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ue, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ue))
885
+ );
886
+ letter-spacing: var(
887
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-lr-sg,
888
+ var(
889
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-lr-sg,
890
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-lr-sg)
891
+ )
892
+ );
893
+ line-height: var(
894
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-le-ht,
895
+ var(
896
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-le-ht,
897
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-le-ht)
898
+ )
899
+ );
900
+ font-style: var(
901
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-se-ic,
902
+ var(
903
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-se-ic,
904
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-se-ic)
905
+ )
906
+ );
907
+ text-align: var(
908
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-tt-an,
909
+ var(
910
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-tt-an,
911
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-tt-an)
912
+ )
913
+ );
914
+ border-color: var(
915
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-cr,
916
+ var(
917
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-cr,
918
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-cr)
919
+ )
920
+ );
921
+ border-radius: var(
922
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-rs,
923
+ var(
924
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-rs,
925
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-rs)
926
+ )
927
+ );
928
+ border-style: var(
929
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-se,
930
+ var(
931
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-se,
932
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-se)
933
+ )
934
+ );
935
+ border-width: var(
936
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-wh,
937
+ var(
938
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-wh,
939
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-wh)
940
+ )
941
+ );
942
+ box-shadow: var(
943
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-ae,
2870
944
  var(
2871
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-sg,
2872
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-sg)
945
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-ae,
946
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-ae)
2873
947
  )
2874
- );
2875
-
2876
- .tab_acc_wrapper {
2877
- display: flex;
2878
- flex-direction: column;
2879
- gap: var(
2880
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-ad-cr-sg,
2881
- var(
2882
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-ad-cr-sg,
2883
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-ad-cr-sg)
2884
- )
2885
- );
2886
-
2887
- padding: var(
2888
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-vl-pg,
2889
- var(
2890
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-vl-pg,
2891
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-vl-pg)
2892
- )
2893
- )
2894
- var(
2895
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-hl-pg,
2896
- var(
2897
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-hl-pg,
2898
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-hl-pg)
2899
- )
2900
- );
2901
-
2902
- .tab {
2903
- display: flex;
2904
- padding-inline: 2px;
2905
- position: relative;
2906
- cursor: pointer;
2907
- flex-direction: row;
2908
- &[data-expand-icon="Left"] {
2909
- flex-direction: row-reverse;
2910
- justify-content: flex-end;
2911
- }
2912
- &[data-item-dividers="true"] {
2913
- &::after {
2914
- content: "";
2915
- position: absolute;
2916
- bottom: 0;
2917
- height: 2px;
2918
- width: 100%;
2919
- border-bottom: 1px solid var(--_thm-cs-be-se-3);
2920
- }
2921
- }
2922
- span {
2923
- padding-block: 12px;
2924
- display: inline-block;
2925
- }
2926
- .active {
2927
- border-bottom: 2px solid var(--_primary-400);
2928
- }
2929
- &.inactive {
2930
- height: 0px;
2931
- }
2932
- }
2933
- .tab__content {
2934
- &.d-none {
2935
- display: none;
2936
- }
2937
- &.d-block {
2938
- display: block;
2939
- }
2940
- }
2941
- }
2942
- }
2943
- }
2944
-
2945
- &[data-show-dividers="true"] {
2946
- .tab__accordion {
2947
- .tab__container {
2948
- .tab_acc_wrapper {
2949
- &:not(:last-child)::after {
2950
- content: "";
2951
- position: relative;
2952
- background-color: #000;
2953
- height: 1px;
2954
- width: 100%;
2955
- display: flex;
2956
- top: calc(
2957
- var(
2958
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-sg,
2959
- var(
2960
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-sg,
2961
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-sg)
2962
- )
2963
- ) /
2964
- 2
2965
- );
2966
- }
2967
- }
2968
- }
2969
- }
2970
- }
2971
-
2972
- &[data-icon-position="Left"] {
2973
- .tab__accordion {
2974
- .tab__container {
2975
- .tab_acc_wrapper {
2976
- .tab {
2977
- flex-direction: row-reverse;
2978
- align-self: flex-start;
2979
- }
2980
- }
2981
- }
2982
- }
2983
- }
2984
- }
2985
-
2986
- // table
2987
- .table_container,
2988
- .tab__content {
2989
- .table__class {
2990
- border: 1px solid var(--_thm-cs-be-se-3);
2991
- border-radius: 8px;
2992
- .custom__table {
2993
- border: 1px solid var(--_thm-cs-be-se-3);
2994
- width: 100%;
2995
- table-layout: fixed;
2996
- // height: 300px;
2997
-
2998
- border-collapse: collapse;
2999
- &[data-header-divider="true"] {
3000
- thead tr th {
3001
- border-bottom: 1px solid var(--_thm-cs-be-se-3);
3002
- }
3003
- }
3004
- &[data-row-divider="true"] {
3005
- tbody tr td {
3006
- border-bottom: 1px solid var(--_thm-cs-be-se-3);
3007
- }
3008
- }
3009
- &[data-column-divider="true"] {
3010
- tbody tr td,
3011
- thead tr th {
3012
- border-right: 1px solid var(--_thm-cs-be-se-3);
3013
- }
3014
-
3015
- tbody tr td:last-child,
3016
- thead tr th:last-child {
3017
- border-right: none;
3018
- }
3019
- }
3020
- &[data-alternative-row-colors="true"] {
3021
- tbody tr:nth-child(odd) {
3022
- background-color: var(--_gray-300);
3023
- width: 100%;
3024
- }
3025
- }
3026
- thead {
3027
- height: var(
3028
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-ht,
3029
- var(
3030
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-ht,
3031
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-ht)
3032
- )
3033
- );
3034
- th {
3035
- height: var(
3036
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-ht,
3037
- var(
3038
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-ht,
3039
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-ht)
3040
- )
3041
- );
3042
- text-align: var(
3043
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-ct-at,
3044
- var(
3045
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-ct-at,
3046
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-ct-at)
3047
- )
3048
- );
3049
- padding: var(
3050
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-cl-pg,
3051
- var(
3052
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-cl-pg,
3053
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-cl-pg)
3054
- )
3055
- );
3056
- background-color: var(--_gray-50);
3057
- font-weight: 600;
3058
- color: var(--_gray-600);
3059
- word-break: break-word;
3060
- }
3061
- }
3062
-
3063
- tbody {
3064
- tr {
3065
- border-bottom: 1px solid var(--_thm-cs-be-se-3);
3066
- height: var(
3067
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-rw-ht,
3068
- var(
3069
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-rw-ht,
3070
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-rw-ht)
3071
- )
3072
- );
3073
- td {
3074
- text-align: var(
3075
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-ct-at,
3076
- var(
3077
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-ct-at,
3078
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-ct-at)
3079
- )
3080
- );
3081
- padding: var(
3082
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-rw-cl-pg,
3083
- var(
3084
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-rw-cl-pg,
3085
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-rw-cl-pg)
3086
- )
3087
- );
3088
- .disocunted__price {
3089
- color: var(--_gray-900);
3090
- }
3091
- .actual__price {
3092
- color: var(--_gray-500);
3093
- }
3094
- .qty__input {
3095
- border: 1px solid var(--_thm-cs-be-se-3);
3096
- padding-inline: 10px;
3097
- text-align: center;
3098
- border-radius: 6px;
3099
- height: 40px;
3100
- }
3101
- input[type="number"] {
3102
- &:focus-within {
3103
- border: 1px solid var(--_primary-200);
3104
- box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
3105
- }
3106
- &:disabled {
3107
- cursor: not-allowed;
3108
- opacity: 0.4;
3109
- }
3110
- }
3111
- }
3112
- }
3113
- }
3114
- }
3115
- }
3116
- &[data-show-divider="true"] {
3117
- & > div {
3118
- &:not(:last-child)::after {
3119
- content: "";
3120
- position: relative;
3121
- background-color: #000;
3122
- height: 1px;
3123
- width: 100%;
3124
- display: flex;
3125
- top: calc(
3126
- var(
3127
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3128
- var(
3129
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3130
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg)
3131
- )
3132
- ) /
3133
- 2
3134
- );
3135
- }
3136
- }
3137
- }
3138
- }
3139
-
3140
- // horizontal tabs
3141
- .tabs__main {
3142
- &.tabs__vertical {
3143
- .tabs {
3144
- .tabs__container {
3145
- flex-direction: column;
3146
- min-width: 120px;
3147
- }
3148
- }
3149
- }
3150
- &.tabs__hr {
3151
- .tabs {
3152
- flex-direction: column;
3153
- gap: var(
3154
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-ad-cr-sg,
948
+ )
949
+ var(
950
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-br,
951
+ var(
952
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-br,
953
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-br)
954
+ )
955
+ )
956
+ var(
957
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-sd,
958
+ var(
959
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-sd,
960
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-sd)
961
+ )
962
+ )
963
+ var(
964
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-cr,
3155
965
  var(
3156
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-ad-cr-sg,
3157
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-ad-cr-sg)
966
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-cr,
967
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-cr)
3158
968
  )
3159
969
  );
3160
-
3161
- .tabs__container {
3162
- width: 100%;
3163
- }
3164
- }
3165
- }
3166
- .tabs {
3167
- display: flex;
3168
- gap: var(
3169
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tb-im-se-dt-se-tb-ad-cr-sg,
3170
- var(
3171
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tb-im-se-dt-se-tb-ad-cr-sg,
3172
- var(--_ctm-dn-tb-im-se-dt-se-tb-ad-cr-sg)
3173
- )
970
+ padding: var(
971
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-pg,
972
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-pg, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-pg))
3174
973
  );
3175
-
3176
- .tabs__container {
3177
- display: flex;
3178
- gap: var(
3179
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-sg,
974
+ &.active {
975
+ background-color: var(
976
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-bd-cr,
3180
977
  var(
3181
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-sg,
3182
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-sg)
978
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-bd-cr,
979
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-bd-cr)
3183
980
  )
3184
981
  );
3185
-
3186
- .tab {
3187
- display: flex;
3188
- justify-content: var(--_tab-aliginment);
3189
- padding: var(
3190
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-vl-pg,
3191
- var(
3192
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-vl-pg,
3193
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-vl-pg)
3194
- )
3195
- )
3196
- var(
3197
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-hl-pg,
3198
- var(
3199
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-hl-pg,
3200
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-hl-pg)
3201
- )
3202
- );
3203
- background-color: var(
3204
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-bd-cr,
982
+ font-family: var(
983
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-fy,
984
+ var(
985
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-fy,
986
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-fy)
987
+ )
988
+ );
989
+ color: var(
990
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-cr,
991
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-cr))
992
+ );
993
+ font-weight: var(
994
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-wt,
995
+ var(
996
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-wt,
997
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-wt)
998
+ )
999
+ );
1000
+ font-size: var(
1001
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-se,
1002
+ var(
1003
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-se,
1004
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-se)
1005
+ )
1006
+ );
1007
+ text-decoration: var(
1008
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ue,
1009
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ue, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ue))
1010
+ );
1011
+ letter-spacing: var(
1012
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-lr-sg,
1013
+ var(
1014
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-lr-sg,
1015
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-lr-sg)
1016
+ )
1017
+ );
1018
+ line-height: var(
1019
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-le-ht,
1020
+ var(
1021
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-le-ht,
1022
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-le-ht)
1023
+ )
1024
+ );
1025
+ font-style: var(
1026
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-se-ic,
1027
+ var(
1028
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-se-ic,
1029
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-se-ic)
1030
+ )
1031
+ );
1032
+ text-align: var(
1033
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-tt-an,
1034
+ var(
1035
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-tt-an,
1036
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-tt-an)
1037
+ )
1038
+ );
1039
+ border-color: var(
1040
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-cr,
1041
+ var(
1042
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-cr,
1043
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-cr)
1044
+ )
1045
+ );
1046
+ border-radius: var(
1047
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-rs,
1048
+ var(
1049
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-rs,
1050
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-rs)
1051
+ )
1052
+ );
1053
+ border-style: var(
1054
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-se,
1055
+ var(
1056
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-se,
1057
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-se)
1058
+ )
1059
+ );
1060
+ border-width: var(
1061
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-wh,
1062
+ var(
1063
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-wh,
1064
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-wh)
1065
+ )
1066
+ );
1067
+ box-shadow: var(
1068
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-ae,
3205
1069
  var(
3206
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-bd-cr,
3207
- var(--_ctm-dn-tb-im-se-dt-se-bd-cr)
1070
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-ae,
1071
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-ae)
3208
1072
  )
3209
- );
3210
- border-color: var(
3211
- --_show-border-im-se,
1073
+ )
1074
+ var(
1075
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-br,
3212
1076
  var(
3213
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-cr,
3214
- var(
3215
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-cr,
3216
- var(--_ctm-dn-tb-im-se-dt-se-br-cr)
3217
- )
1077
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-br,
1078
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-br)
3218
1079
  )
3219
- );
3220
- border-style: var(
3221
- --_show-border-im-se,
1080
+ )
1081
+ var(
1082
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-sd,
3222
1083
  var(
3223
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-se,
3224
- var(
3225
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-se,
3226
- var(--_ctm-dn-tb-im-se-dt-se-br-se)
3227
- )
1084
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-sd,
1085
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-sd)
3228
1086
  )
3229
- );
3230
- border-width: var(
3231
- --_show-border-im-se,
1087
+ )
1088
+ var(
1089
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-cr,
3232
1090
  var(
3233
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-wh,
3234
- var(
3235
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-wh,
3236
- var(--_ctm-dn-tb-im-se-dt-se-br-wh)
3237
- )
1091
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-cr,
1092
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-cr)
3238
1093
  )
3239
1094
  );
3240
- border-radius: var(
3241
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-rs,
3242
- var(
3243
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-rs,
3244
- var(--_ctm-dn-tb-im-se-dt-se-br-rs)
3245
- )
1095
+ padding: var(
1096
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-pg,
1097
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-pg, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-pg))
1098
+ );
1099
+ // background-color: #f5f5f5;
1100
+ // border: 1px solid #3e4784;
1101
+ // color: #000080;
1102
+ }
1103
+ }
1104
+ }
1105
+ .custom_amount_container {
1106
+ display: flex;
1107
+ flex-direction: column;
1108
+ gap: 8px;
1109
+ .error_text {
1110
+ font-size: 12px;
1111
+ color: var(--_error-500);
1112
+ }
1113
+ .custom_amount_label {
1114
+ font-family: var(
1115
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-fy,
1116
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-fy))
1117
+ );
1118
+ color: var(
1119
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-cr,
1120
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-cr, var(--_ctm-dn-pt-ds-gt-cd-ls-cr))
1121
+ );
1122
+ font-weight: var(
1123
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-wt,
1124
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-wt))
1125
+ );
1126
+ font-size: var(
1127
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se,
1128
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se))
1129
+ );
1130
+ text-decoration: var(
1131
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ue,
1132
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ue, var(--_ctm-dn-pt-ds-gt-cd-ls-ue))
1133
+ );
1134
+ letter-spacing: var(
1135
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-lr-sg,
1136
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ls-lr-sg))
1137
+ );
1138
+ line-height: var(
1139
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-le-ht,
1140
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ls-le-ht))
1141
+ );
1142
+ font-style: var(
1143
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se-ic,
1144
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se-ic))
1145
+ );
1146
+ text-align: var(
1147
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-an,
1148
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-an))
1149
+ );
1150
+ padding: var(
1151
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-pg,
1152
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-pg, var(--_ctm-dn-pt-ds-gt-cd-ls-pg))
1153
+ );
1154
+ }
1155
+ .custom_amount_input {
1156
+ height: 40px;
1157
+ display: flex;
1158
+ position: relative;
1159
+ // gap: 6px;
1160
+ align-items: center;
1161
+ // border-radius: 4px;
1162
+ // background: #fff;
1163
+ // border: 1px solid #d0d5dd;
1164
+ // padding: 8px 12px;
1165
+ background-color: var(
1166
+ --_ctm-mob-dn-pt-ds-gt-cd-is-bd-cr,
1167
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-is-bd-cr))
1168
+ );
1169
+
1170
+ border-color: var(
1171
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-cr,
1172
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-dn-pt-ds-gt-cd-is-br-cr))
1173
+ );
1174
+ border-radius: var(
1175
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-rs,
1176
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-dn-pt-ds-gt-cd-is-br-rs))
1177
+ );
1178
+ border-style: var(
1179
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-se,
1180
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-dn-pt-ds-gt-cd-is-br-se))
1181
+ );
1182
+ border-width: var(
1183
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-wh,
1184
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-dn-pt-ds-gt-cd-is-br-wh))
1185
+ );
1186
+ padding: var(
1187
+ --_ctm-mob-dn-pt-ds-gt-cd-is-pg,
1188
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg))
1189
+ );
1190
+ // width: 220px;
1191
+ transition:
1192
+ background-color 0.2s,
1193
+ color 0.2s,
1194
+ border-color 0.2s,
1195
+ box-shadow 0.2s;
1196
+ .svg_icon {
1197
+ color: var(--_gray-700);
1198
+ font-weight: 500;
1199
+ font-size: 14px;
1200
+ line-height: 24px;
1201
+ white-space: nowrap;
1202
+ position: absolute;
1203
+ top: 7px;
1204
+ }
1205
+ input {
1206
+ color: var(--_gray-700);
1207
+ margin-top: 2px;
1208
+ &::placeholder {
1209
+ font-family: var(
1210
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-fy,
1211
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-is-ft-fy))
3246
1212
  );
3247
- box-shadow: var(
3248
- --_show-shadow-im-se,
3249
- var(
3250
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-ae,
3251
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-ae)
3252
- ),
3253
- var(
3254
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-br,
3255
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-br)
3256
- ),
3257
- var(
3258
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-sd,
3259
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-sd)
3260
- ),
1213
+ color: var(
1214
+ --_ctm-mob-dn-pt-ds-gt-cd-is-cr,
1215
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-cr, var(--_ctm-dn-pt-ds-gt-cd-is-cr))
1216
+ );
1217
+ font-weight: var(
1218
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-wt,
1219
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-is-ft-wt))
1220
+ );
1221
+ font-size: var(
1222
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se,
1223
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se))
1224
+ );
1225
+ text-decoration: var(
1226
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ue,
1227
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ue, var(--_ctm-dn-pt-ds-gt-cd-is-ue))
1228
+ );
1229
+ letter-spacing: var(
1230
+ --_ctm-mob-dn-pt-ds-gt-cd-is-lr-sg,
1231
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-is-lr-sg))
1232
+ );
1233
+ line-height: var(
1234
+ --_ctm-mob-dn-pt-ds-gt-cd-is-le-ht,
1235
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-dn-pt-ds-gt-cd-is-le-ht))
1236
+ );
1237
+ font-style: var(
1238
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se-ic,
3261
1239
  var(
3262
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-cr,
3263
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-cr)
1240
+ --_ctm-tab-dn-pt-ds-gt-cd-is-ft-se-ic,
1241
+ var(--_ctm-dn-pt-ds-gt-cd-is-ft-se-ic)
3264
1242
  )
3265
1243
  );
3266
- border-radius: var(
3267
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-rs,
3268
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-rs)
1244
+ text-align: var(
1245
+ --_ctm-mob-dn-pt-ds-gt-cd-is-tt-an,
1246
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-dn-pt-ds-gt-cd-is-tt-an))
3269
1247
  );
3270
-
3271
- &:hover {
3272
- background-color: var(
3273
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-bd-cr,
3274
- var(
3275
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-bd-cr,
3276
- var(--_ctm-dn-tb-im-se-hr-se-bd-cr)
3277
- )
3278
- );
3279
- border-color: var(
3280
- --_show-border-im-se,
3281
- var(
3282
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-cr,
3283
- var(
3284
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-cr,
3285
- var(--_ctm-dn-tb-im-se-hr-se-br-cr)
3286
- )
3287
- )
3288
- );
3289
- border-style: var(
3290
- --_show-border-im-se,
3291
- var(
3292
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-se,
3293
- var(
3294
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-se,
3295
- var(--_ctm-dn-tb-im-se-hr-se-br-se)
3296
- )
3297
- )
3298
- );
3299
- border-width: var(
3300
- --_show-border-im-se,
3301
- var(
3302
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-wh,
3303
- var(
3304
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-wh,
3305
- var(--_ctm-dn-tb-im-se-hr-se-br-wh)
3306
- )
3307
- )
3308
- );
3309
- border-radius: var(
3310
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-rs,
3311
- var(
3312
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-rs,
3313
- var(--_ctm-dn-tb-im-se-hr-se-br-rs)
3314
- )
3315
- );
3316
- box-shadow: var(
3317
- --_show-shadow-im-se,
3318
- var(
3319
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-ae,
3320
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-ae)
3321
- ),
3322
- var(
3323
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-br,
3324
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-br)
3325
- ),
3326
- var(
3327
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-sd,
3328
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-sd)
3329
- ),
3330
- var(
3331
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-cr,
3332
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-cr)
3333
- )
3334
- );
3335
- }
3336
-
3337
- &.active {
3338
- background-color: var(
3339
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-bd-cr,
3340
- var(
3341
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-bd-cr,
3342
- var(--_ctm-dn-tb-im-se-sd-se-bd-cr)
3343
- )
3344
- );
3345
- border-color: var(
3346
- --_show-border-im-se,
3347
- var(
3348
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-cr,
3349
- var(
3350
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-cr,
3351
- var(--_ctm-dn-tb-im-se-sd-se-br-cr)
3352
- )
3353
- )
3354
- );
3355
- border-style: var(
3356
- --_show-border-im-se,
3357
- var(
3358
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-se,
3359
- var(
3360
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-se,
3361
- var(--_ctm-dn-tb-im-se-sd-se-br-se)
3362
- )
3363
- )
3364
- );
3365
- border-width: var(
3366
- --_show-border-im-se,
3367
- var(
3368
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-wh,
3369
- var(
3370
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-wh,
3371
- var(--_ctm-dn-tb-im-se-sd-se-br-wh)
3372
- )
3373
- )
3374
- );
3375
- border-radius: var(
3376
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-rs,
3377
- var(
3378
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-rs,
3379
- var(--_ctm-dn-tb-im-se-sd-se-br-rs)
3380
- )
3381
- );
3382
- box-shadow: var(
3383
- --_show-shadow-im-se,
3384
- var(
3385
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-ae,
3386
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-ae)
3387
- ),
3388
- var(
3389
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-br,
3390
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-br)
3391
- ),
3392
- var(
3393
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-sd,
3394
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-sd)
3395
- ),
3396
- var(
3397
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-cr,
3398
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-cr)
3399
- )
3400
- );
3401
- }
1248
+ // color: var(--_gray-500);
1249
+ // font-weight: 500;
1250
+ // font-size: 14px;
1251
+ // line-height: 24px;
3402
1252
  }
1253
+ padding-left: 24px;
3403
1254
  }
3404
- .tab__content {
3405
- padding: var(
3406
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-cr-pg,
3407
- var(
3408
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-cr-pg,
3409
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-cr-pg)
3410
- )
3411
- );
1255
+ &:focus-within {
1256
+ outline: 0 none;
1257
+ outline-offset: 0;
1258
+ border-radius: 4px;
1259
+ box-shadow:
1260
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
1261
+ 0px 0px 0px 2px var(--_primary-100);
1262
+ border: 1px solid var(--_primary-300);
3412
1263
  }
3413
1264
  }
3414
1265
  }
3415
-
3416
- // embla
3417
-
3418
- .embla {
3419
- width: 100%;
3420
- height: 100%;
3421
- position: relative;
1266
+ .delivery_details_container {
3422
1267
  display: flex;
3423
1268
  flex-direction: column;
3424
-
3425
- // overflow: hidden;
3426
-
3427
- .embla__viewport {
3428
- width: 100%;
3429
- height: 100%;
3430
- position: relative;
1269
+ gap: var(
1270
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-im-gp,
1271
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-im-gp, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-im-gp))
1272
+ );
1273
+ .delivery_details_title {
1274
+ display: inline-block;
1275
+ // margin-top: 8px;
1276
+ // margin-bottom: 4px;
1277
+ // font-size: 16px;
1278
+ // color: #000000;
1279
+ // font-weight: 500;
1280
+ // line-height: 150%;
1281
+ font-family: var(
1282
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-fy,
1283
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-fy))
1284
+ );
1285
+ color: var(
1286
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-cr,
1287
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-cr, var(--_ctm-dn-pt-ds-gt-cd-ts-cr))
1288
+ );
1289
+ font-weight: var(
1290
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-wt,
1291
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-wt))
1292
+ );
1293
+ font-size: var(
1294
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se,
1295
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se))
1296
+ );
1297
+ text-decoration: var(
1298
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ue,
1299
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ue, var(--_ctm-dn-pt-ds-gt-cd-ts-ue))
1300
+ );
1301
+ letter-spacing: var(
1302
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-lr-sg,
1303
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ts-lr-sg))
1304
+ );
1305
+ line-height: var(
1306
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-le-ht,
1307
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ts-le-ht))
1308
+ );
1309
+ font-style: var(
1310
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se-ic,
1311
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se-ic))
1312
+ );
1313
+ text-align: var(
1314
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-an,
1315
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-an))
1316
+ );
1317
+ }
1318
+ .horizontal_line {
1319
+ // border: 1px solid #d0d5dd;
1320
+ // display: block;
1321
+ // width: 100%;
1322
+ // border-style: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-se);
1323
+ // border-color: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-cr);
1324
+ // border-width: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-wh);
1325
+ border-top: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-wh) var(--_ctm-dn-pt-ds-gt-cd-dr-dr-se)
1326
+ var(--_ctm-dn-pt-ds-gt-cd-dr-dr-cr);
1327
+ }
1328
+ .input_container {
3431
1329
  display: flex;
3432
1330
  flex-direction: column;
1331
+ gap: 4px;
1332
+ // margin-bottom: 12px;
3433
1333
 
3434
- overflow: hidden;
3435
-
3436
- .embla__container {
3437
- width: 100%;
3438
- height: 100%;
3439
- display: flex;
3440
- grid-template-rows: 100%;
3441
- // grid-template-columns: 100%;
3442
- // grid-template-columns: repeat(
3443
- // var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-is-pr-se),
3444
- // calc(100% / var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-is-pr-se))
3445
- // );
3446
- // grid-auto-flow: column;
3447
- gap: var(
3448
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-sg,
3449
- var(
3450
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-sg,
3451
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-sg)
3452
- )
1334
+ &:last-child {
1335
+ margin-bottom: 0;
1336
+ }
1337
+ label {
1338
+ display: block;
1339
+ font-family: var(
1340
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-fy,
1341
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-fy))
1342
+ );
1343
+ color: var(
1344
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-cr,
1345
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-cr, var(--_ctm-dn-pt-ds-gt-cd-ls-cr))
1346
+ );
1347
+ font-weight: var(
1348
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-wt,
1349
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-wt))
1350
+ );
1351
+ font-size: var(
1352
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se,
1353
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se))
1354
+ );
1355
+ text-decoration: var(
1356
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ue,
1357
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ue, var(--_ctm-dn-pt-ds-gt-cd-ls-ue))
1358
+ );
1359
+ letter-spacing: var(
1360
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-lr-sg,
1361
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ls-lr-sg))
1362
+ );
1363
+ line-height: var(
1364
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-le-ht,
1365
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ls-le-ht))
1366
+ );
1367
+ font-style: var(
1368
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se-ic,
1369
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se-ic))
1370
+ );
1371
+ text-align: var(
1372
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-an,
1373
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-an))
1374
+ );
1375
+ padding: var(
1376
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-pg,
1377
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-pg, var(--_ctm-dn-pt-ds-gt-cd-ls-pg))
1378
+ );
1379
+ // color: var(--_gray-700);
1380
+ // font-weight: 400;
1381
+ // font-size: 14px;
1382
+ // line-height: 20px;
1383
+ }
1384
+ .message_text {
1385
+ resize: none;
1386
+ // background-color: var(--_base-white);
1387
+ // padding: 5px 12px;
1388
+ // border: 1px solid var(--_gray-300);
1389
+ // border-radius: 4px;
1390
+ background-color: var(
1391
+ --_ctm-mob-dn-pt-ds-gt-cd-is-bd-cr,
1392
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-is-bd-cr))
3453
1393
  );
3454
1394
 
3455
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
3456
- height: calc(
3457
- 100% - calc(
3458
- var(
3459
- --_ctm-mob-dn-pn-as-aw-se,
3460
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
3461
- ) +
3462
- 8px
3463
- )
1395
+ border-color: var(
1396
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-cr,
1397
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-dn-pt-ds-gt-cd-is-br-cr))
1398
+ );
1399
+ border-radius: var(
1400
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-rs,
1401
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-dn-pt-ds-gt-cd-is-br-rs))
1402
+ );
1403
+ border-style: var(
1404
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-se,
1405
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-dn-pt-ds-gt-cd-is-br-se))
1406
+ );
1407
+ border-width: var(
1408
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-wh,
1409
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-dn-pt-ds-gt-cd-is-br-wh))
1410
+ );
1411
+ padding: var(
1412
+ --_ctm-mob-dn-pt-ds-gt-cd-is-pg,
1413
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg))
1414
+ );
1415
+ // margin-bottom: 8px;
1416
+ transition:
1417
+ background-color 0.2s,
1418
+ color 0.2s,
1419
+ border-color 0.2s,
1420
+ box-shadow 0.2s;
1421
+ height: 90px;
1422
+ &::placeholder {
1423
+ // color: var(--_gray-500);
1424
+ // font-weight: 500;
1425
+ // font-size: 14px;
1426
+ // line-height: 24px;
1427
+ font-family: var(
1428
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-fy,
1429
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-is-ft-fy))
3464
1430
  );
3465
- }
3466
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
3467
- height: calc(
3468
- 100% - calc(
3469
- var(
3470
- --_ctm-mob-dn-pn-le-le-ht,
3471
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
3472
- ) +
3473
- 20px
3474
- )
1431
+ color: var(
1432
+ --_ctm-mob-dn-pt-ds-gt-cd-is-cr,
1433
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-cr, var(--_ctm-dn-pt-ds-gt-cd-is-cr))
3475
1434
  );
3476
- }
3477
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
3478
- height: calc(
3479
- 100% - calc(
3480
- var(
3481
- --_ctm-mob-dn-pn-ds-dt-se,
3482
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
3483
- ) +
3484
- 20px
3485
- )
1435
+ font-weight: var(
1436
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-wt,
1437
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-is-ft-wt))
3486
1438
  );
3487
- }
3488
-
3489
- .embla__slide {
3490
- // width: 100%;
3491
- height: 100%;
3492
- }
3493
- }
3494
- }
3495
-
3496
- .arrow-navigation {
3497
- display: flex;
3498
- position: absolute;
3499
- top: 50%;
3500
- left: 50%;
3501
- width: 100%;
3502
- justify-content: space-between;
3503
- transform: translate(-50%, -50%);
3504
- // padding-left: 20px;
3505
- &[data-control-type="Side"] {
3506
- .left-button,
3507
- .right-button {
3508
- background-color: transparent;
3509
- }
3510
- }
3511
- &[data-background-shape="Round"] {
3512
- .left-button,
3513
- .right-button {
3514
- background-color: #f2f5f5;
3515
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
3516
- }
3517
- }
3518
- &[data-control-type="Bottom-Overflow"] {
3519
- transform: translateX(-50%);
3520
- width: 100%;
3521
- justify-content: center;
3522
- gap: 12px;
3523
- top: unset;
3524
- bottom: 6px;
3525
- }
3526
- &[data-control-type="Bottom"] {
3527
- transform: unset;
3528
- position: static;
3529
- width: 100%;
3530
- justify-content: center;
3531
- gap: 12px;
3532
- margin-top: 10px;
1439
+ font-size: var(
1440
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se,
1441
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se))
1442
+ );
1443
+ text-decoration: var(
1444
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ue,
1445
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ue, var(--_ctm-dn-pt-ds-gt-cd-is-ue))
1446
+ );
1447
+ letter-spacing: var(
1448
+ --_ctm-mob-dn-pt-ds-gt-cd-is-lr-sg,
1449
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-is-lr-sg))
1450
+ );
1451
+ line-height: var(
1452
+ --_ctm-mob-dn-pt-ds-gt-cd-is-le-ht,
1453
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-dn-pt-ds-gt-cd-is-le-ht))
1454
+ );
1455
+ font-style: var(
1456
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se-ic,
1457
+ var(
1458
+ --_ctm-tab-dn-pt-ds-gt-cd-is-ft-se-ic,
1459
+ var(--_ctm-dn-pt-ds-gt-cd-is-ft-se-ic)
1460
+ )
1461
+ );
1462
+ text-align: var(
1463
+ --_ctm-mob-dn-pt-ds-gt-cd-is-tt-an,
1464
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-dn-pt-ds-gt-cd-is-tt-an))
1465
+ );
1466
+ }
1467
+ &:focus {
1468
+ outline: 0 none;
1469
+ outline-offset: 0;
1470
+ border-radius: 4px;
1471
+ box-shadow:
1472
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
1473
+ 0px 0px 0px 2px var(--_primary-100);
1474
+ border: 1px solid var(--_primary-300);
1475
+ }
3533
1476
  }
3534
- .left-button {
3535
- padding: 10px;
3536
- border-radius: 50%;
3537
- border: none;
3538
- width: var(
3539
- --_ctm-mob-dn-pn-as-aw-se,
3540
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
3541
- );
3542
- height: var(
3543
- --_ctm-mob-dn-pn-as-aw-se,
3544
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1477
+ input {
1478
+ // background-color: var(--_base-white);
1479
+ // padding: 8px 12px;
1480
+ // border: 1px solid var(--_gray-300);
1481
+ // border-radius: 4px;
1482
+ background-color: var(
1483
+ --_ctm-mob-dn-pt-ds-gt-cd-is-bd-cr,
1484
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-is-bd-cr))
3545
1485
  );
3546
1486
 
3547
- display: flex;
3548
- align-items: center;
3549
- justify-content: center;
3550
- cursor: pointer;
3551
- outline: none;
3552
- margin-left: 12px;
3553
- &:disabled {
3554
- & svg {
3555
- path {
3556
- stroke: rgb(192, 192, 192);
3557
- }
3558
- }
3559
- }
3560
- }
3561
- .right-button {
3562
- border-radius: 50%;
3563
- border: none;
3564
- width: var(
3565
- --_ctm-mob-dn-pn-as-aw-se,
3566
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1487
+ border-color: var(
1488
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-cr,
1489
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-dn-pt-ds-gt-cd-is-br-cr))
3567
1490
  );
3568
- height: var(
3569
- --_ctm-mob-dn-pn-as-aw-se,
3570
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
1491
+ border-radius: var(
1492
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-rs,
1493
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-dn-pt-ds-gt-cd-is-br-rs))
3571
1494
  );
3572
-
3573
- display: flex;
3574
- align-items: center;
3575
- justify-content: center;
3576
- cursor: pointer;
3577
- outline: none;
3578
- margin-right: 12px;
3579
- padding: 10px;
3580
-
3581
- &:disabled {
3582
- & svg {
3583
- path {
3584
- stroke: rgb(192, 192, 192);
3585
- }
3586
- }
3587
- }
3588
- }
3589
- .icon {
3590
- display: flex;
3591
- svg {
3592
- width: calc(
3593
- var(
3594
- --_ctm-mob-dn-pn-as-aw-se,
3595
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
3596
- ) *
3597
- 0.5
1495
+ border-style: var(
1496
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-se,
1497
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-dn-pt-ds-gt-cd-is-br-se))
1498
+ );
1499
+ border-width: var(
1500
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-wh,
1501
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-dn-pt-ds-gt-cd-is-br-wh))
1502
+ );
1503
+ // padding: var(
1504
+ // --_ctm-mob-dn-pt-ds-gt-cd-is-pg,
1505
+ // var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg))
1506
+ // );
1507
+ padding: 10px 12px 12px 12px;
1508
+
1509
+ transition:
1510
+ background-color 0.2s,
1511
+ color 0.2s,
1512
+ border-color 0.2s,
1513
+ box-shadow 0.2s;
1514
+ &::placeholder {
1515
+ // color: var(--_gray-500);
1516
+ // font-weight: 500;
1517
+ // font-size: 14px;
1518
+ // line-height: 24px;
1519
+ font-family: var(
1520
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-fy,
1521
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-is-ft-fy))
1522
+ );
1523
+ color: var(
1524
+ --_ctm-mob-dn-pt-ds-gt-cd-is-cr,
1525
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-cr, var(--_ctm-dn-pt-ds-gt-cd-is-cr))
1526
+ );
1527
+ font-weight: var(
1528
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-wt,
1529
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-is-ft-wt))
1530
+ );
1531
+ font-size: var(
1532
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se,
1533
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se))
1534
+ );
1535
+ text-decoration: var(
1536
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ue,
1537
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ue, var(--_ctm-dn-pt-ds-gt-cd-is-ue))
1538
+ );
1539
+ letter-spacing: var(
1540
+ --_ctm-mob-dn-pt-ds-gt-cd-is-lr-sg,
1541
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-is-lr-sg))
1542
+ );
1543
+ line-height: var(
1544
+ --_ctm-mob-dn-pt-ds-gt-cd-is-le-ht,
1545
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-dn-pt-ds-gt-cd-is-le-ht))
3598
1546
  );
3599
- height: calc(
1547
+ font-style: var(
1548
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se-ic,
3600
1549
  var(
3601
- --_ctm-mob-dn-pn-as-aw-se,
3602
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
3603
- ) *
3604
- 0.5
1550
+ --_ctm-tab-dn-pt-ds-gt-cd-is-ft-se-ic,
1551
+ var(--_ctm-dn-pt-ds-gt-cd-is-ft-se-ic)
1552
+ )
1553
+ );
1554
+ text-align: var(
1555
+ --_ctm-mob-dn-pt-ds-gt-cd-is-tt-an,
1556
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-dn-pt-ds-gt-cd-is-tt-an))
3605
1557
  );
3606
- path {
3607
- stroke: var(
3608
- --_ctm-mob-dn-pn-as-aw-cr,
3609
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
3610
- );
3611
- }
3612
1558
  }
3613
- }
3614
- }
3615
-
3616
- &[data-thumbnail-placement="top"] {
3617
- flex-direction: column-reverse;
3618
- }
3619
- &[data-thumbnail-placement="bottom"] {
3620
- flex-direction: column;
3621
- }
3622
- &[data-thumbnail-placement="left"] {
3623
- flex-direction: row-reverse;
3624
-
3625
- .embla__thumbs {
3626
- width: var(
3627
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
3628
- var(
3629
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
3630
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se)
3631
- )
3632
- );
3633
-
3634
- height: 100%;
3635
-
3636
- & .embla__thumbs__container {
3637
- flex-direction: column;
3638
- height: 100%;
1559
+ &:focus {
1560
+ outline: 0 none;
1561
+ outline-offset: 0;
1562
+ border-radius: 4px;
1563
+ box-shadow:
1564
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
1565
+ 0px 0px 0px 2px var(--_primary-100);
1566
+ border: 1px solid var(--_primary-300);
3639
1567
  }
3640
1568
  }
1569
+ .error_text {
1570
+ font-size: 12px;
1571
+ color: var(--_error-500);
1572
+ }
3641
1573
  }
3642
- &[data-thumbnail-placement="right"] {
3643
- flex-direction: row;
3644
- .embla__thumbs {
3645
- width: var(
3646
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
3647
- var(
3648
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
3649
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se)
3650
- )
3651
- );
3652
-
3653
- height: 100%;
1574
+ }
1575
+ }
1576
+ .product_qty_wrapper {
1577
+ display: flex;
1578
+ // width: 124px;
1579
+ flex-direction: column;
1580
+ align-items: flex-start;
1581
+ gap: 6px;
1582
+ width: 113px;
1583
+ margin-block: 12px;
3654
1584
 
3655
- & .embla__thumbs__container {
3656
- flex-direction: column;
3657
- height: 100%;
3658
- }
3659
- }
1585
+ .product_qty_container {
1586
+ display: flex;
1587
+ align-items: flex-start;
1588
+ align-self: stretch;
1589
+ border-radius: 4px;
1590
+ border: 0.5px solid var(--_thm-cs-be-se-3);
1591
+ background: #fff;
1592
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
1593
+ &:focus-within {
1594
+ outline: 2px solid var(--_gray-200);
3660
1595
  }
3661
- &[data-control-type="Side"] {
1596
+
1597
+ .product_qty_label {
3662
1598
  display: flex;
3663
- align-self: center;
3664
- flex-direction: row;
3665
- .left-button:disabled,
3666
- .right-button:disabled {
3667
- display: none;
1599
+ padding: 8px 12px;
1600
+ align-items: center;
1601
+ border-radius: 8px 0px 0px 8px;
1602
+ p {
1603
+ color: var(--_thm-ty-p1-tt-cr);
1604
+ font-size: var(--_thm-ty-p1-ft-se);
1605
+ font-weight: var(--_thm-ty-p1-bd);
1606
+ // line-height: 24px;
1607
+ line-height: var(--_thm-ty-p1-le-ht);
3668
1608
  }
3669
1609
  }
3670
- .embla__dots {
1610
+ .product_qty_input_container {
1611
+ height: 40px;
3671
1612
  display: flex;
3672
- flex-wrap: wrap;
3673
- justify-content: center;
1613
+ // position: relative;
1614
+ width: 55px;
1615
+ border-radius: 0px 4px 4px 0px;
1616
+ background: transparent;
1617
+ border-left: 1px solid var(--_thm-cs-be-se-3);
1618
+ padding: 8px 12px;
1619
+ }
1620
+ .product_qty_number {
1621
+ // display: flex;
1622
+ // padding: 8px 12px;
3674
1623
  align-items: center;
3675
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
3676
- gap: 6px;
3677
- margin-top: 16px;
3678
-
3679
- &[data-control-type="Bottom-Overflow"] {
3680
- position: absolute;
3681
- bottom: 10px;
3682
- left: 50%;
3683
- transform: translateX(-50%);
3684
- width: 75%;
3685
- }
3686
- .embla__dot {
3687
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
1624
+ color: var(--_thm-ty-p2-tt-cr);
1625
+ font-size: var(--_thm-ty-p1-ft-se);
1626
+ font-weight: var(--_thm-ty-p1-bd);
1627
+ line-height: var(--_thm-ty-p1-le-ht);
1628
+ // gap: 8px;
1629
+ // flex: 1 0 0;
1630
+ // align-self: stretch;
1631
+ // border-radius: 0px 4px 4px 0px;
1632
+ // background: #fff;
1633
+ // border-left: 1px solid #d0d5dd;
1634
+ // max-width: 80px;
1635
+ text-align: center;
1636
+ width: 75%;
1637
+ &::-webkit-outer-spin-button,
1638
+ &::-webkit-inner-spin-button {
3688
1639
  -webkit-appearance: none;
3689
- appearance: none;
3690
- background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
3691
- touch-action: manipulation;
3692
- display: inline-flex;
3693
- text-decoration: none;
3694
- cursor: pointer;
3695
- border: 0;
3696
- padding: 0;
3697
1640
  margin: 0;
3698
- // width: 0.6rem;
3699
- // height: 0.6rem;
3700
- width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
3701
- height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
3702
- display: flex;
3703
- align-items: center;
3704
- justify-content: center;
3705
- border-radius: 50%;
3706
- }
3707
- .embla__dot:after {
3708
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
3709
- width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
3710
- height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
3711
- border-radius: 50%;
3712
- display: flex;
3713
- align-items: center;
3714
- content: "";
3715
- }
3716
- .embla__dot--selected:after {
3717
- box-shadow: inset 0 0 0 1px var(--text-body);
3718
- background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
3719
- }
3720
- &[data-slider-control="Pagination Line"] {
3721
- .embla__dot {
3722
- width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
3723
- height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
3724
- background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
3725
-
3726
- border-radius: 6px;
3727
- }
3728
- .embla__dot--selected:after {
3729
- box-shadow: inset 0 0 0 1px var(--text-body);
3730
- border-radius: 6px;
3731
- width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
3732
- height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
3733
- // background-color: #fff;
3734
- background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
3735
- }
3736
1641
  }
3737
1642
  }
3738
-
3739
- .embla__thumbs {
3740
- width: 100%;
3741
- height: var(
3742
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
3743
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se))
3744
- );
3745
-
3746
- position: relative;
3747
- display: grid;
3748
- grid-template-columns: 1fr;
3749
- overflow: hidden;
3750
- // margin: 10px;
3751
- padding: 10px;
3752
-
3753
- .embla__thumbs__viewport {
3754
- width: 100%;
3755
- height: 100%;
3756
- position: relative;
3757
- display: flex;
3758
- flex-direction: column;
3759
-
3760
- overflow: hidden;
3761
- }
3762
- .embla__thumbs__container {
3763
- display: flex;
3764
- flex-direction: row;
3765
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
3766
- gap: var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-sg);
3767
- width: 100%;
3768
- // justify-content: center;
3769
- // height: 200px;
3770
-
3771
- .embla__thumbs__slide {
3772
- min-width: var(
3773
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
3774
- var(
3775
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
3776
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se)
3777
- )
3778
- );
3779
- max-width: var(
3780
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
3781
- var(
3782
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
3783
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se)
3784
- )
3785
- );
3786
- height: var(
3787
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
3788
- var(
3789
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
3790
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se)
3791
- )
3792
- );
3793
- & img {
3794
- width: 100%;
3795
- height: 100%;
3796
- }
3797
- }
3798
- }
1643
+ }
1644
+ }
1645
+ .add-to-cart {
1646
+ padding-top: 12px;
1647
+ padding-right: 24px;
1648
+ padding-bottom: 12px;
1649
+ padding-left: 24px;
1650
+ transition: background 200ms ease-in-out;
1651
+ span {
1652
+ display: flex;
1653
+ svg path {
1654
+ stroke: var(--_base-white);
3799
1655
  }
3800
1656
  }
1657
+ // padding: var(
1658
+ // --_ctm-mob-dn-pt-ds-at-pg,
1659
+ // var(--_ctm-tab-dn-pt-ds-at-pg, var(--_ctm-dn-pt-ds-at-pg))
1660
+ // );
1661
+ // border-style: var(
1662
+ // --_ctm-mob-dn-pt-ds-at-br-se,
1663
+ // var(--_ctm-tab-dn-pt-ds-at-br-se, var(--_ctm-dn-pt-ds-at-br-se))
1664
+ // );
1665
+ // border-width: var(
1666
+ // --_ctm-mob-dn-pt-ds-at-br-wh,
1667
+ // var(--_ctm-tab-dn-pt-ds-at-br-wh, var(--_ctm-dn-pt-ds-at-br-wh))
1668
+ // );
1669
+ // border-radius: var(
1670
+ // --_ctm-mob-dn-pt-ds-at-br-rs,
1671
+ // var(--_ctm-tab-dn-pt-ds-at-br-rs, var(--_ctm-dn-pt-ds-at-br-rs))
1672
+ // );
1673
+ // border-color: var(
1674
+ // --_ctm-mob-dn-pt-ds-at-br-cr,
1675
+ // var(--_ctm-tab-dn-pt-ds-at-br-cr, var(--_ctm-dn-pt-ds-at-br-cr))
1676
+ // );
1677
+ // background: var(
1678
+ // --_ctm-mob-dn-pt-ds-at-bd-cr,
1679
+ // var(--_ctm-tab-dn-pt-ds-at-bd-cr, var(--_ctm-dn-pt-ds-at-bd-cr))
1680
+ // );
1681
+ // box-shadow: 0px 1px 2px 0px #1018280d;
1682
+ // text-align: center;
1683
+ // font-family: var(
1684
+ // --_ctm-mob-dn-pt-ds-at-ft-fy,
1685
+ // var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy))
1686
+ // );
1687
+ // font-weight: var(
1688
+ // --_ctm-mob-dn-pt-ds-at-ft-wt,
1689
+ // var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt))
1690
+ // );
1691
+ // font-size: var(
1692
+ // --_ctm-mob-dn-pt-ds-at-ft-se,
1693
+ // var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se))
1694
+ // );
1695
+ // line-height: var(
1696
+ // --_ctm-mob-dn-pt-ds-at-le-ht,
1697
+ // var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht))
1698
+ // );
1699
+ // letter-spacing: var(
1700
+ // --_ctm-mob-dn-pt-ds-at-lr-sg,
1701
+ // var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg))
1702
+ // );
1703
+ // color: var(
1704
+ // --_ctm-mob-dn-pt-ds-at-cr,
1705
+ // var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr))
1706
+ // );
1707
+ // span {
1708
+ // vertical-align: middle;
1709
+ // }
1710
+ // button {
1711
+ // font-family: var(
1712
+ // --_ctm-mob-dn-pt-ds-at-ft-fy,
1713
+ // var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy))
1714
+ // );
1715
+ // font-weight: var(
1716
+ // --_ctm-mob-dn-pt-ds-at-ft-wt,
1717
+ // var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt))
1718
+ // );
1719
+ // font-size: var(
1720
+ // --_ctm-mob-dn-pt-ds-at-ft-se,
1721
+ // var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se))
1722
+ // );
1723
+ // line-height: var(
1724
+ // --_ctm-mob-dn-pt-ds-at-le-ht,
1725
+ // var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht))
1726
+ // );
1727
+ // letter-spacing: var(
1728
+ // --_ctm-mob-dn-pt-ds-at-lr-sg,
1729
+ // var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg))
1730
+ // );
1731
+ // color: var(
1732
+ // --_ctm-mob-dn-pt-ds-at-cr,
1733
+ // var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr))
1734
+ // );
1735
+ // }
3801
1736
  }
3802
1737
  }
3803
1738
 
@@ -4206,6 +2141,8 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
4206
2141
  }
4207
2142
  }
4208
2143
  }
2144
+
2145
+ // for bundle details
4209
2146
  }
4210
2147
  }
4211
2148
  .text_ellipsis {