@sc-360-v2/storefront-cms-library 0.4.26 → 0.4.28

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 (58) hide show
  1. package/dist/add-order.scss +14 -12
  2. package/dist/add-products-tab.scss +179 -105
  3. package/dist/allocationDetails.scss +2 -2
  4. package/dist/allocations.scss +6 -6
  5. package/dist/builder.js +1 -1
  6. package/dist/bundleDetails copy.scss +1431 -0
  7. package/dist/bundleDetails.scss +3054 -107
  8. package/dist/button.scss +5 -2
  9. package/dist/buy-for-tab-container.scss +2 -1
  10. package/dist/buy-for-tab.scss +32 -21
  11. package/dist/buyForHeaders.scss +4544 -4082
  12. package/dist/buyForPopup.scss +154 -117
  13. package/dist/cart-details.scss +1 -1
  14. package/dist/cart-products-sidebar.scss +18 -56
  15. package/dist/cart-summary.scss +14 -12
  16. package/dist/coupon.scss +85 -0
  17. package/dist/dropdownTemplate.scss +5 -0
  18. package/dist/embroider-template-1-v2.scss +597 -0
  19. package/dist/embroider-template-1.scss +14 -5
  20. package/dist/embroidery.scss +25 -2
  21. package/dist/filters.scss +50 -15
  22. package/dist/functions.js +1 -1
  23. package/dist/functions.scss +4 -0
  24. package/dist/icons.js +1 -1
  25. package/dist/index.js +1 -1
  26. package/dist/language-selector.scss +4 -1
  27. package/dist/layouter-pro.scss +8 -0
  28. package/dist/modal.scss +37 -27
  29. package/dist/multi-select-dropdown.scss +53 -41
  30. package/dist/option-bar.scss +2 -2
  31. package/dist/order-status.scss +18 -14
  32. package/dist/product-actions.scss +27 -27
  33. package/dist/product-image.scss +14 -4
  34. package/dist/product-options.scss +1 -0
  35. package/dist/product-price.scss +1910 -1437
  36. package/dist/product-sizechart.scss +5 -2
  37. package/dist/profile.scss +3 -3
  38. package/dist/quantity-selector.scss +6 -6
  39. package/dist/quick-order-pad.scss +106 -42
  40. package/dist/repeater-embla-controls.scss +4 -2
  41. package/dist/repeater.scss +3 -3
  42. package/dist/search.scss +11 -1
  43. package/dist/section.scss +9 -9
  44. package/dist/shipping-payments.scss +5 -0
  45. package/dist/stack.scss +13 -3
  46. package/dist/types/builder/elements/common.d.ts +1 -0
  47. package/dist/types/builder/elements/light-box-v2/index.d.ts +1 -0
  48. package/dist/types/builder/elements/section/index.d.ts +1 -0
  49. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +481 -0
  50. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +5 -0
  51. package/dist/types/builder/tools/element-edit/filters.d.ts +5 -0
  52. package/dist/types/builder/tools/element-edit/language-menu.d.ts +1 -0
  53. package/dist/types/builder/tools/element-edit/productPrice.d.ts +2 -1
  54. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +2 -0
  55. package/dist/types/website/constants/data-connector-souces.d.ts +13 -6
  56. package/dist/variant-picker.scss +1 -0
  57. package/dist/website.js +1 -1
  58. package/package.json +1 -1
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
3
4
 
4
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
5
6
  $resizeActive: '[data-cms-element-resizer="true"]';
@@ -1170,146 +1171,3092 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1170
1171
  width: 100%;
1171
1172
  }
1172
1173
 
1173
- .standard_wrapper {
1174
- // Select Colors
1175
- .select__colors {
1176
- font-size: 16px;
1177
- color: var(--_gray-500);
1174
+ .variant__picker__static {
1175
+ .text-element {
1176
+ color: #333;
1177
+ font-family: Lato;
1178
+ font-size: 12px;
1179
+ font-style: normal;
1180
+ font-weight: 400;
1181
+ line-height: 18px;
1182
+ margin-bottom: 6px;
1183
+ }
1184
+ .option__title {
1185
+ margin-bottom: 4px;
1186
+ color: var(
1187
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
1188
+ var(
1189
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
1190
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr)
1191
+ )
1192
+ );
1193
+ font-family:
1194
+ var(
1195
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy,
1196
+ var(
1197
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy,
1198
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy)
1199
+ )
1200
+ ),
1201
+ sans-serif;
1202
+ font-size: var(
1203
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se,
1204
+ var(
1205
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se,
1206
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se)
1207
+ )
1208
+ );
1209
+ font-weight: var(
1210
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt,
1211
+ var(
1212
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt,
1213
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt)
1214
+ )
1215
+ );
1216
+ font-style: var(
1217
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic,
1218
+ var(
1219
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic,
1220
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic)
1221
+ )
1222
+ );
1223
+ text-align: var(
1224
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an,
1225
+ var(
1226
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an,
1227
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an)
1228
+ )
1229
+ );
1230
+ letter-spacing: var(
1231
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg,
1232
+ var(
1233
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg,
1234
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg)
1235
+ )
1236
+ );
1237
+ line-height: var(
1238
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht,
1239
+ var(
1240
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht,
1241
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht)
1242
+ )
1243
+ );
1244
+ text-decoration: var(
1245
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue,
1246
+ var(
1247
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue,
1248
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue)
1249
+ )
1250
+ );
1251
+ }
1252
+
1253
+ .is__combination_avail {
1254
+ color: red;
1255
+ font-size: 14px;
1256
+ font-weight: 600;
1257
+ }
1258
+ .variant__container {
1178
1259
  display: flex;
1179
1260
  flex-direction: column;
1180
- gap: 8px;
1181
- padding: 12px;
1261
+ gap: var(
1262
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1263
+ var(
1264
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1265
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
1266
+ )
1267
+ );
1268
+ padding: var(
1269
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-pg,
1270
+ var(
1271
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-pg,
1272
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-pg)
1273
+ )
1274
+ );
1275
+ white-space: nowrap;
1182
1276
 
