@sc-360-v2/storefront-cms-library 0.5.52 → 0.5.54

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.
@@ -1,4 +1,4 @@
1
- @use "sass:map";
1
+ @use "sass:map";
2
2
  @use "sass:list";
3
3
  @use "./functions.scss" as *;
4
4
  $overflowSelector: ".flex__overflow";
@@ -10,6 +10,117 @@ $defaultValues: (
10
10
  --_sf-flex-embla-pd-daka-mobile: getListOfResponsive(10px, 10px 0px),
11
11
  --_sf-sc-pt-lt-we-se: getListOfResponsive(nowrap, break-spaces),
12
12
  );
13
+ // ---------------------------------------------------------------------------
14
+ // Tree view (Allocations View = "Tree"). Generated CSS-var bases for
15
+ // design.sidebarDesign.* — the path shortcodes come from splitCamelCaseAndJoin.
16
+ // The rules below are the Category Groups sidebar rules, kept deliberately
17
+ // identical so the two trees look and behave the same; only the var bases and
18
+ // class prefix differ.
19
+ // ---------------------------------------------------------------------------
20
+ $ad-sidebar-design: "--_ctm-dn-sr-dn"; // sidebarDesign (itemGap)
21
+ $ad-sidebar: "--_ctm-dn-sr-dn-sr-cr"; // sidebarDesign.sidebarContainer
22
+ $ad-heading: "--_ctm-dn-sr-dn-sr-hg"; // sidebarDesign.sidebarHeading
23
+ $ad-tree: "--_ctm-dn-sr-dn-pe-rw"; // sidebarDesign.profileRow
24
+ $ad-tree-icon: "--_ctm-dn-sr-dn-pe-te-in"; // sidebarDesign.profileTreeIcon
25
+ $ad-subtree: "--_ctm-dn-sr-dn-an-rw"; // sidebarDesign.allocationRow
26
+ $ad-widget: "--_ctm-dn-wt-se"; // design.widgetStyle (divider)
27
+
28
+ @mixin ad-font($base, $color, $size, $weight: 600) {
29
+ color: prepareMediaVariable(#{$base}-cr, $color);
30
+ font-family: prepareMediaVariable(#{$base}-ft-fy, ("Inter", sans-serif));
31
+ font-size: prepareMediaVariable(#{$base}-ft-se, $size);
32
+ font-weight: prepareMediaVariable(#{$base}-ft-wt, $weight);
33
+ font-style: prepareMediaVariable(#{$base}-ft-se-ic);
34
+ text-align: prepareMediaVariable(#{$base}-tt-an);
35
+ letter-spacing: prepareMediaVariable(#{$base}-lr-sg);
36
+ line-height: prepareMediaVariable(#{$base}-le-ht);
37
+ text-decoration: prepareMediaVariable(#{$base}-ue);
38
+ }
39
+
40
+ @mixin ad-design($base) {
41
+ background-color: prepareMediaVariable(#{$base}-bd-cr, transparent);
42
+ border-color: prepareMediaVariable(#{$base}-br-cr, transparent);
43
+ border-style: prepareMediaVariable(#{$base}-br-se, solid);
44
+ border-width: prepareMediaVariable(#{$base}-br-wh, 0);
45
+ border-radius: prepareMediaVariable(#{$base}-br-rs, 4px);
46
+ box-shadow: prepareMediaVariable(#{$base}-sw-ae, 0 0) prepareMediaVariable(#{$base}-sw-br, 0)
47
+ prepareMediaVariable(#{$base}-sw-sd, 0) prepareMediaVariable(#{$base}-sw-cr, transparent);
48
+ }
49
+
50
+ // Interactive states ($state = "hr-se" | "sd-se") fall back to the DEFAULT
51
+ // state, so editing the default cascades to hover and selected.
52
+ @mixin ad-font-state($base, $state, $color, $size, $weight: 600) {
53
+ color: prepareMediaVariable(
54
+ #{$base}-#{$state}-cr,
55
+ prepareMediaVariable(#{$base}-dt-se-cr, $color)
56
+ );
57
+ font-family: prepareMediaVariable(
58
+ #{$base}-#{$state}-ft-fy,
59
+ prepareMediaVariable(#{$base}-dt-se-ft-fy, ("Inter", sans-serif))
60
+ );
61
+ font-size: prepareMediaVariable(
62
+ #{$base}-#{$state}-ft-se,
63
+ prepareMediaVariable(#{$base}-dt-se-ft-se, $size)
64
+ );
65
+ font-weight: prepareMediaVariable(
66
+ #{$base}-#{$state}-ft-wt,
67
+ prepareMediaVariable(#{$base}-dt-se-ft-wt, $weight)
68
+ );
69
+ font-style: prepareMediaVariable(
70
+ #{$base}-#{$state}-ft-se-ic,
71
+ prepareMediaVariable(#{$base}-dt-se-ft-se-ic)
72
+ );
73
+ text-align: prepareMediaVariable(
74
+ #{$base}-#{$state}-tt-an,
75
+ prepareMediaVariable(#{$base}-dt-se-tt-an)
76
+ );
77
+ letter-spacing: prepareMediaVariable(
78
+ #{$base}-#{$state}-lr-sg,
79
+ prepareMediaVariable(#{$base}-dt-se-lr-sg)
80
+ );
81
+ line-height: prepareMediaVariable(
82
+ #{$base}-#{$state}-le-ht,
83
+ prepareMediaVariable(#{$base}-dt-se-le-ht)
84
+ );
85
+ text-decoration: prepareMediaVariable(
86
+ #{$base}-#{$state}-ue,
87
+ prepareMediaVariable(#{$base}-dt-se-ue)
88
+ );
89
+ }
90
+
91
+ @mixin ad-design-state($base, $state) {
92
+ background-color: prepareMediaVariable(
93
+ #{$base}-#{$state}-bd-cr,
94
+ prepareMediaVariable(#{$base}-dt-se-bd-cr, transparent)
95
+ );
96
+ border-color: prepareMediaVariable(
97
+ #{$base}-#{$state}-br-cr,
98
+ prepareMediaVariable(#{$base}-dt-se-br-cr, transparent)
99
+ );
100
+ border-style: prepareMediaVariable(
101
+ #{$base}-#{$state}-br-se,
102
+ prepareMediaVariable(#{$base}-dt-se-br-se, solid)
103
+ );
104
+ border-width: prepareMediaVariable(
105
+ #{$base}-#{$state}-br-wh,
106
+ prepareMediaVariable(#{$base}-dt-se-br-wh, 0)
107
+ );
108
+ border-radius: prepareMediaVariable(
109
+ #{$base}-#{$state}-br-rs,
110
+ prepareMediaVariable(#{$base}-dt-se-br-rs, 4px)
111
+ );
112
+ box-shadow: prepareMediaVariable(
113
+ #{$base}-#{$state}-sw-ae,
114
+ prepareMediaVariable(#{$base}-dt-se-sw-ae, 0 0)
115
+ )
116
+ prepareMediaVariable(#{$base}-#{$state}-sw-br, prepareMediaVariable(#{$base}-dt-se-sw-br, 0))
117
+ prepareMediaVariable(#{$base}-#{$state}-sw-sd, prepareMediaVariable(#{$base}-dt-se-sw-sd, 0))
118
+ prepareMediaVariable(
119
+ #{$base}-#{$state}-sw-cr,
120
+ prepareMediaVariable(#{$base}-dt-se-sw-cr, transparent)
121
+ );
122
+ }
123
+
13
124
  [data-div-type="element"] {
14
125
  &[data-element-type="allocationDetails"] {
15
126
  // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
@@ -1239,256 +1350,17 @@ $defaultValues: (
1239
1350
  }
1240
1351
  }
1241
1352
 
1242
- .quota__details__element {
1243
- background-color: var(
1244
- --_ctm-mob-dn-qa-ds-wt-se-bd-cr,
1245
- var(--_ctm-tab-dn-qa-ds-wt-se-bd-cr, var(--_ctm-dn-qa-ds-wt-se-bd-cr))
1246
- );
1247
- padding: var(
1248
- --_ctm-mob-dn-qa-ds-wt-se-pg,
1249
- var(--_ctm-tab-dn-qa-ds-wt-se-pg, var(--_ctm-dn-qa-ds-wt-se-pg))
1250
- );
1251
- display: flex;
1252
- flex-direction: column;
1253
- --_sf-gp: var(
1254
- --_ctm-mob-dn-qa-ds-wt-se-im-sg,
1255
- var(
1256
- --_ctm-tab-dn-qa-ds-wt-se-im-sg,
1257
- var(--_ctm-dn-qa-ds-wt-se-im-sg, var(--_ctm-dn-qa-ds-wt-se-im-sg), 16px)
1258
- )
1259
- );
1260
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
1261
- row-gap: var(--_sf-gp);
1262
- width: 100%;
1263
- height: 100%;
1264
- border-color: var(
1265
- --_ctm-mob-dn-qa-ds-wt-se-br-cr,
1266
- var(--_ctm-tab-dn-qa-ds-wt-se-br-cr, var(--_ctm-dn-qa-ds-wt-se-br-cr))
1267
- );
1268
- border-style: var(
1269
- --_ctm-mob-dn-qa-ds-wt-se-br-se,
1270
- var(--_ctm-tab-dn-qa-ds-wt-se-br-se, var(--_ctm-dn-qa-ds-wt-se-br-se))
1271
- );
1272
- border-width: var(
1273
- --_ctm-mob-dn-qa-ds-wt-se-br-wh,
1274
- var(--_ctm-tab-dn-qa-ds-wt-se-br-wh, var(--_ctm-dn-qa-ds-wt-se-br-wh))
1275
- );
1276
- border-radius: var(
1277
- --_ctm-mob-dn-qa-ds-wt-se-br-rs,
1278
- var(--_ctm-tab-dn-qa-ds-wt-se-br-rs, var(--_ctm-dn-qa-ds-wt-se-br-rs))
1279
- );
1280
- box-shadow: var(
1281
- --_show-shadow,
1282
- var(
1283
- --_ctm-mob-dn-qa-ds-wt-se-sw-ae,
1284
- var(--_ctm-tab-dn-qa-ds-wt-se-sw-ae, var(--_ctm-dn-qa-ds-wt-se-sw-ae))
1285
- )
1286
- var(
1287
- --_ctm-mob-dn-qa-ds-wt-se-sw-br,
1288
- var(--_ctm-tab-dn-qa-ds-wt-se-sw-br, var(--_ctm-dn-qa-ds-wt-se-sw-br))
1289
- )
1290
- var(
1291
- --_ctm-mob-dn-qa-ds-wt-se-sw-sd,
1292
- var(--_ctm-tab-dn-qa-ds-wt-se-sw-sd, var(--_ctm-dn-qa-ds-wt-se-sw-sd))
1293
- )
1294
- var(
1295
- --_ctm-mob-dn-qa-ds-wt-se-sw-cr,
1296
- var(--_ctm-tab-dn-qa-ds-wt-se-sw-cr, var(--_ctm-dn-qa-ds-wt-se-sw-cr))
1297
- )
1298
- );
1299
-
1300
- .product__hilights {
1301
- display: flex;
1302
- align-items: var(
1303
- --_ctm-mob-dn-qa-ds-wt-se-wt-at,
1304
- var(--_ctm-tab-dn-qa-ds-wt-se-wt-at, var(--_ctm-dn-qa-ds-wt-se-wt-at))
1305
- );
1306
- justify-content: var(
1307
- --_ctm-mob-dn-qa-ds-wt-se-hl-at,
1308
- var(--_ctm-tab-dn-qa-ds-wt-se-hl-at, var(--_ctm-dn-qa-ds-wt-se-hl-at))
1309
- );
1310
- gap: var(
1311
- --_ctm-mob-dn-qa-ds-wt-se-im-sg,
1312
- var(--_ctm-tab-dn-qa-ds-wt-se-im-sg, var(--_ctm-dn-qa-ds-wt-se-im-sg))
1313
- );
1314
- width: 100%;
1315
-
1316
- height: 100%;
1317
-
1318
- &[data-show-dividers="true"] {
1319
- .product__list__item {
1320
- position: relative;
1321
- &:not(:last-child)::after {
1322
- content: "";
1323
- width: var(
1324
- --_ctm-mob-dn-qa-ds-dr-dr-wh,
1325
- var(--_ctm-tab-dn-qa-ds-dr-dr-wh, var(--_ctm-dn-qa-ds-dr-dr-wh))
1326
- );
1327
- height: 100%;
1328
- position: absolute;
1329
- right: calc(
1330
- (
1331
- -1 *
1332
- var(
1333
- --_ctm-mob-dn-qa-ds-wt-se-im-sg,
1334
- var(--_ctm-tab-dn-qa-ds-wt-se-im-sg, var(--_ctm-dn-qa-ds-wt-se-im-sg))
1335
- ) /
1336
- 2
1337
- ) -
1338
- (
1339
- var(
1340
- --_ctm-mob-dn-qa-ds-dr-dr-wh,
1341
- var(--_ctm-tab-dn-qa-ds-dr-dr-wh, var(--_ctm-dn-qa-ds-dr-dr-wh))
1342
- ) /
1343
- 2
1344
- )
1345
- );
1346
- background-color: var(
1347
- --_ctm-mob-dn-qa-ds-dr-dr-cr,
1348
- var(--_ctm-tab-dn-qa-ds-dr-dr-cr, var(--_ctm-dn-qa-ds-dr-dr-cr))
1349
- );
1350
- }
1351
- }
1352
- }
1353
- .product__list__item {
1354
- display: flex;
1355
- align-items: center;
1356
- gap: 4px;
1357
-
1358
- .svg_icon {
1359
- display: flex;
1360
- }
1361
- }
1362
- .quota__left {
1363
- .count {
1364
- // padding-inline: var(--_sf-cd-gp);
1365
- color: var(
1366
- --_ctm-mob-dn-qa-ds-qa-lt-cr,
1367
- var(--_ctm-tab-dn-qa-ds-qa-lt-cr, var(--_ctm-dn-qa-ds-qa-lt-cr))
1368
- );
1369
- font-family: var(
1370
- --_ctm-mob-dn-qa-ds-qa-lt-ft-fy,
1371
- var(--_ctm-tab-dn-qa-ds-qa-lt-ft-fy, var(--_ctm-dn-qa-ds-qa-lt-ft-fy))
1372
- );
1373
- font-size: var(
1374
- --_ctm-mob-dn-qa-ds-qa-lt-ft-se,
1375
- var(--_ctm-tab-dn-qa-ds-qa-lt-ft-se, var(--_ctm-dn-qa-ds-qa-lt-ft-se))
1376
- );
1377
- font-weight: var(
1378
- --_ctm-mob-dn-qa-ds-qa-lt-ft-wt,
1379
- var(--_ctm-tab-dn-qa-ds-qa-lt-ft-wt, var(--_ctm-dn-qa-ds-qa-lt-ft-wt))
1380
- );
1381
- font-style: var(
1382
- --_ctm-mob-dn-qa-ds-qa-lt-ft-se-ic,
1383
- var(--_ctm-tab-dn-qa-ds-qa-lt-ft-se-ic, var(--_ctm-dn-qa-ds-qa-lt-ft-se-ic))
1384
- );
1385
- text-align: var(
1386
- --_ctm-mob-dn-qa-ds-qa-lt-tt-an,
1387
- var(--_ctm-tab-dn-qa-ds-qa-lt-tt-an, var(--_ctm-dn-qa-ds-qa-lt-tt-an))
1388
- );
1389
- letter-spacing: var(
1390
- --_ctm-mob-dn-qa-ds-qa-lt-lr-sg,
1391
- var(--_ctm-tab-dn-qa-ds-qa-lt-lr-sg, var(--_ctm-dn-qa-ds-qa-lt-lr-sg))
1392
- );
1393
- line-height: var(
1394
- --_ctm-mob-dn-qa-ds-qa-lt-le-ht,
1395
- var(--_ctm-tab-dn-qa-ds-qa-lt-le-ht, var(--_ctm-dn-qa-ds-qa-lt-le-ht-dc))
1396
- );
1397
- text-decoration: var(
1398
- --_ctm-mob-dn-qa-ds-qa-lt-ue,
1399
- var(--_ctm-tab-dn-qa-ds-qa-lt-ue, var(--_ctm-dn-qa-ds-qa-lt-ue))
1400
- );
1401
- }
1402
- .icon {
1403
- display: var(--_sf-show-icon-ff, flex);
1404
- svg {
1405
- width: var(
1406
- --_ctm-mab-dn-qa-lt-in-se,
1407
- var(--_ctm-tab-dn-qa-ds-qa-lt-in-se, var(--_ctm-dn-qa-ds-qa-lt-in-se))
1408
- );
1409
- height: var(
1410
- --_ctm-mob-dn-qa-ds-qa-lt-in-se,
1411
- var(--_ctm-tab-dn-qa-ds-qa-lt-in-se, var(--_ctm-dn-qa-ds-qa-lt-in-se))
1412
- );
1413
- path {
1414
- stroke: var(
1415
- --_ctm-mob-dn-qa-ds-qa-lt-in-c1,
1416
- var(--_ctm-tab-dn-qa-ds-qa-lt-in-c1, var(--_ctm-dn-qa-ds-qa-lt-in-c1))
1417
- );
1418
- }
1419
- }
1420
- }
1421
- }
1422
- .days__left {
1423
- .count {
1424
- // padding-inline: var(--_sf-cd-gp);
1425
- color: var(
1426
- --_ctm-mob-dn-qa-ds-ds-lt-cr,
1427
- var(--_ctm-tab-dn-qa-ds-ds-lt-cr, var(--_ctm-dn-qa-ds-ds-lt-cr))
1428
- );
1429
- font-family: var(
1430
- --_ctm-mob-dn-qa-ds-ds-lt-ft-fy,
1431
- var(--_ctm-tab-dn-qa-ds-ds-lt-ft-fy, var(--_ctm-dn-qa-ds-ds-lt-ft-fy))
1432
- );
1433
- font-size: var(
1434
- --_ctm-mob-dn-qa-ds-ds-lt-ft-se,
1435
- var(--_ctm-tab-dn-qa-ds-ds-lt-ft-se, var(--_ctm-dn-qa-ds-ds-lt-ft-se))
1436
- );
1437
- font-weight: var(
1438
- --_ctm-mob-dn-qa-ds-ds-lt-ft-wt,
1439
- var(--_ctm-tab-dn-qa-ds-ds-lt-ft-wt, var(--_ctm-dn-qa-ds-ds-lt-ft-wt))
1440
- );
1441
- font-style: var(
1442
- --_ctm-mob-dn-qa-ds-ds-lt-ft-se-ic,
1443
- var(--_ctm-tab-dn-qa-ds-ds-lt-ft-se-ic, var(--_ctm-dn-qa-ds-ds-lt-ft-se-ic))
1444
- );
1445
- text-align: var(
1446
- --_ctm-mob-dn-qa-ds-ds-lt-tt-an,
1447
- var(--_ctm-tab-dn-qa-ds-ds-lt-tt-an, var(--_ctm-dn-qa-ds-ds-lt-tt-an))
1448
- );
1449
- letter-spacing: var(
1450
- --_ctm-mob-dn-qa-ds-ds-lt-lr-sg,
1451
- var(--_ctm-tab-dn-qa-ds-ds-lt-lr-sg, var(--_ctm-dn-qa-ds-ds-lt-lr-sg))
1452
- );
1453
- line-height: var(
1454
- --_ctm-mob-dn-qa-ds-ds-lt-le-ht,
1455
- var(--_ctm-tab-dn-qa-ds-ds-lt-le-ht, var(--_ctm-dn-qa-ds-ds-lt-le-ht-dc))
1456
- );
1457
- text-decoration: var(
1458
- --_ctm-mob-dn-qa-ds-ds-lt-ue,
1459
- var(--_ctm-tab-dn-qa-ds-ds-lt-ue, var(--_ctm-dn-qa-ds-ds-lt-ue))
1460
- );
1461
- }
1462
- .icon {
1463
- display: var(--_sf-show-icon-ff, flex);
1464
- svg {
1465
- width: var(
1466
- --_ctm-mab-dn-ds-lt-in-se,
1467
- var(--_ctm-tab-dn-qa-ds-ds-lt-in-se, var(--_ctm-dn-qa-ds-ds-lt-in-se))
1468
- );
1469
- height: var(
1470
- --_ctm-mob-dn-qa-ds-ds-lt-in-se,
1471
- var(--_ctm-tab-dn-qa-ds-ds-lt-in-se, var(--_ctm-dn-qa-ds-ds-lt-in-se))
1472
- );
1473
- path {
1474
- stroke: var(
1475
- --_ctm-mob-dn-qa-ds-ds-lt-in-c1,
1476
- var(--_ctm-tab-dn-qa-ds-ds-lt-in-c1, var(--_ctm-dn-qa-ds-ds-lt-in-c1))
1477
- );
1478
- }
1479
- }
1480
- }
1481
- }
1482
- }
1483
- }
1353
+ // Quota details styling for the embedded QuotaDetailsContent, rebound to
1354
+ // the Allocations quotaDetails CSS-variable paths.
1355
+ @import "./allocations-quota-details.scss";
1484
1356
  }
1485
1357
  }
1486
1358
 
1487
1359
  .allocation__profile__tabs {
1488
1360
  width: 100%;
1489
1361
  background-color: var(
1490
- --_ctm-mob-dn-ps-sr-wt-se-bd-cr,
1491
- var(--_ctm-tab-dn-ps-sr-wt-se-bd-cr, var(--_ctm-dn-ps-sr-wt-se-bd-cr))
1362
+ --_ctm-mob-dn-sr-wt-se-bd-cr,
1363
+ var(--_ctm-tab-dn-sr-wt-se-bd-cr, var(--_ctm-dn-sr-wt-se-bd-cr))
1492
1364
  );
1493
1365
  // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
1494
1366
  display: flex;
@@ -1502,38 +1374,38 @@ $defaultValues: (
1502
1374
  width: 100%;
1503
1375
  height: 100%;
1504
1376
  border-color: var(
1505
- --_ctm-mob-dn-ps-sr-wt-se-br-cr,
1506
- var(--_ctm-tab-dn-ps-sr-wt-se-br-cr, var(--_ctm-dn-ps-sr-wt-se-br-cr))
1377
+ --_ctm-mob-dn-sr-wt-se-br-cr,
1378
+ var(--_ctm-tab-dn-sr-wt-se-br-cr, var(--_ctm-dn-sr-wt-se-br-cr))
1507
1379
  );
1508
1380
  border-style: var(
1509
- --_ctm-mob-dn-ps-sr-wt-se-br-se,
1510
- var(--_ctm-tab-dn-ps-sr-wt-se-br-se, var(--_ctm-dn-ps-sr-wt-se-br-se))
1381
+ --_ctm-mob-dn-sr-wt-se-br-se,
1382
+ var(--_ctm-tab-dn-sr-wt-se-br-se, var(--_ctm-dn-sr-wt-se-br-se))
1511
1383
  );
1512
1384
  border-width: var(
1513
- --_ctm-mob-dn-ps-sr-wt-se-br-wh,
1514
- var(--_ctm-tab-dn-ps-sr-wt-se-br-wh, var(--_ctm-dn-ps-sr-wt-se-br-wh))
1385
+ --_ctm-mob-dn-sr-wt-se-br-wh,
1386
+ var(--_ctm-tab-dn-sr-wt-se-br-wh, var(--_ctm-dn-sr-wt-se-br-wh))
1515
1387
  );
1516
1388
  border-radius: var(
1517
- --_ctm-mob-dn-ps-sr-wt-se-br-rs,
1518
- var(--_ctm-tab-dn-ps-sr-wt-se-br-rs, var(--_ctm-dn-ps-sr-wt-se-br-rs))
1389
+ --_ctm-mob-dn-sr-wt-se-br-rs,
1390
+ var(--_ctm-tab-dn-sr-wt-se-br-rs, var(--_ctm-dn-sr-wt-se-br-rs))
1519
1391
  );
1520
1392
  box-shadow: var(
1521
1393
  --_show-shadow,
1522
1394
  var(
1523
- --_ctm-mob-dn-ps-sr-wt-se-sw-ae,
1524
- var(--_ctm-tab-dn-ps-sr-wt-se-sw-ae, var(--_ctm-dn-ps-sr-wt-se-sw-ae))
1395
+ --_ctm-mob-dn-sr-wt-se-sw-ae,
1396
+ var(--_ctm-tab-dn-sr-wt-se-sw-ae, var(--_ctm-dn-sr-wt-se-sw-ae))
1525
1397
  )
1526
1398
  var(
1527
- --_ctm-mob-dn-ps-sr-wt-se-sw-br,
1528
- var(--_ctm-tab-dn-ps-sr-wt-se-sw-br, var(--_ctm-dn-ps-sr-wt-se-sw-br))
1399
+ --_ctm-mob-dn-sr-wt-se-sw-br,
1400
+ var(--_ctm-tab-dn-sr-wt-se-sw-br, var(--_ctm-dn-sr-wt-se-sw-br))
1529
1401
  )
1530
1402
  var(
1531
- --_ctm-mob-dn-ps-sr-wt-se-sw-sd,
1532
- var(--_ctm-tab-dn-ps-sr-wt-se-sw-sd, var(--_ctm-dn-ps-sr-wt-se-sw-sd))
1403
+ --_ctm-mob-dn-sr-wt-se-sw-sd,
1404
+ var(--_ctm-tab-dn-sr-wt-se-sw-sd, var(--_ctm-dn-sr-wt-se-sw-sd))
1533
1405
  )
1534
1406
  var(
1535
- --_ctm-mob-dn-ps-sr-wt-se-sw-cr,
1536
- var(--_ctm-tab-dn-ps-sr-wt-se-sw-cr, var(--_ctm-dn-ps-sr-wt-se-sw-cr))
1407
+ --_ctm-mob-dn-sr-wt-se-sw-cr,
1408
+ var(--_ctm-tab-dn-sr-wt-se-sw-cr, var(--_ctm-dn-sr-wt-se-sw-cr))
1537
1409
  )
1538
1410
  );
1539
1411
  .profile__button {
@@ -1552,118 +1424,112 @@ $defaultValues: (
1552
1424
 
1553
1425
  &:hover {
1554
1426
  --_sf-hr-bd-cr: var(
1555
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-bd-cr,
1556
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-bd-cr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-bd-cr))
1427
+ --_ctm-mob-dn-sr-tb-hr-se-bd-cr,
1428
+ var(--_ctm-tab-dn-sr-tb-hr-se-bd-cr, var(--_ctm-dn-sr-tb-hr-se-bd-cr))
1557
1429
  );
1558
1430
  --_sf-hr-br-cr: var(
1559
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-br-cr,
1560
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-br-cr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-br-cr))
1431
+ --_ctm-mob-dn-sr-tb-hr-se-br-cr,
1432
+ var(--_ctm-tab-dn-sr-tb-hr-se-br-cr, var(--_ctm-dn-sr-tb-hr-se-br-cr))
1561
1433
  );
1562
1434
  --_sf-hr-br-se: var(
1563
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-br-se,
1564
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-br-se, var(--_ctm-dn-ps-sr-pe-tb-hr-se-br-se))
1435
+ --_ctm-mob-dn-sr-tb-hr-se-br-se,
1436
+ var(--_ctm-tab-dn-sr-tb-hr-se-br-se, var(--_ctm-dn-sr-tb-hr-se-br-se))
1565
1437
  );
1566
1438
  --_sf-hr-br-wh: var(
1567
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-br-wh,
1568
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-br-wh, var(--_ctm-dn-ps-sr-pe-tb-hr-se-br-wh))
1439
+ --_ctm-mob-dn-sr-tb-hr-se-br-wh,
1440
+ var(--_ctm-tab-dn-sr-tb-hr-se-br-wh, var(--_ctm-dn-sr-tb-hr-se-br-wh))
1569
1441
  );
1570
1442
  --_sf-hr-br-rs: var(
1571
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-br-rs,
1572
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-br-rs, var(--_ctm-dn-ps-sr-pe-tb-hr-se-br-rs))
1443
+ --_ctm-mob-dn-sr-tb-hr-se-br-rs,
1444
+ var(--_ctm-tab-dn-sr-tb-hr-se-br-rs, var(--_ctm-dn-sr-tb-hr-se-br-rs))
1573
1445
  );
1574
1446
  --_sf-hr-at: var(
1575
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-at,
1576
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-at, var(--_ctm-dn-ps-sr-pe-tb-hr-se-at))
1447
+ --_ctm-mob-dn-sr-tb-hr-se-at,
1448
+ var(--_ctm-tab-dn-sr-tb-hr-se-at, var(--_ctm-dn-sr-tb-hr-se-at))
1577
1449
  );
1578
1450
  --_sf-hr-in-ad-tt-sg: var(
1579
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-in-ad-tt-sg,
1580
- var(
1581
- --_ctm-tab-dn-ps-sr-pe-tb-hr-se-in-ad-tt-sg,
1582
- var(--_ctm-dn-ps-sr-pe-tb-hr-se-in-ad-tt-sg)
1583
- )
1451
+ --_ctm-mob-dn-sr-tb-hr-se-in-ad-tt-sg,
1452
+ var(--_ctm-tab-dn-sr-tb-hr-se-in-ad-tt-sg, var(--_ctm-dn-sr-tb-hr-se-in-ad-tt-sg))
1584
1453
  );
1585
1454
 
1586
1455
  // for shadow
1587
1456
  --_sf-hr-sw-ae: var(
1588
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-sw-ae,
1589
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-sw-ae, var(--_ctm-dn-ps-sr-pe-tb-hr-se-sw-ae))
1457
+ --_ctm-mob-dn-sr-tb-hr-se-sw-ae,
1458
+ var(--_ctm-tab-dn-sr-tb-hr-se-sw-ae, var(--_ctm-dn-sr-tb-hr-se-sw-ae))
1590
1459
  );
1591
1460
  --_sf-hr-sw-br: var(
1592
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-sw-br,
1593
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-sw-br, var(--_ctm-dn-ps-sr-pe-tb-hr-se-sw-br))
1461
+ --_ctm-mob-dn-sr-tb-hr-se-sw-br,
1462
+ var(--_ctm-tab-dn-sr-tb-hr-se-sw-br, var(--_ctm-dn-sr-tb-hr-se-sw-br))
1594
1463
  );
1595
1464
  --_sf-hr-sw-hr: var(
1596
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-sw-hr,
1597
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-sw-hr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-sw-hr))
1465
+ --_ctm-mob-dn-sr-tb-hr-se-sw-hr,
1466
+ var(--_ctm-tab-dn-sr-tb-hr-se-sw-hr, var(--_ctm-dn-sr-tb-hr-se-sw-hr))
1598
1467
  );
1599
1468
  --_sf-hr-sw-cr: var(
1600
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-sw-cr,
1601
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-sw-cr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-sw-cr))
1469
+ --_ctm-mob-dn-sr-tb-hr-se-sw-cr,
1470
+ var(--_ctm-tab-dn-sr-tb-hr-se-sw-cr, var(--_ctm-dn-sr-tb-hr-se-sw-cr))
1602
1471
  );
1603
1472
 
1604
1473
  // for font
1605
1474
 
1606
1475
  --_sf-hr-cr: var(
1607
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-cr,
1608
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-cr, var(--_ctm-dn-ps-sr-pe-tb-hr-se-cr))
1476
+ --_ctm-mob-dn-sr-tb-hr-se-cr,
1477
+ var(--_ctm-tab-dn-sr-tb-hr-se-cr, var(--_ctm-dn-sr-tb-hr-se-cr))
1609
1478
  );
1610
1479
  --_sf-hr-ft-fy: var(
1611
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ft-fy,
1612
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-ft-fy, var(--_ctm-dn-ps-sr-pe-tb-hr-se-ft-fy))
1480
+ --_ctm-mob-dn-sr-tb-hr-se-ft-fy,
1481
+ var(--_ctm-tab-dn-sr-tb-hr-se-ft-fy, var(--_ctm-dn-sr-tb-hr-se-ft-fy))
1613
1482
  );
1614
1483
  --_sf-hr-ft-se: var(
1615
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ft-se,
1616
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-ft-se, var(--_ctm-dn-ps-sr-pe-tb-hr-se-ft-se))
1484
+ --_ctm-mob-dn-sr-tb-hr-se-ft-se,
1485
+ var(--_ctm-tab-dn-sr-tb-hr-se-ft-se, var(--_ctm-dn-sr-tb-hr-se-ft-se))
1617
1486
  );
1618
1487
  --_sf-hr-ft-wt: var(
1619
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ft-wt,
1620
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-ft-wt, var(--_ctm-dn-ps-sr-pe-tb-hr-se-ft-wt))
1488
+ --_ctm-mob-dn-sr-tb-hr-se-ft-wt,
1489
+ var(--_ctm-tab-dn-sr-tb-hr-se-ft-wt, var(--_ctm-dn-sr-tb-hr-se-ft-wt))
1621
1490
  );
1622
1491
  --_sf-hr-ft-se-ic: var(
1623
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ft-se-ic,
1624
- var(
1625
- --_ctm-tab-dn-ps-sr-pe-tb-hr-se-ft-se-ic,
1626
- var(--_ctm-dn-ps-sr-pe-tb-hr-se-ft-se-ic)
1627
- )
1492
+ --_ctm-mob-dn-sr-tb-hr-se-ft-se-ic,
1493
+ var(--_ctm-tab-dn-sr-tb-hr-se-ft-se-ic, var(--_ctm-dn-sr-tb-hr-se-ft-se-ic))
1628
1494
  );
1629
1495
  --_sf-hr-tt-an: var(
1630
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-tt-an,
1631
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-tt-an, var(--_ctm-dn-ps-sr-pe-tb-hr-se-tt-an))
1496
+ --_ctm-mob-dn-sr-tb-hr-se-tt-an,
1497
+ var(--_ctm-tab-dn-sr-tb-hr-se-tt-an, var(--_ctm-dn-sr-tb-hr-se-tt-an))
1632
1498
  );
1633
1499
  --_sf-hr-lr-sg: var(
1634
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-lr-sg,
1635
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-lr-sg, var(--_ctm-dn-ps-sr-pe-tb-hr-se-lr-sg))
1500
+ --_ctm-mob-dn-sr-tb-hr-se-lr-sg,
1501
+ var(--_ctm-tab-dn-sr-tb-hr-se-lr-sg, var(--_ctm-dn-sr-tb-hr-se-lr-sg))
1636
1502
  );
1637
1503
  --_sf-hr-le-ht: var(
1638
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-le-ht,
1639
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-le-ht, var(--_ctm-dn-ps-sr-pe-tb-hr-se-le-ht))
1504
+ --_ctm-mob-dn-sr-tb-hr-se-le-ht,
1505
+ var(--_ctm-tab-dn-sr-tb-hr-se-le-ht, var(--_ctm-dn-sr-tb-hr-se-le-ht))
1640
1506
  );
1641
1507
 
1642
1508
  --_sf-hr-in-se: var(
1643
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-in-se,
1644
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-in-se, var(--_ctm-dn-ps-sr-pe-tb-hr-se-in-se))
1509
+ --_ctm-mob-dn-sr-tb-hr-se-in-se,
1510
+ var(--_ctm-tab-dn-sr-tb-hr-se-in-se, var(--_ctm-dn-sr-tb-hr-se-in-se))
1645
1511
  );
1646
1512
  --_sf-hr-in-se: var(
1647
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-in-se,
1648
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-in-se, var(--_ctm-dn-ps-sr-pe-tb-hr-se-in-se))
1513
+ --_ctm-mob-dn-sr-tb-hr-se-in-se,
1514
+ var(--_ctm-tab-dn-sr-tb-hr-se-in-se, var(--_ctm-dn-sr-tb-hr-se-in-se))
1649
1515
  );
1650
1516
  --_sf-hr-in-c1: var(
1651
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-in-c1,
1652
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-in-c1, var(--_ctm-dn-ps-sr-pe-tb-hr-se-in-c1))
1517
+ --_ctm-mob-dn-sr-tb-hr-se-in-c1,
1518
+ var(--_ctm-tab-dn-sr-tb-hr-se-in-c1, var(--_ctm-dn-sr-tb-hr-se-in-c1))
1653
1519
  );
1654
1520
  --_sf-hr-ue: var(
1655
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-ue,
1656
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-ue, var(--_ctm-dn-ps-sr-pe-tb-hr-se-ue))
1521
+ --_ctm-mob-dn-sr-tb-hr-se-ue,
1522
+ var(--_ctm-tab-dn-sr-tb-hr-se-ue, var(--_ctm-dn-sr-tb-hr-se-ue))
1657
1523
  );
1658
1524
 
1659
1525
  // for pading and width
1660
1526
  --_sf-hr-pg: var(
1661
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-pg,
1662
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-pg, var(--_ctm-dn-ps-sr-pe-tb-hr-se-pg))
1527
+ --_ctm-mob-dn-sr-tb-hr-se-pg,
1528
+ var(--_ctm-tab-dn-sr-tb-hr-se-pg, var(--_ctm-dn-sr-tb-hr-se-pg))
1663
1529
  );
1664
1530
  --_sf-hr-wh: var(
1665
- --_ctm-mob-dn-ps-sr-pe-tb-hr-se-wh,
1666
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-se-wh, var(--_ctm-dn-ps-sr-pe-tb-hr-se-wh))
1531
+ --_ctm-mob-dn-sr-tb-hr-se-wh,
1532
+ var(--_ctm-tab-dn-sr-tb-hr-se-wh, var(--_ctm-dn-sr-tb-hr-se-wh))
1667
1533
  );
1668
1534
 
1669
1535
  &[data-hover-show-shadow="false"] {
@@ -1674,72 +1540,48 @@ $defaultValues: (
1674
1540
  }
1675
1541
  }
1676
1542
 
1677
- background-color: var(
1678
- --_sf-hr-bd-cr,
1679
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-bd-cr)
1680
- );
1543
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-bd-cr));
1681
1544
 
1682
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-pg));
1545
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-pg));
1683
1546
  display: flex;
1684
1547
  flex-direction: var(--_sf-fd-bn);
1685
1548
  align-items: center;
1686
1549
 
1687
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-at));
1688
- gap: var(
1689
- --_sf-hr-in-ad-tt-sg,
1690
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-in-ad-tt-sg)
1691
- );
1550
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-at));
1551
+ gap: var(--_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-in-ad-tt-sg));
1692
1552
 
