@patternfly/react-templates 6.6.0-prerelease.3 → 6.6.0-prerelease.4

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.
@@ -3,88 +3,6 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-check {
7
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
8
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
9
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
10
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
11
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
12
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
13
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
14
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
15
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
16
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
17
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
18
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
19
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
20
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
21
- }
22
-
23
- .pf-v6-c-check {
24
- display: grid;
25
- grid-template-columns: auto 1fr;
26
- grid-gap: var(--pf-v6-c-check--GridGap);
27
- accent-color: var(--pf-v6-c-check--AccentColor);
28
- }
29
-
30
- .pf-v6-c-check.pf-m-standalone {
31
- display: inline-grid;
32
- grid-template-columns: auto;
33
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
34
- }
35
-
36
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
37
- align-self: center;
38
- transform: none;
39
- }
40
-
41
- .pf-v6-c-check__input {
42
- align-self: start;
43
- font-size: var(--pf-v6-c-check__label--FontSize);
44
- line-height: var(--pf-v6-c-check__label--LineHeight);
45
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
46
- }
47
-
48
- .pf-v6-c-check__label {
49
- font-size: var(--pf-v6-c-check__label--FontSize);
50
- font-weight: var(--pf-v6-c-check__label--FontWeight);
51
- line-height: var(--pf-v6-c-check__label--LineHeight);
52
- color: var(--pf-v6-c-check__label--Color);
53
- }
54
-
55
- .pf-v6-c-check__description {
56
- grid-column: 2;
57
- font-size: var(--pf-v6-c-check__description--FontSize);
58
- color: var(--pf-v6-c-check__description--Color);
59
- }
60
-
61
- .pf-v6-c-check__body {
62
- grid-column: 2;
63
- }
64
-
65
- .pf-v6-c-check__label,
66
- .pf-v6-c-check__input {
67
- justify-self: start;
68
- }
69
-
70
- label.pf-v6-c-check, .pf-v6-c-check__label,
71
- .pf-v6-c-check__input {
72
- cursor: pointer;
73
- }
74
-
75
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
76
- .pf-v6-c-check__input:disabled,
77
- .pf-v6-c-check__input.pf-m-disabled {
78
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
79
- cursor: not-allowed;
80
- }
81
-
82
- .pf-v6-c-check__label-required {
83
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
84
- font-size: var(--pf-v6-c-check__label-required--FontSize);
85
- color: var(--pf-v6-c-check__label-required--Color);
86
- }
87
-
88
6
  .pf-v6-c-label {
89
7
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
90
8
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -1301,162 +1219,6 @@ input.pf-v6-c-label__content {
1301
1219
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1302
1220
  }
1303
1221
 
1304
- .pf-v6-c-label-group {
1305
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1306
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1307
- --pf-v6-c-label-group--MaxWidth: 100%;
1308
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1309
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1310
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1311
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1312
- --pf-v6-c-label-group__main--MaxWidth: 100%;
1313
- --pf-v6-c-label-group__main--MinWidth: 0;
1314
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1315
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1316
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1317
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1318
- --pf-v6-c-label-group__list--MaxWidth: 100%;
1319
- --pf-v6-c-label-group__list--MinWidth: 0;
1320
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1321
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1322
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1323
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1324
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1325
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1326
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1327
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1328
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1329
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1330
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1331
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
1332
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1333
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1334
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1335
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1336
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1337
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1338
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1339
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1340
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1341
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1342
- }
1343
-
1344
- .pf-v6-c-label-group {
1345
- display: inline-flex;
1346
- row-gap: var(--pf-v6-c-label-group--RowGap);
1347
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1348
- align-items: center;
1349
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1350
- }
1351
-
1352
- .pf-v6-c-label-group.pf-m-category {
1353
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1354
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1355
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1356
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1357
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1358
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1359
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1360
- }
1361
-
1362
- .pf-v6-c-label-group.pf-m-vertical {
1363
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1364
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1365
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1366
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1367
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1368
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1369
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1370
- }
1371
-
1372
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1373
- align-items: flex-start;
1374
- }
1375
-
1376
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1377
- flex-direction: column;
1378
- align-items: flex-start;
1379
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1380
- }
1381
-
1382
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1383
- flex-direction: column;
1384
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1385
- }
1386
-
1387
- .pf-v6-c-label-group.pf-m-editable,
1388
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1389
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1390
- display: flex;
1391
- }
1392
-
1393
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1394
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1395
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1396
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1397
- flex: 1;
1398
- }
1399
-
1400
- .pf-v6-c-label-group__main {
1401
- display: flex;
1402
- flex: 1;
1403
- flex-wrap: wrap;
1404
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1405
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1406
- align-items: baseline;
1407
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1408
- }
1409
-
1410
- .pf-v6-c-label-group__list {
1411
- display: inline-flex;
1412
- flex-wrap: wrap;
1413
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1414
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1415
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1416
- }
1417
-
1418
- .pf-v6-c-label-group__list-item {
1419
- display: inline-flex;
1420
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1421
- }
1422
-
1423
- .pf-v6-c-label-group__label {
1424
- overflow: hidden;
1425
- text-overflow: ellipsis;
1426
- white-space: nowrap;
1427
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1428
- }
1429
-
1430
- .pf-v6-c-label-group__close {
1431
- display: flex;
1432
- align-self: flex-start;
1433
- }
1434
-
1435
- .pf-v6-c-label-group__close .pf-v6-c-button {
1436
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1437
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1438
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1439
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1440
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1441
- }
1442
-
1443
- .pf-v6-c-label-group__textarea {
1444
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1445
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1446
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1447
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1448
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1449
- white-space: nowrap;
1450
- resize: none;
1451
- scrollbar-width: none;
1452
- -ms-overflow-style: none;
1453
- border: 0;
1454
- }
1455
-
1456
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1457
- display: none;
1458
- }
1459
-
1460
1222
  .pf-v6-c-text-input-group {
1461
1223
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1462
1224
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
@@ -1701,24 +1463,583 @@ input.pf-v6-c-label__content {
1701
1463
  display: flex;
1702
1464
  }
1703
1465
 
1704
- .pf-v6-c-button {
1705
- --pf-v6-c-button--Display: inline-flex;
1706
- --pf-v6-c-button--AlignItems: baseline;
1707
- --pf-v6-c-button--JustifyContent: center;
1708
- --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1709
- --pf-v6-c-button--MinWidth: calc(1lh + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
1710
- --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1711
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1712
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1713
- --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1714
- --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
1715
- --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
1716
- --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
1717
- --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
1718
- --pf-v6-c-button--BackgroundColor: transparent;
1719
- --pf-v6-c-button--BorderColor: transparent;
1720
- --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
1721
- --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
1466
+ .pf-v6-c-check {
1467
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1468
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1469
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1470
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1471
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1472
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1473
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1474
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1475
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1476
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1477
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1478
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1479
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1480
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1481
+ }
1482
+
1483
+ .pf-v6-c-check {
1484
+ display: grid;
1485
+ grid-template-columns: auto 1fr;
1486
+ grid-gap: var(--pf-v6-c-check--GridGap);
1487
+ accent-color: var(--pf-v6-c-check--AccentColor);
1488
+ }
1489
+
1490
+ .pf-v6-c-check.pf-m-standalone {
1491
+ display: inline-grid;
1492
+ grid-template-columns: auto;
1493
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1494
+ }
1495
+
1496
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1497
+ align-self: center;
1498
+ transform: none;
1499
+ }
1500
+
1501
+ .pf-v6-c-check__input {
1502
+ align-self: start;
1503
+ font-size: var(--pf-v6-c-check__label--FontSize);
1504
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1505
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1506
+ }
1507
+
1508
+ .pf-v6-c-check__label {
1509
+ font-size: var(--pf-v6-c-check__label--FontSize);
1510
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
1511
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1512
+ color: var(--pf-v6-c-check__label--Color);
1513
+ }
1514
+
1515
+ .pf-v6-c-check__description {
1516
+ grid-column: 2;
1517
+ font-size: var(--pf-v6-c-check__description--FontSize);
1518
+ color: var(--pf-v6-c-check__description--Color);
1519
+ }
1520
+
1521
+ .pf-v6-c-check__body {
1522
+ grid-column: 2;
1523
+ }
1524
+
1525
+ .pf-v6-c-check__label,
1526
+ .pf-v6-c-check__input {
1527
+ justify-self: start;
1528
+ }
1529
+
1530
+ label.pf-v6-c-check, .pf-v6-c-check__label,
1531
+ .pf-v6-c-check__input {
1532
+ cursor: pointer;
1533
+ }
1534
+
1535
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1536
+ .pf-v6-c-check__input:disabled,
1537
+ .pf-v6-c-check__input.pf-m-disabled {
1538
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1539
+ cursor: not-allowed;
1540
+ }
1541
+
1542
+ .pf-v6-c-check__label-required {
1543
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1544
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
1545
+ color: var(--pf-v6-c-check__label-required--Color);
1546
+ }
1547
+
1548
+ .pf-v6-c-label-group {
1549
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1550
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1551
+ --pf-v6-c-label-group--MaxWidth: 100%;
1552
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1553
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1554
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1555
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1556
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
1557
+ --pf-v6-c-label-group__main--MinWidth: 0;
1558
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1559
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1560
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1561
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1562
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
1563
+ --pf-v6-c-label-group__list--MinWidth: 0;
1564
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1565
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1566
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1567
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1568
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1569
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1570
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1571
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1572
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1573
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1574
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1575
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1576
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1577
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1578
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1579
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1580
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1581
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1582
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1583
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1584
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1585
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1586
+ }
1587
+
1588
+ .pf-v6-c-label-group {
1589
+ display: inline-flex;
1590
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1591
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1592
+ align-items: center;
1593
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1594
+ }
1595
+
1596
+ .pf-v6-c-label-group.pf-m-category {
1597
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1598
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1599
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1600
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1601
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1602
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1603
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1604
+ }
1605
+
1606
+ .pf-v6-c-label-group.pf-m-vertical {
1607
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1608
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1609
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1610
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1611
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1612
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1613
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1614
+ }
1615
+
1616
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1617
+ align-items: flex-start;
1618
+ }
1619
+
1620
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1621
+ flex-direction: column;
1622
+ align-items: flex-start;
1623
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1624
+ }
1625
+
1626
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1627
+ flex-direction: column;
1628
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1629
+ }
1630
+
1631
+ .pf-v6-c-label-group.pf-m-editable,
1632
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1633
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1634
+ display: flex;
1635
+ }
1636
+
1637
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1638
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1639
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1640
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1641
+ flex: 1;
1642
+ }
1643
+
1644
+ .pf-v6-c-label-group__main {
1645
+ display: flex;
1646
+ flex: 1;
1647
+ flex-wrap: wrap;
1648
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1649
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1650
+ align-items: baseline;
1651
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1652
+ }
1653
+
1654
+ .pf-v6-c-label-group__list {
1655
+ display: inline-flex;
1656
+ flex-wrap: wrap;
1657
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1658
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1659
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1660
+ }
1661
+
1662
+ .pf-v6-c-label-group__list-item {
1663
+ display: inline-flex;
1664
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1665
+ }
1666
+
1667
+ .pf-v6-c-label-group__label {
1668
+ overflow: hidden;
1669
+ text-overflow: ellipsis;
1670
+ white-space: nowrap;
1671
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1672
+ }
1673
+
1674
+ .pf-v6-c-label-group__close {
1675
+ display: flex;
1676
+ align-self: flex-start;
1677
+ }
1678
+
1679
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1680
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1681
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1682
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1683
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1684
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1685
+ }
1686
+
1687
+ .pf-v6-c-label-group__textarea {
1688
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1689
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1690
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1691
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1692
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1693
+ white-space: nowrap;
1694
+ resize: none;
1695
+ scrollbar-width: none;
1696
+ -ms-overflow-style: none;
1697
+ border: 0;
1698
+ }
1699
+
1700
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1701
+ display: none;
1702
+ }
1703
+
1704
+ .pf-v6-c-divider {
1705
+ --pf-v6-c-divider--Display: flex;
1706
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1707
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1708
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1709
+ }
1710
+
1711
+ .pf-v6-c-divider {
1712
+ flex-direction: row;
1713
+ width: 100%;
1714
+ height: var(--pf-v6-c-divider--Size);
1715
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1716
+ --pf-v6-hidden-visible--hidden--Display: none;
1717
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1718
+ display: var(--pf-v6-hidden-visible--Display);
1719
+ }
1720
+
1721
+ .pf-v6-c-divider.pf-m-hidden {
1722
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1723
+ }
1724
+
1725
+ @media screen and (min-width: 36rem) {
1726
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
1727
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1728
+ }
1729
+ .pf-v6-c-divider.pf-m-visible-on-sm {
1730
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1731
+ }
1732
+ }
1733
+ @media screen and (min-width: 48rem) {
1734
+ .pf-v6-c-divider.pf-m-hidden-on-md {
1735
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1736
+ }
1737
+ .pf-v6-c-divider.pf-m-visible-on-md {
1738
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1739
+ }
1740
+ }
1741
+ @media screen and (min-width: 62rem) {
1742
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
1743
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1744
+ }
1745
+ .pf-v6-c-divider.pf-m-visible-on-lg {
1746
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1747
+ }
1748
+ }
1749
+ @media screen and (min-width: 75rem) {
1750
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
1751
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1752
+ }
1753
+ .pf-v6-c-divider.pf-m-visible-on-xl {
1754
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1755
+ }
1756
+ }
1757
+ @media screen and (min-width: 90.625rem) {
1758
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
1759
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1760
+ }
1761
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
1762
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1763
+ }
1764
+ }
1765
+ .pf-v6-c-divider {
1766
+ flex-shrink: 0;
1767
+ align-items: stretch;
1768
+ align-self: stretch;
1769
+ justify-content: center;
1770
+ border: 0;
1771
+ }
1772
+
1773
+ .pf-v6-c-divider::before {
1774
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1775
+ content: "";
1776
+ background-color: var(--pf-v6-c-divider--Color);
1777
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
1778
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
1779
+ }
1780
+
1781
+ .pf-v6-c-divider.pf-m-horizontal {
1782
+ flex-direction: row;
1783
+ width: 100%;
1784
+ height: var(--pf-v6-c-divider--Size);
1785
+ }
1786
+
1787
+ .pf-v6-c-divider.pf-m-vertical {
1788
+ flex-direction: column;
1789
+ width: var(--pf-v6-c-divider--Size);
1790
+ height: inherit;
1791
+ }
1792
+
1793
+ .pf-v6-c-divider.pf-m-inset-none {
1794
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1795
+ }
1796
+
1797
+ .pf-v6-c-divider.pf-m-inset-xs {
1798
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1799
+ }
1800
+
1801
+ .pf-v6-c-divider.pf-m-inset-sm {
1802
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1803
+ }
1804
+
1805
+ .pf-v6-c-divider.pf-m-inset-md {
1806
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1807
+ }
1808
+
1809
+ .pf-v6-c-divider.pf-m-inset-lg {
1810
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1811
+ }
1812
+
1813
+ .pf-v6-c-divider.pf-m-inset-xl {
1814
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1815
+ }
1816
+
1817
+ .pf-v6-c-divider.pf-m-inset-2xl {
1818
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1819
+ }
1820
+
1821
+ .pf-v6-c-divider.pf-m-inset-3xl {
1822
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1823
+ }
1824
+
1825
+ @media (min-width: 36rem) {
1826
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
1827
+ flex-direction: row;
1828
+ width: 100%;
1829
+ height: var(--pf-v6-c-divider--Size);
1830
+ }
1831
+ }
1832
+ @media (min-width: 36rem) {
1833
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
1834
+ flex-direction: column;
1835
+ width: var(--pf-v6-c-divider--Size);
1836
+ height: inherit;
1837
+ }
1838
+ }
1839
+ @media (min-width: 36rem) {
1840
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
1841
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1842
+ }
1843
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1844
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1845
+ }
1846
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1847
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1848
+ }
1849
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
1850
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1851
+ }
1852
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1853
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1854
+ }
1855
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1856
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1857
+ }
1858
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1859
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1860
+ }
1861
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1862
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1863
+ }
1864
+ }
1865
+ @media (min-width: 48rem) {
1866
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
1867
+ flex-direction: row;
1868
+ width: 100%;
1869
+ height: var(--pf-v6-c-divider--Size);
1870
+ }
1871
+ }
1872
+ @media (min-width: 48rem) {
1873
+ .pf-v6-c-divider.pf-m-vertical-on-md {
1874
+ flex-direction: column;
1875
+ width: var(--pf-v6-c-divider--Size);
1876
+ height: inherit;
1877
+ }
1878
+ }
1879
+ @media (min-width: 48rem) {
1880
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
1881
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1882
+ }
1883
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
1884
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1885
+ }
1886
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
1887
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1888
+ }
1889
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
1890
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1891
+ }
1892
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
1893
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1894
+ }
1895
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
1896
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1897
+ }
1898
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1899
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1900
+ }
1901
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1902
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1903
+ }
1904
+ }
1905
+ @media (min-width: 62rem) {
1906
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
1907
+ flex-direction: row;
1908
+ width: 100%;
1909
+ height: var(--pf-v6-c-divider--Size);
1910
+ }
1911
+ }
1912
+ @media (min-width: 62rem) {
1913
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
1914
+ flex-direction: column;
1915
+ width: var(--pf-v6-c-divider--Size);
1916
+ height: inherit;
1917
+ }
1918
+ }
1919
+ @media (min-width: 62rem) {
1920
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
1921
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1922
+ }
1923
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1924
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1925
+ }
1926
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1927
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1928
+ }
1929
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
1930
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1931
+ }
1932
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1933
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1934
+ }
1935
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1936
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1937
+ }
1938
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1939
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1940
+ }
1941
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1942
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1943
+ }
1944
+ }
1945
+ @media (min-width: 75rem) {
1946
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
1947
+ flex-direction: row;
1948
+ width: 100%;
1949
+ height: var(--pf-v6-c-divider--Size);
1950
+ }
1951
+ }
1952
+ @media (min-width: 75rem) {
1953
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
1954
+ flex-direction: column;
1955
+ width: var(--pf-v6-c-divider--Size);
1956
+ height: inherit;
1957
+ }
1958
+ }
1959
+ @media (min-width: 75rem) {
1960
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
1961
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1962
+ }
1963
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1964
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1965
+ }
1966
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1967
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1968
+ }
1969
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
1970
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1971
+ }
1972
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1973
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1974
+ }
1975
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1976
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1977
+ }
1978
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1979
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1980
+ }
1981
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1982
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1983
+ }
1984
+ }
1985
+ @media (min-width: 90.625rem) {
1986
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1987
+ flex-direction: row;
1988
+ width: 100%;
1989
+ height: var(--pf-v6-c-divider--Size);
1990
+ }
1991
+ }
1992
+ @media (min-width: 90.625rem) {
1993
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
1994
+ flex-direction: column;
1995
+ width: var(--pf-v6-c-divider--Size);
1996
+ height: inherit;
1997
+ }
1998
+ }
1999
+ @media (min-width: 90.625rem) {
2000
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2001
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2002
+ }
2003
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2004
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2005
+ }
2006
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2007
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2008
+ }
2009
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2010
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2011
+ }
2012
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2013
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2014
+ }
2015
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2016
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2017
+ }
2018
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2019
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2020
+ }
2021
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2022
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2023
+ }
2024
+ }
2025
+ .pf-v6-c-button {
2026
+ --pf-v6-c-button--Display: inline-flex;
2027
+ --pf-v6-c-button--AlignItems: baseline;
2028
+ --pf-v6-c-button--JustifyContent: center;
2029
+ --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
2030
+ --pf-v6-c-button--MinWidth: calc(1lh + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
2031
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2032
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
2033
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2034
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
2035
+ --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
2036
+ --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
2037
+ --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
2038
+ --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
2039
+ --pf-v6-c-button--BackgroundColor: transparent;
2040
+ --pf-v6-c-button--BorderColor: transparent;
2041
+ --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
2042
+ --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
1722
2043
  --pf-v6-c-button--TextDecorationLine: none;
1723
2044
  --pf-v6-c-button--TextDecorationStyle: none;
1724
2045
  --pf-v6-c-button--TextDecorationColor: currentcolor;
@@ -2557,490 +2878,169 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2557
2878
  pointer-events: none;
2558
2879
  }
2559
2880
 
2560
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2561
- color: var(--pf-v6-c-button--disabled--Color);
2562
- text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2563
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
2564
- }
2565
-
2566
- .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2567
- border-color: transparent;
2568
- }
2569
-
2570
- .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
2571
- color: var(--pf-v6-c-button--disabled__icon--Color);
2572
- }
2573
-
2574
- .pf-v6-c-button.pf-m-aria-disabled {
2575
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
2576
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
2577
- cursor: default;
2578
- }
2579
-
2580
- .pf-v6-c-button.pf-m-progress {
2581
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
2582
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
2583
- }
2584
-
2585
- .pf-v6-c-button.pf-m-in-progress {
2586
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2587
- }
2588
-
2589
- .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2590
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2591
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2592
- }
2593
-
2594
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2595
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2596
- --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2597
- }
2598
-
2599
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2600
- opacity: 0;
2601
- }
2602
-
2603
- .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2604
- animation-name: pf-v6-c-button-icon-notify;
2605
- animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2606
- animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2607
- }
2608
-
2609
- .pf-v6-c-button.pf-m-docked {
2610
- justify-content: flex-start;
2611
- width: 100%;
2612
- }
2613
-
2614
- @media (min-width: 62rem) {
2615
- .pf-v6-c-button.pf-m-docked {
2616
- justify-content: center;
2617
- }
2618
- .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text {
2619
- display: none;
2620
- }
2621
- }
2622
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked, .pf-v6-c-button.pf-m-text-expanded {
2623
- justify-content: flex-start;
2624
- width: 100%;
2625
- }
2626
-
2627
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
2628
- display: revert;
2629
- }
2630
-
2631
- .pf-v6-c-button__icon {
2632
- margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2633
- margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2634
- color: var(--pf-v6-c-button__icon--Color);
2635
- transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2636
- transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2637
- transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2638
- transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2639
- rotate: var(--pf-v6-c-button__icon--Rotate);
2640
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2641
- }
2642
-
2643
- .pf-v6-c-button__icon.pf-m-start {
2644
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2645
- }
2646
-
2647
- .pf-v6-c-button__icon.pf-m-end {
2648
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2649
- }
2650
-
2651
- .pf-v6-c-button__icon-favorite,
2652
- .pf-v6-c-button__icon-favorited {
2653
- grid-area: 1/1/1/1;
2654
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2655
- transition-property: opacity;
2656
- }
2657
-
2658
- .pf-v6-c-button__icon-favorite {
2659
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2660
- }
2661
-
2662
- .pf-v6-c-button__icon-favorited {
2663
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2664
- }
2665
-
2666
- .pf-v6-c-button__progress {
2667
- position: absolute;
2668
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2669
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2670
- line-height: 1;
2671
- color: var(--pf-v6-c-button__progress--Color);
2672
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2673
- }
2674
-
2675
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2676
- --pf-v6-c-spinner--Color: currentcolor;
2677
- }
2678
-
2679
- .pf-v6-c-button__text {
2680
- text-decoration: inherit;
2681
- }
2682
-
2683
- .pf-v6-c-button__count {
2684
- display: inline-flex;
2685
- align-items: center;
2686
- }
2687
-
2688
- .pf-v6-c-button--hamburger-icon path {
2689
- fill: none;
2690
- stroke: currentcolor;
2691
- stroke-linecap: round;
2692
- stroke-linejoin: round;
2693
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2694
- }
2695
-
2696
- .pf-v6-c-button--hamburger-icon--top {
2697
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2698
- }
2699
-
2700
- .pf-v6-c-button--hamburger-icon--middle {
2701
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2702
- }
2703
-
2704
- .pf-v6-c-button--hamburger-icon--arrow {
2705
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2706
- }
2707
-
2708
- .pf-v6-c-button--hamburger-icon--bottom {
2709
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2710
- }
2711
-
2712
- @keyframes pf-v6-c-button-icon-notify {
2713
- 33% {
2714
- transform: rotate(30deg);
2715
- }
2716
- 66% {
2717
- transform: rotate(-60deg);
2718
- }
2719
- }
2720
- @keyframes pf-v6-c-button-icon-favorited {
2721
- 50% {
2722
- scale: 1.5;
2723
- }
2724
- }
2725
- .pf-v6-c-divider {
2726
- --pf-v6-c-divider--Display: flex;
2727
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2728
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2729
- --pf-v6-c-divider--before--FlexBasis: 100%;
2730
- }
2731
-
2732
- .pf-v6-c-divider {
2733
- flex-direction: row;
2734
- width: 100%;
2735
- height: var(--pf-v6-c-divider--Size);
2736
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2737
- --pf-v6-hidden-visible--hidden--Display: none;
2738
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2739
- display: var(--pf-v6-hidden-visible--Display);
2740
- }
2741
-
2742
- .pf-v6-c-divider.pf-m-hidden {
2743
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2744
- }
2745
-
2746
- @media screen and (min-width: 36rem) {
2747
- .pf-v6-c-divider.pf-m-hidden-on-sm {
2748
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2749
- }
2750
- .pf-v6-c-divider.pf-m-visible-on-sm {
2751
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2752
- }
2753
- }
2754
- @media screen and (min-width: 48rem) {
2755
- .pf-v6-c-divider.pf-m-hidden-on-md {
2756
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2757
- }
2758
- .pf-v6-c-divider.pf-m-visible-on-md {
2759
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2760
- }
2761
- }
2762
- @media screen and (min-width: 62rem) {
2763
- .pf-v6-c-divider.pf-m-hidden-on-lg {
2764
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2765
- }
2766
- .pf-v6-c-divider.pf-m-visible-on-lg {
2767
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2768
- }
2769
- }
2770
- @media screen and (min-width: 75rem) {
2771
- .pf-v6-c-divider.pf-m-hidden-on-xl {
2772
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2773
- }
2774
- .pf-v6-c-divider.pf-m-visible-on-xl {
2775
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2776
- }
2777
- }
2778
- @media screen and (min-width: 90.625rem) {
2779
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
2780
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2781
- }
2782
- .pf-v6-c-divider.pf-m-visible-on-2xl {
2783
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2784
- }
2785
- }
2786
- .pf-v6-c-divider {
2787
- flex-shrink: 0;
2788
- align-items: stretch;
2789
- align-self: stretch;
2790
- justify-content: center;
2791
- border: 0;
2792
- }
2793
-
2794
- .pf-v6-c-divider::before {
2795
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2796
- content: "";
2797
- background-color: var(--pf-v6-c-divider--Color);
2798
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2799
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2881
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2882
+ color: var(--pf-v6-c-button--disabled--Color);
2883
+ text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2884
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
2800
2885
  }