1183
- .title {
1184
- margin-bottom: 4px;
1185
- color: #000000;
1186
- font-size: 16px;
1187
- }
1277
+ .standard_wrapper {
1278
+ // Select Colors
1279
+ .select__colors {
1280
+ font-size: 16px;
1281
+ color: var(--_gray-500);
1282
+ display: flex;
1283
+ flex-direction: column;
1284
+ gap: var(
1285
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
1286
+ var(
1287
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
1288
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg)
1289
+ )
1290
+ );
1291
+ // padding: var(
1292
+ // --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg,
1293
+ // var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg))
1294
+ // );
1295
+
1296
+ .select__group {
1297
+ display: flex;
1298
+ flex-direction: row;
1299
+ gap: var(
1300
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-sg,
1301
+ var(
1302
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-sg,
1303
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-sg)
1304
+ )
1305
+ );
1306
+
1307
+ &[data-swatch-dispaly="Vertically"] {
1308
+ flex-direction: column;
1309
+ }
1310
+ &[data-swatch-overflow="Scroll"] {
1311
+ flex-wrap: nowrap;
1312
+ overflow-x: auto;
1313
+ }
1314
+ &[data-swatch-overflow="Wrap"] {
1315
+ flex-wrap: wrap;
1316
+ }
1188
1317
 
1189
- .select__group {
1318
+ .show_more_button {
1319
+ background-color: var(
1320
+ --_ctm-mob-dn-sw-me-is-bn-bd-cr,
1321
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
1322
+ );
1323
+ font-family:
1324
+ var(
1325
+ --_ctm-mob-dn-sw-me-is-bn-ft-fy,
1326
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
1327
+ ),
1328
+ sans-serif;
1329
+ border-color: var(
1330
+ --_ctm-mob-dn-sw-me-is-bn-br-cr,
1331
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
1332
+ );
1333
+ border-radius: var(
1334
+ --_ctm-mob-dn-sw-me-is-bn-br-rs,
1335
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
1336
+ );
1337
+ border-style: var(
1338
+ --_ctm-mob-dn-sw-me-is-bn-br-se,
1339
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
1340
+ );
1341
+ border-width: var(
1342
+ --_ctm-mob-dn-sw-me-is-bn-br-wh,
1343
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
1344
+ );
1345
+ font-size: var(
1346
+ --_ctm-mob-dn-sw-me-is-bn-ft-se,
1347
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
1348
+ );
1349
+ font-style: var(
1350
+ --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
1351
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
1352
+ );
1353
+ font-weight: var(
1354
+ --_ctm-mob-dn-sw-me-is-bn-ft-wt,
1355
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
1356
+ );
1357
+ line-height: var(
1358
+ --_ctm-mob-dn-sw-me-is-bn-le-ht,
1359
+ var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
1360
+ );
1361
+ letter-spacing: var(
1362
+ --_ctm-mob-dn-sw-me-is-bn-lr-sg,
1363
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
1364
+ );
1365
+ box-shadow: var(
1366
+ --_ctm-mob-dn-sw-me-is-bn-sw-ae,
1367
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
1368
+ )
1369
+ var(
1370
+ --_ctm-mob-dn-sw-me-is-bn-sw-br,
1371
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
1372
+ )
1373
+ var(
1374
+ --_ctm-mob-dn-sw-me-is-bn-sw-sd,
1375
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
1376
+ )
1377
+ var(
1378
+ --_ctm-mob-dn-sw-me-is-bn-sw-cr,
1379
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
1380
+ );
1381
+ text-align: var(
1382
+ --_ctm-mob-dn-sw-me-is-bn-tt-an,
1383
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
1384
+ );
1385
+ color: var(
1386
+ --_ctm-mob-dn-sw-me-is-bn-tt-cr,
1387
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
1388
+ );
1389
+ text-decoration: var(
1390
+ --_ctm-mob-dn-sw-me-is-bn-ue,
1391
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
1392
+ );
1393
+ }
1394
+
1395
+ .select__group__item {
1396
+ transition: width 0.3s ease;
1397
+
1398
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se: var(
1399
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se
1400
+ );
1401
+ height: prepareMediaVariable(
1402
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se
1403
+ );
1404
+ width: prepareMediaVariable(
1405
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se
1406
+ );
1407
+ padding: prepareMediaVariable(
1408
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg
1409
+ );
1410
+
1411
+ border-color: var(
1412
+ --_sf-hr-br-cr,
1413
+ prepareMediaVariable(
1414
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-cr
1415
+ )
1416
+ );
1417
+
1418
+ background-color: var(
1419
+ --_sf-hr-bd-cr,
1420
+ prepareMediaVariable(
1421
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-bd-cr
1422
+ )
1423
+ );
1424
+
1425
+ border-style: var(
1426
+ --_sf-hr-br-se,
1427
+ prepareMediaVariable(
1428
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-se
1429
+ )
1430
+ );
1431
+
1432
+ border-width: var(
1433
+ --_sf-hr-br-wh,
1434
+ prepareMediaVariable(
1435
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-wh
1436
+ )
1437
+ );
1438
+ border-radius: var(
1439
+ --_sf-hr-br-rs,
1440
+ prepareMediaVariable(
1441
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-rs
1442
+ )
1443
+ );
1444
+
1445
+ box-shadow: var(
1446
+ --_sf-hr-sw-ae,
1447
+ prepareMediaVariable(
1448
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-ae
1449
+ )
1450
+ )
1451
+ var(
1452
+ --_sf-hr-sw-br,
1453
+ prepareMediaVariable(
1454
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-br
1455
+ )
1456
+ )
1457
+ var(
1458
+ --_sf-hr-sw-sd,
1459
+ prepareMediaVariable(
1460
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-sd
1461
+ )
1462
+ )
1463
+ var(
1464
+ --_sf-hr-sw-cr,
1465
+ prepareMediaVariable(
1466
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-cr
1467
+ )
1468
+ );
1469
+
1470
+ cursor: pointer;
1471
+ overflow: hidden;
1472
+ .product-select-image {
1473
+ object-fit: cover;
1474
+ width: 100%;
1475
+ height: 100%;
1476
+ }
1477
+ &[data-background-shape="circle"] {
1478
+ border-radius: 50%;
1479
+ }
1480
+ &[data-background-shape="square"] {
1481
+ border-radius: 5px;
1482
+ }
1483
+ &[data-background-shape="capsule"] {
1484
+ --toggle-height: var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se);
1485
+ --toggle-width: calc(
1486
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se) * 1.5
1487
+ );
1488
+
1489
+ width: var(--toggle-width);
1490
+ height: var(--toggle-height);
1491
+
1492
+ border-radius: var(--toggle-height); /* Full pill shape */
1493
+ box-sizing: border-box;
1494
+ }
1495
+ &[data-swatch-shape="circle"] {
1496
+ & div,
1497
+ .product-select-image {
1498
+ border-radius: 50%;
1499
+ }
1500
+ // border-radius: 50%;
1501
+ }
1502
+ &[data-swatch-shape="capsule"] {
1503
+ & div,
1504
+ .product-select-image {
1505
+ // border-radius: 50%;
1506
+ width: 100%;
1507
+ height: 100%;
1508
+ border-radius: inherit;
1509
+ }
1510
+ // border-radius: 50%;
1511
+ }
1512
+
1513
+ &[data-selected="true"] {
1514
+ border-color: var(
1515
+ --_sf-sd-br-cr,
1516
+ prepareMediaVariable(
1517
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr
1518
+ )
1519
+ );
1520
+
1521
+ background-color: var(
1522
+ --_sf-sd-bd-cr,
1523
+ prepareMediaVariable(
1524
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr
1525
+ )
1526
+ );
1527
+ border-style: var(
1528
+ --_sf-sd-br-se,
1529
+ prepareMediaVariable(
1530
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se
1531
+ )
1532
+ );
1533
+ border-width: var(
1534
+ --_sf-sd-br-wh,
1535
+ prepareMediaVariable(
1536
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh
1537
+ )
1538
+ );
1539
+ box-shadow: var(
1540
+ --_sf-sd-sw-ae,
1541
+ prepareMediaVariable(
1542
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-ae
1543
+ )
1544
+ )
1545
+ var(
1546
+ --_sf-sd-sw-br,
1547
+ prepareMediaVariable(
1548
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-br
1549
+ )
1550
+ )
1551
+ var(
1552
+ --_sf-sd-sw-sd,
1553
+ prepareMediaVariable(
1554
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-sd
1555
+ )
1556
+ )
1557
+ var(
1558
+ --_sf-sd-sw-cr,
1559
+ prepareMediaVariable(
1560
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-cr
1561
+ )
1562
+ );
1563
+
1564
+ &[data-background-shape-selected="circle"] {
1565
+ border-radius: 50%;
1566
+ }
1567
+ &[data-background-shape-selected="square"] {
1568
+ border-radius: 5px;
1569
+ }
1570
+ &[data-background-shape-selected="capsule"] {
1571
+ border-radius: 80%;
1572
+ // width: calc(
1573
+ // var(--_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se))) +
1574
+ // 8px
1575
+ // );
1576
+ }
1577
+ &[data-swatch-shape-selected="circle"] {
1578
+ & div,
1579
+ .product-select-image {
1580
+ border-radius: 50%;
1581
+ }
1582
+ }
1583
+ &[data-swatch-shape-selected="capsule"] {
1584
+ & div,
1585
+ .product-select-image {
1586
+ border-radius: 50%;
1587
+ }
1588
+ }
1589
+ &[data-swatch-shape-selected="square"] {
1590
+ & div,
1591
+ .product-select-image {
1592
+ border-radius: 5px;
1593
+ }
1594
+ }
1595
+ }
1596
+ &:hover {
1597
+ --_sf-hr-bd-cr: var(
1598
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-bd-cr,
1599
+ var(
1600
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-bd-cr,
1601
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-bd-cr)
1602
+ )
1603
+ );
1604
+ --_sf-hr-br-cr: var(
1605
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-cr,
1606
+ var(
1607
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-cr,
1608
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-cr)
1609
+ )
1610
+ );
1611
+ --_sf-hr-br-se: var(
1612
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-se,
1613
+ var(
1614
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-se,
1615
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-se)
1616
+ )
1617
+ );
1618
+ --_sf-hr-br-wh: var(
1619
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-wh,
1620
+ var(
1621
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-wh,
1622
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-wh)
1623
+ )
1624
+ );
1625
+ --_sf-hr-br-bs: var(
1626
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-rs,
1627
+ var(
1628
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-rs,
1629
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-rs)
1630
+ )
1631
+ );
1632
+
1633
+ // new
1634
+ --_sf-hr-sw-ae: var(
1635
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
1636
+ var(
1637
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-ae,
1638
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-ae)
1639
+ )
1640
+ );
1641
+ --_sf-hr-sw-br: var(
1642
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
1643
+ var(
1644
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-br,
1645
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-br)
1646
+ )
1647
+ );
1648
+ --_sf-hr-sw-hr: var(
1649
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
1650
+ var(
1651
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-hr,
1652
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-hr)
1653
+ )
1654
+ );
1655
+ --_sf-hr-sw-cr: var(
1656
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
1657
+ var(
1658
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-cr,
1659
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-cr)
1660
+ )
1661
+ );
1662
+ }
1663
+
1664
+ &:hover {
1665
+ &[data-background-shape-hover="circle"] {
1666
+ border-radius: 50%;
1667
+ }
1668
+ &[data-background-shape-hover="square"] {
1669
+ border-radius: 5px;
1670
+ }
1671
+ &[data-background-shape-hover="capsule"] {
1672
+ border-radius: 80%;
1673
+ // width: calc(
1674
+ // var(
1675
+ // --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se,
1676
+ // var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se))
1677
+ // ) +
1678
+ // 8px
1679
+ // );
1680
+ }
1681
+ &[data-swatch-shape-hover="circle"] {
1682
+ & div,
1683
+ .product-select-image {
1684
+ border-radius: 50%;
1685
+ }
1686
+ // border-radius: 50%;
1687
+ }
1688
+ &[data-swatch-shape-hover="capsule"] {
1689
+ & div,
1690
+ .product-select-image {
1691
+ border-radius: 50%;
1692
+ }
1693
+ }
1694
+ &[data-swatch-shape-hover="square"] {
1695
+ & div,
1696
+ .product-select-image {
1697
+ border-radius: 5px;
1698
+ }
1699
+ }
1700
+ }
1701
+
1702
+ &[data-selected="true"] {
1703
+ --_sf-sd-bd-cr: var(
1704
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr,
1705
+ var(
1706
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr,
1707
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr)
1708
+ )
1709
+ );
1710
+ --_sf-sd-br-cr: var(
1711
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr,
1712
+ var(
1713
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr,
1714
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr)
1715
+ )
1716
+ );
1717
+ --_sf-sd-br-se: var(
1718
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se,
1719
+ var(
1720
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se,
1721
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se)
1722
+ )
1723
+ );
1724
+ --_sf-sd-br-wh: var(
1725
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh,
1726
+ var(
1727
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh,
1728
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh)
1729
+ )
1730
+ );
1731
+ --_sf-sd-br-bs: var(
1732
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs,
1733
+ var(
1734
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs,
1735
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs)
1736
+ )
1737
+ );
1738
+
1739
+ // new
1740
+ --_sf-sd-sw-ae: var(
1741
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
1742
+ var(
1743
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-ae,
1744
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-ae)
1745
+ )
1746
+ );
1747
+ --_sf-sd-sw-br: var(
1748
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
1749
+ var(
1750
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-br,
1751
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-br)
1752
+ )
1753
+ );
1754
+ --_sf-sd-sw-sd: var(
1755
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
1756
+ var(
1757
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-sd,
1758
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-sd)
1759
+ )
1760
+ );
1761
+ --_sf-sd-sw-cr: var(
1762
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
1763
+ var(
1764
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-cr,
1765
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-cr)
1766
+ )
1767
+ );
1768
+
1769
+ border-color: var(
1770
+ --_sf-sd-br-cr,
1771
+ prepareMediaVariable(
1772
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-cr
1773
+ )
1774
+ );
1775
+
1776
+ background-color: var(
1777
+ --_sf-sd-bd-cr,
1778
+ prepareMediaVariable(
1779
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-bd-cr
1780
+ )
1781
+ );
1782
+
1783
+ border-style: var(
1784
+ --_sf-sd-br-se,
1785
+ prepareMediaVariable(
1786
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-se
1787
+ )
1788
+ );
1789
+
1790
+ border-width: var(
1791
+ --_sf-sd-br-wh,
1792
+ prepareMediaVariable(
1793
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-wh
1794
+ )
1795
+ );
1796
+ border-radius: var(
1797
+ --_sf-sd-br-rs,
1798
+ prepareMediaVariable(
1799
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-rs
1800
+ )
1801
+ );
1802
+
1803
+ box-shadow: var(
1804
+ --_sf-sd-sw-ae,
1805
+ prepareMediaVariable(
1806
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-ae
1807
+ )
1808
+ )
1809
+ var(
1810
+ --_sf-sd-sw-br,
1811
+ prepareMediaVariable(
1812
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-br
1813
+ )
1814
+ )
1815
+ var(
1816
+ --_sf-sd-sw-sd,
1817
+ prepareMediaVariable(
1818
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-sd
1819
+ )
1820
+ )
1821
+ var(
1822
+ --_sf-sd-sw-cr,
1823
+ prepareMediaVariable(
1824
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-cr
1825
+ )
1826
+ );
1827
+
1828
+ &[data-background-shape-selected="circle"] {
1829
+ border-radius: 50%;
1830
+ }
1831
+ &[data-background-shape-selected="square"] {
1832
+ border-radius: 5px;
1833
+ }
1834
+ &[data-background-shape-selected="capsule"] {
1835
+ --toggle-height: var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se);
1836
+ --toggle-width: calc(
1837
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se) * 1.5
1838
+ );
1839
+
1840
+ width: var(--toggle-width);
1841
+ height: var(--toggle-height);
1842
+
1843
+ border-radius: var(--toggle-height); /* Full pill shape */
1844
+ box-sizing: border-box;
1845
+ }
1846
+ &[data-swatch-shape-selected="circle"] {
1847
+ & div,
1848
+ .product-select-image {
1849
+ border-radius: 50%;
1850
+ }
1851
+ }
1852
+ &[data-swatch-shape-selected="capsule"] {
1853
+ & div,
1854
+ .product-select-image {
1855
+ // border-radius: 50%;
1856
+ width: 100%;
1857
+ height: 100%;
1858
+ border-radius: inherit;
1859
+ }
1860
+ }
1861
+ &[data-swatch-shape-selected="square"] {
1862
+ & div,
1863
+ .product-select-image {
1864
+ border-radius: 5px;
1865
+ }
1866
+ }
1867
+ }
1868
+
1869
+ // &.disabled {
1870
+ // cursor: not-allowed;
1871
+ // opacity: 0.4;
1872
+ // &[data-swatch-type="Swatch Image"] {
1873
+ // position: relative;
1874
+ // overflow: hidden;
1875
+ // &::after {
1876
+ // content: "";
1877
+ // width: 172%;
1878
+ // height: 1px;
1879
+ // position: absolute;
1880
+ // background: #f00;
1881
+ // left: -14px;
1882
+ // transform: rotate(48deg);
1883
+ // /* -webkit-transform: rotate(48deg); */
1884
+ // -moz-transform: rotate(48deg);
1885
+ // top: 14px;
1886
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1887
+ // }
1888
+ // &::before {
1889
+ // content: "";
1890
+ // width: 164%;
1891
+ // height: 1px;
1892
+ // position: absolute;
1893
+ // background: #f00;
1894
+ // left: -14px;
1895
+ // transform: rotate(-48deg);
1896
+ // -webkit-transform: rotate(-48deg);
1897
+ // -moz-transform: rotate(-48deg);
1898
+ // top: 14px;
1899
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1900
+ // }
1901
+ // }
1902
+ // }
1903
+
1904
+ position: relative;
1905
+
1906
+ &.disabled {
1907
+ color: #aaa;
1908
+ background-color: #f9f9f9;
1909
+ border-color: #ddd;
1910
+ cursor: not-allowed;
1911
+ opacity: 0.3;
1912
+ overflow: hidden;
1913
+ }
1914
+
1915
+ .cross-line {
1916
+ position: absolute;
1917
+ inset: 0;
1918
+ background-color: #cccccc;
1919
+ clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
1920
+ pointer-events: none;
1921
+ }
1922
+ .product-select-image {
1923
+ width: 100%;
1924
+ height: 100%;
1925
+ }
1926
+ }
1927
+ }
1928
+ }
1929
+ // Select Fit and Size
1930
+ .select__fit {
1931
+ font-size: 16px;
1932
+ color: var(--_gray-500);
1933
+ display: flex;
1934
+ flex-direction: column;
1935
+ gap: var(
1936
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
1937
+ var(
1938
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
1939
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg)
1940
+ )
1941
+ );
1942
+
1943
+ // padding: var(
1944
+ // --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg,
1945
+ // var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg))
1946
+ // );
1947
+
1948
+ .select__group {
1949
+ display: flex;
1950
+ gap: 8px;
1951
+ flex-wrap: wrap;
1952
+ margin-bottom: 10px;
1953
+ flex-direction: row;
1954
+ gap: var(
1955
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-sg,
1956
+ var(
1957
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-sg,
1958
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-sg)
1959
+ )
1960
+ );
1961
+
1962
+ &[data-single-dispaly="Vertically"] {
1963
+ flex-direction: column;
1964
+ }
1965
+ &[data-single-overflow="Scroll"] {
1966
+ overflow-x: auto;
1967
+ overflow-y: hidden;
1968
+ flex-wrap: nowrap;
1969
+ }
1970
+ &[data-swatch-overflow="Scroll"] {
1971
+ overflow-x: auto;
1972
+ flex-wrap: nowrap;
1973
+ overflow-y: hidden;
1974
+ }
1975
+ .show_more_button {
1976
+ background-color: var(
1977
+ --_ctm-mob-dn-sw-me-is-bn-bd-cr,
1978
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
1979
+ );
1980
+ font-family:
1981
+ var(
1982
+ --_ctm-mob-dn-sw-me-is-bn-ft-fy,
1983
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
1984
+ ),
1985
+ sans-serif;
1986
+ border-color: var(
1987
+ --_ctm-mob-dn-sw-me-is-bn-br-cr,
1988
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
1989
+ );
1990
+ border-radius: var(
1991
+ --_ctm-mob-dn-sw-me-is-bn-br-rs,
1992
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
1993
+ );
1994
+ border-style: var(
1995
+ --_ctm-mob-dn-sw-me-is-bn-br-se,
1996
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
1997
+ );
1998
+ border-width: var(
1999
+ --_ctm-mob-dn-sw-me-is-bn-br-wh,
2000
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
2001
+ );
2002
+ font-size: var(
2003
+ --_ctm-mob-dn-sw-me-is-bn-ft-se,
2004
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
2005
+ );
2006
+ font-style: var(
2007
+ --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
2008
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
2009
+ );
2010
+ font-weight: var(
2011
+ --_ctm-mob-dn-sw-me-is-bn-ft-wt,
2012
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
2013
+ );
2014
+ line-height: var(
2015
+ --_ctm-mob-dn-sw-me-is-bn-le-ht,
2016
+ var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
2017
+ );
2018
+ letter-spacing: var(
2019
+ --_ctm-mob-dn-sw-me-is-bn-lr-sg,
2020
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
2021
+ );
2022
+ box-shadow: var(
2023
+ --_ctm-mob-dn-sw-me-is-bn-sw-ae,
2024
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
2025
+ )
2026
+ var(
2027
+ --_ctm-mob-dn-sw-me-is-bn-sw-br,
2028
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
2029
+ )
2030
+ var(
2031
+ --_ctm-mob-dn-sw-me-is-bn-sw-sd,
2032
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
2033
+ )
2034
+ var(
2035
+ --_ctm-mob-dn-sw-me-is-bn-sw-cr,
2036
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
2037
+ );
2038
+ text-align: var(
2039
+ --_ctm-mob-dn-sw-me-is-bn-tt-an,
2040
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
2041
+ );
2042
+ color: var(
2043
+ --_ctm-mob-dn-sw-me-is-bn-tt-cr,
2044
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
2045
+ );
2046
+ text-decoration: var(
2047
+ --_ctm-mob-dn-sw-me-is-bn-ue,
2048
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
2049
+ );
2050
+ }
2051
+ &[data-single-dispaly="Grid"] {
2052
+ display: grid;
2053
+ grid-template-columns: repeat(
2054
+ var(
2055
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-is-pr-rw,
2056
+ var(
2057
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-is-pr-rw,
2058
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-is-pr-rw)
2059
+ )
2060
+ ),
2061
+ minmax(auto, 1fr)
2062
+ );
2063
+ }
2064
+
2065
+ .select__group__item {
2066
+ transition: color 0.3s ease;
2067
+ // border-radius: 6px;
2068
+ // border: 1px solid var(--_gray-200);
2069
+ cursor: pointer;
2070
+ display: flex;
2071
+ align-items: center;
2072
+ justify-content: center;
2073
+
2074
+ // height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-se);
2075
+ // width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-se);
2076
+ padding: prepareMediaVariable(
2077
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg
2078
+ );
2079
+ min-width: 20px;
2080
+ min-height: 20px;
2081
+ box-sizing: content-box;
2082
+ border-radius: var(
2083
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs,
2084
+ var(
2085
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs,
2086
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs)
2087
+ )
2088
+ );
2089
+
2090
+ border-color: var(
2091
+ --_sf-hr-br-cr,
2092
+ prepareMediaVariable(
2093
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-cr
2094
+ )
2095
+ );
2096
+
2097
+ background-color: var(
2098
+ --_sf-hr-bd-cr,
2099
+ prepareMediaVariable(
2100
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-bd-cr
2101
+ )
2102
+ );
2103
+ border-style: var(
2104
+ --_sf-hr-br-se,
2105
+ prepareMediaVariable(
2106
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-se
2107
+ )
2108
+ );
2109
+ border-width: var(
2110
+ --_sf-hr-br-wh,
2111
+ prepareMediaVariable(
2112
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-wh
2113
+ )
2114
+ );
2115
+
2116
+ box-shadow: var(
2117
+ --_sf-hr-sw-ae,
2118
+ prepareMediaVariable(
2119
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-ae
2120
+ )
2121
+ )
2122
+ var(
2123
+ --_sf-hr-sw-br,
2124
+ prepareMediaVariable(
2125
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-br
2126
+ )
2127
+ )
2128
+ var(
2129
+ --_sf-hr-sw-sd,
2130
+ prepareMediaVariable(
2131
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-sd
2132
+ )
2133
+ )
2134
+ var(
2135
+ --_sf-hr-sw-cr,
2136
+ prepareMediaVariable(
2137
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-cr
2138
+ )
2139
+ );
2140
+
2141
+ // font is pending
2142
+
2143
+ color: var(
2144
+ --_sf-hr-cr,
2145
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-cr)
2146
+ );
2147
+ font-family:
2148
+ var(
2149
+ --_sf-hr-ft-fy,
2150
+ prepareMediaVariable(
2151
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-fy
2152
+ )
2153
+ ),
2154
+ sans-serif;
2155
+ font-size: var(
2156
+ --_sf-hr-ft-se,
2157
+ prepareMediaVariable(
2158
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se
2159
+ )
2160
+ );
2161
+ font-weight: var(
2162
+ --_sf-hr-ft-wt,
2163
+ prepareMediaVariable(
2164
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-wt
2165
+ )
2166
+ );
2167
+ font-style: var(
2168
+ --_sf-hr-ft-se-ic,
2169
+ prepareMediaVariable(
2170
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se-ic
2171
+ )
2172
+ );
2173
+ text-align: var(
2174
+ --_sf-hr-tt-an,
2175
+ prepareMediaVariable(
2176
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-tt-an
2177
+ )
2178
+ );
2179
+ letter-spacing: var(
2180
+ --_sf-hr-lr-sg,
2181
+ prepareMediaVariable(
2182
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-lr-sg
2183
+ )
2184
+ );
2185
+ line-height: var(
2186
+ --_sf-hr-le-ht,
2187
+ prepareMediaVariable(
2188
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-le-ht-dc
2189
+ )
2190
+ );
2191
+ text-decoration: var(
2192
+ --_sf-hr-ue,
2193
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ue)
2194
+ );
2195
+
2196
+ &[data-background-shape="circle"] {
2197
+ border-radius: 50%;
2198
+ }
2199
+ // &[data-background-shape="square"] {
2200
+ // border-radius: 5px;
2201
+ // }
2202
+ &[data-background-shape="capsule"] {
2203
+ border-radius: 40px; /* Full pill shape */
2204
+ box-sizing: border-box;
2205
+ }
2206
+
2207
+ &:hover {
2208
+ --_sf-hr-bd-cr: var(
2209
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-bd-cr,
2210
+ var(
2211
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-bd-cr,
2212
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-bd-cr)
2213
+ )
2214
+ );
2215
+ --_sf-hr-br-cr: var(
2216
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-cr,
2217
+ var(
2218
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-cr,
2219
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-cr)
2220
+ )
2221
+ );
2222
+ --_sf-hr-br-se: var(
2223
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-se,
2224
+ var(
2225
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-se,
2226
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-se)
2227
+ )
2228
+ );
2229
+ --_sf-hr-br-wh: var(
2230
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-wh,
2231
+ var(
2232
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-wh,
2233
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-wh)
2234
+ )
2235
+ );
2236
+ --_sf-hr-br-bs: var(
2237
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs,
2238
+ var(
2239
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs,
2240
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs)
2241
+ )
2242
+ );
2243
+
2244
+ // new
2245
+ --_sf-hr-sw-ae: var(
2246
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-ae,
2247
+ var(
2248
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-ae,
2249
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-ae)
2250
+ )
2251
+ );
2252
+ --_sf-hr-sw-br: var(
2253
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-br,
2254
+ var(
2255
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-br,
2256
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-br)
2257
+ )
2258
+ );
2259
+ --_sf-hr-sw-hr: var(
2260
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-hr,
2261
+ var(
2262
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-hr,
2263
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-hr)
2264
+ )
2265
+ );
2266
+ --_sf-hr-sw-cr: var(
2267
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-cr,
2268
+ var(
2269
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-cr,
2270
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-cr)
2271
+ )
2272
+ );
2273
+
2274
+ // for font
2275
+
2276
+ --_sf-hr-cr: var(
2277
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-cr,
2278
+ var(
2279
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-cr,
2280
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-cr)
2281
+ )
2282
+ );
2283
+ --_sf-hr-ft-fy: var(
2284
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-fy,
2285
+ var(
2286
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-fy,
2287
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-fy)
2288
+ )
2289
+ );
2290
+ --_sf-hr-ft-se: var(
2291
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se,
2292
+ var(
2293
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se,
2294
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se)
2295
+ )
2296
+ );
2297
+ --_sf-hr-ft-wt: var(
2298
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-wt,
2299
+ var(
2300
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-wt,
2301
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-wt)
2302
+ )
2303
+ );
2304
+ --_sf-hr-ft-se-ic: var(
2305
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se-ic,
2306
+ var(
2307
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se-ic,
2308
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se-ic)
2309
+ )
2310
+ );
2311
+ --_sf-hr-tt-an: var(
2312
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-an,
2313
+ var(
2314
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-an,
2315
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-an)
2316
+ )
2317
+ );
2318
+ --_sf-hr-lr-sg: var(
2319
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-lr-sg,
2320
+ var(
2321
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-lr-sg,
2322
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-lr-sg)
2323
+ )
2324
+ );
2325
+ --_sf-hr-le-ht: var(
2326
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-le-ht,
2327
+ var(
2328
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-le-ht,
2329
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-le-ht)
2330
+ )
2331
+ );
2332
+
2333
+ --_sf-hr-ue: var(
2334
+ --_ctm-mob-dn-on-ve-se-hr-se-ue,
2335
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
2336
+ );
2337
+ }
2338
+
2339
+ &.child {
2340
+ border: 0;
2341
+ border-radius: 0;
2342
+ border-bottom: 2px solid var(--_gray-200);
2343
+ }
2344
+ &[data-selected="true"] {
2345
+ --_sf-sd-bd-cr: var(
2346
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-bd-cr,
2347
+ var(
2348
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-bd-cr,
2349
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-bd-cr)
2350
+ )
2351
+ );
2352
+ --_sf-sd-br-cr: var(
2353
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-cr,
2354
+ var(
2355
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-cr,
2356
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-cr)
2357
+ )
2358
+ );
2359
+ --_sf-sd-br-se: var(
2360
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-se,
2361
+ var(
2362
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-se,
2363
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-se)
2364
+ )
2365
+ );
2366
+ --_sf-sd-br-wh: var(
2367
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-wh,
2368
+ var(
2369
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-wh,
2370
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-wh)
2371
+ )
2372
+ );
2373
+ --_sf-sd-br-bs: var(
2374
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-rs,
2375
+ var(
2376
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-rs,
2377
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-rs)
2378
+ )
2379
+ );
2380
+
2381
+ // new
2382
+ --_sf-sd-sw-ae: var(
2383
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
2384
+ var(
2385
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-ae,
2386
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-ae)
2387
+ )
2388
+ );
2389
+ --_sf-sd-sw-br: var(
2390
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
2391
+ var(
2392
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-br,
2393
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-br)
2394
+ )
2395
+ );
2396
+ --_sf-sd-sw-hr: var(
2397
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-hr,
2398
+ var(
2399
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-hr,
2400
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-hr)
2401
+ )
2402
+ );
2403
+ --_sf-sd-sw-cr: var(
2404
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
2405
+ var(
2406
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-cr,
2407
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-cr)
2408
+ )
2409
+ );
2410
+
2411
+ // for font
2412
+
2413
+ --_sf-sd-cr: var(
2414
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-cr,
2415
+ var(
2416
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-cr,
2417
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-cr)
2418
+ )
2419
+ );
2420
+ --_sf-sd-ft-fy: var(
2421
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-fy,
2422
+ var(
2423
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-fy,
2424
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-fy)
2425
+ )
2426
+ );
2427
+ --_sf-sd-ft-se: var(
2428
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se,
2429
+ var(
2430
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se,
2431
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se)
2432
+ )
2433
+ );
2434
+ --_sf-sd-ft-wt: var(
2435
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-wt,
2436
+ var(
2437
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-wt,
2438
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-wt)
2439
+ )
2440
+ );
2441
+ --_sf-sd-ft-se-ic: var(
2442
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se-ic,
2443
+ var(
2444
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se-ic,
2445
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se-ic)
2446
+ )
2447
+ );
2448
+ --_sf-sd-tt-an: var(
2449
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-an,
2450
+ var(
2451
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-an,
2452
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-an)
2453
+ )
2454
+ );
2455
+ --_sf-sd-lr-sg: var(
2456
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-lr-sg,
2457
+ var(
2458
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-lr-sg,
2459
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-lr-sg)
2460
+ )
2461
+ );
2462
+ --_sf-sd-le-ht: var(
2463
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-le-ht,
2464
+ var(
2465
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-le-ht,
2466
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-le-ht)
2467
+ )
2468
+ );
2469
+
2470
+ --_sf-sd-ue: var(
2471
+ --_ctm-mob-dn-on-ve-se-sd-se-ue,
2472
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
2473
+ );
2474
+
2475
+ border-color: var(
2476
+ --_sf-sd-br-cr,
2477
+ prepareMediaVariable(
2478
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-cr
2479
+ )
2480
+ );
2481
+
2482
+ background-color: var(
2483
+ --_sf-sd-bd-cr,
2484
+ prepareMediaVariable(
2485
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-bd-cr
2486
+ )
2487
+ );
2488
+ border-style: var(
2489
+ --_sf-sd-br-se,
2490
+ prepareMediaVariable(
2491
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-se
2492
+ )
2493
+ );
2494
+ border-width: var(
2495
+ --_sf-sd-br-wh,
2496
+ prepareMediaVariable(
2497
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-wh
2498
+ )
2499
+ );
2500
+
2501
+ box-shadow: var(
2502
+ --_sf-sd-sw-ae,
2503
+ prepareMediaVariable(
2504
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-ae
2505
+ )
2506
+ )
2507
+ var(
2508
+ --_sf-sd-sw-br,
2509
+ prepareMediaVariable(
2510
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-br
2511
+ )
2512
+ )
2513
+ var(
2514
+ --_sf-sd-sw-sd,
2515
+ prepareMediaVariable(
2516
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-sd
2517
+ )
2518
+ )
2519
+ var(
2520
+ --_sf-sd-sw-cr,
2521
+ prepareMediaVariable(
2522
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-cr
2523
+ )
2524
+ );
2525
+ // font is pending
2526
+
2527
+ color: var(
2528
+ --_sf-sd-cr,
2529
+ prepareMediaVariable(
2530
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-cr
2531
+ )
2532
+ );
2533
+ font-family:
2534
+ var(
2535
+ --_sf-sd-ft-fy,
2536
+ prepareMediaVariable(
2537
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-fy
2538
+ )
2539
+ ),
2540
+ sans-serif;
2541
+ font-size: var(
2542
+ --_sf-sd-ft-se,
2543
+ prepareMediaVariable(
2544
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se
2545
+ )
2546
+ );
2547
+ font-weight: var(
2548
+ --_sf-sd-ft-wt,
2549
+ prepareMediaVariable(
2550
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-wt
2551
+ )
2552
+ );
2553
+ font-style: var(
2554
+ --_sf-sd-ft-se-ic,
2555
+ prepareMediaVariable(
2556
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se-ic
2557
+ )
2558
+ );
2559
+ text-align: var(
2560
+ --_sf-sd-tt-an,
2561
+ prepareMediaVariable(
2562
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-tt-an
2563
+ )
2564
+ );
2565
+ letter-spacing: var(
2566
+ --_sf-sd-lr-sg,
2567
+ prepareMediaVariable(
2568
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-lr-sg
2569
+ )
2570
+ );
2571
+ line-height: var(
2572
+ --_sf-sd-le-ht,
2573
+ prepareMediaVariable(
2574
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-le-ht-dc
2575
+ )
2576
+ );
2577
+ text-decoration: var(
2578
+ --_sf-sd-ue,
2579
+ prepareMediaVariable(
2580
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ue
2581
+ )
2582
+ );
2583
+ }
2584
+
2585
+ &.selected__child {
2586
+ border: 0px;
2587
+ border-bottom: 2px solid var(--_primary-400);
2588
+ }
2589
+ // &.disabled {
2590
+ // cursor: not-allowed;
2591
+ // opacity: 0.4;
2592
+ // position: relative;
2593
+ // overflow: hidden;
2594
+ // &::after {
2595
+ // content: "";
2596
+ // width: 172%;
2597
+ // height: 1px;
2598
+ // position: absolute;
2599
+ // background: #f00;
2600
+ // left: -14px;
2601
+ // transform: rotate(48deg);
2602
+ // /* -webkit-transform: rotate(48deg); */
2603
+ // -moz-transform: rotate(48deg);
2604
+ // top: 14px;
2605
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
2606
+ // }
2607
+ // &::before {
2608
+ // content: "";
2609
+ // width: 164%;
2610
+ // height: 1px;
2611
+ // position: absolute;
2612
+ // background: #f00;
2613
+ // left: -14px;
2614
+ // transform: rotate(-48deg);
2615
+ // -webkit-transform: rotate(-48deg);
2616
+ // -moz-transform: rotate(-48deg);
2617
+ // top: 14px;
2618
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
2619
+ // }
2620
+ // }
2621
+ position: relative;
2622
+
2623
+ &.disabled {
2624
+ color: #aaa;
2625
+ background-color: #f9f9f9;
2626
+ border-color: #ddd;
2627
+ cursor: not-allowed;
2628
+ overflow: hidden;
2629
+ }
2630
+
2631
+ .cross-line {
2632
+ position: absolute;
2633
+ inset: 0;
2634
+ background-color: #cccccc;
2635
+ clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
2636
+ pointer-events: none;
2637
+ }
2638
+ }
2639
+ }
2640
+ }
2641
+ &[data-show-divider="true"] {
2642
+ &:not(:last-child)::after {
2643
+ content: "";
2644
+ position: relative;
2645
+ background-color: #000;
2646
+ height: 1px;
2647
+ width: 100%;
2648
+ display: flex;
2649
+ top: calc(
2650
+ calc(
2651
+ var(
2652
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
2653
+ var(
2654
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
2655
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
2656
+ )
2657
+ ) +
2658
+ 10px
2659
+ ) /
2660
+ 2
2661
+ );
2662
+ }
2663
+ }
2664
+
2665
+ .title {
2666
+ margin-bottom: 4px;
2667
+ color: var(
2668
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
2669
+ var(
2670
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
2671
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr)
2672
+ )
2673
+ );
2674
+ font-family:
2675
+ var(
2676
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy,
2677
+ var(
2678
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy,
2679
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy)
2680
+ )
2681
+ ),
2682
+ sans-serif;
2683
+ font-size: var(
2684
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se,
2685
+ var(
2686
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se,
2687
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se)
2688
+ )
2689
+ );
2690
+ font-weight: var(
2691
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt,
2692
+ var(
2693
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt,
2694
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt)
2695
+ )
2696
+ );
2697
+ font-style: var(
2698
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic,
2699
+ var(
2700
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic,
2701
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic)
2702
+ )
2703
+ );
2704
+ text-align: var(
2705
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an,
2706
+ var(
2707
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an,
2708
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an)
2709
+ )
2710
+ );
2711
+ letter-spacing: var(
2712
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg,
2713
+ var(
2714
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg,
2715
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg)
2716
+ )
2717
+ );
2718
+ line-height: var(
2719
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht,
2720
+ var(
2721
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht,
2722
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht)
2723
+ )
2724
+ );
2725
+ text-decoration: var(
2726
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue,
2727
+ var(
2728
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue,
2729
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue)
2730
+ )
2731
+ );
2732
+ }
2733
+ }
2734
+ //Dropdown
2735
+ .est__dropdown__main {
2736
+ position: relative;
2737
+ width: 100%;
1190
2738
  display: flex;
1191
- flex-direction: row;
1192
- gap: 8px;
2739
+ flex-direction: column;
2740
+ gap: var(
2741
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
2742
+ var(
2743
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
2744
+ var(--_ctm-dn-lt-on-te-ve-sg)
2745
+ )
2746
+ );
2747
+
2748
+ padding: var(
2749
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-os-pg,
2750
+ var(
2751
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-os-pg,
2752
+ var(--_ctm-dn-lt-dn-dy-se-dn-os-pg)
2753
+ )
2754
+ );
2755
+
2756
+ margin-top: 10px;
2757
+
2758
+ label {
2759
+ font-size: var(
2760
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se,
2761
+ var(
2762
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se,
2763
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se)
2764
+ )
2765
+ );
2766
+ font-family: var(
2767
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy,
2768
+ var(
2769
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy,
2770
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy)
2771
+ )
2772
+ );
2773
+ color: var(
2774
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
2775
+ var(
2776
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
2777
+ var(--_gray-700, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr))
2778
+ )
2779
+ );
2780
+ font-weight: var(
2781
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt,
2782
+ var(
2783
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt,
2784
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt)
2785
+ )
2786
+ );
2787
+ text-decoration: var(
2788
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue,
2789
+ var(
2790
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue,
2791
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue)
2792
+ )
2793
+ );
2794
+ letter-spacing: var(
2795
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg,
2796
+ var(
2797
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg,
2798
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg)
2799
+ )
2800
+ );
2801
+ text-align: var(
2802
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an,
2803
+ var(
2804
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an,
2805
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an)
2806
+ )
2807
+ );
2808
+ line-height: var(
2809
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht,
2810
+ var(
2811
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht,
2812
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht)
2813
+ )
2814
+ );
2815
+ display: block;
2816
+ }
2817
+
2818
+ .est__dropdown {
2819
+ cursor: pointer;
2820
+ position: relative;
2821
+ color: var(--_gray-700);
2822
+
2823
+ border-radius: 6px;
2824
+ background-color: #fff;
2825
+ display: flex;
2826
+ justify-content: space-between;
2827
+ align-items: center;
2828
+ width: 100%;
2829
+ .value__selected {
2830
+ width: 100%;
2831
+ }
1193
2832
 
1194
- .item {
1195
- background-color: #ffffff;
2833
+ &.open .list {
2834
+ display: none;
2835
+ margin-top: var(
2836
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-on-ad-lt-sg,
2837
+ var(
2838
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-on-ad-lt-sg,
2839
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-on-ad-lt-sg)
2840
+ )
2841
+ );
2842
+ gap: var(
2843
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
2844
+ var(
2845
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
2846
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg)
2847
+ )
2848
+ );
2849
+ background-color: var(
2850
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr,
2851
+ var(
2852
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr,
2853
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr)
2854
+ )
2855
+ );
2856
+ }
1196
2857
 