1693
- border-radius: var(
1694
- --_sf-hr-br-rs,
1695
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-rs)
1696
- );
1553
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-rs));
1697
1554
 
1698
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-ae))
1699
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-br))
1700
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-sd))
1701
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-cr));
1555
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-ae))
1556
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-br))
1557
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-sd))
1558
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-cr));
1702
1559
 
1703
1560
  &[data-show-border="true"] {
1704
- border-color: var(
1705
- --_sf-hr-br-cr,
1706
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-cr)
1707
- );
1561
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-cr));
1708
1562
 
1709
- border-style: var(
1710
- --_sf-hr-br-se,
1711
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-se)
1712
- );
1563
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-se));
1713
1564
 
1714
- border-width: var(
1715
- --_sf-hr-br-wh,
1716
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-wh)
1717
- );
1565
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-wh));
1718
1566
  }
1719
1567
 
1720
1568
  // text styles
1721
1569
 
1722
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-cr));
1570
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-cr));
1723
1571
 
1724
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-fy));
1572
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-fy));
1725
1573
 
1726
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-se));
1574
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se));
1727
1575
 
1728
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-wt));
1576
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-wt));
1729
1577
 
1730
- font-style: var(
1731
- --_sf-hr-ft-se-ic,
1732
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-se-ic)
1733
- );
1578
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se-ic));
1734
1579
 
