@sc-360-v2/storefront-cms-library 0.2.73 → 0.2.76

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 (106) hide show
  1. package/dist/add-order.scss +69 -0
  2. package/dist/allocationDetails.scss +335 -0
  3. package/dist/allocations.scss +546 -2
  4. package/dist/amount-estimator.scss +733 -187
  5. package/dist/brand-basic-elements.scss +142 -61
  6. package/dist/brand.scss +66 -16
  7. package/dist/breadcrumbs.scss +379 -88
  8. package/dist/builder.js +1 -1
  9. package/dist/bulk-variant-picker.scss +525 -121
  10. package/dist/bundle-basic-elements.scss +283 -121
  11. package/dist/bundle.scss +74 -15
  12. package/dist/buyFor.scss +153 -0
  13. package/dist/cart-details.scss +387 -0
  14. package/dist/cart-summary.scss +175 -0
  15. package/dist/cart.scss +178 -44
  16. package/dist/cartDropdownOverlay.scss +118 -0
  17. package/dist/cartGrouping.scss +89 -0
  18. package/dist/category.scss +38 -7
  19. package/dist/categoryDetails.scss +24 -6
  20. package/dist/categoryWidget.scss +11 -6
  21. package/dist/code-temp.scss +6 -4
  22. package/dist/contact-us.scss +19 -147
  23. package/dist/container.scss +22 -1
  24. package/dist/countdown.scss +372 -112
  25. package/dist/editCartItem.scss +111 -0
  26. package/dist/embed-temp.scss +29 -14
  27. package/dist/faq.scss +3 -6
  28. package/dist/filters.scss +11 -2
  29. package/dist/form-preview.scss +128 -93
  30. package/dist/gallery-slider-temp.scss +548 -135
  31. package/dist/grid.scss +24 -0
  32. package/dist/hotspot.scss +27 -25
  33. package/dist/icon-library.scss +26 -15
  34. package/dist/icons.js +1 -1
  35. package/dist/image-temp.scss +45 -17
  36. package/dist/index.js +1 -1
  37. package/dist/item-stock.scss +125 -0
  38. package/dist/layouter-item.scss +26 -2
  39. package/dist/layouter.scss +26 -1
  40. package/dist/light-box-v2.scss +29 -3
  41. package/dist/lightbox.scss +18 -2
  42. package/dist/line.scss +165 -0
  43. package/dist/login.scss +15 -23
  44. package/dist/map.scss +495 -119
  45. package/dist/marchandiserSets.scss +35 -18
  46. package/dist/menu.scss +121 -33
  47. package/dist/modal.scss +4 -0
  48. package/dist/past-orders.scss +11 -2
  49. package/dist/payment-methods.scss +29 -13
  50. package/dist/pickup-locations.scss +884 -244
  51. package/dist/product-actions.scss +2223 -418
  52. package/dist/product-basic-elements.scss +273 -122
  53. package/dist/product-highlights.scss +22 -14
  54. package/dist/product-image.scss +535 -136
  55. package/dist/product-inventory.scss +1105 -283
  56. package/dist/product-options.scss +378 -94
  57. package/dist/product-price.scss +1386 -316
  58. package/dist/product-promotions.scss +2252 -601
  59. package/dist/product.scss +68 -14
  60. package/dist/productDetails.scss +29 -2
  61. package/dist/profile.scss +19 -4
  62. package/dist/quantity-selector.scss +5 -4
  63. package/dist/quick-links.scss +277 -0
  64. package/dist/quotes.scss +11 -2
  65. package/dist/repeater-item.scss +26 -2
  66. package/dist/repeater.scss +60 -7
  67. package/dist/rfqs.scss +11 -2
  68. package/dist/scroll.scss +112 -47
  69. package/dist/search-results-heading.scss +282 -0
  70. package/dist/search.scss +84 -23
  71. package/dist/section.scss +25 -1
  72. package/dist/shareCartSideBar.scss +230 -0
  73. package/dist/shipping-estimator.scss +7 -3
  74. package/dist/social.scss +148 -38
  75. package/dist/sort.scss +11 -2
  76. package/dist/stack.scss +23 -3
  77. package/dist/static-text.scss +0 -1
  78. package/dist/store-locations.scss +887 -244
  79. package/dist/sub-category.scss +50 -19
  80. package/dist/tab-container-item.scss +80 -0
  81. package/dist/tab-container.scss +89 -0
  82. package/dist/tab-v2.scss +579 -0
  83. package/dist/table.scss +370 -91
  84. package/dist/tabs.scss +334 -74
  85. package/dist/text-temp-v2.scss +21 -9
  86. package/dist/types/builder/elements/add-order/index.d.ts +27 -0
  87. package/dist/types/builder/elements/create-form/index.d.ts +27 -0
  88. package/dist/types/builder/elements/form-builder/index.d.ts +7 -0
  89. package/dist/types/builder/elements/image/index.d.ts +13 -0
  90. package/dist/types/builder/elements/quick-links/index.d.ts +36 -0
  91. package/dist/types/builder/enums/index.d.ts +9 -1
  92. package/dist/types/builder/index.d.ts +4 -1
  93. package/dist/types/builder/interfaces/global.d.ts +5 -0
  94. package/dist/types/builder/tools/element-edit/addOrder.d.ts +28 -0
  95. package/dist/types/builder/tools/element-edit/createForm.d.ts +15 -0
  96. package/dist/types/builder/tools/element-edit/index.d.ts +4 -1
  97. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +360 -0
  98. package/dist/uom-selector.scss +1569 -383
  99. package/dist/variant-picker.scss +1593 -481
  100. package/dist/video.scss +212 -53
  101. package/dist/volume-pricing.scss +775 -196
  102. package/dist/widget.scss +14 -0
  103. package/package.json +1 -1
  104. package/dist/editor-core.scss +0 -537
  105. package/dist/tab-panel.scss +0 -93
  106. package/dist/text-editor.scss +0 -331
@@ -12,7 +12,7 @@ $minWidth: 70px;
12
12
  // padding: var(--_lt-pg);
13
13
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
14
14
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
15
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
15
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
16
16
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
17
17
  // height: ;
18
18
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -29,14 +29,55 @@ $minWidth: 70px;
29
29
  --_show-shadow: none;
30
30
  }