1197
- &.selected_item {
1198
- width: fit-content;
1199
- border: 1px solid #000000;
2858
+ .list {
2859
+ display: flex !important;
2860
+ flex-direction: column;
2861
+ gap: var(
2862
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
2863
+ var(
2864
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
2865
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg)
2866
+ )
2867
+ );
2868
+ border: var(
2869
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-wh,
2870
+ var(
2871
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-wh,
2872
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-wh)
2873
+ )
2874
+ )
2875
+ var(
2876
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-se,
2877
+ var(
2878
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-se,
2879
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-se)
2880
+ )
2881
+ )
2882
+ var(
2883
+ --_gray-200,
2884
+ var(
2885
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-cr,
2886
+ var(
2887
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-cr,
2888
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-cr)
2889
+ )
2890
+ )
2891
+ );
2892
+ border-radius: var(
2893
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-rs,
2894
+ var(
2895
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-rs,
2896
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-rs)
2897
+ )
2898
+ );
2899
+ box-shadow: var(
2900
+ --_show-shadow-dn-se,
2901
+ var(
2902
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-ae,
2903
+ var(
2904
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-ae,
2905
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-ae)
2906
+ )
2907
+ )
2908
+ var(
2909
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-br,
2910
+ var(
2911
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-br,
2912
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-br)
2913
+ )
2914
+ )
2915
+ var(
2916
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-sd,
2917
+ var(
2918
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-sd,
2919
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-sd)
2920
+ )
2921
+ )
2922
+ var(
2923
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-cr,
2924
+ var(
2925
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-cr,
2926
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-cr)
2927
+ )
2928
+ )
2929
+ );
2930
+ position: absolute;
2931
+ top: 100%;
2932
+ left: 0;
2933
+ width: 100%;
2934
+ background-color: var(
2935
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr,
2936
+ var(
2937
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr,
2938
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr)
2939
+ )
2940
+ );
2941
+ border-radius: 4px;
2942
+ z-index: var(--_higher-zIndex);
2943
+ max-height: 200px;
2944
+ overflow-y: auto;
2945
+
2946
+ &.top {
2947
+ bottom: 100%;
2948
+ top: auto;
2949
+ }
2950
+
2951
+ .list__option {
2952
+ padding: var(
2953
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-pg,
2954
+ var(
2955
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-pg,
2956
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-pg)
2957
+ )
2958
+ );
2959
+ cursor: pointer;
2960
+
2961
+ &:hover {
2962
+ background-color: var(--_primary-25);
2963
+ color: var(--_primary-400);
2964
+ }
2965
+
2966
+ &.disabled {
2967
+ cursor: not-allowed;
2968
+ opacity: 0.4;
2969
+ }
2970
+ }
1200
2971
  }