2801
2886
 
2802
- .pf-v6-c-divider.pf-m-horizontal {
2803
- flex-direction: row;
2804
- width: 100%;
2805
- height: var(--pf-v6-c-divider--Size);
2887
+ .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2888
+ border-color: transparent;
2806
2889
  }
2807
2890
 
2808
- .pf-v6-c-divider.pf-m-vertical {
2809
- flex-direction: column;
2810
- width: var(--pf-v6-c-divider--Size);
2811
- height: inherit;
2891
+ .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
2892
+ color: var(--pf-v6-c-button--disabled__icon--Color);
2812
2893
  }
2813
2894
 
2814
- .pf-v6-c-divider.pf-m-inset-none {
2815
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2895
+ .pf-v6-c-button.pf-m-aria-disabled {
2896
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
2897
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
2898
+ cursor: default;
2816
2899
  }
2817
2900
 
2818
- .pf-v6-c-divider.pf-m-inset-xs {
2819
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2901
+ .pf-v6-c-button.pf-m-progress {
2902
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
2903
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
2820
2904
  }
2821
2905
 
2822
- .pf-v6-c-divider.pf-m-inset-sm {
2823
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2906
+ .pf-v6-c-button.pf-m-in-progress {
2907
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2824
2908
  }
2825
2909
 
2826
- .pf-v6-c-divider.pf-m-inset-md {
2827
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2910
+ .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2911
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2912
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2828
2913
  }
2829
2914
 
2830
- .pf-v6-c-divider.pf-m-inset-lg {
2831
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2915
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2916
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2917
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2832
2918
  }
2833
2919
 
2834
- .pf-v6-c-divider.pf-m-inset-xl {
2835
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2920
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2921
+ opacity: 0;
2836
2922
  }
2837
2923
 
2838
- .pf-v6-c-divider.pf-m-inset-2xl {
2839
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2924
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2925
+ animation-name: pf-v6-c-button-icon-notify;
2926
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2927
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2840
2928
  }
2841
2929
 
2842
- .pf-v6-c-divider.pf-m-inset-3xl {
2843
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2930
+ .pf-v6-c-button.pf-m-docked {
2931
+ justify-content: flex-start;
2932
+ width: 100%;
2844
2933
  }
2845
2934
 
2846
- @media (min-width: 36rem) {
2847
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
2848
- flex-direction: row;
2849
- width: 100%;
2850
- height: var(--pf-v6-c-divider--Size);
2935
+ @media (min-width: 62rem) {
2936
+ .pf-v6-c-button.pf-m-docked {
2937
+ justify-content: center;
2851
2938
  }
2852
- }
2853
- @media (min-width: 36rem) {
2854
- .pf-v6-c-divider.pf-m-vertical-on-sm {
2855
- flex-direction: column;
2856
- width: var(--pf-v6-c-divider--Size);
2857
- height: inherit;
2939
+ .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text {
2940
+ display: none;
2858
2941
  }
2859
2942
  }
2860
- @media (min-width: 36rem) {
2861
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
2862
- --pf-v6-c-divider--before--FlexBasis: 100%;
2863
- }
2864
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2865
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2866
- }
2867
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2868
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2869
- }
2870
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
2871
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2872
- }
2873
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2874
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2875
- }
2876
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2877
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2878
- }
2879
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2880
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2881
- }
2882
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2883
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2884
- }
2943
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked, .pf-v6-c-button.pf-m-text-expanded {
2944
+ justify-content: flex-start;
2945
+ width: 100%;
2885
2946
  }