31
31
  .text-element {
32
- color: var(--Gray-900, #101828);
33
- // font-family: "Hanken Grotesk";
34
- font-size: 20px;
32
+ color: #333;
33
+ font-family: Lato;
34
+ font-size: 12px;
35
35
  font-style: normal;
36
- font-weight: 600;
37
- line-height: 150%; /* 30px */
38
- letter-spacing: -0.4px;
36
+ font-weight: 400;
37
+ line-height: 18px;
38
+ margin-bottom: 6px;
39
+ }
40
+ .option__title {
41
+ margin-bottom: 4px;
42
+ color: var(
43
+ --_ctm-mob-dn-sd-vt-ne-cr,
44
+ var(--_ctm-tab-dn-sd-vt-ne-cr, var(--_ctm-dn-sd-vt-ne-cr))
45
+ );
46
+ font-family: var(
47
+ --_ctm-mob-dn-sd-vt-ne-ft-fy,
48
+ var(--_ctm-tab-dn-sd-vt-ne-ft-fy, var(--_ctm-dn-sd-vt-ne-ft-fy))
49
+ ),
50
+ sans-serif;
51
+ font-size: var(
52
+ --_ctm-mob-dn-sd-vt-ne-ft-se,
53
+ var(--_ctm-tab-dn-sd-vt-ne-ft-se, var(--_ctm-dn-sd-vt-ne-ft-se))
54
+ );
55
+ font-weight: var(
56
+ --_ctm-mob-dn-sd-vt-ne-ft-wt,
57
+ var(--_ctm-tab-dn-sd-vt-ne-ft-wt, var(--_ctm-dn-sd-vt-ne-ft-wt))
58
+ );
59
+ font-style: var(
60
+ --_ctm-mob-dn-sd-vt-ne-ft-se-ic,
61
+ var(--_ctm-tab-dn-sd-vt-ne-ft-se-ic, var(--_ctm-dn-sd-vt-ne-ft-se-ic))
62
+ );
63
+ text-align: var(
64
+ --_ctm-mob-dn-sd-vt-ne-tt-an,
65
+ var(--_ctm-tab-dn-sd-vt-ne-tt-an, var(--_ctm-dn-sd-vt-ne-tt-an))
66
+ );
67
+ letter-spacing: var(
68
+ --_ctm-mob-dn-sd-vt-ne-lr-sg,
69
+ var(--_ctm-tab-dn-sd-vt-ne-lr-sg, var(--_ctm-dn-sd-vt-ne-lr-sg))
70
+ );
71
+ line-height: var(
72
+ --_ctm-mob-dn-sd-vt-ne-le-ht,
73
+ var(--_ctm-tab-dn-sd-vt-ne-le-ht, var(--_ctm-dn-sd-vt-ne-le-ht))
74
+ );
75
+ text-decoration: var(
76
+ --_ctm-mob-dn-sd-vt-ne-ue,
77
+ var(--_ctm-tab-dn-sd-vt-ne-ue, var(--_ctm-dn-sd-vt-ne-ue))
78
+ );
39
79
  }
80
+
40
81
  .is__combination_avail {
41
82
  color: red;
42
83
  font-size: 14px;
@@ -45,82 +86,161 @@ $minWidth: 70px;
45
86
  .variant__container {
46
87
  display: flex;
47
88
  flex-direction: column;
48
- gap: var(--_ctm-lt-im-sg);
49
- padding: var(--_ctm-lt-pg);
50
- // Select Colors
51
- .select__colors {
52
- font-size: 16px;
53
- color: var(--_gray-500);
54
- display: flex;
55
- flex-direction: column;
56
- gap: var(--_ctm-lt-on-te-ve-sg);
57
- padding: var(--_ctm-lt-sh-te-dy-se-im-pg);
58
- .title {
59
- margin-bottom: 4px;
60
- color: var(--_ctm-dn-sd-vt-ne-cr);
61
- font-family: var(--_ctm-dn-sd-vt-ne-ft-fy), sans-serif;
62
- font-size: var(--_ctm-dn-sd-vt-ne-ft-se);
63
- font-weight: var(--_ctm-dn-sd-vt-ne-ft-wt);
64
- font-style: var(--_ctm-dn-sd-vt-ne-ft-se-ic);
65
- text-align: var(--_ctm-dn-sd-vt-ne-tt-an);
66
- letter-spacing: var(--_ctm-dn-sd-vt-ne-lr-sg);
67
- line-height: var(--_ctm-dn-sd-vt-ne-le-ht);
68
- text-decoration: var(--_ctm-dn-sd-vt-ne-ue);
69
- }
70
- .select__group {
89
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
90
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
91
+
92
+ .standard_wrapper {
93
+ // Select Colors
94
+ .select__colors {
95
+ font-size: 16px;
96
+ color: var(--_gray-500);
71
97
  display: flex;
72
- flex-wrap: wrap;
73
- flex-direction: row;
74
- gap: var(--_ctm-lt-sh-te-dy-se-im-sg);
98
+ flex-direction: column;
99
+ gap: var(
100
+ --_ctm-mob-lt-on-te-ve-sg,
101
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
102
+ );
103
+ padding: var(
104
+ --_ctm-mob-lt-sh-te-dy-se-im-pg,
105
+ var(--_ctm-tab-lt-sh-te-dy-se-im-pg, var(--_ctm-lt-sh-te-dy-se-im-pg))
106
+ );
75
107
 
76
- &[data-swatch-dispaly="Vertically"] {
77
- flex-direction: column;
78
- }
79
- .show_more_button {
80
- background-color: var(--_ctm-dn-sw-me-is-bn-bd-cr);
81
- font-family: var(--_ctm-dn-sw-me-is-bn-ft-fy);
82
- border-color: var(--_ctm-dn-sw-me-is-bn-br-cr);
83
- border-radius: var(--_ctm-dn-sw-me-is-bn-br-rs);
84
- border-style: var(--_ctm-dn-sw-me-is-bn-br-se);
85
- border-width: var(--_ctm-dn-sw-me-is-bn-br-wh);
86
- font-size: var(--_ctm-dn-sw-me-is-bn-ft-se);
87
- font-style: var(--_ctm-dn-sw-me-is-bn-ft-se-ic);
88
- font-weight: var(--_ctm-dn-sw-me-is-bn-ft-wt);
89
- line-height: var(--_ctm-dn-sw-me-is-bn-le-ht);
90
- letter-spacing: var(--_ctm-dn-sw-me-is-bn-lr-sg);
91
- box-shadow: var(--_ctm-dn-sw-me-is-bn-sw-ae) var(--_ctm-dn-sw-me-is-bn-sw-br)
92
- var(--_ctm-dn-sw-me-is-bn-sw-sd) var(--_ctm-dn-sw-me-is-bn-sw-cr);
93
- text-align: var(--_ctm-dn-sw-me-is-bn-tt-an);
94
- color: var(--_ctm-dn-sw-me-is-bn-tt-cr);
95
- text-decoration: var(--_ctm-dn-sw-me-is-bn-ue);
108
+ .title {
109
+ margin-bottom: 4px;
110
+ color: var(
111
+ --_ctm-mob-dn-sd-vt-ne-cr,
112
+ var(--_ctm-tab-dn-sd-vt-ne-cr, var(--_ctm-dn-sd-vt-ne-cr))
113
+ );
114
+ font-family: var(
115
+ --_ctm-mob-dn-sd-vt-ne-ft-fy,
116
+ var(--_ctm-tab-dn-sd-vt-ne-ft-fy, var(--_ctm-dn-sd-vt-ne-ft-fy))
117
+ ),
118
+ sans-serif;
119
+ font-size: var(
120
+ --_ctm-mob-dn-sd-vt-ne-ft-se,
121
+ var(--_ctm-tab-dn-sd-vt-ne-ft-se, var(--_ctm-dn-sd-vt-ne-ft-se))
122
+ );
123
+ font-weight: var(
124
+ --_ctm-mob-dn-sd-vt-ne-ft-wt,
125
+ var(--_ctm-tab-dn-sd-vt-ne-ft-wt, var(--_ctm-dn-sd-vt-ne-ft-wt))
126
+ );
127
+ font-style: var(
128
+ --_ctm-mob-dn-sd-vt-ne-ft-se-ic,
129
+ var(--_ctm-tab-dn-sd-vt-ne-ft-se-ic, var(--_ctm-dn-sd-vt-ne-ft-se-ic))
130
+ );
131
+ text-align: var(
132
+ --_ctm-mob-dn-sd-vt-ne-tt-an,
133
+ var(--_ctm-tab-dn-sd-vt-ne-tt-an, var(--_ctm-dn-sd-vt-ne-tt-an))
134
+ );
135
+ letter-spacing: var(
136
+ --_ctm-mob-dn-sd-vt-ne-lr-sg,
137
+ var(--_ctm-tab-dn-sd-vt-ne-lr-sg, var(--_ctm-dn-sd-vt-ne-lr-sg))
138
+ );
139
+ line-height: var(
140
+ --_ctm-mob-dn-sd-vt-ne-le-ht,
141
+ var(--_ctm-tab-dn-sd-vt-ne-le-ht, var(--_ctm-dn-sd-vt-ne-le-ht))
142
+ );
143
+ text-decoration: var(
144
+ --_ctm-mob-dn-sd-vt-ne-ue,
145
+ var(--_ctm-tab-dn-sd-vt-ne-ue, var(--_ctm-dn-sd-vt-ne-ue))
146
+ );
96
147
  }
97
- .item {
98
- // padding: var(--_ctm-lt-sh-te-dy-se-im-pg);
99
- background-color: var(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr);
100
- &[data-dt-se-bd-se="circle"] {
101
- border-radius: 999px;
102
- }
103
- &[data-dt-se-bd-se="square"],
104
- &[data-dt-se-bd-se="none"] {
105
- border-radius: 0px;
148
+
149
+ .select__group {
150
+ display: flex;
151
+ flex-wrap: wrap;
152
+ flex-direction: row;
153
+ gap: var(
154
+ --_ctm-mob-lt-sh-te-dy-se-im-sg,
155
+ var(--_ctm-tab-lt-sh-te-dy-se-im-sg, var(--_ctm-lt-sh-te-dy-se-im-sg))
156
+ );
157
+
158
+ &[data-swatch-dispaly="Vertically"] {
159
+ flex-direction: column;
106
160
  }
107
- &[data-dt-se-bd-se="rounded"] {
161
+ .show_more_button {
162
+ background-color: var(
163
+ --_ctm-mob-dn-sw-me-is-bn-bd-cr,
164
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
165
+ );
166
+ font-family: var(
167
+ --_ctm-mob-dn-sw-me-is-bn-ft-fy,
168
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
169
+ ),
170
+ sans-serif;
171
+ border-color: var(
172
+ --_ctm-mob-dn-sw-me-is-bn-br-cr,
173
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
174
+ );
108
175
  border-radius: var(
109
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
110
- var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
176
+ --_ctm-mob-dn-sw-me-is-bn-br-rs,
177
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
178
+ );
179
+ border-style: var(
180
+ --_ctm-mob-dn-sw-me-is-bn-br-se,
181
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
182
+ );
183
+ border-width: var(
184
+ --_ctm-mob-dn-sw-me-is-bn-br-wh,
185
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
186
+ );
187
+ font-size: var(
188
+ --_ctm-mob-dn-sw-me-is-bn-ft-se,
189
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
190
+ );
191
+ font-style: var(
192
+ --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
193
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
194
+ );
195
+ font-weight: var(
196
+ --_ctm-mob-dn-sw-me-is-bn-ft-wt,
197
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
198
+ );
199
+ line-height: var(
200
+ --_ctm-mob-dn-sw-me-is-bn-le-ht,
201
+ var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
202
+ );
203
+ letter-spacing: var(
204
+ --_ctm-mob-dn-sw-me-is-bn-lr-sg,
205
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
206
+ );
207
+ box-shadow: var(
208
+ --_ctm-mob-dn-sw-me-is-bn-sw-ae,
209
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
210
+ )
211
+ var(
212
+ --_ctm-mob-dn-sw-me-is-bn-sw-br,
213
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
214
+ )
215
+ var(
216
+ --_ctm-mob-dn-sw-me-is-bn-sw-sd,
217
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
218
+ )
219
+ var(
220
+ --_ctm-mob-dn-sw-me-is-bn-sw-cr,
221
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
222
+ );
223
+ text-align: var(
224
+ --_ctm-mob-dn-sw-me-is-bn-tt-an,
225
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
226
+ );
227
+ color: var(
228
+ --_ctm-mob-dn-sw-me-is-bn-tt-cr,
229
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
230
+ );
231
+ text-decoration: var(
232
+ --_ctm-mob-dn-sw-me-is-bn-ue,
233
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
111
234
  );
112
235
  }
113
- // height: 30px;
114
- // width: 30px;
115
- // &[data-dt-se-bd-se="Circle"] {
116
- // border-radius: 50%;
117
- // }
118
- // &[data-dt-se-bd-se="None"] {
119
- // height: 0;
120
- // width: 0;
121
- // }
122
- &:hover {
123
- background-color: var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr);
236
+
237
+ .item {
238
+ // padding: var(--_ctm-lt-sh-te-dy-se-im-pg);
239
+ background-color: var(
240
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-bd-cr,
241
+ var(--_ctm-tab-dn-sh-on-ve-se-dt-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr))
242
+ );
243
+
124
244
  &[data-dt-se-bd-se="circle"] {
125
245
  border-radius: 999px;
126
246
  }
@@ -130,10 +250,32 @@ $minWidth: 70px;
130
250
  }
131
251
  &[data-dt-se-bd-se="rounded"] {
132
252
  border-radius: var(
133
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
134
- var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
253
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
254
+ var(
255
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
256
+ var(
257
+ --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
258
+ var(
259
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
260
+ var(
261
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
262
+ var(
263
+ --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
264
+ var(
265
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
266
+ var(
267
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
268
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
269
+ )
270
+ )
271
+ )
272
+ )
273
+ )
274
+ )
275
+ )
135
276
  );
136
277
  }
278
+
137
279
  // height: 30px;
138
280
  // width: 30px;
139
281
  // &[data-dt-se-bd-se="Circle"] {
@@ -143,330 +285,976 @@ $minWidth: 70px;
143
285
  // height: 0;
144
286
  // width: 0;
145
287
  // }
288
+ &:hover {
289
+ background-color: var(
290
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
291
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
292
+ );
293
+ &[data-dt-se-bd-se="circle"] {
294
+ border-radius: 999px;
295
+ }
296
+ &[data-dt-se-bd-se="square"],
297
+ &[data-dt-se-bd-se="none"] {
298
+ border-radius: 0px;
299
+ }
300
+ &[data-dt-se-bd-se="rounded"] {
301
+ border-radius: var(
302
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
303
+ var(
304
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
305
+ var(
306
+ --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
307
+ var(
308
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
309
+ var(
310
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
311
+ var(
312
+ --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
313
+ var(
314
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
315
+ var(
316
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
317
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
318
+ )
319
+ )
320
+ )
321
+ )
322
+ )
323
+ )
324
+ )
325
+ );
326
+ }
327
+ // height: 30px;
328
+ // width: 30px;
329
+ // &[data-dt-se-bd-se="Circle"] {
330
+ // border-radius: 50%;
331
+ // }
332
+ // &[data-dt-se-bd-se="None"] {
333
+ // height: 0;
334
+ // width: 0;
335
+ // }
336
+ }
337
+ &.selected_item {
338
+ width: fit-content;
339
+ background-color: var(
340
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-bd-cr,
341
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr))
342
+ );
343
+ border-radius: var(
344
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
345
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
346
+ );
347
+
348
+ border-color: var(
349
+ --_show-border-im-se,
350
+ var(
351
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
352
+ var(
353
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr,
354
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)
355
+ )
356
+ )
357
+ );
358
+
359
+ border-style: var(
360
+ --_show-border-im-se,
361
+ var(
362
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
363
+ var(
364
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-se,
365
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-se)
366
+ )
367
+ )
368
+ );
369
+
370
+ border-width: var(
371
+ --_show-border-im-se,
372
+ var(
373
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
374
+ var(
375
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh,
376
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)
377
+ )
378
+ )
379
+ );
380
+
381
+ &[data-dt-se-bd-se="circle"] {
382
+ border-radius: 999px;
383
+ }
384
+ &[data-dt-se-bd-se="square"],
385
+ &[data-dt-se-bd-se="none"] {
386
+ border-radius: 0px;
387
+ }
388
+ &[data-dt-se-bd-se="rounded"] {
389
+ border-radius: var(
390
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
391
+ var(
392
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
393
+ var(
394
+ --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
395
+ var(
396
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
397
+ var(
398
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
399
+ var(
400
+ --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
401
+ var(
402
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
403
+ var(
404
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
405
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
406
+ )
407
+ )
408
+ )
409
+ )
410
+ )
411
+ )
412
+ )
413
+ );
414
+ }
415
+ // height: 30px;
416
+ // width: 30px;
417
+ // &[data-dt-se-bd-se="Circle"] {
418
+ // border-radius: 50%;
419
+ // }
420
+ // &[data-dt-se-bd-se="None"] {
421
+ // height: 0;
422
+ // width: 0;
423
+ // }
424
+ }
425
+ .select__group__item {
426
+ transition: width 0.3s ease;
427
+ width: 30px;
428
+ height: 30px;
429
+ border-color: var(
430
+ --_show-border-im-se,
431
+ var(
432
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-br-cr,
433
+ var(
434
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-br-cr,
435
+ var(--_ctm-dn-sh-on-ve-se-dt-se-br-cr)
436
+ )
437
+ )
438
+ );
439
+
440
+ border-style: var(
441
+ --_show-border-im-se,
442
+ var(
443
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-br-se,
444
+ var(
445
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-br-se,
446
+ var(--_ctm-dn-sh-on-ve-se-dt-se-br-se)
447
+ )
448
+ )
449
+ );
450
+
451
+ border-width: var(
452
+ --_show-border-im-se,
453
+ var(
454
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-br-wh,
455
+ var(
456
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-br-wh,
457
+ var(--_ctm-dn-sh-on-ve-se-dt-se-br-wh)
458
+ )
459
+ )
460
+ );
461
+
462
+ border-radius: var(
463
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
464
+ var(--_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs, var(--_ctm-dn-sh-on-ve-se-dt-se-br-rs))
465
+ );
466
+
467
+ box-shadow: var(
468
+ --_show-shadow-im-se,
469
+ var(
470
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-sw-ae,
471
+ var(
472
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-sw-ae,
473
+ var(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
474
+ )
475
+ )
476
+ var(
477
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-sw-br,
478
+ var(
479
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-sw-br,
480
+ var(--_ctm-dn-sh-on-ve-se-dt-se-sw-br)
481
+ )
482
+ )
483
+ var(
484
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-sw-sd,
485
+ var(
486
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-sw-sd,
487
+ var(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd)
488
+ )
489
+ )
490
+ var(
491
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-sw-cr,
492
+ var(
493
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-sw-cr,
494
+ var(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr)
495
+ )
496
+ )
497
+ );
498
+
499
+ cursor: pointer;
500
+ overflow: hidden;
501
+ &[data-dt-se-sh-se="circle"] {
502
+ border-radius: 999px;
503
+ }
504
+ &[data-dt-se-sh-se="square"] {
505
+ border-radius: 0px;
506
+ }
507
+ &[data-dt-se-sh-se="rounded"] {
508
+ border-radius: var(
509
+ --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
510
+ var(
511
+ --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
512
+ var(
513
+ --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
514
+ var(
515
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
516
+ var(
517
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
518
+ var(
519
+ --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
520
+ var(
521
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
522
+ var(
523
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
524
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
525
+ )
526
+ )
527
+ )
528
+ )
529
+ )
530
+ )
531
+ )
532
+ );
533
+ }
534
+ &:hover {
535
+ border-color: var(
536
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-cr,
537
+ var(
538
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-br-cr,
539
+ var(--_ctm-dn-sh-on-ve-se-hr-se-br-cr)
540
+ )
541
+ );
542
+ border-style: var(
543
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-se,
544
+ var(
545
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-br-se,
546
+ var(--_ctm-dn-sh-on-ve-se-hr-se-br-se)
547
+ )
548
+ );
549
+ border-width: var(
550
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-wh,
551
+ var(
552
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-br-wh,
553
+ var(--_ctm-dn-sh-on-ve-se-hr-se-br-wh)
554
+ )
555
+ );
556
+ border-radius: var(
557
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
558
+ var(
559
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
560
+ var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs)
561
+ )
562
+ );
563
+ box-shadow: var(
564
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-sw-ae,
565
+ var(
566
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-sw-ae,
567
+ var(--_ctm-dn-sh-on-ve-se-hr-se-sw-ae)
568
+ )
569
+ )
570
+ var(
571
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-sw-br,
572
+ var(
573
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-sw-br,
574
+ var(--_ctm-dn-sh-on-ve-se-hr-se-sw-br)
575
+ )
576
+ )
577
+ var(
578
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-sw-sd,
579
+ var(
580
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-sw-sd,
581
+ var(--_ctm-dn-sh-on-ve-se-hr-se-sw-sd)
582
+ )
583
+ )
584
+ var(
585
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-sw-cr,
586
+ var(
587
+ --_ctm-tab-dn-sh-on-ve-se-hr-se-sw-cr,
588
+ var(--_ctm-dn-sh-on-ve-se-hr-se-sw-cr)
589
+ )
590
+ );
591
+ }
592
+
593
+ &.selected {
594
+ width: 45px;
595
+ border-radius: var(
596
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
597
+ var(
598
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
599
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
600
+ )
601
+ );
602
+ border: 3px solid #fff;
603
+
604
+ border-color: var(
605
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
606
+ var(
607
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr,
608
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)
609
+ )
610
+ );
611
+ border-style: var(
612
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
613
+ var(
614
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-se,
615
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-se)
616
+ )
617
+ );
618
+ border-width: var(
619
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
620
+ var(
621
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh,
622
+ var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)
623
+ )
624
+ );
625
+ box-shadow: var(
626
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-sw-ae,
627
+ var(
628
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-sw-ae,
629
+ var(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae)
630
+ )
631
+ )
632
+ var(
633
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-sw-br,
634
+ var(
635
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-sw-br,
636
+ var(--_ctm-dn-sh-on-ve-se-sd-se-sw-br)
637
+ )
638
+ )
639
+ var(
640
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-sw-sd,
641
+ var(
642
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-sw-sd,
643
+ var(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd)
644
+ )
645
+ )
646
+ var(
647
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-sw-cr,
648
+ var(
649
+ --_ctm-tab-dn-sh-on-ve-se-sd-se-sw-cr,
650
+ var(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr)
651
+ )
652
+ );
653
+ }
654
+
655
+ &.disabled {
656
+ // cursor: not-allowed;
657
+ opacity: 0.4;
658
+ &[data-swatch-type="Swatch Image"] {
659
+ position: relative;
660
+ overflow: hidden;
661
+ &::after {
662
+ content: "";
663
+ width: 172%;
664
+ height: 1px;
665
+ position: absolute;
666
+ background: #f00;
667
+ left: -14px;
668
+ transform: rotate(48deg);
669
+ /* -webkit-transform: rotate(48deg); */
670
+ -moz-transform: rotate(48deg);
671
+ top: 14px;
672
+ box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
673
+ }
674
+ &::before {
675
+ content: "";
676
+ width: 164%;
677
+ height: 1px;
678
+ position: absolute;
679
+ background: #f00;
680
+ left: -14px;
681
+ transform: rotate(-48deg);
682
+ -webkit-transform: rotate(-48deg);
683
+ -moz-transform: rotate(-48deg);
684
+ top: 14px;
685
+ box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
686
+ }
687
+ }
688
+ }
689
+ &[data-swatch-type="Product Image"] {
690
+ width: 100px;
691
+ height: 100px;
692
+ .product-select-image {
693
+ width: 100%;
694
+ height: 100%;
695
+ object-fit: cover;
696
+ }
697
+ }
698
+ }
699
+ }
700
+ }
701
+ }
702
+ // Select Fit and Size
703
+ .select__fit {
704
+ font-size: 16px;
705
+ color: var(--_gray-500);
706
+ display: flex;
707
+ flex-direction: column;
708
+ gap: var(
709
+ --_ctm-mob-lt-on-te-ve-sg,
710
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
711
+ );
712
+
713
+ padding: var(
714
+ --_ctm-mob-lt-se-st-dy-se-im-pg,
715
+ var(--_ctm-tab-lt-se-st-dy-se-im-pg, var(--_ctm-lt-se-st-dy-se-im-pg))
716
+ );
717
+
718
+ .title {
719
+ margin-bottom: 4px;
720
+ color: var(
721
+ --_ctm-mob-dn-sd-vt-ne-cr,
722
+ var(--_ctm-tab-dn-sd-vt-ne-cr, var(--_ctm-dn-sd-vt-ne-cr))
723
+ );
724
+ font-family: var(
725
+ --_ctm-mob-dn-sd-vt-ne-ft-fy,
726
+ var(--_ctm-tab-dn-sd-vt-ne-ft-fy, var(--_ctm-dn-sd-vt-ne-ft-fy))
727
+ ),
728
+ sans-serif;
729
+ font-size: var(
730
+ --_ctm-mob-dn-sd-vt-ne-ft-se,
731
+ var(--_ctm-tab-dn-sd-vt-ne-ft-se, var(--_ctm-dn-sd-vt-ne-ft-se))
732
+ );
733
+ font-weight: var(
734
+ --_ctm-mob-dn-sd-vt-ne-ft-wt,
735
+ var(--_ctm-tab-dn-sd-vt-ne-ft-wt, var(--_ctm-dn-sd-vt-ne-ft-wt))
736
+ );
737
+ font-style: var(
738
+ --_ctm-mob-dn-sd-vt-ne-ft-se-ic,
739
+ var(--_ctm-tab-dn-sd-vt-ne-ft-se-ic, var(--_ctm-dn-sd-vt-ne-ft-se-ic))
740
+ );
741
+ text-align: var(
742
+ --_ctm-mob-dn-sd-vt-ne-tt-an,
743
+ var(--_ctm-tab-dn-sd-vt-ne-tt-an, var(--_ctm-dn-sd-vt-ne-tt-an))
744
+ );
745
+ letter-spacing: var(
746
+ --_ctm-mob-dn-sd-vt-ne-lr-sg,
747
+ var(--_ctm-tab-dn-sd-vt-ne-lr-sg, var(--_ctm-dn-sd-vt-ne-lr-sg))
748
+ );
749
+ line-height: var(
750
+ --_ctm-mob-dn-sd-vt-ne-le-ht,
751
+ var(--_ctm-tab-dn-sd-vt-ne-le-ht, var(--_ctm-dn-sd-vt-ne-le-ht))
752
+ );
753
+ text-decoration: var(
754
+ --_ctm-mob-dn-sd-vt-ne-ue,
755
+ var(--_ctm-tab-dn-sd-vt-ne-ue, var(--_ctm-dn-sd-vt-ne-ue))
756
+ );
757
+ }
758
+ .select__group {
759
+ display: flex;
760
+ gap: 8px;
761
+ flex-wrap: wrap;
762
+ margin-bottom: 10px;
763
+ flex-direction: row;
764
+ gap: var(
765
+ --_ctm-mob-lt-se-st-dy-se-im-sg,
766
+ var(--_ctm-tab-lt-se-st-dy-se-im-sg, var(--_ctm-lt-se-st-dy-se-im-sg))
767
+ );
768
+
769
+ &[data-single-dispaly="Vertically"] {
770
+ flex-direction: column;
146
771
  }
147
- &.selected_item {
148
- width: fit-content;
149
- background-color: var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr);
150
- border-radius: var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs);
772
+ &[data-single-overflow="Scroll"] {
773
+ overflow-x: auto;
774
+ overflow-y: hidden;
775
+ flex-wrap: nowrap;
776
+ }
777
+ &[data-swatch-overflow="Scroll"] {
778
+ overflow-x: auto;
779
+ flex-wrap: nowrap;
780
+ overflow-y: hidden;
781
+ }
782
+ .show_more_button {
783
+ background-color: var(
784
+ --_ctm-mob-dn-sw-me-is-bn-bd-cr,
785
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
786
+ );
787
+ font-family: var(
788
+ --_ctm-mob-dn-sw-me-is-bn-ft-fy,
789
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
790
+ ),
791
+ sans-serif;
151
792
  border-color: var(
152
- --_show-border-im-se,
153
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr, var(--_tst-dn-br-cr))
793
+ --_ctm-mob-dn-sw-me-is-bn-br-cr,
794
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
795
+ );
796
+ border-radius: var(
797
+ --_ctm-mob-dn-sw-me-is-bn-br-rs,
798
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
154
799
  );
155
800
  border-style: var(
156
- --_show-border-im-se,
157
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-se, var(--_tst-dn-br-se))
801
+ --_ctm-mob-dn-sw-me-is-bn-br-se,
802
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
158
803
  );
