@sc-360-v2/storefront-cms-library 0.4.37 → 0.4.39

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.
package/dist/coupon.scss CHANGED
@@ -70,7 +70,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
70
70
  top: 10px;
71
71
  // margin-bottom: 24px;
72
72
  .coupon_code_header {
73
- font-size: 16px;
73
+ // font-size: 16px;
74
74
  font-family: var(
75
75
  --_ctm-mob-dn-cn-hr-ft-fy,
76
76
  var(--_ctm-tab-dn-cn-hr-ft-fy, var(--_ctm-dn-cn-hr-ft-fy))
@@ -80,10 +80,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
80
80
  --_ctm-mob-dn-cn-hr-ft-wt,
81
81
  var(--_ctm-tab-dn-cn-hr-ft-wt, var(--_ctm-dn-cn-hr-ft-wt))
82
82
  );
83
- // font-size: var(
84
- // --_ctm-mob-dn-cn-hr-ft-se,
85
- // var(--_ctm-tab-dn-cn-hr-ft-se, var(--_ctm-dn-cn-hr-ft-se))
86
- // );
83
+ font-size: var(
84
+ --_ctm-mob-dn-cn-hr-ft-se,
85
+ var(--_ctm-tab-dn-cn-hr-ft-se, var(--_ctm-dn-cn-hr-ft-se))
86
+ );
87
87
  text-decoration: var(
88
88
  --_ctm-mob-dn-cn-hr-ue,
89
89
  var(--_ctm-tab-dn-cn-hr-ue, var(--_ctm-dn-cn-hr-ue))
@@ -121,6 +121,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
121
121
  var(--_ctm-tab-dn-cn-hr-br-wh, var(--_ctm-dn-cn-hr-br-wh))
122
122
  );
123
123
  padding: var(--_ctm-mob-dn-cn-hr-pg, var(--_ctm-tab-dn-cn-hr-pg, var(--_ctm-dn-cn-hr-pg)));
124
+
125
+ &.divider {
126
+ border-bottom: 1px dashed var(--_gray-300);
127
+ }
124
128
  }