2886
- @media (min-width: 48rem) {
2887
- .pf-v6-c-divider.pf-m-horizontal-on-md {
2888
- flex-direction: row;
2889
- width: 100%;
2890
- height: var(--pf-v6-c-divider--Size);
2891
- }
2947
+
2948
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
2949
+ display: revert;
2892
2950
  }
2893
- @media (min-width: 48rem) {
2894
- .pf-v6-c-divider.pf-m-vertical-on-md {
2895
- flex-direction: column;
2896
- width: var(--pf-v6-c-divider--Size);
2897
- height: inherit;
2898
- }
2951
+
2952
+ .pf-v6-c-button__icon {
2953
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2954
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2955
+ color: var(--pf-v6-c-button__icon--Color);
2956
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2957
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2958
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2959
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2960
+ rotate: var(--pf-v6-c-button__icon--Rotate);
2961
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2899
2962
  }
2900
- @media (min-width: 48rem) {
2901
- .pf-v6-c-divider.pf-m-inset-none-on-md {
2902
- --pf-v6-c-divider--before--FlexBasis: 100%;
2903
- }
2904
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
2905
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2906
- }
2907
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
2908
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2909
- }
2910
- .pf-v6-c-divider.pf-m-inset-md-on-md {
2911
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2912
- }
2913
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
2914
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2915
- }
2916
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
2917
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2918
- }
2919
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2920
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2921
- }
2922
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2923
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2924
- }
2963
+
2964
+ .pf-v6-c-button__icon.pf-m-start {
2965
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2925
2966
  }