159
804
  border-width: var(
160
- --_show-border-im-se,
161
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh, var(--_tst-dn-br-wh))
805
+ --_ctm-mob-dn-sw-me-is-bn-br-wh,
806
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
162
807
  );
163
- &[data-dt-se-bd-se="circle"] {
164
- border-radius: 999px;
165
- }
166
- &[data-dt-se-bd-se="square"],
167
- &[data-dt-se-bd-se="none"] {
168
- border-radius: 0px;
169
- }
170
- &[data-dt-se-bd-se="rounded"] {
171
- border-radius: var(
172
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
173
- var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
808
+ font-size: var(
809
+ --_ctm-mob-dn-sw-me-is-bn-ft-se,
810
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
811
+ );
812
+ font-style: var(
813
+ --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
814
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
815
+ );
816
+ font-weight: var(
817
+ --_ctm-mob-dn-sw-me-is-bn-ft-wt,
818
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
819
+ );
820
+ line-height: var(
821
+ --_ctm-mob-dn-sw-me-is-bn-le-ht,
822
+ var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
823
+ );
824
+ letter-spacing: var(
825
+ --_ctm-mob-dn-sw-me-is-bn-lr-sg,
826
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
827
+ );
828
+ box-shadow: var(
829
+ --_ctm-mob-dn-sw-me-is-bn-sw-ae,
830
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
831
+ )
832
+ var(
833
+ --_ctm-mob-dn-sw-me-is-bn-sw-br,
834
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
835
+ )
836
+ var(
837
+ --_ctm-mob-dn-sw-me-is-bn-sw-sd,
838
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
839
+ )
840
+ var(
841
+ --_ctm-mob-dn-sw-me-is-bn-sw-cr,
842
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
174
843
  );
175
- }
176
- // height: 30px;
177
- // width: 30px;
178
- // &[data-dt-se-bd-se="Circle"] {
179
- // border-radius: 50%;
180
- // }
181
- // &[data-dt-se-bd-se="None"] {
182
- // height: 0;
183
- // width: 0;
184
- // }
844
+ text-align: var(
845
+ --_ctm-mob-dn-sw-me-is-bn-tt-an,
846
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
847
+ );
848
+ color: var(
849
+ --_ctm-mob-dn-sw-me-is-bn-tt-cr,
850
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
851
+ );
852
+ text-decoration: var(
853
+ --_ctm-mob-dn-sw-me-is-bn-ue,
854
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
855
+ );
856
+ }
857
+ &[data-single-dispaly="Grid"] {
858
+ display: grid;
859
+ grid-template-columns: repeat(
860
+ var(
861
+ --_ctm-mob-lt-se-st-dy-se-is-pr-rw,
862
+ var(--_ctm-tab-lt-se-st-dy-se-is-pr-rw, var(--_ctm-lt-se-st-dy-se-is-pr-rw))
863
+ ),
864
+ minmax(auto, 1fr)
865
+ );
185
866
  }