125
129
  .coupon_code_body {
126
130
  padding: var(
@@ -144,6 +148,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
144
148
  var(--_ctm-tab-dn-cn-wt-cr-im-gp, var(--_ctm-dn-cn-wt-cr-im-gp))
145
149
  );
146
150
  .cpn__sale__icon {
151
+ margin-top: 4px;
147
152
  .icon {
148
153
  svg {
149
154
  width: var(
@@ -213,41 +218,41 @@ $resizeActive: '[data-cms-element-resizer="true"]';
213
218
  }
214
219
  .cpn_sale_desc {
215
220
  font-family: var(
216
- --_ctm-mob-dn-cn-wt-dn-ft-fy-dc,
217
- var(--_ctm-tab-dn-cn-wt-dn-ft-fy-dc, var(--_ctm-dn-cn-wt-dn-ft-fy-dc))
221
+ --_ctm-mob-dn-cn-wt-dn-ft-fy,
222
+ var(--_ctm-tab-dn-cn-wt-dn-ft-fy, var(--_ctm-dn-cn-wt-dn-ft-fy))
218
223
  );
219
224
  color: var(
220
- --_ctm-mob-dn-cn-wt-dn-cr-dc,
221
- var(--_ctm-tab-dn-cn-wt-dn-cr-dc, var(--_ctm-dn-cn-wt-dn-cr-dc))
225
+ --_ctm-mob-dn-cn-wt-dn-cr,
226
+ var(--_ctm-tab-dn-cn-wt-dn-cr, var(--_ctm-dn-cn-wt-dn-cr))
222
227
  );
223
228
  font-weight: var(
224
- --_ctm-mob-dn-cn-wt-dn-ft-wt-dc,
225
- var(--_ctm-tab-dn-cn-wt-dn-ft-wt-dc, var(--_ctm-dn-cn-wt-dn-ft-wt-dc))
229
+ --_ctm-mob-dn-cn-wt-dn-ft-wt,
230
+ var(--_ctm-tab-dn-cn-wt-dn-ft-wt, var(--_ctm-dn-cn-wt-dn-ft-wt))
226
231
  );
227
232
  // font-size: 14px;
228
233
  font-size: var(
229
- --_ctm-mob-dn-cn-wt-dn-ft-se-dc,
230
- var(--_ctm-tab-dn-cn-wt-dn-ft-se-dc, var(--_ctm-dn-cn-wt-dn-ft-se-dc))
234
+ --_ctm-mob-dn-cn-wt-dn-ft-se,
235
+ var(--_ctm-tab-dn-cn-wt-dn-ft-se, var(--_ctm-dn-cn-wt-dn-ft-se))
231
236
  );
232
237
  text-decoration: var(
233
- --_ctm-mob-dn-cn-wt-dn-ue-dc,
234
- var(--_ctm-tab-dn-cn-wt-dn-ue-dc, var(--_ctm-dn-cn-wt-dn-ue-dc))
238
+ --_ctm-mob-dn-cn-wt-dn-ue,
239
+ var(--_ctm-tab-dn-cn-wt-dn-ue, var(--_ctm-dn-cn-wt-dn-ue))
235
240
  );
236
241
  letter-spacing: var(
237
- --_ctm-mob-dn-cn-wt-dn-lr-sg-dc,
238
- var(--_ctm-tab-dn-cn-wt-dn-lr-sg-dc, var(--_ctm-dn-cn-wt-dn-lr-sg-dc))
242
+ --_ctm-mob-dn-cn-wt-dn-lr-sg,
243
+ var(--_ctm-tab-dn-cn-wt-dn-lr-sg, var(--_ctm-dn-cn-wt-dn-lr-sg))
239
244
  );
240
245
  line-height: var(
241
- --_ctm-mob-dn-cn-wt-dn-le-ht-dc,
242
- var(--_ctm-tab-dn-cn-wt-dn-le-ht-dc, var(--_ctm-dn-cn-wt-dn-le-ht-dc))
246
+ --_ctm-mob-dn-cn-wt-dn-le-ht,
247
+ var(--_ctm-tab-dn-cn-wt-dn-le-ht, var(--_ctm-dn-cn-wt-dn-le-ht))
243
248
  );
244
249
  font-style: var(
245
- --_ctm-mob-dn-cn-wt-dn-ft-se-ic-dc,
246
- var(--_ctm-tab-dn-cn-wt-dn-ft-se-ic-dc, var(--_ctm-dn-cn-wt-dn-ft-se-ic-dc))
250
+ --_ctm-mob-dn-cn-wt-dn-ft-se-ic,
251
+ var(--_ctm-tab-dn-cn-wt-dn-ft-se-ic, var(--_ctm-dn-cn-wt-dn-ft-se-ic))
247
252
  );
248
253
  text-align: var(
249
- --_ctm-mob-dn-cn-wt-dn-tt-an-dc,
250
- var(--_ctm-tab-dn-cn-wt-dn-tt-an-dc, var(--_ctm-dn-cn-wt-dn-tt-an-dc))
254
+ --_ctm-mob-dn-cn-wt-dn-tt-an,
255
+ var(--_ctm-tab-dn-cn-wt-dn-tt-an, var(--_ctm-dn-cn-wt-dn-tt-an))
251
256
  );
252
257
  // font-size: 14px;
253
258
  // font-weight: 400;
@@ -562,6 +567,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
562
567
  --_ctm-mob-dn-cn-wt-it-fd-sw-cr,
563
568
  var(--_ctm-tab-dn-cn-wt-it-fd-sw-cr, var(--_ctm-dn-cn-wt-it-fd-sw-cr))
564
569
  );
570
+ transition:
571
+ outline border 0.2s ease,
572
+ border 0.2s ease;
573
+ &:focus {
574
+ border: 1px solid var(--_thm-cs-tt-by-tt);
575
+ outline: 2px solid color-mix(in srgb, var(--_thm-cs-tt-by-tt) 10%, transparent);
576
+ }
565
577
  }
566
578
  .btn__with__text[data-btn-name="applyButton"] {
567
579
  width: 100%;
@@ -741,11 +753,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
741
753
  display: none;
742
754
  }
743
755
  }
744
- // .coupon-search-btn {
745
- // width: 93px;
746
- // height: 48px;
747
- // white-space: nowrap;
748
- // }
756
+ .coupon-search-btn {
757
+ white-space: nowrap;
758
+ padding: prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-pg);
759
+ &:disabled {
760
+ cursor: not-allowed;
761
+ opacity: 0.5;
762
+ }
763
+ }
749
764
  }