1735
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-tt-an));
1580
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-an));
1736
1581
 
1737
- letter-spacing: var(
1738
- --_sf-hr-lr-sg,
1739
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-lr-sg)
1740
- );
1582
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-lr-sg));
1741
1583
 
1742
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-le-ht));
1584
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-le-ht));
1743
1585
 
1744
1586
  text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1745
1587
 
@@ -1751,117 +1593,111 @@ $defaultValues: (
1751
1593
  &[data-is-selected="true"] {
1752
1594
  --_sf-sd-bd-cr: var(
1753
1595
  --_ctm-mob-dn-me-sd-se-bd-cr,
1754
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-bd-cr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-bd-cr))
1596
+ var(--_ctm-tab-dn-sr-tb-sd-se-bd-cr, var(--_ctm-dn-sr-tb-sd-se-bd-cr))
1755
1597
  );
1756
1598
  --_sf-sd-br-cr: var(
1757
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-br-cr,
1758
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-br-cr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-br-cr))
1599
+ --_ctm-mob-dn-sr-tb-sd-se-br-cr,
1600
+ var(--_ctm-tab-dn-sr-tb-sd-se-br-cr, var(--_ctm-dn-sr-tb-sd-se-br-cr))
1759
1601
  );
1760
1602
  --_sf-sd-br-se: var(
1761
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-br-se,
1762
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-br-se, var(--_ctm-dn-ps-sr-pe-tb-sd-se-br-se))
1603
+ --_ctm-mob-dn-sr-tb-sd-se-br-se,
1604
+ var(--_ctm-tab-dn-sr-tb-sd-se-br-se, var(--_ctm-dn-sr-tb-sd-se-br-se))
1763
1605
  );