2926
- @media (min-width: 62rem) {
2927
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
2928
- flex-direction: row;
2929
- width: 100%;
2930
- height: var(--pf-v6-c-divider--Size);
2931
- }
2967
+
2968
+ .pf-v6-c-button__icon.pf-m-end {
2969
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2932
2970
  }
2933
- @media (min-width: 62rem) {
2934
- .pf-v6-c-divider.pf-m-vertical-on-lg {
2935
- flex-direction: column;
2936
- width: var(--pf-v6-c-divider--Size);
2937
- height: inherit;
2938
- }
2971
+
2972
+ .pf-v6-c-button__icon-favorite,
2973
+ .pf-v6-c-button__icon-favorited {
2974
+ grid-area: 1/1/1/1;
2975
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2976
+ transition-property: opacity;
2939
2977
  }
2940
- @media (min-width: 62rem) {
2941
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
2942
- --pf-v6-c-divider--before--FlexBasis: 100%;
2943
- }
2944
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2945
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2946
- }
2947
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2948
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2949
- }
2950
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
2951
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2952
- }
2953
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2954
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2955
- }
2956
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2957
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2958
- }
2959
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2960
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2961
- }
2962
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2963
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2964
- }
2978
+
2979
+ .pf-v6-c-button__icon-favorite {
2980
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2965
2981
  }