750
765
  .couponCode_divider {
751
766
  border: 1px dashed #d0d5dd;
@@ -815,89 +830,94 @@ $resizeActive: '[data-cms-element-resizer="true"]';
815
830
  var(--_ctm-tab-dn-cn-wt-cn-tt-tt-an, var(--_ctm-dn-cn-wt-cn-tt-tt-an))
816
831
  );
817
832
  }
818
- .coupon-desc {
819
- // font-size: 14px;
820
- // font-weight: 400;
821
- // line-height: 20px;
822
- // color: #667085;
823
- font-family: var(
824
- --_ctm-mob-dn-cn-wt-sd-te-ft-fy,
825
- var(--_ctm-tab-dn-cn-wt-sd-te-ft-fy, var(--_ctm-dn-cn-wt-sd-te-ft-fy))
826
- );
827
- color: var(
828
- --_ctm-mob-dn-cn-wt-sd-te-cr,
829
- var(--_ctm-tab-dn-cn-wt-sd-te-cr, var(--_ctm-dn-cn-wt-sd-te-cr))
830
- );
831
- font-weight: var(
832
- --_ctm-mob-dn-cn-wt-sd-te-ft-wt,
833
- var(--_ctm-tab-dn-cn-wt-sd-te-ft-wt, var(--_ctm-dn-cn-wt-sd-te-ft-wt))
834
- );
835
- font-size: var(
836
- --_ctm-mob-dn-cn-wt-sd-te-ft-se,
837
- var(--_ctm-tab-dn-cn-wt-sd-te-ft-se, var(--_ctm-dn-cn-wt-sd-te-ft-se))
838
- );
839
- text-decoration: var(
840
- --_ctm-mob-dn-cn-wt-sd-te-ue,
841
- var(--_ctm-tab-dn-cn-wt-sd-te-ue, var(--_ctm-dn-cn-wt-sd-te-ue))
842
- );
843
- letter-spacing: var(
844
- --_ctm-mob-dn-cn-wt-sd-te-lr-sg,
845
- var(--_ctm-tab-dn-cn-wt-sd-te-lr-sg, var(--_ctm-dn-cn-wt-sd-te-lr-sg))
846
- );
847
- line-height: var(
848
- --_ctm-mob-dn-cn-wt-sd-te-le-ht,
849
- var(--_ctm-tab-dn-cn-wt-sd-te-le-ht, var(--_ctm-dn-cn-wt-sd-te-le-ht))
850
- );
851
- font-style: var(
852
- --_ctm-mob-dn-cn-wt-sd-te-ft-se-ic,
853
- var(--_ctm-tab-dn-cn-wt-sd-te-ft-se-ic, var(--_ctm-dn-cn-wt-sd-te-ft-se-ic))
854
- );
855
- text-align: var(
856
- --_ctm-mob-dn-cn-wt-sd-te-tt-an,
857
- var(--_ctm-tab-dn-cn-wt-sd-te-tt-an, var(--_ctm-dn-cn-wt-sd-te-tt-an))
858
- );
859
- }
860
- .currency_span {
861
- // font-size: 14px;
862
- // font-weight: 400;
863
- // line-height: 20px;
864
- // color: #667085;
865
- font-family: var(
866
- --_ctm-mob-dn-cn-wt-pe-ft-fy,
867
- var(--_ctm-tab-dn-cn-wt-pe-ft-fy, var(--_ctm-dn-cn-wt-pe-ft-fy))
868
- );
869
- color: var(
870
- --_ctm-mob-dn-cn-wt-pe-cr,
871
- var(--_ctm-tab-dn-cn-wt-pe-cr, var(--_ctm-dn-cn-wt-pe-cr))
872
- );
873
- font-weight: var(
874
- --_ctm-mob-dn-cn-wt-pe-ft-wt,
875
- var(--_ctm-tab-dn-cn-wt-pe-ft-wt, var(--_ctm-dn-cn-wt-pe-ft-wt))
876
- );
877
- font-size: var(
878
- --_ctm-mob-dn-cn-wt-pe-ft-se,
879
- var(--_ctm-tab-dn-cn-wt-pe-ft-se, var(--_ctm-dn-cn-wt-pe-ft-se))
880
- );
881
- text-decoration: var(
882
- --_ctm-mob-dn-cn-wt-pe-ue,
883
- var(--_ctm-tab-dn-cn-wt-pe-ue, var(--_ctm-dn-cn-wt-pe-ue))
884
- );
885
- letter-spacing: var(
886
- --_ctm-mob-dn-cn-wt-pe-lr-sg,
887
- var(--_ctm-tab-dn-cn-wt-pe-lr-sg, var(--_ctm-dn-cn-wt-pe-lr-sg))
888
- );
889
- line-height: var(
890
- --_ctm-mob-dn-cn-wt-pe-le-ht,
891
- var(--_ctm-tab-dn-cn-wt-pe-le-ht, var(--_ctm-dn-cn-wt-pe-le-ht))
892
- );
893
- font-style: var(
894
- --_ctm-mob-dn-cn-wt-pe-ft-se-ic,
895
- var(--_ctm-tab-dn-cn-wt-pe-ft-se-ic, var(--_ctm-dn-cn-wt-pe-ft-se-ic))
896
- );
897
- text-align: var(
898
- --_ctm-mob-dn-cn-wt-pe-tt-an,
899
- var(--_ctm-tab-dn-cn-wt-pe-tt-an, var(--_ctm-dn-cn-wt-pe-tt-an))
900
- );
833
+ .coupon-currency {
834
+ display: flex;
835
+ align-items: center;
836
+ gap: 8px;
837
+ .coupon-desc {
838
+ // font-size: 14px;
839
+ // font-weight: 400;
840
+ // line-height: 20px;
841
+ // color: #667085;
842
+ font-family: var(
843
+ --_ctm-mob-dn-cn-wt-sd-te-ft-fy,
844
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-fy, var(--_ctm-dn-cn-wt-sd-te-ft-fy))
845
+ );
846
+ color: var(
847
+ --_ctm-mob-dn-cn-wt-sd-te-cr,
848
+ var(--_ctm-tab-dn-cn-wt-sd-te-cr, var(--_ctm-dn-cn-wt-sd-te-cr))
849
+ );
850
+ font-weight: var(
851
+ --_ctm-mob-dn-cn-wt-sd-te-ft-wt,
852
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-wt, var(--_ctm-dn-cn-wt-sd-te-ft-wt))
853
+ );
854
+ font-size: var(
855
+ --_ctm-mob-dn-cn-wt-sd-te-ft-se,
856
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-se, var(--_ctm-dn-cn-wt-sd-te-ft-se))
857
+ );
858
+ text-decoration: var(
859
+ --_ctm-mob-dn-cn-wt-sd-te-ue,
860
+ var(--_ctm-tab-dn-cn-wt-sd-te-ue, var(--_ctm-dn-cn-wt-sd-te-ue))
861
+ );
862
+ letter-spacing: var(
863
+ --_ctm-mob-dn-cn-wt-sd-te-lr-sg,
864
+ var(--_ctm-tab-dn-cn-wt-sd-te-lr-sg, var(--_ctm-dn-cn-wt-sd-te-lr-sg))
865
+ );
866
+ line-height: var(
867
+ --_ctm-mob-dn-cn-wt-sd-te-le-ht,
868
+ var(--_ctm-tab-dn-cn-wt-sd-te-le-ht, var(--_ctm-dn-cn-wt-sd-te-le-ht))
869
+ );
870
+ font-style: var(
871
+ --_ctm-mob-dn-cn-wt-sd-te-ft-se-ic,
872
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-se-ic, var(--_ctm-dn-cn-wt-sd-te-ft-se-ic))
873
+ );
874
+ text-align: var(
875
+ --_ctm-mob-dn-cn-wt-sd-te-tt-an,
876
+ var(--_ctm-tab-dn-cn-wt-sd-te-tt-an, var(--_ctm-dn-cn-wt-sd-te-tt-an))
877
+ );
878
+ }
879
+ .currency_span {
880
+ // font-size: 14px;
881
+ // font-weight: 400;
882
+ // line-height: 20px;
883
+ // color: #667085;
884
+ font-family: var(
885
+ --_ctm-mob-dn-cn-wt-pe-ft-fy,
886
+ var(--_ctm-tab-dn-cn-wt-pe-ft-fy, var(--_ctm-dn-cn-wt-pe-ft-fy))
887
+ );
888
+ color: var(
889
+ --_ctm-mob-dn-cn-wt-pe-cr,
890
+ var(--_ctm-tab-dn-cn-wt-pe-cr, var(--_ctm-dn-cn-wt-pe-cr))
891
+ );
892
+ font-weight: var(
893
+ --_ctm-mob-dn-cn-wt-pe-ft-wt,
894
+ var(--_ctm-tab-dn-cn-wt-pe-ft-wt, var(--_ctm-dn-cn-wt-pe-ft-wt))
895
+ );
896
+ font-size: var(
897
+ --_ctm-mob-dn-cn-wt-pe-ft-se,
898
+ var(--_ctm-tab-dn-cn-wt-pe-ft-se, var(--_ctm-dn-cn-wt-pe-ft-se))
899
+ );
900
+ text-decoration: var(
901
+ --_ctm-mob-dn-cn-wt-pe-ue,
902
+ var(--_ctm-tab-dn-cn-wt-pe-ue, var(--_ctm-dn-cn-wt-pe-ue))
903
+ );
904
+ letter-spacing: var(
905
+ --_ctm-mob-dn-cn-wt-pe-lr-sg,
906
+ var(--_ctm-tab-dn-cn-wt-pe-lr-sg, var(--_ctm-dn-cn-wt-pe-lr-sg))
907
+ );
908
+ line-height: var(
909
+ --_ctm-mob-dn-cn-wt-pe-le-ht,
910
+ var(--_ctm-tab-dn-cn-wt-pe-le-ht, var(--_ctm-dn-cn-wt-pe-le-ht))
911
+ );
912
+ font-style: var(
913
+ --_ctm-mob-dn-cn-wt-pe-ft-se-ic,
914
+ var(--_ctm-tab-dn-cn-wt-pe-ft-se-ic, var(--_ctm-dn-cn-wt-pe-ft-se-ic))
915
+ );
916
+ text-align: var(
917
+ --_ctm-mob-dn-cn-wt-pe-tt-an,
918
+ var(--_ctm-tab-dn-cn-wt-pe-tt-an, var(--_ctm-dn-cn-wt-pe-tt-an))
919
+ );
920
+ }
901
921
  }