186
867
  .select__group__item {
187
- transition: width 0.3s ease;
188
- width: 30px;
189
- height: 30px;
868
+ transition: color 0.3s ease;
869
+ padding: 5px 12px;
870
+ border-radius: 6px;
871
+ border: 1px solid var(--_gray-200);
872
+ font-size: 16px;
873
+ font-weight: 600;
874
+ cursor: pointer;
190
875
  border-color: var(
191
- --_show-border-im-se,
192
- var(--_ctm-dn-sh-on-ve-se-dt-se-br-cr, var(--_tst-dn-br-cr))
876
+ --_ctm-mob-dn-se-on-ve-se-dt-se-br-cr,
877
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-cr, var(--_ctm-dn-se-on-ve-se-dt-se-br-cr))
193
878
  );
194
879
  border-style: var(
195
- --_show-border-im-se,
196
- var(--_ctm-dn-sh-on-ve-se-dt-se-br-se, var(--_tst-dn-br-se))
880
+ --_ctm-mob-dn-se-on-ve-se-dt-se-br-se,
881
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-se, var(--_ctm-dn-se-on-ve-se-dt-se-br-se))
197
882
  );
198
883
  border-width: var(
199
- --_show-border-im-se,
200
- var(--_ctm-dn-sh-on-ve-se-dt-se-br-wh, var(--_tst-dn-br-wh))
884
+ --_ctm-mob-dn-se-on-ve-se-dt-se-br-wh,
885
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-wh, var(--_ctm-dn-se-on-ve-se-dt-se-br-wh))
201
886
  );
202
- border-radius: var(--_ctm-dn-sh-on-ve-se-dt-se-br-rs, var(--_tst-dn-br-rs));
203
887
  box-shadow: var(
204
- --_show-shadow-im-se,
205
- var(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
206
- var(--_ctm-dn-sh-on-ve-se-dt-se-sw-br, var(--_tst-dn-sw-br))
207
- var(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
208
- var(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
888
+ --_ctm-mob-dn-se-on-ve-se-dt-se-sw-ae,
889
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-sw-ae, var(--_ctm-dn-se-on-ve-se-dt-se-sw-ae))
890
+ )
891
+ var(
892
+ --_ctm-mob-dn-se-on-ve-se-dt-se-sw-br,
893
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-sw-br, var(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
894
+ )
895
+ var(
896
+ --_ctm-mob-dn-se-on-ve-se-dt-se-sw-sd,
897
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-sw-sd, var(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
898
+ )
899
+ var(
900
+ --_ctm-mob-dn-se-on-ve-se-dt-se-sw-cr,
901
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-sw-cr, var(--_ctm-dn-se-on-ve-se-dt-se-sw-cr))
902
+ );
903
+ border-radius: var(
904
+ --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
905
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
209
906
  );
210
- border-radius: var(--_ctm-dn-sh-on-ve-se-dt-se-br-rs);
211
- cursor: pointer;
212
- overflow: hidden;
213
907
 
214
- &[data-dt-se-sh-se="circle"] {
908
+ &[data-dt-se-bd-se="circle"] {
215
909
  border-radius: 999px;
216
910
  }
217
- &[data-dt-se-sh-se="square"] {
218
- border-radius: 0px;
911
+ &[data-dt-se-bd-se="square"],
912
+ &[data-dt-se-bd-se="none"] {
913
+ border-radius: 0;
219
914
  }
220
- &[data-dt-se-sh-se="rounded"] {
915
+ &[data-dt-se-bd-se="rounded"] {
221
916
  border-radius: var(
222
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
223
- var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
917
+ --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
918
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
224
919
  );
225
920
  }
921
+ background-color: var(
922
+ --_ctm-mob-dn-se-on-ve-se-dt-se-bd-cr,
923
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-bd-cr, var(--_ctm-dn-se-on-ve-se-dt-se-bd-cr))
924
+ );
925
+ color: var(
926
+ --_ctm-mob-dn-se-on-ve-se-dt-se-cr,
927
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-cr, var(--_ctm-dn-se-on-ve-se-dt-se-cr))
928
+ );
929
+ font-family: var(
930
+ --_ctm-mob-dn-se-on-ve-se-dt-se-ft-fy,
931
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-ft-fy, var(--_ctm-dn-se-on-ve-se-dt-se-ft-fy))
932
+ ),
933
+ sans-serif;
934
+ font-size: var(
935
+ --_ctm-mob-dn-se-on-ve-se-dt-se-ft-se,
936
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-ft-se, var(--_ctm-dn-se-on-ve-se-dt-se-ft-se))
937
+ );
938
+ font-weight: var(
939
+ --_ctm-mob-dn-se-on-ve-se-dt-se-ft-wt,
940
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-ft-wt, var(--_ctm-dn-se-on-ve-se-dt-se-ft-wt))
941
+ );
942
+ font-style: var(
943
+ --_ctm-mob-dn-se-on-ve-se-dt-se-ft-se-ic,
944
+ var(
945
+ --_ctm-tab-dn-se-on-ve-se-dt-se-ft-se-ic,
946
+ var(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
947
+ )
948
+ );
949
+ text-align: var(
950
+ --_ctm-mob-dn-se-on-ve-se-dt-se-tt-an,
951
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-tt-an, var(--_ctm-dn-se-on-ve-se-dt-se-tt-an))
952
+ );
953
+ letter-spacing: var(
954
+ --_ctm-mob-dn-se-on-ve-se-dt-se-lr-sg,
955
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-lr-sg, var(--_ctm-dn-se-on-ve-se-dt-se-lr-sg))
956
+ );
957
+ line-height: var(
958
+ --_ctm-mob-dn-se-on-ve-se-dt-se-le-ht,
959
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-le-ht, var(--_ctm-dn-se-on-ve-se-dt-se-le-ht))
960
+ );
961
+ text-decoration: var(
962
+ --_ctm-mob-dn-se-on-ve-se-dt-se-ue,
963
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-ue, var(--_ctm-dn-se-on-ve-se-dt-se-ue))
964
+ );
226
965
 
227
966
  &:hover {
228
967
  border-color: var(
229
968
  --_show-border-im-se,
230
- var(--_ctm-dn-sh-on-ve-se-hr-se-br-cr, var(--_tst-dn-br-cr))
969
+ var(
970
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-cr,
971
+ var(
972
+ --_ctm-tab-dn-se-on-ve-se-hr-se-br-cr,
973
+ var(--_ctm-dn-se-on-ve-se-hr-se-br-cr)
974
+ )
975
+ )
231
976
  );
232
977
  border-style: var(
233
978
  --_show-border-im-se,
234
- var(--_ctm-dn-sh-on-ve-se-hr-se-br-se, var(--_tst-dn-br-se))
979
+ var(
980
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-se,
981
+ var(
982
+ --_ctm-tab-dn-se-on-ve-se-hr-se-br-se,
983
+ var(--_ctm-dn-se-on-ve-se-hr-se-br-se)
984
+ )
985
+ )
235
986
  );
236
987
  border-width: var(
237
988
  --_show-border-im-se,
238
- var(--_ctm-dn-sh-on-ve-se-hr-se-br-wh, var(--_tst-dn-br-wh))
989
+ var(
990
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-wh,
991
+ var(
992
+ --_ctm-tab-dn-se-on-ve-se-hr-se-br-wh,
993
+ var(--_ctm-dn-se-on-ve-se-hr-se-br-wh)
994
+ )
995
+ )
996
+ );
997
+ border-radius: var(
998
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-rs,
999
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-dn-se-on-ve-se-hr-se-br-rs))
239
1000
  );
240
- border-radius: var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs, var(--_tst-dn-br-rs));
241
1001
  box-shadow: var(
242
1002
  --_show-shadow-im-se,
243
- var(--_ctm-dn-sh-on-ve-se-hr-se-sw-ae, var(--_tst-dn-sw-ae))
244
- var(--_ctm-dn-sh-on-ve-se-hr-se-sw-br, var(--_tst-dn-sw-br))
245
- var(--_ctm-dn-sh-on-ve-se-hr-se-sw-sd, var(--_tst-dn-sw-sd))
246
- var(--_ctm-dn-sh-on-ve-se-hr-se-sw-cr, var(--_tst-dn-sw-cr))
1003
+ var(
1004
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-ae,
1005
+ var(
1006
+ --_ctm-tab-dn-se-on-ve-se-hr-se-sw-ae,
1007
+ var(--_ctm-dn-se-on-ve-se-hr-se-sw-ae)
1008
+ )
1009
+ )
1010
+ var(
1011
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-br,
1012
+ var(
1013
+ --_ctm-tab-dn-se-on-ve-se-hr-se-sw-br,
1014
+ var(--_ctm-dn-se-on-ve-se-hr-se-sw-br)
1015
+ )
1016
+ )
1017
+ var(
1018
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-sd,
1019
+ var(
1020
+ --_ctm-tab-dn-se-on-ve-se-hr-se-sw-sd,
1021
+ var(--_ctm-dn-se-on-ve-se-hr-se-sw-sd)
1022
+ )
1023
+ )
1024
+ var(
1025
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-cr,
1026
+ var(
1027
+ --_ctm-tab-dn-se-on-ve-se-hr-se-sw-cr,
1028
+ var(--_ctm-dn-se-on-ve-se-hr-se-sw-cr)
1029
+ )
1030
+ )
1031
+ );
1032
+ background-color: var(
1033
+ --_ctm-mob-dn-se-on-ve-se-hr-se-bd-cr,
1034
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-se-on-ve-se-hr-se-bd-cr))
247
1035
  );
248
- border-radius: var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs);
1036
+ color: var(
1037
+ --_ctm-mob-dn-se-on-ve-se-hr-se-cr,
1038
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-cr, var(--_ctm-dn-se-on-ve-se-hr-se-cr))
1039
+ );
1040
+ font-family: var(
1041
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ft-fy,
1042
+ var(
1043
+ --_ctm-tab-dn-se-on-ve-se-hr-se-ft-fy,
1044
+ var(--_ctm-dn-se-on-ve-se-hr-se-ft-fy)
1045
+ )
1046
+ ),
1047
+ sans-serif;
1048
+ font-size: var(
1049
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se,
1050
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-dn-se-on-ve-se-hr-se-ft-se))
1051
+ );
1052
+ font-weight: var(
1053
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ft-wt,
1054
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-se-on-ve-se-hr-se-ft-wt))
1055
+ );
1056
+ font-style: var(
1057
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se-ic,
1058
+ var(
1059
+ --_ctm-tab-dn-se-on-ve-se-hr-se-ft-se-ic,
1060
+ var(--_ctm-dn-se-on-ve-se-hr-se-ft-se-ic)
1061
+ )
1062
+ );
1063
+ text-align: var(
1064
+ --_ctm-mob-dn-se-on-ve-se-hr-se-tt-an,
1065
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-dn-se-on-ve-se-hr-se-tt-an))
1066
+ );
1067
+ letter-spacing: var(
1068
+ --_ctm-mob-dn-se-on-ve-se-hr-se-lr-sg,
1069
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-se-on-ve-se-hr-se-lr-sg))
1070
+ );
1071
+ line-height: var(
1072
+ --_ctm-mob-dn-se-on-ve-se-hr-se-le-ht,
1073
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-dn-se-on-ve-se-hr-se-le-ht))
1074
+ );
1075
+ text-decoration: var(
1076
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ue,
1077
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ue, var(--_ctm-dn-se-on-ve-se-hr-se-ue))
1078
+ );
1079
+ }
1080
+
1081
+ &.child {
1082
+ border: 0;
1083
+ border-radius: 0;
1084
+ border-bottom: 2px solid var(--_gray-200);
249
1085
  }