2966
- @media (min-width: 75rem) {
2967
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
2968
- flex-direction: row;
2969
- width: 100%;
2970
- height: var(--pf-v6-c-divider--Size);
2971
- }
2982
+
2983
+ .pf-v6-c-button__icon-favorited {
2984
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2972
2985
  }
2973
- @media (min-width: 75rem) {
2974
- .pf-v6-c-divider.pf-m-vertical-on-xl {
2975
- flex-direction: column;
2976
- width: var(--pf-v6-c-divider--Size);
2977
- height: inherit;
2978
- }
2986
+
2987
+ .pf-v6-c-button__progress {
2988
+ position: absolute;
2989
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2990
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2991
+ line-height: 1;
2992
+ color: var(--pf-v6-c-button__progress--Color);
2993
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2979
2994
  }
2980
- @media (min-width: 75rem) {
2981
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
2982
- --pf-v6-c-divider--before--FlexBasis: 100%;
2983
- }
2984
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2985
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2986
- }
2987
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2988
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2989
- }
2990
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
2991
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2992
- }
2993
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2994
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2995
- }
2996
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2997
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2998
- }
2999
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
3000
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3001
- }
3002
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
3003
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3004
- }
2995
+
2996
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2997
+ --pf-v6-c-spinner--Color: currentcolor;
2998
+ }
2999
+
3000
+ .pf-v6-c-button__text {
3001
+ text-decoration: inherit;
3005
3002
  }