1764
1606
  --_sf-sd-br-wh: var(
1765
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-br-wh,
1766
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-br-wh, var(--_ctm-dn-ps-sr-pe-tb-sd-se-br-wh))
1607
+ --_ctm-mob-dn-sr-tb-sd-se-br-wh,
1608
+ var(--_ctm-tab-dn-sr-tb-sd-se-br-wh, var(--_ctm-dn-sr-tb-sd-se-br-wh))
1767
1609
  );
1768
1610
  --_sf-sd-br-rs: var(
1769
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-br-rs,
1770
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-br-rs, var(--_ctm-dn-ps-sr-pe-tb-sd-se-br-rs))
1611
+ --_ctm-mob-dn-sr-tb-sd-se-br-rs,
1612
+ var(--_ctm-tab-dn-sr-tb-sd-se-br-rs, var(--_ctm-dn-sr-tb-sd-se-br-rs))
1771
1613
  );
1772
1614
  --_sf-sd-at: var(
1773
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-at,
1774
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-at, var(--_ctm-dn-ps-sr-pe-tb-sd-se-at))
1615
+ --_ctm-mob-dn-sr-tb-sd-se-at,
1616
+ var(--_ctm-tab-dn-sr-tb-sd-se-at, var(--_ctm-dn-sr-tb-sd-se-at))
1775
1617
  );