1201
- .select__group__item {
1202
- transition: width 0.3s ease;
1203
- width: 30px;
1204
- height: 30px;
1205
- border: 1px solid #d0d5dd;
1206
- cursor: pointer;
1207
- overflow: hidden;
2972
+ }
2973
+ }
2974
+
2975
+ // variant dropdown selection
2976
+ .var__drop__selection {
2977
+ display: flex;
2978
+ width: 100%;
2979
+ gap: var(
2980
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
2981
+ var(
2982
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
2983
+ var(
2984
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
2985
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
2986
+ )
2987
+ )
2988
+ );
1208
2989
 
1209
- &.selected {
1210
- width: 45px;
1211
- border: 1px solid #000;
2990
+ flex-direction: row;
2991
+ &[data-dropdown-style="Vertical List"] {
2992
+ flex-direction: column;
2993
+ gap: var(
2994
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
2995
+ var(
2996
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
2997
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
2998
+ )
2999
+ );
3000
+ }
3001
+ .dropdown_wrapper {
3002
+ position: relative;
3003
+ &[data-show-divider="true"] {
3004
+ &:not(:last-child)::after {
3005
+ content: "";
3006
+ position: relative;
3007
+ background-color: #000;
3008
+ height: 1px;
3009
+ width: 100%;
3010
+ display: flex;
3011
+ top: calc(
3012
+ calc(
3013
+ var(
3014
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3015
+ var(
3016
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3017
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
3018
+ )
3019
+ ) +
3020
+ 10px
3021
+ ) /
3022
+ 2
3023
+ );
1212
3024
  }
3025
+ }
1213
3026
 
1214
- &.disabled {
3027
+ &[data-show-item-divider="true"] {
3028
+ .est__dropdown__main {
3029
+ .est__dropdown {
3030
+ .list {
3031
+ :not(:last-child).list__option {
3032
+ &::after {
3033
+ content: "";
3034
+ position: relative;
3035
+ background-color: #000;
3036
+ height: 1px;
3037
+ width: 100%;
3038
+ display: flex;
3039
+ top: calc(
3040
+ var(
3041
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
3042
+ var(
3043
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
3044
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg)
3045
+ )
3046
+ ) /
3047
+ 2
3048
+ );
3049
+ }
3050
+ }
3051
+ }
3052
+ }
3053
+ }
3054
+ }
3055
+ }
3056
+ & > div {
3057
+ width: 100%;
3058
+ }
3059
+ }
3060
+ // Quantity Fields
3061
+ .field__group {
3062
+ // display: flex;
3063
+ // flex-wrap: wrap;
3064
+ // gap: 8px;
3065
+ display: grid;
3066
+ grid-template-columns: repeat(
3067
+ auto-fit,
3068
+ minmax(
3069
+ var(
3070
+ --_ctm-mob-var-lt-mn-cn-wh,
3071
+ var(--_ctm-tab-var-lt-mn-cn-wh, var(--_ctm-var-lt-mn-cn-wh))
3072
+ ),
3073
+ var(--_ctm-mob-var-lt-mn-cn-wh)
3074
+ )
3075
+ );
3076
+ gap: var(
3077
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-rw-sg,
3078
+ var(
3079
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-rw-sg,
3080
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-rw-sg)
3081
+ )
3082
+ );
3083
+ .field__group__item {
3084
+ font-size: 16px;
3085
+ display: flex;
3086
+ flex-direction: column;
3087
+ align-items: center;
3088
+ justify-content: center;
3089
+ gap: 8px;
3090
+ input[type="number"] {
3091
+ // width: 70px !important;
3092
+ width: 100%;
3093
+ border: 1px solid var(--_gray-300);
3094
+ padding-inline: 10px;
3095
+ border-radius: 4px;
3096
+ text-align: center;
3097
+ height: 40px;
3098
+ &:focus-within {
3099
+ border: 1px solid var(--_primary-200);
3100
+ box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
3101
+ }
3102
+ &:disabled {
1215
3103
  cursor: not-allowed;
1216
3104
  opacity: 0.4;
1217
3105
  }
1218
- .product-select-image {
1219
- width: 40px;
1220
- height: 40px;
1221
- object-fit: contain;
3106
+ }
3107
+ }
3108
+ }
3109
+ // Enter quantity styles
3110
+ .quantiy__details {
3111
+ display: flex;
3112
+ flex-direction: column;
3113
+ gap: var(
3114
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg,
3115
+ var(
3116
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg,
3117
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg)
3118
+ )
3119
+ );
3120
+ padding: var(
3121
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg,
3122
+ var(
3123
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg,
3124
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg)
3125
+ )
3126
+ );
3127
+
3128
+ .title {
3129
+ display: flex;
3130
+ justify-content: space-between;
3131
+ align-items: center;
3132
+ font-weight: 600;
3133
+ font-size: 18px;
3134
+ & > button {
3135
+ border-bottom: 1px solid var(--_gray-400);
3136
+ color: var(--_gray-600);
3137
+ font-size: 14px;
3138
+ }
3139
+ }
3140
+ .fit__details {
3141
+ display: flex;
3142
+ flex-direction: column;
3143
+ gap: 12px;
3144
+ .fit__desc {
3145
+ display: flex;
3146
+ flex-direction: column;
3147
+ gap: var(
3148
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg,
3149
+ var(
3150
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg,
3151
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg)
3152
+ )
3153
+ );
3154
+
3155
+ font-size: 16px;
3156
+ color: var(--_gray-900);
3157
+ .each__price {
3158
+ font-weight: 600;
1222
3159
  }
1223
3160
  }