3006
- @media (min-width: 90.625rem) {
3007
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
3008
- flex-direction: row;
3009
- width: 100%;
3010
- height: var(--pf-v6-c-divider--Size);
3011
- }
3003
+
3004
+ .pf-v6-c-button__count {
3005
+ display: inline-flex;
3006
+ align-items: center;
3012
3007
  }
3013
- @media (min-width: 90.625rem) {
3014
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
3015
- flex-direction: column;
3016
- width: var(--pf-v6-c-divider--Size);
3017
- height: inherit;
3018
- }
3008
+
3009
+ .pf-v6-c-button--hamburger-icon path {
3010
+ fill: none;
3011
+ stroke: currentcolor;
3012
+ stroke-linecap: round;
3013
+ stroke-linejoin: round;
3014
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
3019
3015
  }
3020
- @media (min-width: 90.625rem) {
3021
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
3022
- --pf-v6-c-divider--before--FlexBasis: 100%;
3023
- }
3024
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
3025
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
3026
- }
3027
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
3028
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
3029
- }
3030
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
3031
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
3032
- }
3033
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
3034
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
3035
- }
3036
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
3037
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
3016
+
3017
+ .pf-v6-c-button--hamburger-icon--top {
3018
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
3019
+ }
3020
+
3021
+ .pf-v6-c-button--hamburger-icon--middle {
3022
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
3023
+ }
3024
+
3025
+ .pf-v6-c-button--hamburger-icon--arrow {
3026
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
3027
+ }
3028
+
3029
+ .pf-v6-c-button--hamburger-icon--bottom {
3030
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
3031
+ }
3032
+
3033
+ @keyframes pf-v6-c-button-icon-notify {
3034
+ 33% {
3035
+ transform: rotate(30deg);
3038
3036
  }
3039
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
3040
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3037
+ 66% {
3038
+ transform: rotate(-60deg);
3041
3039
  }
3042
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
3043
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3040
+ }
3041
+ @keyframes pf-v6-c-button-icon-favorited {
3042
+ 50% {
3043
+ scale: 1.5;
3044
3044
  }
3045
3045
  }