1776
1618
  --_sf-sd-in-ad-tt-sg: var(
1777
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-in-ad-tt-sg,
1778
- var(
1779
- --_ctm-tab-dn-ps-sr-pe-tb-sd-se-in-ad-tt-sg,
1780
- var(--_ctm-dn-ps-sr-pe-tb-sd-se-in-ad-tt-sg)
1781
- )
1619
+ --_ctm-mob-dn-sr-tb-sd-se-in-ad-tt-sg,
1620
+ var(--_ctm-tab-dn-sr-tb-sd-se-in-ad-tt-sg, var(--_ctm-dn-sr-tb-sd-se-in-ad-tt-sg))
1782
1621
  );
1783
1622
 
1784
1623
  // for shadow
1785
1624
  --_sf-sd-sw-ae: var(
1786
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-sw-ae,
1787
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-sw-ae, var(--_ctm-dn-ps-sr-pe-tb-sd-se-sw-ae))
1625
+ --_ctm-mob-dn-sr-tb-sd-se-sw-ae,
1626
+ var(--_ctm-tab-dn-sr-tb-sd-se-sw-ae, var(--_ctm-dn-sr-tb-sd-se-sw-ae))
1788
1627
  );
1789
1628
  --_sf-sd-sw-br: var(
1790
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-sw-br,
1791
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-sw-br, var(--_ctm-dn-ps-sr-pe-tb-sd-se-sw-br))
1629
+ --_ctm-mob-dn-sr-tb-sd-se-sw-br,
1630
+ var(--_ctm-tab-dn-sr-tb-sd-se-sw-br, var(--_ctm-dn-sr-tb-sd-se-sw-br))
1792
1631
  );