1224
3161
  }
1225
3162
  }
1226
- }
1227
- // Select Fit and Size
1228
- .select__fit {
1229
- font-size: 16px;
1230
- color: var(--_gray-500);
1231
- display: flex;
1232
- flex-direction: column;
1233
- gap: 8px;
3163
+ .grouped_items {
3164
+ display: flex;
3165
+ flex-direction: column;
3166
+ gap: var(
3167
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3168
+ var(
3169
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3170
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
3171
+ )
3172
+ );
3173
+
3174
+ .tab__accordion {
3175
+ display: flex;
3176
+ flex-direction: column;
3177
+ gap: var(
3178
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3179
+ var(
3180
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3181
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
3182
+ )
3183
+ );
3184
+
3185
+ .tab__container {
3186
+ display: flex;
3187
+ flex-direction: column;
3188
+
3189
+ .tab {
3190
+ &:first-child {
3191
+ margin-bottom: var(
3192
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
3193
+ var(
3194
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
3195
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg)
3196
+ )
3197
+ );
3198
+ }
3199
+ }
3200
+
3201
+ .tab__content {
3202
+ display: flex;
3203
+ flex-direction: column;
3204
+ padding: var(
3205
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg,
3206
+ var(
3207
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg,
3208
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg)
3209
+ )
3210
+ );
3211
+
3212
+ .field__group {
3213
+ gap: var(
3214
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg,
3215
+ var(
3216
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg,
3217
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg)
3218
+ )
3219
+ );
3220
+
3221
+ .field__group__item {
3222
+ gap: var(
3223
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg,
3224
+ var(
3225
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg,
3226
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg)
3227
+ )
3228
+ );
3229
+ }
3230
+ }
3231
+ }
3232
+ }
3233
+ }
1234
3234
 