902
922
  }
903
923
  .btn__with__text[data-btn-name="removeButton"] {
@@ -1092,6 +1112,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1092
1112
  display: none;
1093
1113
  }
1094
1114
  }
1115
+ .remove-btn {
1116
+ padding: prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-pg);
1117
+ }
1095
1118
  }
1096
1119
  }
1097
1120
  .coupon-footer-section {
@@ -1122,3 +1145,110 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1122
1145
  }
1123
1146
  }
1124
1147
  }
1148
+
1149
+ // .coupon_code {
1150
+ // border: 1px solid var(--_gray-300);
1151
+ // border-radius: 4px;
1152
+ // .coupon_code_header {
1153
+ // background-color: var(--_gray-100);
1154
+ // padding: 12px 12px 14px 12px;
1155
+ // border-bottom: 0.5px solid var(--_gray-300);
1156
+ // h3 {
1157
+ // font-size: 16px;
1158
+ // color: var(--_gray-900);
1159
+ // }
1160
+ // }
1161
+ // .coupon_code_body {
1162
+ // display: flex;
1163
+ // flex-direction: column;
1164
+ // gap: 16px;
1165
+ // padding: 16px;
1166
+
1167
+ // .coupon_code_apply_section {
1168
+ // .coupon_code_fields_wrapper {
1169
+ // display: flex;
1170
+ // gap: 12px;
1171
+ // &.divider {
1172
+ // padding-bottom: 16px;
1173
+ // border-bottom: 1px dashed var(--_gray-300);
1174
+ // }
1175
+ // .coupon-search-input {
1176
+ // padding: 10px 16px;
1177
+ // border: 1px solid var(--_gray-300);
1178
+ // border-radius: 4px;
1179
+ // height: 40px;
1180
+ // &:focus {
1181
+ // outline: 2px solid var(--_gray-100);
1182
+ // }
1183
+ // }
1184
+ // .coupon-search-btn {
1185
+ // padding: 10px 16px 12px 16px;
1186
+ // white-space: nowrap;
1187
+ // height: 40px;
1188
+ // }
1189
+ // }
1190
+ // .coupon-list {
1191
+ // .coupon-item {
1192
+ // .coupon-info {
1193
+ // .coupon-title {
1194
+ // font-size: 16px;
1195
+ // font-weight: 700;
1196
+ // color: var(--_gray-900);
1197
+ // }
1198
+ // .coupon-desc {
1199
+ // font-size: 14px;
1200
+ // font-weight: 400;
1201
+ // color: var(--_gray-600);
1202
+ // }
1203
+ // .remove-btn {
1204
+ // padding: 12px;
1205
+ // color: var(--_gray-900);
1206
+ // }
1207
+ // }
1208
+ // }
1209
+ // }
1210
+ // }
1211
+ // .apply_coupon_code_body {
1212
+ // display: flex;
1213
+ // align-items: center;
1214
+ // justify-content: space-between;
1215
+ // gap: 12px;
1216
+ // &:not(:last-child) {
1217
+ // margin-bottom: 12px;
1218
+ // }
1219
+ // .apply_coupon_code_flex {
1220
+ // display: flex;
1221
+ // gap: 12px;
1222
+ // .cpn__sale__icon {
1223
+ // margin-top: 4px;
1224
+ // }
1225
+ // .apply_coupon_code {
1226
+ // display: flex;
1227
+ // flex-direction: column;
1228
+ // .cpn_sale_text {
1229
+ // font-size: 14px;
1230
+ // font-weight: 400;
1231
+ // color: var(--_gray-900);
1232
+ // }
1233
+ // }
1234
+ // }
1235
+ // .cpn_sale_desc {
1236
+ // font-size: 14px;
1237
+ // font-weight: 400;
1238
+ // color: var(--_gray-600);
1239
+ // }
1240
+ // .apply_coupon_code_btn {
1241
+ // padding: 8px 16px;
1242
+ // }
1243
+ // .remove_coupon_code_btn {
1244
+ // padding: 8px 16px;
1245
+ // border: 1px solid var(--_gray-300);
1246
+ // border-radius: 4px;
1247
+ // color: var(--_gray-900);
1248
+ // &:hover {
1249
+ // background-color: var(--_gray-100);
1250
+ // }
1251
+ // }
1252
+ // }
1253
+ // }
1254
+ // }
@@ -2,6 +2,7 @@
2
2
  @use "sass:list";