250
1086
  &.selected {
251
- width: 45px;
252
- border-radius: 20px;
253
- outline: 1px solid var(--_gray-300);
254
- border: 3px solid #fff;
1087
+ border: 1px solid var(--_primary-200);
1088
+ background-color: var(--_primary-25);
1089
+ color: var(--_primary-400);
1090
+
255
1091
  border-color: var(
256
1092
  --_show-border-im-se,
257
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr, var(--_tst-dn-br-cr))
1093
+ var(
1094
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-cr,
1095
+ var(
1096
+ --_ctm-tab-dn-se-on-ve-se-sd-se-br-cr,
1097
+ var(--_ctm-dn-se-on-ve-se-sd-se-br-cr)
1098
+ )
1099
+ )
258
1100
  );
259
1101
  border-style: var(
260
1102
  --_show-border-im-se,
261
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-se, var(--_tst-dn-br-se))
1103
+ var(
1104
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-se,
1105
+ var(
1106
+ --_ctm-tab-dn-se-on-ve-se-sd-se-br-se,
1107
+ var(--_ctm-dn-se-on-ve-se-sd-se-br-se)
1108
+ )
1109
+ )
262
1110
  );
263
1111
  border-width: var(
264
1112
  --_show-border-im-se,
265
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh, var(--_tst-dn-br-wh))
1113
+ var(
1114
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-wh,
1115
+ var(
1116
+ --_ctm-tab-dn-se-on-ve-se-sd-se-br-wh,
1117
+ var(--_ctm-dn-se-on-ve-se-sd-se-br-wh)
1118
+ )
1119
+ )
1120
+ );
1121
+ border-radius: var(
1122
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-rs,
1123
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-rs, var(--_ctm-dn-se-on-ve-se-sd-se-br-rs))
266
1124
  );
267
- border-radius: var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs, var(--_tst-dn-br-rs));
268
1125
  box-shadow: var(
269
1126
  --_show-shadow-im-se,
270
- var(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae, var(--_tst-dn-sw-ae))
271
- var(--_ctm-dn-sh-on-ve-se-sd-se-sw-br, var(--_tst-dn-sw-br))
272
- var(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd, var(--_tst-dn-sw-sd))
273
- var(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr, var(--_tst-dn-sw-cr))
1127
+ var(
1128
+ --_ctm-mob-dn-se-on-ve-se-sd-se-sw-ae,
1129
+ var(
1130
+ --_ctm-tab-dn-se-on-ve-se-sd-se-sw-ae,
1131
+ var(--_ctm-dn-se-on-ve-se-sd-se-sw-ae)
1132
+ )
1133
+ )
1134
+ var(
1135
+ --_ctm-mob-dn-se-on-ve-se-sd-se-sw-br,
1136
+ var(
1137
+ --_ctm-tab-dn-se-on-ve-se-sd-se-sw-br,
1138
+ var(--_ctm-dn-se-on-ve-se-sd-se-sw-br)
1139
+ )
1140
+ )
1141
+ var(
1142
+ --_ctm-mob-dn-se-on-ve-se-sd-se-sw-sd,
1143
+ var(
1144
+ --_ctm-tab-dn-se-on-ve-se-sd-se-sw-sd,
1145
+ var(--_ctm-dn-se-on-ve-se-sd-se-sw-sd)
1146
+ )
1147
+ )
1148
+ var(
1149
+ --_ctm-mob-dn-se-on-ve-se-sd-se-sw-cr,
1150
+ var(
1151
+ --_ctm-tab-dn-se-on-ve-se-sd-se-sw-cr,
1152
+ var(--_ctm-dn-se-on-ve-se-sd-se-sw-cr)
1153
+ )
1154
+ )
1155
+ );
1156
+ background-color: var(
1157
+ --_ctm-mob-dn-se-on-ve-se-sd-se-bd-cr,
1158
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-se-on-ve-se-sd-se-bd-cr))
1159
+ );
1160
+ color: var(
1161
+ --_ctm-mob-dn-se-on-ve-se-sd-se-cr,
1162
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-cr, var(--_ctm-dn-se-on-ve-se-sd-se-cr))
1163
+ );
1164
+ font-family: var(
1165
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ft-fy,
1166
+ var(
1167
+ --_ctm-tab-dn-se-on-ve-se-sd-se-ft-fy,
1168
+ var(--_ctm-dn-se-on-ve-se-sd-se-ft-fy)
1169
+ )
1170
+ ),
1171
+ sans-serif;
1172
+ font-size: var(
1173
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se,
1174
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-dn-se-on-ve-se-sd-se-ft-se))
1175
+ );
1176
+ font-weight: var(
1177
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ft-wt,
1178
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-se-on-ve-se-sd-se-ft-wt))
274
1179
  );
275
- border-radius: var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs);
1180
+ font-style: var(
1181
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se-ic,
1182
+ var(
1183
+ --_ctm-tab-dn-se-on-ve-se-sd-se-ft-se-ic,
1184
+ var(--_ctm-dn-se-on-ve-se-sd-se-ft-se-ic)
1185
+ )
1186
+ );
1187
+ text-align: var(
1188
+ --_ctm-mob-dn-se-on-ve-se-sd-se-tt-an,
1189
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-dn-se-on-ve-se-sd-se-tt-an))
1190
+ );
1191
+ letter-spacing: var(
1192
+ --_ctm-mob-dn-se-on-ve-se-sd-se-lr-sg,
1193
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-se-on-ve-se-sd-se-lr-sg))
1194
+ );
1195
+ line-height: var(
1196
+ --_ctm-mob-dn-se-on-ve-se-sd-se-le-ht,
1197
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-dn-se-on-ve-se-sd-se-le-ht))
1198
+ );
1199
+ text-decoration: var(
1200
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ue,
1201
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ue, var(--_ctm-dn-se-on-ve-se-sd-se-ue))
1202
+ );
1203
+ }
1204
+
1205
+ &.selected__child {
1206
+ border: 0px;
1207
+ border-bottom: 2px solid var(--_primary-400);
276
1208
  }
277
1209
  &.disabled {
278
- cursor: not-allowed;
1210
+ // cursor: not-allowed;
279
1211
  opacity: 0.4;
280
1212
  position: relative;
1213
+ overflow: hidden;
281
1214
  &::after {
282
- content: "X";
1215
+ content: "";
1216
+ width: 172%;
1217
+ height: 1px;
1218
+ position: absolute;
1219
+ background: #f00;
1220
+ left: -14px;
1221
+ transform: rotate(48deg);
1222
+ /* -webkit-transform: rotate(48deg); */
1223
+ -moz-transform: rotate(48deg);
1224
+ top: 14px;
1225
+ box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1226
+ }
1227
+ &::before {
1228
+ content: "";
1229
+ width: 164%;
1230
+ height: 1px;
283
1231
  position: absolute;
284
- top: -5px;
285
- left: 50%;
286
- transform: translateX(-50%);
287
- font-size: 30px;
288
- color: #f55d42;
1232
+ background: #f00;
1233
+ left: -14px;
1234
+ transform: rotate(-48deg);
1235
+ -webkit-transform: rotate(-48deg);
1236
+ -moz-transform: rotate(-48deg);
1237
+ top: 14px;
1238
+ box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
289
1239
  }
290
1240
  }
291
1241
  }
292
1242
  }
293
1243
  }