1235
- padding: 12px;
3235
+ &[data-show-divider="true"] {
3236
+ & > div {
3237
+ &:not(:last-child)::after {
3238
+ content: "";
3239
+ position: relative;
3240
+ background-color: #000;
3241
+ height: 1px;
3242
+ width: 100%;
3243
+ display: flex;
3244
+ top: calc(
3245
+ var(
3246
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3247
+ var(
3248
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3249
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
3250
+ )
3251
+ ) /
3252
+ 2
3253
+ );
3254
+ }
3255
+ }
1236
3256
 
1237
- .title {
1238
- margin-bottom: 4px;
1239
- color: #000000;
1240
- font-size: 16px;
1241
- line-height: 150%;
3257
+ .tab__accordion {
3258
+ &:not(:last-child)::after {
3259
+ content: "";
3260
+ position: relative;
3261
+ background-color: #000;
3262
+ height: 1px;
3263
+ width: 100%;
3264
+ display: flex;
3265
+ top: calc(
3266
+ var(
3267
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3268
+ var(
3269
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3270
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
3271
+ )
3272
+ ) /
3273
+ 2
3274
+ );
3275
+ }
3276
+ }
3277
+ }
1242
3278
  }
1243
- .select__group {
3279
+ // tabs
3280
+ .tabs__container {
1244
3281
  display: flex;
1245
- gap: 8px;
1246
- flex-wrap: wrap;
1247
- margin-bottom: 10px;
1248
- flex-direction: row;
1249
- gap: 8px;
1250
-
1251
- .select__group__item {
1252
- transition: color 0.3s ease;
1253
- padding: 5px 12px;
1254
- border-radius: 6px;
1255
- border: 1px solid var(--_gray-200);
1256
- font-size: 16px;
3282
+ position: relative;
3283
+ .tab {
3284
+ flex: 1;
3285
+ padding-block: 20px;
1257
3286
  font-weight: 600;
3287
+ text-align: center;
1258
3288
  cursor: pointer;
1259
- border: 1px solid #d0d5dd;
1260
- color: #000000;
1261
- font-size: 16px;
1262
- line-height: 150%;
3289
+ position: relative;
3290
+ &.tab__active {
3291
+ font-weight: bold;
3292
+ }
3293
+ }
3294
+ .tab__active-indicator {
3295
+ position: absolute;
3296
+ bottom: 0;
3297
+ left: 0;
3298
+ height: 2px;
3299
+ background-color: #000;
3300
+ transition:
3301
+ left 0.3s ease,
3302
+ width 0.3s ease;
3303
+ }
3304
+ }
1263
3305
 
1264
- &.child {
1265
- border: 0;
1266
- border-radius: 0;
1267
- border-bottom: 2px solid var(--_gray-200);
3306
+ // accordion tabs
3307
+ .tab__accordion_wrapper {
3308
+ .tab__accordion {
3309
+ display: flex;
3310
+ flex-direction: column;
3311
+ padding: var(
3312
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg,
3313
+ var(
3314
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg,
3315
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg)
3316
+ )
3317
+ );
3318
+
3319
+ .tab__container {
3320
+ display: flex;
3321
+ flex-direction: column;
3322
+ gap: var(
3323
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg,
3324
+ var(
3325
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg,
3326
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg)
3327
+ )
3328
+ );
3329
+
3330
+ .tab_acc_wrapper {
3331
+ display: flex;
3332
+ flex-direction: column;
3333
+ gap: var(
3334
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-ad-cr-sg,
3335
+ var(
3336
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-ad-cr-sg,
3337
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-ad-cr-sg)
3338
+ )
3339
+ );
3340
+
3341
+ padding: var(
3342
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-vl-pg,
3343
+ var(
3344
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-vl-pg,
3345
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-vl-pg)
3346
+ )
3347
+ )
3348
+ var(
3349
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-hl-pg,
3350
+ var(
3351
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-hl-pg,
3352
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-hl-pg)
3353
+ )
3354
+ );
3355
+
3356
+ .tab {
3357
+ display: flex;
3358
+ padding-inline: 2px;
3359
+ position: relative;
3360
+ cursor: pointer;
3361
+ flex-direction: row;
3362
+ &[data-expand-icon="Left"] {
3363
+ flex-direction: row-reverse;
3364
+ justify-content: flex-end;
3365
+ }
3366
+ &[data-item-dividers="true"] {
3367
+ &::after {
3368
+ content: "";
3369
+ position: absolute;
3370
+ bottom: 0;
3371
+ height: 2px;
3372
+ width: 100%;
3373
+ border-bottom: 1px solid var(--_gray-200);
3374
+ }
3375
+ }
3376
+ span {
3377
+ padding-block: 12px;
3378
+ display: inline-block;
3379
+ }
3380
+ .active {
3381
+ border-bottom: 2px solid var(--_primary-400);
3382
+ }
3383
+ &.inactive {
3384
+ height: 0px;
3385
+ }
3386
+ }
3387
+ .tab__content {
3388
+ &.d-none {
3389
+ display: none;
3390
+ }
3391
+ &.d-block {
3392
+ display: block;
3393
+ }
3394
+ }
3395
+ }
1268
3396
  }
1269
- &.selected {
1270
- border: 1px solid var(--_primary-200);
1271
- background-color: var(--_primary-25);
1272
- color: var(--_primary-400);
3397
+ }
1273
3398
 
1274
- border: 1pxsolid #000000;
1275
- color: #000000;
1276
- font-weight: bold;
3399
+ &[data-show-dividers="true"] {
3400
+ .tab__accordion {
3401
+ .tab__container {
3402
+ .tab_acc_wrapper {
3403
+ &:not(:last-child)::after {
3404
+ content: "";
3405
+ position: relative;
3406
+ background-color: #000;
3407
+ height: 1px;
3408
+ width: 100%;
3409
+ display: flex;
3410
+ top: calc(
3411
+ var(
3412
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg,
3413
+ var(
3414
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg,
3415
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg)
3416
+ )
3417
+ ) /
3418
+ 2
3419
+ );
3420
+ }
3421
+ }
3422
+ }
1277
3423
  }
3424
+ }
1278
3425
 