1793
1632
  --_sf-sd-sw-hr: var(
1794
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-sw-hr,
1795
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-sw-hr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-sw-hr))
1633
+ --_ctm-mob-dn-sr-tb-sd-se-sw-hr,
1634
+ var(--_ctm-tab-dn-sr-tb-sd-se-sw-hr, var(--_ctm-dn-sr-tb-sd-se-sw-hr))
1796
1635
  );
1797
1636
  --_sf-sd-sw-cr: var(
1798
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-sw-cr,
1799
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-sw-cr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-sw-cr))
1637
+ --_ctm-mob-dn-sr-tb-sd-se-sw-cr,
1638
+ var(--_ctm-tab-dn-sr-tb-sd-se-sw-cr, var(--_ctm-dn-sr-tb-sd-se-sw-cr))
1800
1639
  );
1801
1640
 
1802
1641
  // for font
1803
1642
 
1804
1643
  --_sf-sd-cr: var(
1805
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-cr,
1806
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-cr, var(--_ctm-dn-ps-sr-pe-tb-sd-se-cr))
1644
+ --_ctm-mob-dn-sr-tb-sd-se-cr,
1645
+ var(--_ctm-tab-dn-sr-tb-sd-se-cr, var(--_ctm-dn-sr-tb-sd-se-cr))
1807
1646
  );
1808
1647
  --_sf-sd-ft-fy: var(
1809
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-ft-fy,
1810
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-ft-fy, var(--_ctm-dn-ps-sr-pe-tb-sd-se-ft-fy))
1648
+ --_ctm-mob-dn-sr-tb-sd-se-ft-fy,
1649
+ var(--_ctm-tab-dn-sr-tb-sd-se-ft-fy, var(--_ctm-dn-sr-tb-sd-se-ft-fy))
1811
1650
  );
1812
1651
  --_sf-sd-ft-se: var(
1813
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-ft-se,
1814
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-ft-se, var(--_ctm-dn-ps-sr-pe-tb-sd-se-ft-se))
1652
+ --_ctm-mob-dn-sr-tb-sd-se-ft-se,
1653
+ var(--_ctm-tab-dn-sr-tb-sd-se-ft-se, var(--_ctm-dn-sr-tb-sd-se-ft-se))
1815
1654
  );
1816
1655
  --_sf-sd-ft-wt: var(
1817
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-ft-wt,
1818
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-ft-wt, var(--_ctm-dn-ps-sr-pe-tb-sd-se-ft-wt))
1656
+ --_ctm-mob-dn-sr-tb-sd-se-ft-wt,
1657
+ var(--_ctm-tab-dn-sr-tb-sd-se-ft-wt, var(--_ctm-dn-sr-tb-sd-se-ft-wt))
1819
1658
  );
1820
1659
  --_sf-sd-ft-se-ic: var(
1821
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-ft-se-ic,
1822
- var(
1823
- --_ctm-tab-dn-ps-sr-pe-tb-sd-se-ft-se-ic,
1824
- var(--_ctm-dn-ps-sr-pe-tb-sd-se-ft-se-ic)
1825
- )
1660
+ --_ctm-mob-dn-sr-tb-sd-se-ft-se-ic,
1661
+ var(--_ctm-tab-dn-sr-tb-sd-se-ft-se-ic, var(--_ctm-dn-sr-tb-sd-se-ft-se-ic))
1826
1662
  );