294
- }
295
- // Select Fit and Size
296
- .select__fit {
297
- font-size: 16px;
298
- color: var(--_gray-500);
299
- display: flex;
300
- flex-direction: column;
301
- gap: var(--_ctm-lt-on-te-ve-sg);
302
- padding: var(--_ctm-lt-se-st-dy-se-im-pg);
303
- .title {
304
- margin-bottom: 4px;
305
- color: var(--_ctm-dn-sd-vt-ne-cr);
306
- font-family: var(--_ctm-dn-sd-vt-ne-ft-fy), sans-serif;
307
- font-size: var(--_ctm-dn-sd-vt-ne-ft-se);
308
- font-weight: var(--_ctm-dn-sd-vt-ne-ft-wt);
309
- font-style: var(--_ctm-dn-sd-vt-ne-ft-se-ic);
310
- text-align: var(--_ctm-dn-sd-vt-ne-tt-an);
311
- letter-spacing: var(--_ctm-dn-sd-vt-ne-lr-sg);
312
- line-height: var(--_ctm-dn-sd-vt-ne-le-ht);
313
- text-decoration: var(--_ctm-dn-sd-vt-ne-ue);
314
- }
315
- .select__group {
316
- display: flex;
317
- gap: 8px;
318
- flex-wrap: wrap;
319
- margin-bottom: 10px;
320
- flex-direction: row;
321
- gap: var(--_ctm-lt-se-st-dy-se-im-sg);
322
- &[data-single-dispaly="Vertically"] {
323
- flex-direction: column;
324
- }
325
- &[data-single-overflow="Scroll"] {
326
- overflow-x: auto;
327
- overflow-y: hidden;
328
- flex-wrap: nowrap;
329
- }
330
- &[data-swatch-overflow="Scroll"] {
331
- overflow-x: auto;
332
- flex-wrap: nowrap;
333
- overflow-y: hidden;
334
- }
335
- .show_more_button {
336
- background-color: var(--_ctm-dn-sw-me-is-bn-bd-cr);
337
- font-family: var(--_ctm-dn-sw-me-is-bn-ft-fy);
338
- border-color: var(--_ctm-dn-sw-me-is-bn-br-cr);
339
- border-radius: var(--_ctm-dn-sw-me-is-bn-br-rs);
340
- border-style: var(--_ctm-dn-sw-me-is-bn-br-se);
341
- border-width: var(--_ctm-dn-sw-me-is-bn-br-wh);
342
- font-size: var(--_ctm-dn-sw-me-is-bn-ft-se);
343
- font-style: var(--_ctm-dn-sw-me-is-bn-ft-se-ic);
344
- font-weight: var(--_ctm-dn-sw-me-is-bn-ft-wt);
345
- line-height: var(--_ctm-dn-sw-me-is-bn-le-ht);
346
- letter-spacing: var(--_ctm-dn-sw-me-is-bn-lr-sg);
347
- box-shadow: var(--_ctm-dn-sw-me-is-bn-sw-ae) var(--_ctm-dn-sw-me-is-bn-sw-br)
348
- var(--_ctm-dn-sw-me-is-bn-sw-sd) var(--_ctm-dn-sw-me-is-bn-sw-cr);
349
- text-align: var(--_ctm-dn-sw-me-is-bn-tt-an);
350
- color: var(--_ctm-dn-sw-me-is-bn-tt-cr);
351
- text-decoration: var(--_ctm-dn-sw-me-is-bn-ue);
352
- }
353
- &[data-single-dispaly="Grid"] {
354
- display: grid;
355
- grid-template-columns: repeat(var(--_ctm-lt-se-st-dy-se-is-pr-rw), minmax(auto, 1fr));
356
- }
357
- .select__group__item {
358
- transition: color 0.3s ease;
359
- padding: 5px 12px;
360
- border-radius: 6px;
361
- border: 1px solid var(--_gray-200);
362
- font-size: 16px;
363
- font-weight: 600;
364
- cursor: pointer;
365
- border-color: var(
366
- --_show-border-im-se,
367
- var(--_ctm-dn-se-on-ve-se-dt-se-br-cr, var(--_tst-dn-br-cr))
368
- );
369
- border-style: var(
370
- --_show-border-im-se,
371
- var(--_ctm-dn-se-on-ve-se-dt-se-br-se, var(--_tst-dn-br-se))
372
- );
373
- border-width: var(
374
- --_show-border-im-se,
375
- var(--_ctm-dn-se-on-ve-se-dt-se-br-wh, var(--_tst-dn-br-wh))
376
- );
377
- box-shadow: var(
378
- --_show-shadow-im-se,
379
- var(--_ctm-dn-se-on-ve-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
380
- var(--_ctm-dn-se-on-ve-se-dt-se-sw-br, var(--_tst-dn-sw-br))
381
- var(--_ctm-dn-se-on-ve-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
382
- var(--_ctm-dn-se-on-ve-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
1244
+ &[data-show-divider="true"] {
1245
+ &:not(:last-child)::after {
1246
+ content: "";
1247
+ position: relative;
1248
+ background-color: #000;
1249
+ height: 1px;
1250
+ width: 100%;
1251
+ display: flex;
1252
+ top: calc(
1253
+ calc(
1254
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1255
+ ) /
1256
+ 2
383
1257
  );
384
- border-radius: var(--_ctm-dn-se-on-ve-se-dt-se-br-rs);
385
- &[data-dt-se-bd-se="circle"] {
386
- border-radius: 999px;
387
- }
388
- &[data-dt-se-bd-se="square"],
389
- &[data-dt-se-bd-se="none"] {
390
- border-radius: 0;
391
- }
392
- &[data-dt-se-bd-se="rounded"] {
393
- border-radius: var(--_ctm-dn-se-on-ve-se-dt-se-br-rs, var(--_tst-dn-br-rs));
394
- }
395
- background-color: var(--_ctm-dn-se-on-ve-se-dt-se-bd-cr);
396
- &:hover {
397
- border-color: var(
398
- --_show-border-im-se,
399
- var(--_ctm-dn-se-on-ve-se-hr-se-br-cr, var(--_tst-dn-br-cr))
400
- );
401
- border-style: var(
402
- --_show-border-im-se,
403
- var(--_ctm-dn-se-on-ve-se-hr-se-br-se, var(--_tst-dn-br-se))
404
- );
405
- border-width: var(
406
- --_show-border-im-se,
407
- var(--_ctm-dn-se-on-ve-se-hr-se-br-wh, var(--_tst-dn-br-wh))
408
- );
409
- border-radius: var(--_ctm-dn-se-on-ve-se-hr-se-br-rs, var(--_tst-dn-br-rs));
410
- box-shadow: var(
411
- --_show-shadow-im-se,
412
- var(--_ctm-dn-se-on-ve-se-hr-se-sw-ae, var(--_tst-dn-sw-ae))
413
- var(--_ctm-dn-se-on-ve-se-hr-se-sw-br, var(--_tst-dn-sw-br))
414
- var(--_ctm-dn-se-on-ve-se-hr-se-sw-sd, var(--_tst-dn-sw-sd))
415
- var(--_ctm-dn-se-on-ve-se-hr-se-sw-cr, var(--_tst-dn-sw-cr))
416
- );
417
- border-radius: var(--_ctm-dn-se-on-ve-se-hr-se-br-rs);
418
- background-color: var(--_ctm-dn-se-on-ve-se-hr-se-bd-cr);
419
- }
420
- &.child {
421
- border: 0;
422
- border-radius: 0;
423
- border-bottom: 2px solid var(--_gray-200);
424
- }
425
- &.selected {
426
- border: 1px solid var(--_primary-200);
427
- background-color: var(--_primary-25);
428
- color: var(--_primary-400);
429
- border-color: var(
430
- --_show-border-im-se,
431
- var(--_ctm-dn-se-on-ve-se-sd-se-br-cr, var(--_tst-dn-br-cr))
432
- );
433
- border-style: var(
434
- --_show-border-im-se,
435
- var(--_ctm-dn-se-on-ve-se-sd-se-br-se, var(--_tst-dn-br-se))
436
- );
437
- border-width: var(
438
- --_show-border-im-se,
439
- var(--_ctm-dn-se-on-ve-se-sd-se-br-wh, var(--_tst-dn-br-wh))
440
- );
441
- border-radius: var(--_ctm-dn-se-on-ve-se-sd-se-br-rs, var(--_tst-dn-br-rs));
442
- box-shadow: var(
443
- --_show-shadow-im-se,
444
- var(--_ctm-dn-se-on-ve-se-sd-se-sw-ae, var(--_tst-dn-sw-ae))
445
- var(--_ctm-dn-se-on-ve-se-sd-se-sw-br, var(--_tst-dn-sw-br))
446
- var(--_ctm-dn-se-on-ve-se-sd-se-sw-sd, var(--_tst-dn-sw-sd))
447
- var(--_ctm-dn-se-on-ve-se-sd-se-sw-cr, var(--_tst-dn-sw-cr))
448
- );
449
- border-radius: var(--_ctm-dn-se-on-ve-se-sd-se-br-rs);
450
- background-color: var(--_ctm-dn-se-on-ve-se-sd-se-bd-cr);
451
- }
452
- &.selected__child {
453
- border: 0px;
454
- border-bottom: 2px solid var(--_primary-400);
455
- }
456
- &.disabled {
457
- cursor: not-allowed;
458
- opacity: 0.4;
459
- position: relative;
460
- &::after {
461
- content: "X";
462
- position: absolute;
463
- top: -5px;
464
- left: 50%;
465
- transform: translateX(-50%);
466
- font-size: 30px;
467
- color: #f55d42;
468
- }
469
- }
470
1258
  }
471
1259
  }
472
1260
  }
@@ -476,19 +1264,51 @@ $minWidth: 70px;
476
1264
  width: 100%;
477
1265
  display: flex;
478
1266
  flex-direction: column;
479
- gap: var(--_ctm-lt-on-te-ve-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg));
480
- padding: var(--_ctm-lt-dn-dy-se-dn-os-pg);
1267
+ gap: var(
1268
+ --_ctm-mob-lt-on-te-ve-sg,
1269
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-dn-lt-on-te-ve-sg))
1270
+ );
1271
+
1272
+ padding: var(
1273
+ --_ctm-mob-lt-dn-dy-se-dn-os-pg,
1274
+ var(--_ctm-tab-lt-dn-dy-se-dn-os-pg, var(--_ctm-dn-lt-dn-dy-se-dn-os-pg))
1275
+ );
1276
+
481
1277
  margin-top: 10px;
482
1278
 
483
1279
  label {
484
- font-size: var(--_ctm-dn-on-te-ft-se);
485
- font-family: var(--_ctm-dn-on-te-ft-fy);
486
- color: var(--_gray-700, var(--_ctm-dn-on-te-cr));
487
- font-weight: var(--_ctm-dn-on-te-ft-wt);
488
- text-decoration: var(--_ctm-dn-on-te-ue);
489
- letter-spacing: var(--_ctm-dn-on-te-lr-sg);
490
- text-align: var(--_ctm-dn-on-te-tt-an);
491
- line-height: var(--_ctm-dn-on-te-le-ht);
1280
+ font-size: var(
1281
+ --_ctm-mob-dn-on-te-ft-se,
1282
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
1283
+ );
1284
+ font-family: var(
1285
+ --_ctm-mob-dn-on-te-ft-fy,
1286
+ var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
1287
+ );
1288
+ color: var(
1289
+ --_ctm-mob-dn-on-te-cr,
1290
+ var(--_ctm-tab-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-on-te-cr)))
1291
+ );
1292
+ font-weight: var(
1293
+ --_ctm-mob-dn-on-te-ft-wt,
1294
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
1295
+ );
1296
+ text-decoration: var(
1297
+ --_ctm-mob-dn-on-te-ue,
1298
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
1299
+ );
1300
+ letter-spacing: var(
1301
+ --_ctm-mob-dn-on-te-lr-sg,
1302
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
1303
+ );
1304
+ text-align: var(
1305
+ --_ctm-mob-dn-on-te-tt-an,
1306
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
1307
+ );
1308
+ line-height: var(
1309
+ --_ctm-mob-dn-on-te-le-ht,
1310
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
1311
+ );
492
1312
  display: block;
493
1313
  }
494
1314
 
@@ -509,30 +1329,73 @@ $minWidth: 70px;
509
1329
 
510
1330
  &.open .list {
511
1331
  display: none;
512
- margin-top: var(--_ctm-lt-dn-dy-se-on-ad-lt-sg);
513
- gap: var(--_ctm-lt-dn-dy-se-dn-lt-im-sg);
514
- background-color: var(--_ctm-dn-dn-se-bd-cr);
1332
+ margin-top: var(
1333
+ --_ctm-mob-lt-dn-dy-se-on-ad-lt-sg,
1334
+ var(--_ctm-tab-lt-dn-dy-se-on-ad-lt-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
1335
+ );
1336
+ gap: var(
1337
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1338
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
1339
+ );
1340
+ background-color: var(
1341
+ --_ctm-mob-dn-dn-se-bd-cr,
1342
+ var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
1343
+ );
515
1344
  }
516
1345
 
517
1346
  .list {
518
1347
  display: flex !important;
519
1348
  flex-direction: column;
520
- gap: var(--_ctm-lt-dn-dy-se-dn-lt-im-sg);
521
- border: var(--_ctm-dn-dn-se-br-wh) var(--_ctm-dn-dn-se-br-se)
522
- var(--_gray-200, var(--_ctm-dn-dn-se-br-cr));
523
- border-radius: var(--_ctm-dn-dn-se-br-rs);
1349
+ gap: var(
1350
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1351
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
1352
+ );
1353
+ border: var(
1354
+ --_ctm-mob-dn-dn-se-br-wh,
1355
+ var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
1356
+ )
1357
+ var(
1358
+ --_ctm-mob-dn-dn-se-br-se,
1359
+ var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
1360
+ )
1361
+ var(
1362
+ --_gray-200,
1363
+ var(
1364
+ --_ctm-mob-dn-dn-se-br-cr,
1365
+ var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
1366
+ )
1367
+ );
1368
+ border-radius: var(
1369
+ --_ctm-mob-dn-dn-se-br-rs,
1370
+ var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
1371
+ );
524
1372
  box-shadow: var(
525
1373
  --_show-shadow-dn-se,
526
- var(--_ctm-dn-dn-se-sw-ae, var(--_tst-dn-sw-ae))
527
- var(--_ctm-dn-dn-se-sw-br, var(--_tst-dn-sw-br))
528
- var(--_ctm-dn-dn-se-sw-sd, var(--_tst-dn-sw-sd))
529
- var(--_ctm-dn-dn-se-sw-cr, var(--_tst-dn-sw-cr))
1374
+ var(
1375
+ --_ctm-mob-dn-dn-se-sw-ae,
1376
+ var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae))
1377
+ )
1378
+ var(
1379
+ --_ctm-mob-dn-dn-se-sw-br,
1380
+ var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
1381
+ )
1382
+ var(
1383
+ --_ctm-mob-dn-dn-se-sw-sd,
1384
+ var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
1385
+ )
1386
+ var(
1387
+ --_ctm-mob-dn-dn-se-sw-cr,
1388
+ var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
1389
+ )
530
1390
  );
531
1391
  position: absolute;
532
1392
  top: 100%;
533
1393
  left: 0;
534
1394
  width: 100%;
535
- background-color: var(--_ctm-dn-dn-se-bd-cr);
1395
+ background-color: var(
1396
+ --_ctm-mob-dn-dn-se-bd-cr,
1397
+ var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
1398
+ );
536
1399
  border-radius: 4px;
537
1400
  z-index: var(--_higher-zIndex);
538
1401
  max-height: 200px;
@@ -544,15 +1407,19 @@ $minWidth: 70px;
544
1407
  }
545
1408
 
546
1409
  .list__option {
547
- padding: var(--_ctm-lt-dn-dy-se-dn-lt-im-pg);
1410
+ padding: var(
1411
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-pg,
1412
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-pg, var(--_ctm-lt-dn-dy-se-dn-lt-im-pg))
1413
+ );
548
1414
  cursor: pointer;
549
1415
 
550
1416
  &:hover {
551
1417
  background-color: var(--_primary-25);
552
1418
  color: var(--_primary-400);
553
1419
  }
1420
+
554
1421
  &.disabled {
555
- cursor: not-allowed;
1422
+ // cursor: not-allowed;
556
1423
  opacity: 0.4;
557
1424
  }
558
1425
  }
@@ -564,11 +1431,18 @@ $minWidth: 70px;
564
1431
  .var__drop__selection {
565
1432
  display: flex;
566
1433
  width: 100%;
567
- gap: var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg));
1434
+ gap: var(
1435
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1436
+ var(
1437
+ --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1438
+ var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg))
1439
+ )
1440
+ );
1441
+
568
1442
  flex-direction: row;
569
1443
  &[data-dropdown-style="Vertical List"] {
570
1444
  flex-direction: column;
571
- gap: var(--_ctm-lt-im-sg);
1445
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
572
1446
  }
573
1447
  .dropdown_wrapper {
574
1448
  position: relative;
@@ -580,7 +1454,12 @@ $minWidth: 70px;
580
1454
  height: 1px;
581
1455
  width: 100%;
582
1456
  display: flex;
583
- top: calc(calc(var(--_ctm-lt-im-sg) + 10px) / 2);
1457
+ top: calc(
1458
+ calc(
1459
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1460
+ ) /
1461
+ 2
1462
+ );
584
1463
  }
585
1464
  }
586
1465
 
@@ -596,7 +1475,16 @@ $minWidth: 70px;
596
1475
  height: 1px;
597
1476
  width: 100%;
598
1477
  display: flex;
599
- top: calc(var(--_ctm-lt-dn-dy-se-dn-lt-im-sg) / 2);
1478
+ top: calc(
1479
+ var(
1480
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1481
+ var(
1482
+ --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1483
+ var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
1484
+ )
1485
+ ) /
1486
+ 2
1487
+ );
600
1488
  }
601
1489
  }
602
1490
  }
@@ -624,7 +1512,10 @@ $minWidth: 70px;
624
1512
  var(--_ctm-mob-var-lt-mn-cn-wh)