1279
- &.selected__child {
1280
- border: 0px;
1281
- border-bottom: 2px solid var(--_primary-400);
3426
+ &[data-icon-position="Left"] {
3427
+ .tab__accordion {
3428
+ .tab__container {
3429
+ .tab_acc_wrapper {
3430
+ .tab {
3431
+ flex-direction: row-reverse;
3432
+ align-self: flex-start;
3433
+ }
3434
+ }
3435
+ }
1282
3436
  }
1283
- &.disabled {
1284
- cursor: not-allowed;
1285
- opacity: 0.4;
1286
- position: relative;
1287
- overflow: hidden;
1288
- &::after {
1289
- content: "";
1290
- width: 172%;
1291
- height: 1px;
1292
- position: absolute;
1293
- background: #f00;
1294
- left: -14px;
1295
- transform: rotate(48deg);
1296
- /* -webkit-transform: rotate(48deg); */
1297
- -moz-transform: rotate(48deg);
1298
- top: 14px;
1299
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
3437
+ }
3438
+ }
3439
+
3440
+ // table
3441
+ .table_container,
3442
+ .tab__content {
3443
+ .table__class {
3444
+ border: 1px solid var(--_gray-200);
3445
+ border-radius: 8px;
3446
+ .custom__table {
3447
+ border: 1px solid var(--_gray-200);
3448
+ width: 100%;
3449
+ table-layout: fixed;
3450
+ // height: 300px;
3451
+
3452
+ border-collapse: collapse;
3453
+ &[data-header-divider="true"] {
3454
+ thead tr th {
3455
+ border-bottom: 1px solid var(--_gray-200);
3456
+ }
3457
+ }
3458
+ &[data-row-divider="true"] {
3459
+ tbody tr td {
3460
+ border-bottom: 1px solid var(--_gray-200);
3461
+ }
3462
+ }
3463
+ &[data-column-divider="true"] {
3464
+ tbody tr td,
3465
+ thead tr th {
3466
+ border-right: 1px solid var(--_gray-200);
3467
+ }
3468
+
3469
+ tbody tr td:last-child,
3470
+ thead tr th:last-child {
3471
+ border-right: none;
3472
+ }
1300
3473
  }
1301
- &::before {
3474
+ &[data-alternative-row-colors="true"] {
3475
+ tbody tr:nth-child(odd) {
3476
+ background-color: var(--_gray-300);
3477
+ width: 100%;
3478
+ }
3479
+ }
3480
+ thead {
3481
+ height: var(
3482
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht,
3483
+ var(
3484
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht,
3485
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht)
3486
+ )
3487
+ );
3488
+ th {
3489
+ height: var(
3490
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht,
3491
+ var(
3492
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht,
3493
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht)
3494
+ )
3495
+ );
3496
+ text-align: var(
3497
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at,
3498
+ var(
3499
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at,
3500
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at)
3501
+ )
3502
+ );
3503
+ padding: var(
3504
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-cl-pg,
3505
+ var(
3506
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-cl-pg,
3507
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-cl-pg)
3508
+ )
3509
+ );
3510
+ background-color: var(--_gray-50);
3511
+ font-weight: 600;
3512
+ color: var(--_gray-600);
3513
+ word-break: break-word;
3514
+ }
3515
+ }
3516
+
3517
+ tbody {
3518
+ tr {
3519
+ border-bottom: 1px solid var(--_gray-200);
3520
+ height: var(
3521
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-ht,
3522
+ var(
3523
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-ht,
3524
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-ht)
3525
+ )
3526
+ );
3527
+ td {
3528
+ text-align: var(
3529
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at,
3530
+ var(
3531
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at,
3532
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at)
3533
+ )
3534
+ );
3535
+ padding: var(
3536
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-cl-pg,
3537
+ var(
3538
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-cl-pg,
3539
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-cl-pg)
3540
+ )
3541
+ );
3542
+ .disocunted__price {
3543
+ color: var(--_gray-900);
3544
+ }
3545
+ .actual__price {
3546
+ color: var(--_gray-500);
3547
+ }
3548
+ .qty__input {
3549
+ border: 1px solid var(--_gray-200);
3550
+ padding-inline: 10px;
3551
+ text-align: center;
3552
+ border-radius: 6px;
3553
+ height: 40px;
3554
+ }
3555
+ input[type="number"] {
3556
+ &:focus-within {
3557
+ border: 1px solid var(--_primary-200);
3558
+ box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
3559
+ }
3560
+ &:disabled {
3561
+ cursor: not-allowed;
3562
+ opacity: 0.4;
3563
+ }
3564
+ }
3565
+ }
3566
+ }
3567
+ }
3568
+ }
3569
+ }
3570
+ &[data-show-divider="true"] {
3571
+ & > div {
3572
+ &:not(:last-child)::after {
1302
3573
  content: "";
1303
- width: 164%;
3574
+ position: relative;
3575
+ background-color: #000;
1304
3576
  height: 1px;
1305
- position: absolute;
1306
- background: #f00;
1307
- left: -14px;
1308
- transform: rotate(-48deg);
1309
- -webkit-transform: rotate(-48deg);
1310
- -moz-transform: rotate(-48deg);
1311
- top: 14px;
1312
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
3577
+ width: 100%;
3578
+ display: flex;
3579
+ top: calc(
3580
+ var(
3581
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3582
+ var(
3583
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
3584
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
3585
+ )
3586
+ ) /
3587
+ 2
3588
+ );
3589
+ }
3590
+ }
3591
+ }
3592
+ }
3593
+
3594
+ // horizontal tabs
3595
+ .tabs__main {
3596
+ &.tabs__vertical {
3597
+ .tabs {
3598
+ .tabs__container {
3599
+ flex-direction: column;
3600
+ min-width: 120px;
3601
+ }
3602
+ }
3603
+ }
3604
+ &.tabs__hr {
3605
+ .tabs {
3606
+ flex-direction: column;
3607
+ gap: var(
3608
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-ad-cr-sg,
3609
+ var(
3610
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-ad-cr-sg,
3611
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-ad-cr-sg)
3612
+ )
3613
+ );
3614
+
3615
+ .tabs__container {
3616
+ width: 100%;
3617
+ }
3618
+ }
3619
+ }
3620
+ .tabs {
3621
+ display: flex;
3622
+ gap: var(
3623
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tb-im-se-dt-se-tb-ad-cr-sg,
3624
+ var(
3625
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tb-im-se-dt-se-tb-ad-cr-sg,
3626
+ var(--_ctm-dn-tb-im-se-dt-se-tb-ad-cr-sg)
3627
+ )
3628
+ );
3629
+
3630
+ .tabs__container {
3631
+ display: flex;
3632
+ gap: var(
3633
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-sg,
3634
+ var(
3635
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-sg,
3636
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-sg)
3637
+ )
3638
+ );
3639
+
3640
+ .tab {
3641
+ display: flex;
3642
+ justify-content: var(--_tab-aliginment);
3643
+ padding: var(
3644
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-vl-pg,
3645
+ var(
3646
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-vl-pg,
3647
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-vl-pg)
3648
+ )
3649
+ )
3650
+ var(
3651
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-hl-pg,
3652
+ var(
3653
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-hl-pg,
3654
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-hl-pg)
3655
+ )
3656
+ );
3657
+ background-color: var(
3658
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-bd-cr,
3659
+ var(
3660
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-bd-cr,
3661
+ var(--_ctm-dn-tb-im-se-dt-se-bd-cr)
3662
+ )
3663
+ );
3664
+ border-color: var(
3665
+ --_show-border-im-se,
3666
+ var(
3667
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-cr,
3668
+ var(
3669
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-cr,
3670
+ var(--_ctm-dn-tb-im-se-dt-se-br-cr)
3671
+ )
3672
+ )
3673
+ );
3674
+ border-style: var(
3675
+ --_show-border-im-se,
3676
+ var(
3677
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-se,
3678
+ var(
3679
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-se,
3680
+ var(--_ctm-dn-tb-im-se-dt-se-br-se)
3681
+ )
3682
+ )
3683
+ );
3684
+ border-width: var(
3685
+ --_show-border-im-se,
3686
+ var(
3687
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-wh,
3688
+ var(
3689
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-wh,
3690
+ var(--_ctm-dn-tb-im-se-dt-se-br-wh)
3691
+ )
3692
+ )
3693
+ );
3694
+ border-radius: var(
3695
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs,
3696
+ var(
3697
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs,
3698
+ var(--_ctm-dn-tb-im-se-dt-se-br-rs)
3699
+ )
3700
+ );
3701
+ box-shadow: var(
3702
+ --_show-shadow-im-se,
3703
+ var(
3704
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-ae,
3705
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-ae)
3706
+ ),
3707
+ var(
3708
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-br,
3709
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-br)
3710
+ ),
3711
+ var(
3712
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-sd,
3713
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-sd)
3714
+ ),
3715
+ var(
3716
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-cr,
3717
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-cr)
3718
+ )
3719
+ );
3720
+ border-radius: var(
3721
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs,
3722
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs)
3723
+ );
3724
+
3725
+ &:hover {
3726
+ background-color: var(
3727
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-bd-cr,
3728
+ var(
3729
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-bd-cr,
3730
+ var(--_ctm-dn-tb-im-se-hr-se-bd-cr)
3731
+ )
3732
+ );
3733
+ border-color: var(
3734
+ --_show-border-im-se,
3735
+ var(
3736
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-cr,
3737
+ var(
3738
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-cr,
3739
+ var(--_ctm-dn-tb-im-se-hr-se-br-cr)
3740
+ )
3741
+ )
3742
+ );
3743
+ border-style: var(
3744
+ --_show-border-im-se,
3745
+ var(
3746
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-se,
3747
+ var(
3748
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-se,
3749
+ var(--_ctm-dn-tb-im-se-hr-se-br-se)
3750
+ )
3751
+ )
3752
+ );
3753
+ border-width: var(
3754
+ --_show-border-im-se,
3755
+ var(
3756
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-wh,
3757
+ var(
3758
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-wh,
3759
+ var(--_ctm-dn-tb-im-se-hr-se-br-wh)
3760
+ )
3761
+ )
3762
+ );
3763
+ border-radius: var(
3764
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-rs,
3765
+ var(
3766
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-rs,
3767
+ var(--_ctm-dn-tb-im-se-hr-se-br-rs)
3768
+ )
3769
+ );
3770
+ box-shadow: var(
3771
+ --_show-shadow-im-se,
3772
+ var(
3773
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-ae,
3774
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-ae)
3775
+ ),
3776
+ var(
3777
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-br,
3778
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-br)
3779
+ ),
3780
+ var(
3781
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-sd,
3782
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-sd)
3783
+ ),
3784
+ var(
3785
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-cr,
3786
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-cr)
3787
+ )
3788
+ );
3789
+ }
3790
+
3791
+ &.active {
3792
+ background-color: var(
3793
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-bd-cr,
3794
+ var(
3795
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-bd-cr,
3796
+ var(--_ctm-dn-tb-im-se-sd-se-bd-cr)
3797
+ )
3798
+ );
3799
+ border-color: var(
3800
+ --_show-border-im-se,
3801
+ var(
3802
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-cr,
3803
+ var(
3804
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-cr,
3805
+ var(--_ctm-dn-tb-im-se-sd-se-br-cr)
3806
+ )
3807
+ )
3808
+ );
3809
+ border-style: var(
3810
+ --_show-border-im-se,
3811
+ var(
3812
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-se,
3813
+ var(
3814
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-se,
3815
+ var(--_ctm-dn-tb-im-se-sd-se-br-se)
3816
+ )
3817
+ )
3818
+ );
3819
+ border-width: var(
3820
+ --_show-border-im-se,
3821
+ var(
3822
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-wh,
3823
+ var(
3824
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-wh,
3825
+ var(--_ctm-dn-tb-im-se-sd-se-br-wh)
3826
+ )
3827
+ )
3828
+ );
3829
+ border-radius: var(
3830
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-rs,
3831
+ var(
3832
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-rs,
3833
+ var(--_ctm-dn-tb-im-se-sd-se-br-rs)
3834
+ )
3835
+ );
3836
+ box-shadow: var(
3837
+ --_show-shadow-im-se,
3838
+ var(
3839
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-ae,
3840
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-ae)
3841
+ ),
3842
+ var(
3843
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-br,
3844
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-br)
3845
+ ),
3846
+ var(
3847
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-sd,
3848
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-sd)
3849
+ ),
3850
+ var(
3851
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-cr,
3852
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-cr)
3853
+ )
3854
+ );
3855
+ }
3856
+ }
3857
+ }
3858
+ .tab__content {
3859
+ padding: var(
3860
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg,
3861
+ var(
3862
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg,
3863
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg)
3864
+ )
3865
+ );
3866
+ }
3867
+ }
3868
+ }
3869
+
3870
+ // embla
3871
+
3872
+ .embla {
3873
+ width: 100%;
3874
+ height: 100%;
3875
+ position: relative;
3876
+ display: flex;
3877
+ flex-direction: column;
3878
+
3879
+ // overflow: hidden;
3880
+
3881
+ .embla__viewport {
3882
+ width: 100%;
3883
+ height: 100%;
3884
+ position: relative;
3885
+ display: flex;
3886
+ flex-direction: column;
3887
+
3888
+ overflow: hidden;
3889
+
3890
+ .embla__container {
3891
+ width: 100%;
3892
+ height: 100%;
3893
+ display: flex;
3894
+ grid-template-rows: 100%;
3895
+ // grid-template-columns: 100%;
3896
+ // grid-template-columns: repeat(
3897
+ // var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-is-pr-se),
3898
+ // calc(100% / var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-is-pr-se))
3899
+ // );
3900
+ // grid-auto-flow: column;
3901
+ gap: var(
3902
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-sg,
3903
+ var(
3904
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-sg,
3905
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-sg)
3906
+ )
3907
+ );
3908
+
3909
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
3910
+ height: calc(
3911
+ 100% - calc(
3912
+ var(
3913
+ --_ctm-mob-dn-pn-as-aw-se,
3914
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
3915
+ ) +
3916
+ 8px
3917
+ )
3918
+ );
3919
+ }
3920
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
3921
+ height: calc(
3922
+ 100% - calc(
3923
+ var(
3924
+ --_ctm-mob-dn-pn-le-le-ht,
3925
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
3926
+ ) +
3927
+ 20px
3928
+ )
3929
+ );
3930
+ }
3931
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
3932
+ height: calc(
3933
+ 100% - calc(
3934
+ var(
3935
+ --_ctm-mob-dn-pn-ds-dt-se,
3936
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
3937
+ ) +
3938
+ 20px
3939
+ )
3940
+ );
3941
+ }
3942
+
3943
+ .embla__slide {
3944
+ // width: 100%;
3945
+ height: 100%;
3946
+ }
3947
+ }
3948
+ }
3949
+
3950
+ .arrow-navigation {
3951
+ display: flex;
3952
+ position: absolute;
3953
+ top: 50%;
3954
+ left: 50%;
3955
+ width: 100%;
3956
+ justify-content: space-between;
3957
+ transform: translate(-50%, -50%);
3958
+ // padding-left: 20px;
3959
+ &[data-control-type="Side"] {
3960
+ .left-button,
3961
+ .right-button {
3962
+ background-color: transparent;
3963
+ }
3964
+ }
3965
+ &[data-background-shape="Round"] {
3966
+ .left-button,
3967
+ .right-button {
3968
+ background-color: #f2f5f5;
3969
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
3970
+ }
3971
+ }
3972
+ &[data-control-type="Bottom-Overflow"] {
3973
+ transform: translateX(-50%);
3974
+ width: 100%;
3975
+ justify-content: center;
3976
+ gap: 12px;
3977
+ top: unset;
3978
+ bottom: 6px;
3979
+ }
3980
+ &[data-control-type="Bottom"] {
3981
+ transform: unset;
3982
+ position: static;
3983
+ width: 100%;
3984
+ justify-content: center;
3985
+ gap: 12px;
3986
+ margin-top: 10px;
3987
+ }
3988
+ .left-button {
3989
+ padding: 10px;
3990
+ border-radius: 50%;
3991
+ border: none;
3992
+ width: var(
3993
+ --_ctm-mob-dn-pn-as-aw-se,
3994
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
3995
+ );
3996
+ height: var(
3997
+ --_ctm-mob-dn-pn-as-aw-se,
3998
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
3999
+ );
4000
+
4001
+ display: flex;
4002
+ align-items: center;
4003
+ justify-content: center;
4004
+ cursor: pointer;
4005
+ outline: none;
4006
+ margin-left: 12px;
4007
+ &:disabled {
4008
+ & svg {
4009
+ path {
4010
+ stroke: rgb(192, 192, 192);
4011
+ }
4012
+ }
4013
+ }
4014
+ }
4015
+ .right-button {
4016
+ border-radius: 50%;
4017
+ border: none;
4018
+ width: var(
4019
+ --_ctm-mob-dn-pn-as-aw-se,
4020
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
4021
+ );
4022
+ height: var(
4023
+ --_ctm-mob-dn-pn-as-aw-se,
4024
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
4025
+ );
4026
+
4027
+ display: flex;
4028
+ align-items: center;
4029
+ justify-content: center;
4030
+ cursor: pointer;
4031
+ outline: none;
4032
+ margin-right: 12px;
4033
+ padding: 10px;
4034
+
4035
+ &:disabled {
4036
+ & svg {
4037
+ path {
4038
+ stroke: rgb(192, 192, 192);
4039
+ }
4040
+ }
4041
+ }
4042
+ }
4043
+ .icon {
4044
+ display: flex;
4045
+ svg {
4046
+ width: calc(
4047
+ var(
4048
+ --_ctm-mob-dn-pn-as-aw-se,
4049
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
4050
+ ) *
4051
+ 0.5
4052
+ );
4053
+ height: calc(
4054
+ var(
4055
+ --_ctm-mob-dn-pn-as-aw-se,
4056
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
4057
+ ) *
4058
+ 0.5
4059
+ );
4060
+ path {
4061
+ stroke: var(
4062
+ --_ctm-mob-dn-pn-as-aw-cr,
4063
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
4064
+ );
4065
+ }
4066
+ }
4067
+ }
4068
+ }
4069
+
4070
+ &[data-thumbnail-placement="top"] {
4071
+ flex-direction: column-reverse;
4072
+ }
4073
+ &[data-thumbnail-placement="bottom"] {
4074
+ flex-direction: column;
4075
+ }
4076
+ &[data-thumbnail-placement="left"] {
4077
+ flex-direction: row-reverse;
4078
+
4079
+ .embla__thumbs {
4080
+ width: var(
4081
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
4082
+ var(
4083
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
4084
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se)
4085
+ )
4086
+ );
4087
+
4088
+ height: 100%;
4089
+
4090
+ & .embla__thumbs__container {
4091
+ flex-direction: column;
4092
+ height: 100%;
4093
+ }
4094
+ }
4095
+ }
4096
+ &[data-thumbnail-placement="right"] {
4097
+ flex-direction: row;
4098
+ .embla__thumbs {
4099
+ width: var(
4100
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
4101
+ var(
4102
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
4103
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se)
4104
+ )
4105
+ );
4106
+
4107
+ height: 100%;
4108
+
4109
+ & .embla__thumbs__container {
4110
+ flex-direction: column;
4111
+ height: 100%;
4112
+ }
4113
+ }
4114
+ }
4115
+ &[data-control-type="Side"] {
4116
+ display: flex;
4117
+ align-self: center;
4118
+ flex-direction: row;
4119
+ .left-button:disabled,
4120
+ .right-button:disabled {
4121
+ display: none;
4122
+ }
4123
+ }
4124
+ .embla__dots {
4125
+ display: flex;
4126
+ flex-wrap: wrap;
4127
+ justify-content: center;
4128
+ align-items: center;
4129
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
4130
+ gap: 6px;
4131
+ margin-top: 16px;
4132
+
4133
+ &[data-control-type="Bottom-Overflow"] {
4134
+ position: absolute;
4135
+ bottom: 10px;
4136
+ left: 50%;
4137
+ transform: translateX(-50%);
4138
+ width: 75%;
4139
+ }
4140
+ .embla__dot {
4141
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
4142
+ -webkit-appearance: none;
4143
+ appearance: none;
4144
+ background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
4145
+ touch-action: manipulation;
4146
+ display: inline-flex;
4147
+ text-decoration: none;
4148
+ cursor: pointer;
4149
+ border: 0;
4150
+ padding: 0;
4151
+ margin: 0;
4152
+ // width: 0.6rem;
4153
+ // height: 0.6rem;
4154
+ width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
4155
+ height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
4156
+ display: flex;
4157
+ align-items: center;
4158
+ justify-content: center;
4159
+ border-radius: 50%;
4160
+ }
4161
+ .embla__dot:after {
4162
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
4163
+ width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
4164
+ height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
4165
+ border-radius: 50%;
4166
+ display: flex;
4167
+ align-items: center;
4168
+ content: "";
4169
+ }
4170
+ .embla__dot--selected:after {
4171
+ box-shadow: inset 0 0 0 1px var(--text-body);
4172
+ background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
4173
+ }
4174
+ &[data-slider-control="Pagination Line"] {
4175
+ .embla__dot {
4176
+ width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
4177
+ height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
4178
+ background-color: var(
4179
+ --_ctm-dn-pn-le-or-le-cr,
4180
+ var(--_ctm-dn-pn-le-or-le-cr)
4181
+ );
4182
+
4183
+ border-radius: 6px;
4184
+ }
4185
+ .embla__dot--selected:after {
4186
+ box-shadow: inset 0 0 0 1px var(--text-body);
4187
+ border-radius: 6px;
4188
+ width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
4189
+ height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
4190
+ // background-color: #fff;
4191
+ background-color: var(
4192
+ --_ctm-dn-pn-le-ct-le-cr,
4193
+ var(--_tst-dn-pn-le-ct-le-cr)
4194
+ );
4195
+ }
4196
+ }
4197
+ }
4198
+
4199
+ .embla__thumbs {
4200
+ width: 100%;
4201
+ height: var(
4202
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
4203
+ var(
4204
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
4205
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se)
4206
+ )
4207
+ );
4208
+
4209
+ position: relative;
4210
+ display: grid;
4211
+ grid-template-columns: 1fr;
4212
+ overflow: hidden;
4213
+ // margin: 10px;
4214
+ padding: 10px;
4215
+
4216
+ .embla__thumbs__viewport {
4217
+ width: 100%;
4218
+ height: 100%;
4219
+ position: relative;
4220
+ display: flex;
4221
+ flex-direction: column;
4222
+
4223
+ overflow: hidden;
4224
+ }
4225
+ .embla__thumbs__container {
4226
+ display: flex;
4227
+ flex-direction: row;
4228
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
4229
+ gap: var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-sg);
4230
+ width: 100%;
4231
+ // justify-content: center;
4232
+ // height: 200px;
4233
+
4234
+ .embla__thumbs__slide {
4235
+ min-width: var(
4236
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
4237
+ var(
4238
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
4239
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se)
4240
+ )
4241
+ );
4242
+ max-width: var(
4243
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
4244
+ var(
4245
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
4246
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se)
4247
+ )
4248
+ );
4249
+ height: var(
4250
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
4251
+ var(
4252
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
4253
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se)
4254
+ )
4255
+ );
4256
+ & img {
4257
+ width: 100%;
4258
+ height: 100%;
4259
+ }
1313
4260
  }
1314
4261
  }
1315
4262
  }