1827
1663
  --_sf-sd-tt-an: var(
1828
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-tt-an,
1829
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-tt-an, var(--_ctm-dn-ps-sr-pe-tb-sd-se-tt-an))
1664
+ --_ctm-mob-dn-sr-tb-sd-se-tt-an,
1665
+ var(--_ctm-tab-dn-sr-tb-sd-se-tt-an, var(--_ctm-dn-sr-tb-sd-se-tt-an))
1830
1666
  );
1831
1667
  --_sf-sd-lr-sg: var(
1832
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-lr-sg,
1833
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-lr-sg, var(--_ctm-dn-ps-sr-pe-tb-sd-se-lr-sg))
1668
+ --_ctm-mob-dn-sr-tb-sd-se-lr-sg,
1669
+ var(--_ctm-tab-dn-sr-tb-sd-se-lr-sg, var(--_ctm-dn-sr-tb-sd-se-lr-sg))
1834
1670
  );
1835
1671
  --_sf-sd-le-ht: var(
1836
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-le-ht,
1837
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-le-ht, var(--_ctm-dn-ps-sr-pe-tb-sd-se-le-ht))
1672
+ --_ctm-mob-dn-sr-tb-sd-se-le-ht,
1673
+ var(--_ctm-tab-dn-sr-tb-sd-se-le-ht, var(--_ctm-dn-sr-tb-sd-se-le-ht))
1838
1674
  );
1839
1675
 
1840
1676
  --_sf-sd-in-se: var(
1841
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-in-se,
1842
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-in-se, var(--_ctm-dn-ps-sr-pe-tb-sd-se-in-se))
1677
+ --_ctm-mob-dn-sr-tb-sd-se-in-se,
1678
+ var(--_ctm-tab-dn-sr-tb-sd-se-in-se, var(--_ctm-dn-sr-tb-sd-se-in-se))
1843
1679
  );
1844
1680
  --_sf-sd-in-se: var(
1845
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-in-se,
1846
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-in-se, var(--_ctm-dn-ps-sr-pe-tb-sd-se-in-se))
1681
+ --_ctm-mob-dn-sr-tb-sd-se-in-se,
1682
+ var(--_ctm-tab-dn-sr-tb-sd-se-in-se, var(--_ctm-dn-sr-tb-sd-se-in-se))
1847
1683
  );
1848
1684
  --_sf-sd-in-c1: var(
1849
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-in-c1,
1850
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-in-c1, var(--_ctm-dn-ps-sr-pe-tb-sd-se-in-c1))
1685
+ --_ctm-mob-dn-sr-tb-sd-se-in-c1,
1686
+ var(--_ctm-tab-dn-sr-tb-sd-se-in-c1, var(--_ctm-dn-sr-tb-sd-se-in-c1))
1851
1687
  );
1852
1688
  --_sf-sd-ue: var(
1853
- --_ctm-mob-dn-ps-sr-pe-tb-hr-ue,
1854
- var(--_ctm-tab-dn-ps-sr-pe-tb-hr-ue, var(--_ctm-dn-ps-sr-pe-tb-hr-ue))
1689
+ --_ctm-mob-dn-sr-tb-hr-ue,
1690
+ var(--_ctm-tab-dn-sr-tb-hr-ue, var(--_ctm-dn-sr-tb-hr-ue))
1855
1691
  );
1856
1692
 
1857
1693
  // for pading and width
1858
1694
  --_sf-sd-pg: var(
1859
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-pg,
1860
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-pg, var(--_ctm-dn-ps-sr-pe-tb-sd-se-pg))
1695
+ --_ctm-mob-dn-sr-tb-sd-se-pg,
1696
+ var(--_ctm-tab-dn-sr-tb-sd-se-pg, var(--_ctm-dn-sr-tb-sd-se-pg))
1861
1697
  );
1862
1698
  --_sf-sd-wh: var(
1863
- --_ctm-mob-dn-ps-sr-pe-tb-sd-se-wh,
1864
- var(--_ctm-tab-dn-ps-sr-pe-tb-sd-se-wh, var(--_ctm-dn-ps-sr-pe-tb-sd-se-wh))
1699
+ --_ctm-mob-dn-sr-tb-sd-se-wh,
1700
+ var(--_ctm-tab-dn-sr-tb-sd-se-wh, var(--_ctm-dn-sr-tb-sd-se-wh))
1865
1701
  );
1866
1702
 
1867
1703
  &[data-hover-show-shadow="false"] {
@@ -1873,82 +1709,52 @@ $defaultValues: (
1873
1709
 
1874
1710
  background-color: var(
1875
1711
  --_sf-sd-bd-cr,
1876
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-bd-cr)
1712
+ prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-bd-cr)
1877
1713
  );
1878
1714
 
1879
- padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-pg));
1715
+ padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-pg));
1880
1716
  display: flex;
1881
1717
  flex-direction: var(--_sf-fd-bn);
1882
1718
  align-items: center;
1883
1719
 
1884
- justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-at));
1885
- gap: var(
1886
- --_sf-sd-in-ad-tt-sg,
1887
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-in-ad-tt-sg)
1888
- );
1720
+ justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-at));
1721
+ gap: var(--_sf-sd-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-in-ad-tt-sg));
1889
1722
 
1890
- border-radius: var(
1891
- --_sf-sd-br-rs,
1892
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-rs)
1893
- );
1723
+ border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-rs));
1894
1724
 
1895
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-ae))
1896
- var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-br))
1897
- var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-sd))
1898
- var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-sw-cr));
1725
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-ae))
1726
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-br))
1727
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-sd))
1728
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-sw-cr));
1899
1729
 
1900
1730
  &[data-show-border="true"] {
1901
- border-color: var(
1902
- --_sf-sd-br-cr,
1903
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-cr)
1904
- );
1731
+ border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-cr));
1905
1732
 
1906
- border-style: var(
1907
- --_sf-sd-br-se,
1908
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-se)
1909
- );
1733
+ border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-se));
1910
1734
 
1911
- border-width: var(
1912
- --_sf-sd-br-wh,
1913
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-br-wh)
1914
- );
1735
+ border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-br-wh));
1915
1736
  }
1916
1737
 
1917
1738
  // text styles
1918
1739
 
1919
- color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-cr));
1740
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-cr));
1920
1741
 
1921
- font-family: var(
1922
- --_sf-sd-ft-fy,
1923
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-fy)
1924
- );
1742
+ font-family: var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-fy));
1925
1743
 
1926
- font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-se));
1744
+ font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se));
1927
1745
 
1928
- font-weight: var(
1929
- --_sf-sd-ft-wt,
1930
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-wt)
1931
- );
1746
+ font-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-wt));
1932
1747
 
1933
1748
  font-style: var(
1934
1749
  --_sf-sd-ft-se-ic,
1935
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-ft-se-ic)
1750
+ prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-ft-se-ic)
1936
1751
  );
1937
1752
 
1938
- text-align: var(
1939
- --_sf-sd-tt-an,
1940
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-tt-an)
1941
- );
1753
+ text-align: var(--_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-tt-an));
1942
1754
 
1943
- letter-spacing: var(
1944
- --_sf-sd-lr-sg,
1945
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-lr-sg)
1946
- );
1755
+ letter-spacing: var(--_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-lr-sg));
1947
1756
 
1948
- line-height: var(
1949
- --_sf-sd-le-ht,
1950
- prepareMediaVariable(--_ctm-dn-ps-sr-pe-tb-dt-se-le-ht)
1951
- );
1757
+ line-height: var(--_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-sr-tb-dt-se-le-ht));
1952
1758
 
1953
1759
  text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1954
1760
 