625
1513
  )
626
1514
  );
627
- gap: var(--_ctm-lt-gd-os-dy-se-tb-rw-sg);
1515
+ gap: var(
1516
+ --_ctm-mob-lt-gd-os-dy-se-tb-rw-sg,
1517
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-rw-sg, var(--_ctm-lt-gd-os-dy-se-tb-rw-sg))
1518
+ );
628
1519
  .field__group__item {
629
1520
  font-size: 16px;
630
1521
  display: flex;
@@ -655,8 +1546,15 @@ $minWidth: 70px;
655
1546
  .quantiy__details {
656
1547
  display: flex;
657
1548
  flex-direction: column;
658
- gap: var(--_ctm-lt-gd-os-dy-se-gp-sg);
659
- padding: var(--_ctm-lt-gd-os-dy-se-gp-pg);
1549
+ gap: var(
1550
+ --_ctm-mob-lt-gd-os-dy-se-gp-sg,
1551
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg))
1552
+ );
1553
+ padding: var(
1554
+ --_ctm-mob-lt-gd-os-dy-se-gp-pg,
1555
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg))
1556
+ );
1557
+
660
1558
  .title {
661
1559
  display: flex;
662
1560
  justify-content: space-between;
@@ -676,7 +1574,14 @@ $minWidth: 70px;
676
1574
  .fit__desc {
677
1575
  display: flex;
678
1576
  flex-direction: column;
679
- gap: var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg);
1577
+ gap: var(
1578
+ --_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1579
+ var(
1580
+ --_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1581
+ var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg)
1582
+ )
1583
+ );
1584
+
680
1585
  font-size: 16px;
681
1586
  color: var(--_gray-900);
682
1587
  .each__price {
@@ -688,31 +1593,48 @@ $minWidth: 70px;
688
1593
  .grouped_items {
689
1594
  display: flex;
690
1595
  flex-direction: column;
1596
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
691
1597
 
692
1598
  .tab__accordion {
693
1599
  display: flex;
694
1600
  flex-direction: column;
695
- gap: var(--_ctm-lt-im-sg);
1601
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
1602
+
696
1603
  .tab__container {
697
1604
  display: flex;
698
1605
  flex-direction: column;
699
1606
 
700
1607
  .tab {
701
1608
  &:first-child {
702
- margin-bottom: var(--_ctm-lt-on-te-ve-sg);
1609
+ margin-bottom: var(
1610
+ --_ctm-mob-lt-on-te-ve-sg,
1611
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
1612
+ );
703
1613
  }
704
1614
  }
705
1615
 
706
1616
  .tab__content {
707
1617
  display: flex;
708
1618
  flex-direction: column;
709
- padding: var(--_ctm-lt-gd-os-dy-se-gp-pg);
1619
+ padding: var(
1620
+ --_ctm-mob-lt-gd-os-dy-se-gp-pg,
1621
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg))
1622
+ );
710
1623
 
711
1624
  .field__group {
712
- gap: var(--_ctm-lt-gd-os-dy-se-gp-sg);
1625
+ gap: var(
1626
+ --_ctm-mob-lt-gd-os-dy-se-gp-sg,
1627
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg))
1628
+ );
713
1629
 
714
1630
  .field__group__item {
715
- gap: var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg);
1631
+ gap: var(
1632
+ --_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1633
+ var(
1634
+ --_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1635
+ var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg)
1636
+ )
1637
+ );
716
1638
  }
717
1639
  }
718
1640
  }
@@ -720,6 +1642,20 @@ $minWidth: 70px;
720
1642
  }
721
1643
 
722
1644
  &[data-show-divider="true"] {
1645
+ & > div {
1646
+ &:not(:last-child)::after {
1647
+ content: "";
1648
+ position: relative;
1649
+ background-color: #000;
1650
+ height: 1px;
1651
+ width: 100%;
1652
+ display: flex;
1653
+ top: calc(
1654
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1655
+ );
1656
+ }
1657
+ }
1658
+
723
1659
  .tab__accordion {
724
1660
  &:not(:last-child)::after {
725
1661
  content: "";
@@ -728,7 +1664,9 @@ $minWidth: 70px;
728
1664
  height: 1px;
729
1665
  width: 100%;
730
1666
  display: flex;
731
- top: calc(var(--_ctm-lt-im-sg) / 2);
1667
+ top: calc(
1668
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1669
+ );
732
1670
  }
733
1671
  }
734
1672
  }
@@ -765,16 +1703,35 @@ $minWidth: 70px;
765
1703
  .tab__accordion {
766
1704
  display: flex;
767
1705
  flex-direction: column;
768
- padding: var(--_ctm-lt-gd-os-dy-se-cr-pg);
1706
+ padding: var(
1707
+ --_ctm-mob-lt-gd-os-dy-se-cr-pg,
1708
+ var(--_ctm-tab-lt-gd-os-dy-se-cr-pg, var(--_ctm-lt-gd-os-dy-se-cr-pg))
1709
+ );
1710
+
769
1711
  .tab__container {
770
1712
  display: flex;
771
1713
  flex-direction: column;
772
- gap: var(--_ctm-lt-gd-os-dy-se-an-sg);
1714
+ gap: var(
1715
+ --_ctm-mob-lt-gd-os-dy-se-an-sg,
1716
+ var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1717
+ );
1718
+
773
1719
  .tab_acc_wrapper {
774
1720
  display: flex;
775
1721
  flex-direction: column;
776
- gap: var(--_ctm-lt-gd-os-dy-se-an-ad-cr-sg);
777
- padding: var(--_ctm-lt-gd-os-dy-se-an-vl-pg) var(--_ctm-lt-gd-os-dy-se-an-hl-pg);
1722
+ gap: var(
1723
+ --_ctm-mob-lt-gd-os-dy-se-an-ad-cr-sg,
1724
+ var(--_ctm-tab-lt-gd-os-dy-se-an-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-an-ad-cr-sg))
1725
+ );
1726
+
1727
+ padding: var(
1728
+ --_ctm-mob-lt-gd-os-dy-se-an-vl-pg,
1729
+ var(--_ctm-tab-lt-gd-os-dy-se-an-vl-pg, var(--_ctm-lt-gd-os-dy-se-an-vl-pg))
1730
+ )
1731
+ var(
1732
+ --_ctm-mob-lt-gd-os-dy-se-an-hl-pg,
1733
+ var(--_ctm-tab-lt-gd-os-dy-se-an-hl-pg, var(--_ctm-lt-gd-os-dy-se-an-hl-pg))
1734
+ );
778
1735
 
779
1736
  .tab {
780
1737
  display: flex;
@@ -830,7 +1787,13 @@ $minWidth: 70px;
830
1787
  height: 1px;
831
1788
  width: 100%;
832
1789
  display: flex;
833
- top: calc(var(--_ctm-lt-gd-os-dy-se-an-sg) / 2);
1790
+ top: calc(
1791
+ var(
1792
+ --_ctm-mob-lt-gd-os-dy-se-an-sg,
1793
+ var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1794
+ ) /
1795
+ 2
1796
+ );
834
1797
  }
835
1798
  }
836
1799
  }
@@ -852,79 +1815,129 @@ $minWidth: 70px;
852
1815
  }
853
1816
 
854
1817
  // table
855
- .table__class {
856
- border: 1px solid var(--_gray-200);
857
- border-radius: 8px;
858
- .custom__table {
1818
+ .table_container,
1819
+ .tab__content {
1820
+ .table__class {
859
1821
  border: 1px solid var(--_gray-200);
860
- width: 100%;
861
- table-layout: fixed;
862
- // height: 300px;
1822
+ border-radius: 8px;
1823
+ .custom__table {
1824
+ border: 1px solid var(--_gray-200);
1825
+ width: 100%;
1826
+ table-layout: fixed;
1827
+ // height: 300px;
863
1828
 
864
- border-collapse: collapse;
865
- &[data-header-divider="true"] {
866
- thead tr th {
867
- border-bottom: 1px solid var(--_gray-200);
868
- }
869
- }
870
- &[data-row-divider="true"] {
871
- tbody tr td {
872
- border-bottom: 1px solid var(--_gray-200);
1829
+ border-collapse: collapse;
1830
+ &[data-header-divider="true"] {
1831
+ thead tr th {
1832
+ border-bottom: 1px solid var(--_gray-200);
1833
+ }
873
1834
  }
874
- }
875
- &[data-column-divider="true"] {
876
- tbody tr td,
877
- thead tr th {
878
- border-right: 1px solid var(--_gray-200);
1835
+ &[data-row-divider="true"] {
1836
+ tbody tr td {
1837
+ border-bottom: 1px solid var(--_gray-200);
1838
+ }
879
1839
  }
1840
+ &[data-column-divider="true"] {
1841
+ tbody tr td,
1842
+ thead tr th {
1843
+ border-right: 1px solid var(--_gray-200);
1844
+ }
880
1845
 
881
- tbody tr td:last-child,
882
- thead tr th:last-child {
883
- border-right: none;
1846
+ tbody tr td:last-child,
1847
+ thead tr th:last-child {
1848
+ border-right: none;
1849
+ }
884
1850
  }
885
- }
886
- &[data-alternative-row-colors="true"] {
887
- tbody tr:nth-child(odd) {
888
- background-color: var(--_gray-300);
889
- width: 100%;
1851
+ &[data-alternative-row-colors="true"] {
1852
+ tbody tr:nth-child(odd) {
1853
+ background-color: var(--_gray-300);
1854
+ width: 100%;
1855
+ }
890
1856
  }
891
- }
892
- thead {
893
- height: var(--_ctm-lt-te-dy-se-hr-ht);
894
- th {
895
- height: var(--_ctm-lt-te-dy-se-hr-ht);
896
- text-align: var(--_ctm-lt-te-dy-se-ct-at);
897
- padding: var(--_ctm-lt-te-dy-se-hr-cl-pg);
898
- background-color: var(--_gray-50);
899
- font-weight: 600;
900
- color: var(--_gray-600);
901
- word-break: break-word;
1857
+ thead {
1858
+ height: var(
1859
+ --_ctm-mob-lt-te-dy-se-hr-ht,
1860
+ var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht))
1861
+ );
1862
+ th {
1863
+ height: var(
1864
+ --_ctm-mob-lt-te-dy-se-hr-ht,
1865
+ var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht))
1866
+ );
1867
+ text-align: var(
1868
+ --_ctm-mob-lt-te-dy-se-ct-at,
1869
+ var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at))
1870
+ );
1871
+ padding: var(
1872
+ --_ctm-mob-lt-te-dy-se-hr-cl-pg,
1873
+ var(--_ctm-tab-lt-te-dy-se-hr-cl-pg, var(--_ctm-lt-te-dy-se-hr-cl-pg))
1874
+ );
1875
+ background-color: var(--_gray-50);
1876
+ font-weight: 600;
1877
+ color: var(--_gray-600);
1878
+ word-break: break-word;
1879
+ }
902
1880
  }
903
- }
904
- tbody {
905
- tr {
906
- border-bottom: 1px solid var(--_gray-200);
907
- height: var(--_ctm-lt-te-dy-se-rw-ht);
908
- td {
909
- text-align: var(--_ctm-lt-te-dy-se-ct-at);
910
- padding: var(--_ctm-lt-te-dy-se-rw-cl-pg);
911
- .disocunted__price {
912
- color: var(--_gray-900);
913
- }
914
- .actual__price {
915
- color: var(--_gray-500);
916
- }
917
- .qty__input {
918
- border: 1px solid var(--_gray-200);
919
- padding-inline: 10px;
920
- text-align: center;
921
- border-radius: 6px;
922
- height: 40px;
1881
+
1882
+ tbody {
1883
+ tr {
1884
+ border-bottom: 1px solid var(--_gray-200);
1885
+ height: var(
1886
+ --_ctm-mob-lt-te-dy-se-rw-ht,
1887
+ var(--_ctm-tab-lt-te-dy-se-rw-ht, var(--_ctm-lt-te-dy-se-rw-ht))
1888
+ );
1889
+ td {
1890
+ text-align: var(
1891
+ --_ctm-mob-lt-te-dy-se-ct-at,
1892
+ var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at))
1893
+ );
1894
+ padding: var(
1895
+ --_ctm-mob-lt-te-dy-se-rw-cl-pg,
1896
+ var(--_ctm-tab-lt-te-dy-se-rw-cl-pg, var(--_ctm-lt-te-dy-se-rw-cl-pg))
1897
+ );
1898
+ .disocunted__price {
1899
+ color: var(--_gray-900);
1900
+ }
1901
+ .actual__price {
1902
+ color: var(--_gray-500);
1903
+ }
1904
+ .qty__input {
1905
+ border: 1px solid var(--_gray-200);
1906
+ padding-inline: 10px;
1907
+ text-align: center;
1908
+ border-radius: 6px;
1909
+ height: 40px;
1910
+ }
1911
+ input[type="number"] {
1912
+ &:focus-within {
1913
+ border: 1px solid var(--_primary-200);
1914
+ box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
1915
+ }
1916
+ &:disabled {
1917
+ cursor: not-allowed;
1918
+ opacity: 0.4;
1919
+ }
1920
+ }
923
1921
  }
924
1922
  }
925
1923
  }
926
1924
  }
927
1925
  }
1926
+ &[data-show-divider="true"] {
1927
+ & > div {
1928
+ &:not(:last-child)::after {
1929
+ content: "";
1930
+ position: relative;
1931
+ background-color: #000;
1932
+ height: 1px;
1933
+ width: 100%;
1934
+ display: flex;
1935
+ top: calc(
1936
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1937
+ );
1938
+ }
1939
+ }
1940
+ }
928
1941
  }
929
1942
 
930
1943
  // horizontal tabs
@@ -940,7 +1953,11 @@ $minWidth: 70px;
940
1953
  &.tabs__hr {
941
1954
  .tabs {
942
1955
  flex-direction: column;
943
- gap: var(--_ctm-lt-gd-os-dy-se-tb-ad-cr-sg);
1956
+ gap: var(
1957
+ --_ctm-mob-lt-gd-os-dy-se-tb-ad-cr-sg,
1958
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-tb-ad-cr-sg))
1959
+ );
1960
+
944
1961
  .tabs__container {
945
1962
  width: 100%;
946
1963
  }
@@ -948,95 +1965,190 @@ $minWidth: 70px;
948
1965
  }
949
1966
  .tabs {
950
1967
  display: flex;
951
- gap: var(--_ctm-dn-tb-im-se-dt-se-tb-ad-cr-sg);
1968
+ gap: var(
1969
+ --_ctm-mob-lt-tb-im-se-dt-se-tb-ad-cr-sg,
1970
+ var(--_ctm-tab-lt-tb-im-se-dt-se-tb-ad-cr-sg, var(--_ctm-dn-tb-im-se-dt-se-tb-ad-cr-sg))
1971
+ );
952
1972
 
953
1973
  .tabs__container {
954
1974
  display: flex;
955
- gap: var(--_ctm-lt-gd-os-dy-se-tb-sg);
956
- background-color: var(--_gray-100);
1975
+ gap: var(
1976
+ --_ctm-mob-lt-gd-os-dy-se-tb-sg,
1977
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-sg, var(--_ctm-lt-gd-os-dy-se-tb-sg))
1978
+ );
1979
+
957
1980
  .tab {
958
1981
  display: flex;
959
1982
  justify-content: var(--_tab-aliginment);
960
- padding: var(--_ctm-lt-gd-os-dy-se-tb-vl-pg) var(--_ctm-lt-gd-os-dy-se-tb-hl-pg);
961
- background-color: var(--_ctm-dn-tb-im-se-dt-se-bd-cr);
1983
+ padding: var(
1984
+ --_ctm-mob-lt-gd-os-dy-se-tb-vl-pg,
1985
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-vl-pg, var(--_ctm-lt-gd-os-dy-se-tb-vl-pg))
1986
+ )
1987
+ var(
1988
+ --_ctm-mob-lt-gd-os-dy-se-tb-hl-pg,
1989
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-hl-pg, var(--_ctm-lt-gd-os-dy-se-tb-hl-pg))
1990
+ );
1991
+ background-color: var(
1992
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-bd-cr,
1993
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-bd-cr, var(--_ctm-dn-tb-im-se-dt-se-bd-cr))
1994
+ );
962
1995
  border-color: var(
963
1996
  --_show-border-im-se,
964
- var(--_ctm-dn-tb-im-se-dt-se-br-cr, var(--_tst-dn-br-cr))
1997
+ var(
1998
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-br-cr,
1999
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-cr, var(--_ctm-dn-tb-im-se-dt-se-br-cr))
2000
+ )
965
2001
  );