3
3
  @use "./functions.scss" as *;
4
4
  @use "./embroider-preview-element.scss" as *;
5
+ @use "./colorpicker_v2.scss" as *;
5
6
 
6
7
  $tmpWrapper: ".emb__tmp__wrapper";
7
8
  $tmpHeaderV2: ".emb__tmp__header__v2";
@@ -323,8 +324,20 @@ $defaultValues: (
323
324
 
324
325
  #{$grpDiv} {
325
326
  display: var(--_d-flex);
326
- flex-direction: column;
327
- row-gap: 6px;
327
+ flex-direction: var(--_sf-fdr-vl, column);
328
+ gap: 6px;
329
+ width: 100%;
330
+
331
+ &:has([class*="clr__pkr"]) {
332
+ --_sf-fdr-vl: row;
333
+ justify-content: space-between;
334
+ align-items: center;
335
+ max-width: min(#{$maxWidth}, 100%);
336
+
337
+ &:has(.config__div__v2) {
338
+ flex-wrap: wrap;
339
+ }
340
+ }
328
341
 
329
342
  & > label {
330
343
  color: prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467);
@@ -472,6 +485,10 @@ $defaultValues: (
472
485
  display: var(--_d-flex);
473
486
  flex-direction: column;
474
487
  row-gap: 6px;
488
+
489
+ &:is(.clr__pkr__v2 + *) {
490
+ flex: 0 0 100%;
491
+ }
475
492
  & > .err__msg__v2 {
476
493
  color: #d32f2f;
477
494
  font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
@@ -766,6 +783,24 @@ $defaultValues: (
766
783
  }
767
784
  }
768
785
  }
786
+
787
+ // Color Picker Changes
788
+ & > .clr__pkr__v2 {
789
+ display: var(--_d-flex);
790
+ align-items: center;
791
+ padding-block: 12px;
792
+
793
+ & > .color__btn__v2 {
794
+ display: var(--_d-flex);
795
+ --_sf-sz: 16px;
796
+ width: var(--_sf-sz);
797
+ height: var(--_sf-sz);
798
+ background: var(--_sf-clr-pkr-bg, #000);
799
+ border: 1px solid #555;
800
+ border-radius: 50%;
801
+ cursor: pointer;
802
+ }
803
+ }
769
804
  }
770
805
  }
771
806
  }