@@ -1965,7 +1771,7 @@ $defaultValues: (
1965
1771
  .embla__viewport {
1966
1772
  .embla__container {
1967
1773
  display: flex;
1968
- gap: prepareMediaVariable(--_ctm-dn-ps-sr-wt-se-im-gp);
1774
+ gap: prepareMediaVariable(--_ctm-dn-sr-wt-se-im-gp);
1969
1775
  .embla__slide {
1970
1776
  width: unset;
1971
1777
  }
@@ -2369,5 +2175,174 @@ $defaultValues: (
2369
2175
  }
2370
2176
  }
2371
2177
  }
2178
+ // ---- Tree view: profiles sidebar + allocation on the right ---------------
2179
+ // Two columns, mirroring the Category Groups element. The gap between them is
2180
+ // the element's own allocation item gap so it stays in the same layout panel.
2181
+ .allocation_details_tree {
2182
+ display: flex;
2183
+ align-items: flex-start;
2184
+ width: 100%;
2185
+ gap: prepareMediaVariable(#{$ad-sidebar-design}-im-gp, 36px);
2186
+
2187
+ .ad_main {
2188
+ flex: 1;
2189
+ min-width: 0;
2190
+ }
2191
+ }
2192
+
2193
+ .ad_sidebar {
2194
+ display: flex;
2195
+ flex-direction: column;
2196
+ // Sidebar Container → gap (heading ↔ tree) + padding.
2197
+ gap: prepareMediaVariable(#{$ad-sidebar}-im-gp, 12px);
2198
+ padding: prepareMediaVariable(#{$ad-sidebar}-pg, 0);
2199
+ width: 260px;
2200
+ flex-shrink: 0;
2201
+ @include ad-design($ad-sidebar);
2202
+ border-radius: prepareMediaVariable(#{$ad-sidebar}-br-rs, 0);
2203
+ }
2204
+
2205
+ .ad_sidebar_heading {
2206
+ white-space: nowrap;
2207
+ margin: 0;
2208
+ text-transform: uppercase;
2209
+ line-height: 1.25;
2210
+ @include ad-font($ad-heading, #002a4e, 16px, 400);
2211
+ }
2212
+
2213
+ .ad_allocation_tree {
2214
+ display: flex;
2215
+ flex-direction: column;
2216
+ // Gap BETWEEN profile rows (Sidebar Container → Profile Gap).
2217
+ gap: prepareMediaVariable(#{$ad-sidebar}-pe-gp, 8px);
2218
+ width: 100%;
2219
+ }
2220
+
2221
+ .ad_tree_node {
2222
+ display: flex;
2223
+ align-items: center;
2224
+ // Profile Row → item gap (icon ↔ label).
2225
+ gap: prepareMediaVariable(#{$ad-tree}-dt-se-im-gp, 4px);
2226
+ padding: prepareMediaVariable(#{$ad-tree}-dt-se-pg, 4px 0);
2227
+ cursor: pointer;
2228
+ @include ad-design(#{$ad-tree}-dt-se);
2229
+ }
2230
+
2231
+ .ad_tree_node_icon {
2232
+ display: flex;
2233
+ align-items: center;
2234
+ justify-content: center;
2235
+ width: 24px;
2236
+ height: 24px;
2237
+ flex-shrink: 0;
2238
+ color: prepareMediaVariable(#{$ad-tree-icon}-in-c1, #002a4e);
2239
+ }
2240
+
2241
+ .ad_chevron {
2242
+ display: flex;
2243
+ align-items: center;
2244
+ justify-content: center;
2245
+ transition: transform 0.15s ease;
2246
+ color: prepareMediaVariable(#{$ad-tree-icon}-in-c1, #002a4e);
2247
+
2248
+ svg {
2249
+ width: prepareMediaVariable(#{$ad-tree-icon}-in-se, 20px);
2250
+ height: prepareMediaVariable(#{$ad-tree-icon}-in-se, 20px);
2251
+ // Apply the configured colour even when the fetched SVG hardcodes its own
2252
+ // stroke/fill (skip parts explicitly set to "none").
2253
+ &[stroke]:not([stroke="none"]),
2254
+ [stroke]:not([stroke="none"]) {
2255
+ stroke: prepareMediaVariable(#{$ad-tree-icon}-in-c1, #002a4e);
2256
+ }
2257
+ &[fill]:not([fill="none"]),
2258
+ [fill]:not([fill="none"]) {
2259
+ fill: prepareMediaVariable(#{$ad-tree-icon}-in-c1, #002a4e);
2260
+ }
2261
+ }
2262
+ }
2263
+
2264
+ .ad_chevron.is-open {
2265
+ transform: rotate(90deg);
2266
+ }
2267
+
2268
+ // The expanded icon has its own size/colour vars so it is independent of the
2269
+ // collapsed one.
2270
+ .ad_chevron.is-expanded {
2271
+ color: prepareMediaVariable(#{$ad-tree-icon}-in-cr-ed, #002a4e);
2272
+
2273
+ svg {
2274
+ width: prepareMediaVariable(#{$ad-tree-icon}-in-se-ed, 20px);
2275
+ height: prepareMediaVariable(#{$ad-tree-icon}-in-se-ed, 20px);
2276
+ &[stroke]:not([stroke="none"]),
2277
+ [stroke]:not([stroke="none"]) {
2278
+ stroke: prepareMediaVariable(#{$ad-tree-icon}-in-cr-ed, #002a4e);
2279
+ }
2280
+ &[fill]:not([fill="none"]),
2281
+ [fill]:not([fill="none"]) {
2282
+ fill: prepareMediaVariable(#{$ad-tree-icon}-in-cr-ed, #002a4e);
2283
+ }
2284
+ }
2285
+ }
2286
+
2287
+ .ad_tree_node_label {
2288
+ flex: 1;
2289
+ @include ad-font(#{$ad-tree}-dt-se, #002a4e, 14px, 600);
2290
+ }
2291
+
2292
+ .ad_tree_node:hover {
2293
+ @include ad-design-state($ad-tree, hr-se);
2294
+ }
2295
+ .ad_tree_node:hover .ad_tree_node_label {
2296
+ @include ad-font-state($ad-tree, hr-se, #002a4e, 14px, 600);
2297
+ }
2298
+ .ad_tree_node.is-active {
2299
+ @include ad-design-state($ad-tree, sd-se);
2300
+ }
2301
+ .ad_tree_node.is-active .ad_tree_node_label {
2302
+ @include ad-font-state($ad-tree, sd-se, #002a4e, 14px, 600);
2303
+ }
2304
+
2305
+ .ad_subtree {
2306
+ display: flex;
2307
+ flex-direction: column;
2308
+ // Gap BETWEEN allocation rows (Sidebar Container → Allocation Gap).
2309
+ gap: prepareMediaVariable(#{$ad-sidebar}-an-gp, 8px);
2310
+ padding-left: 31px;
2311
+ width: 100%;
2312
+ }
2313
+
2314
+ .ad_subtree_node {
2315
+ padding: prepareMediaVariable(#{$ad-subtree}-dt-se-pg, 4px 0);
2316
+ cursor: pointer;
2317
+ @include ad-design(#{$ad-subtree}-dt-se);
2318
+ }
2319
+
2320
+ .ad_subtree_node_label {
2321
+ letter-spacing: -0.28px;
2322
+ @include ad-font(#{$ad-subtree}-dt-se, #1d1b1c, 14px, 400);
2323
+ }
2324
+
2325
+ .ad_subtree_node:hover {
2326
+ @include ad-design-state($ad-subtree, hr-se);
2327
+ }
2328
+ .ad_subtree_node:hover .ad_subtree_node_label {
2329
+ @include ad-font-state($ad-subtree, hr-se, #1d1b1c, 14px, 400);
2330
+ }
2331
+ .ad_subtree_node.is-active {
2332
+ @include ad-design-state($ad-subtree, sd-se);
2333
+ }
2334
+ .ad_subtree_node.is-active .ad_subtree_node_label {
2335
+ @include ad-font-state($ad-subtree, sd-se, #1d1b1c, 14px, 400);
2336
+ }
2337
+
2338
+ // Narrow screens: the rail stops being a column and sits above the allocation.
2339
+ @media only screen and (max-width: 767px) {
2340
+ .allocation_details_tree {
2341
+ flex-direction: column;
2342
+ }
2343
+ .ad_sidebar {
2344
+ width: 100%;
2345
+ }
2346
+ }
2372
2347
  }
2373
2348
  }