966
2002
  border-style: var(
967
2003
  --_show-border-im-se,
968
- var(--_ctm-dn-tb-im-se-dt-se-br-se, var(--_tst-dn-br-se))
2004
+ var(
2005
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-br-se,
2006
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-se, var(--_ctm-dn-tb-im-se-dt-se-br-se))
2007
+ )
969
2008
  );
970
2009
  border-width: var(
971
2010
  --_show-border-im-se,
972
- var(--_ctm-dn-tb-im-se-dt-se-br-wh, var(--_tst-dn-br-wh))
2011
+ var(
2012
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-br-wh,
2013
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-wh, var(--_ctm-dn-tb-im-se-dt-se-br-wh))
2014
+ )
2015
+ );
2016
+ border-radius: var(
2017
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-br-rs,
2018
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-rs, var(--_ctm-dn-tb-im-se-dt-se-br-rs))
973
2019
  );
974
- border-radius: var(--_ctm-dn-tb-im-se-dt-se-br-rs, var(--_tst-dn-br-rs));
975
2020
  box-shadow: var(
976
2021
  --_show-shadow-im-se,
977
- var(--_ctm-dn-tb-im-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
978
- var(--_ctm-dn-tb-im-se-dt-se-sw-br, var(--_tst-dn-sw-br))
979
- var(--_ctm-dn-tb-im-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
980
- var(--_ctm-dn-tb-im-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
2022
+ var(
2023
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-ae,
2024
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-ae)
2025
+ ),
2026
+ var(
2027
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-br,
2028
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-br)
2029
+ ),
2030
+ var(
2031
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-sd,
2032
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-sd)
2033
+ ),
2034
+ var(
2035
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-sw-cr,
2036
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-sw-cr)
2037
+ )
981
2038
  );
982
- border-radius: var(--_ctm-dn-tb-im-se-dt-se-br-rs);
2039
+ border-radius: var(
2040
+ --_ctm-mob-lt-dn-tb-im-se-dt-se-br-rs,
2041
+ var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-rs)
2042
+ );
2043
+
983
2044
  &:hover {
984
- background-color: var(--_ctm-dn-tb-im-se-hr-se-bd-cr);
2045
+ background-color: var(
2046
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-bd-cr,
2047
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-bd-cr, var(--_ctm-dn-tb-im-se-hr-se-bd-cr))
2048
+ );
985
2049
  border-color: var(
986
2050
  --_show-border-im-se,
987
- var(--_ctm-dn-tb-im-se-hr-se-br-cr, var(--_tst-dn-br-cr))
2051
+ var(
2052
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-br-cr,
2053
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-cr, var(--_ctm-dn-tb-im-se-hr-se-br-cr))
2054
+ )
988
2055
  );
989
2056
  border-style: var(
990
2057
  --_show-border-im-se,
991
- var(--_ctm-dn-tb-im-se-hr-se-br-se, var(--_tst-dn-br-se))
2058
+ var(
2059
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-br-se,
2060
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-se, var(--_ctm-dn-tb-im-se-hr-se-br-se))
2061
+ )
992
2062
  );
993
2063
  border-width: var(
994
2064
  --_show-border-im-se,
995
- var(--_ctm-dn-tb-im-se-hr-se-br-wh, var(--_tst-dn-br-wh))
2065
+ var(
2066
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-br-wh,
2067
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-wh, var(--_ctm-dn-tb-im-se-hr-se-br-wh))
2068
+ )
2069
+ );
2070
+ border-radius: var(
2071
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-br-rs,
2072
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-br-rs, var(--_ctm-dn-tb-im-se-hr-se-br-rs))
996
2073
  );
997
- border-radius: var(--_ctm-dn-tb-im-se-hr-se-br-rs, var(--_tst-dn-br-rs));
998
2074
  box-shadow: var(
999
2075
  --_show-shadow-im-se,
1000
- var(--_ctm-dn-tb-im-se-hr-se-sw-ae, var(--_tst-dn-sw-ae))
1001
- var(--_ctm-dn-tb-im-se-hr-se-sw-br, var(--_tst-dn-sw-br))
1002
- var(--_ctm-dn-tb-im-se-hr-se-sw-sd, var(--_tst-dn-sw-sd))
1003
- var(--_ctm-dn-tb-im-se-hr-se-sw-cr, var(--_tst-dn-sw-cr))
2076
+ var(
2077
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-ae,
2078
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-ae)
2079
+ ),
2080
+ var(
2081
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-br,
2082
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-br)
2083
+ ),
2084
+ var(
2085
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-sd,
2086
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-sd)
2087
+ ),
2088
+ var(
2089
+ --_ctm-mob-lt-dn-tb-im-se-hr-se-sw-cr,
2090
+ var(--_ctm-tab-lt-dn-tb-im-se-hr-se-sw-cr)
2091
+ )
1004
2092
  );
1005
- border-radius: var(--_ctm-dn-tb-im-se-hr-se-br-rs);
1006
2093
  }
2094
+
1007
2095
  &.active {
1008
- background-color: var(--_ctm-dn-tb-im-se-sd-se-bd-cr);
2096
+ background-color: var(
2097
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-bd-cr,
2098
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-bd-cr, var(--_ctm-dn-tb-im-se-sd-se-bd-cr))
2099
+ );
1009
2100
  border-color: var(
1010
2101
  --_show-border-im-se,
1011
- var(--_ctm-dn-tb-im-se-sd-se-br-cr, var(--_tst-dn-br-cr))
2102
+ var(
2103
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-br-cr,
2104
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-cr, var(--_ctm-dn-tb-im-se-sd-se-br-cr))
2105
+ )
1012
2106
  );
1013
2107
  border-style: var(
1014
2108
  --_show-border-im-se,
1015
- var(--_ctm-dn-tb-im-se-sd-se-br-se, var(--_tst-dn-br-se))
2109
+ var(
2110
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-br-se,
2111
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-se, var(--_ctm-dn-tb-im-se-sd-se-br-se))
2112
+ )
1016
2113
  );
1017
2114
  border-width: var(
1018
2115
  --_show-border-im-se,
1019
- var(--_ctm-dn-tb-im-se-sd-se-br-wh, var(--_tst-dn-br-wh))
2116
+ var(
2117
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-br-wh,
2118
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-wh, var(--_ctm-dn-tb-im-se-sd-se-br-wh))
2119
+ )
2120
+ );
2121
+ border-radius: var(
2122
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-br-rs,
2123
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-br-rs, var(--_ctm-dn-tb-im-se-sd-se-br-rs))
1020
2124
  );
1021
- border-radius: var(--_ctm-dn-tb-im-se-sd-se-br-rs, var(--_tst-dn-br-rs));
1022
2125
  box-shadow: var(
1023
2126
  --_show-shadow-im-se,
1024
- var(--_ctm-dn-tb-im-se-sd-se-sw-ae, var(--_tst-dn-sw-ae))
1025
- var(--_ctm-dn-tb-im-se-sd-se-sw-br, var(--_tst-dn-sw-br))
1026
- var(--_ctm-dn-tb-im-se-sd-se-sw-sd, var(--_tst-dn-sw-sd))
1027
- var(--_ctm-dn-tb-im-se-sd-se-sw-cr, var(--_tst-dn-sw-cr))
2127
+ var(
2128
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-ae,
2129
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-ae)
2130
+ ),
2131
+ var(
2132
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-br,
2133
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-br)
2134
+ ),
2135
+ var(
2136
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-sd,
2137
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-sd)
2138
+ ),
2139
+ var(
2140
+ --_ctm-mob-lt-dn-tb-im-se-sd-se-sw-cr,
2141
+ var(--_ctm-tab-lt-dn-tb-im-se-sd-se-sw-cr)
2142
+ )
1028
2143
  );
1029
- border-radius: var(--_ctm-dn-tb-im-se-sd-se-br-rs);
1030
2144
  }
1031
- // span {
1032
- // &.active {
1033
- // // border-bottom: 2px solid var(--_primary-400);
1034
- // }
1035
- // }
1036
2145
  }
1037
2146
  }
1038
2147
  .tab__content {
1039
- padding: var(--_ctm-lt-gd-os-dy-se-cr-pg);
2148
+ padding: var(
2149
+ --_ctm-mob-lt-gd-os-dy-se-cr-pg,
2150
+ var(--_ctm-tab-lt-gd-os-dy-se-cr-pg, var(--_ctm-lt-gd-os-dy-se-cr-pg))
2151
+ );
1040
2152
  }
1041
2153
  }
1042
2154
  }