3046
3046
  .pf-v6-c-menu {
@@ -3746,6 +3746,97 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3746
3746
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3747
3747
  }
3748
3748
 
3749
+ .pf-v6-c-spinner {
3750
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3751
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3752
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3753
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3754
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3755
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3756
+ --pf-v6-c-spinner--StrokeWidth: 10;
3757
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3758
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3759
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3760
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3761
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3762
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3763
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3764
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3765
+ }
3766
+
3767
+ .pf-v6-c-spinner {
3768
+ width: var(--pf-v6-c-spinner--Width);
3769
+ height: var(--pf-v6-c-spinner--Height);
3770
+ overflow: hidden;
3771
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3772
+ }
3773
+
3774
+ .pf-v6-c-spinner.pf-m-inline {
3775
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3776
+ }
3777
+
3778
+ .pf-v6-c-spinner.pf-m-xs {
3779
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3780
+ --pf-v6-c-spinner--StrokeWidth: 15;
3781
+ }
3782
+
3783
+ .pf-v6-c-spinner.pf-m-sm {
3784
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3785
+ }
3786
+
3787
+ .pf-v6-c-spinner.pf-m-md {
3788
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3789
+ }
3790
+
3791
+ .pf-v6-c-spinner.pf-m-lg {
3792
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3793
+ }
3794
+
3795
+ .pf-v6-c-spinner.pf-m-xl {
3796
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3797
+ }
3798
+
3799
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
3800
+ --pf-v6-c-spinner--AnimationDuration: 0s;
3801
+ }
3802
+
3803
+ .pf-v6-c-spinner__path {
3804
+ width: 100%;
3805
+ height: 100%;
3806
+ stroke: var(--pf-v6-c-spinner--Color);
3807
+ stroke-dasharray: 283;
3808
+ stroke-dashoffset: 280;
3809
+ stroke-linecap: round;
3810
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3811
+ transform-origin: 50% 50%;
3812
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3813
+ }
3814
+
3815
+ @keyframes pf-v6-c-spinner-animation-rotate {
3816
+ 0% {
3817
+ transform: rotate(0deg);
3818
+ }
3819
+ 100% {
3820
+ transform: rotate(360deg);
3821
+ }
3822
+ }
3823
+ @keyframes pf-v6-c-spinner-animation-dash {
3824
+ 0% {
3825
+ stroke-dashoffset: 280;
3826
+ transform: rotate(0);
3827
+ }
3828
+ 15% {
3829
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3830
+ }
3831
+ 40% {
3832
+ stroke-dasharray: 220;
3833
+ stroke-dashoffset: 150;
3834
+ }
3835
+ 100% {
3836
+ stroke-dashoffset: 280;
3837
+ transform: rotate(720deg);
3838
+ }
3839
+ }
3749
3840
  .pf-v6-c-breadcrumb {
3750
3841
  --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3751
3842
  --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -3995,96 +4086,4 @@ button.pf-v6-c-breadcrumb__link {
3995
4086
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3996
4087
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3997
4088
  transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3998
- }
3999
-
4000
- .pf-v6-c-spinner {
4001
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
4002
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
4003
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
4004
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
4005
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
4006
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
4007
- --pf-v6-c-spinner--StrokeWidth: 10;
4008
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
4009
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
4010
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
4011
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
4012
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
4013
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
4014
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
4015
- --pf-v6-c-spinner--m-inline--diameter: 1em;
4016
- }
4017
-
4018
- .pf-v6-c-spinner {
4019
- width: var(--pf-v6-c-spinner--Width);
4020
- height: var(--pf-v6-c-spinner--Height);
4021
- overflow: hidden;
4022
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
4023
- }
4024
-
4025
- .pf-v6-c-spinner.pf-m-inline {
4026
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
4027
- }
4028
-
4029
- .pf-v6-c-spinner.pf-m-xs {
4030
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
4031
- --pf-v6-c-spinner--StrokeWidth: 15;
4032
- }
4033
-
4034
- .pf-v6-c-spinner.pf-m-sm {
4035
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
4036
- }
4037
-
4038
- .pf-v6-c-spinner.pf-m-md {
4039
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
4040
- }
4041
-
4042
- .pf-v6-c-spinner.pf-m-lg {
4043
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
4044
- }
4045
-
4046
- .pf-v6-c-spinner.pf-m-xl {
4047
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
4048
- }
4049
-
4050
- .pf-v6-m-no-motion .pf-v6-c-spinner {
4051
- --pf-v6-c-spinner--AnimationDuration: 0s;
4052
- }
4053
-
4054
- .pf-v6-c-spinner__path {
4055
- width: 100%;
4056
- height: 100%;
4057
- stroke: var(--pf-v6-c-spinner--Color);
4058
- stroke-dasharray: 283;
4059
- stroke-dashoffset: 280;
4060
- stroke-linecap: round;
4061
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
4062
- transform-origin: 50% 50%;
4063
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
4064
- }
4065
-
4066
- @keyframes pf-v6-c-spinner-animation-rotate {
4067
- 0% {
4068
- transform: rotate(0deg);
4069
- }
4070
- 100% {
4071
- transform: rotate(360deg);
4072
- }
4073
- }
4074
- @keyframes pf-v6-c-spinner-animation-dash {
4075
- 0% {
4076
- stroke-dashoffset: 280;
4077
- transform: rotate(0);
4078
- }
4079
- 15% {
4080
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
4081
- }
4082
- 40% {
4083
- stroke-dasharray: 220;
4084
- stroke-dashoffset: 150;
4085
- }
4086
- 100% {
4087
- stroke-dashoffset: 280;
4088
- transform: rotate(720deg);
4089
- }
4090
4089
  }