@patternfly/react-templates 1.1.0-prerelease.38 → 1.1.0-prerelease.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-BuTRBEea.css → output-DtM3geql.css} +1657 -1657
  6. package/package.json +3 -3
package/dist/umd/assets/{output-BuTRBEea.css → output-DtM3geql.css} RENAMED
@@ -1324,253 +1324,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
1324
1324
  --pf-v5-c-action-list--child--spacer: var(--pf-v5-c-action-list--m-icon--spacer);
1325
1325
  }
1326
1326
 
1327
- .pf-v5-c-alert {
1328
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
1329
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
1330
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
1331
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
1332
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
1333
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
1334
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
1335
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
1336
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
1337
- }
1338
-
1339
- .pf-v5-c-alert {
1340
- --pf-v5-c-alert--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
1341
- --pf-v5-c-alert--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
1342
- --pf-v5-c-alert--GridTemplateColumns: max-content 1fr max-content;
1343
- --pf-v5-c-alert--GridTemplateAreas:
1344
- "icon title action"
1345
- ". description description"
1346
- ". actiongroup actiongroup";
1347
- --pf-v5-c-alert--BorderTopWidth: var(--pf-v5-global--BorderWidth--md);
1348
- --pf-v5-c-alert--BorderTopColor: var(--pf-v5-global--BorderColor--100);
1349
- --pf-v5-c-alert--PaddingTop: var(--pf-v5-global--spacer--md);
1350
- --pf-v5-c-alert--PaddingRight: var(--pf-v5-global--spacer--md);
1351
- --pf-v5-c-alert--PaddingBottom: var(--pf-v5-global--spacer--md);
1352
- --pf-v5-c-alert--PaddingLeft: var(--pf-v5-global--spacer--md);
1353
- --pf-v5-c-alert__FontSize: var(--pf-v5-global--FontSize--sm);
1354
- --pf-v5-c-alert__toggle--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element) - 0.0625rem);
1355
- --pf-v5-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
1356
- --pf-v5-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-v5-global--spacer--md));
1357
- --pf-v5-c-alert__toggle-icon--Rotate: 0;
1358
- --pf-v5-c-alert__toggle-icon--Transition: var(--pf-v5-global--Transition);
1359
- --pf-v5-c-alert__icon--Color: var(--pf-v5-global--Color--100);
1360
- --pf-v5-c-alert__icon--MarginTop: 0.0625rem;
1361
- --pf-v5-c-alert__icon--MarginRight: var(--pf-v5-global--spacer--sm);
1362
- --pf-v5-c-alert__icon--FontSize: var(--pf-v5-global--icon--FontSize--md);
1363
- --pf-v5-c-alert__title--FontWeight: var(--pf-v5-global--FontWeight--bold);
1364
- --pf-v5-c-alert__title--Color: var(--pf-v5-global--Color--100);
1365
- --pf-v5-c-alert__title--max-lines: 1;
1366
- --pf-v5-c-alert__action--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
1367
- --pf-v5-c-alert__action--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
1368
- --pf-v5-c-alert__action--TranslateY: 0.125rem;
1369
- --pf-v5-c-alert__action--MarginRight: calc(var(--pf-v5-global--spacer--sm) * -1);
1370
- --pf-v5-c-alert__description--PaddingTop: var(--pf-v5-global--spacer--xs);
1371
- --pf-v5-c-alert__action-group--PaddingTop-base: var(--pf-v5-global--spacer--xs);
1372
- --pf-v5-c-alert__action-group--PaddingTop: var(--pf-v5-c-alert__action-group--PaddingTop-base);
1373
- --pf-v5-c-alert__description--action-group--PaddingTop-base: var(--pf-v5-global--spacer--md);
1374
- --pf-v5-c-alert__description--action-group--PaddingTop: var(--pf-v5-c-alert__description--action-group--PaddingTop-base);
1375
- --pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-v5-global--spacer--lg);
1376
- --pf-v5-c-alert--m-custom--BorderTopColor: var(--pf-v5-global--custom-color--200);
1377
- --pf-v5-c-alert--m-custom__icon--Color: var(--pf-v5-global--custom-color--200);
1378
- --pf-v5-c-alert--m-custom__title--Color: var(--pf-v5-global--custom-color--300);
1379
- --pf-v5-c-alert--m-success--BorderTopColor: var(--pf-v5-global--success-color--100);
1380
- --pf-v5-c-alert--m-success__icon--Color: var(--pf-v5-global--success-color--100);
1381
- --pf-v5-c-alert--m-success__title--Color: var(--pf-v5-global--success-color--200);
1382
- --pf-v5-c-alert--m-danger--BorderTopColor: var(--pf-v5-global--danger-color--100);
1383
- --pf-v5-c-alert--m-danger__icon--Color: var(--pf-v5-global--danger-color--100);
1384
- --pf-v5-c-alert--m-danger__title--Color: var(--pf-v5-global--danger-color--200);
1385
- --pf-v5-c-alert--m-warning--BorderTopColor: var(--pf-v5-global--warning-color--100);
1386
- --pf-v5-c-alert--m-warning__icon--Color: var(--pf-v5-global--warning-color--100);
1387
- --pf-v5-c-alert--m-warning__title--Color: var(--pf-v5-global--warning-color--200);
1388
- --pf-v5-c-alert--m-info--BorderTopColor: var(--pf-v5-global--info-color--100);
1389
- --pf-v5-c-alert--m-info__icon--Color: var(--pf-v5-global--info-color--100);
1390
- --pf-v5-c-alert--m-info__title--Color: var(--pf-v5-global--info-color--200);
1391
- --pf-v5-c-alert--m-inline--BoxShadow: none;
1392
- --pf-v5-c-alert--m-inline--m-custom--BackgroundColor: var(--pf-v5-global--palette--cyan-50);
1393
- --pf-v5-c-alert--m-inline--m-success--BackgroundColor: var(--pf-v5-global--palette--green-50);
1394
- --pf-v5-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-v5-global--palette--red-50);
1395
- --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-v5-global--palette--gold-50);
1396
- --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--pf-v5-global--palette--blue-50);
1397
- --pf-v5-c-alert--m-inline--m-plain--BorderTopWidth: 0;
1398
- --pf-v5-c-alert--m-inline--m-plain--BackgroundColor: transparent;
1399
- --pf-v5-c-alert--m-inline--m-plain--PaddingTop: 0;
1400
- --pf-v5-c-alert--m-inline--m-plain--PaddingRight: 0;
1401
- --pf-v5-c-alert--m-inline--m-plain--PaddingBottom: 0;
1402
- --pf-v5-c-alert--m-inline--m-plain--PaddingLeft: 0;
1403
- --pf-v5-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
1404
- --pf-v5-c-alert--m-expandable--GridTemplateAreas:
1405
- "toggle icon title action"
1406
- ". . description description"
1407
- ". . actiongroup actiongroup";
1408
- --pf-v5-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-v5-c-alert__action-group--PaddingTop-base);
1409
- --pf-v5-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
1410
- --pf-v5-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-v5-c-alert__description--action-group--PaddingTop-base);
1411
- color: var(--pf-v5-global--Color--100);
1412
- position: relative;
1413
- display: grid;
1414
- grid-template-areas: var(--pf-v5-c-alert--GridTemplateAreas);
1415
- grid-template-columns: var(--pf-v5-c-alert--GridTemplateColumns);
1416
- padding-block-start: var(--pf-v5-c-alert--PaddingTop);
1417
- padding-block-end: var(--pf-v5-c-alert--PaddingBottom);
1418
- padding-inline-start: var(--pf-v5-c-alert--PaddingLeft);
1419
- padding-inline-end: var(--pf-v5-c-alert--PaddingRight);
1420
- font-size: var(--pf-v5-c-alert__FontSize);
1421
- background-color: var(--pf-v5-c-alert--BackgroundColor);
1422
- border-block-start: var(--pf-v5-c-alert--BorderTopWidth) solid var(--pf-v5-c-alert--BorderTopColor);
1423
- box-shadow: var(--pf-v5-c-alert--BoxShadow);
1424
- }
1425
-
1426
- .pf-v5-c-alert.pf-m-custom {
1427
- --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-custom--BorderTopColor);
1428
- --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-custom__icon--Color);
1429
- --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-custom__title--Color);
1430
- --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-custom--BackgroundColor);
1431
- }
1432
-
1433
- .pf-v5-c-alert.pf-m-success {
1434
- --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-success--BorderTopColor);
1435
- --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-success__icon--Color);
1436
- --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-success__title--Color);
1437
- --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-success--BackgroundColor);
1438
- }
1439
-
1440
- .pf-v5-c-alert.pf-m-danger {
1441
- --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-danger--BorderTopColor);
1442
- --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-danger__icon--Color);
1443
- --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-danger__title--Color);
1444
- --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-danger--BackgroundColor);
1445
- }
1446
-
1447
- .pf-v5-c-alert.pf-m-warning {
1448
- --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-warning--BorderTopColor);
1449
- --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-warning__icon--Color);
1450
- --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-warning__title--Color);
1451
- --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-warning--BackgroundColor);
1452
- }
1453
-
1454
- .pf-v5-c-alert.pf-m-info {
1455
- --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-info--BorderTopColor);
1456
- --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-info__icon--Color);
1457
- --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-info__title--Color);
1458
- --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-info--BackgroundColor);
1459
- }
1460
-
1461
- .pf-v5-c-alert.pf-m-inline {
1462
- --pf-v5-c-alert--BoxShadow: var(--pf-v5-c-alert--m-inline--BoxShadow);
1463
- --pf-v5-c-alert--BackgroundColor: var(--pf-v5-c-alert--m-inline--BackgroundColor);
1464
- }
1465
-
1466
- .pf-v5-c-alert.pf-m-plain {
1467
- --pf-v5-c-alert--BorderTopWidth: var(--pf-v5-c-alert--m-inline--m-plain--BorderTopWidth);
1468
- --pf-v5-c-alert--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-plain--BackgroundColor);
1469
- --pf-v5-c-alert--PaddingTop: var(--pf-v5-c-alert--m-inline--m-plain--PaddingTop);
1470
- --pf-v5-c-alert--PaddingRight: var(--pf-v5-c-alert--m-inline--m-plain--PaddingRight);
1471
- --pf-v5-c-alert--PaddingBottom: var(--pf-v5-c-alert--m-inline--m-plain--PaddingBottom);
1472
- --pf-v5-c-alert--PaddingLeft: var(--pf-v5-c-alert--m-inline--m-plain--PaddingLeft);
1473
- }
1474
-
1475
- .pf-v5-c-alert.pf-m-expandable {
1476
- --pf-v5-c-alert--GridTemplateColumns: var(--pf-v5-c-alert--m-expandable--GridTemplateColumns);
1477
- --pf-v5-c-alert--GridTemplateAreas: var(--pf-v5-c-alert--m-expandable--GridTemplateAreas);
1478
- --pf-v5-c-alert__description--action-group--PaddingTop: var(--pf-v5-c-alert--m-expandable__description--action-group--PaddingTop);
1479
- }
1480
-
1481
- .pf-v5-c-alert.pf-m-expanded {
1482
- --pf-v5-c-alert__toggle-icon--Rotate: var(--pf-v5-c-alert--m-expanded__toggle-icon--Rotate);
1483
- --pf-v5-c-alert__description--action-group--PaddingTop: var(--pf-v5-c-alert--m-expanded__description--action-group--PaddingTop);
1484
- }
1485
-
1486
- .pf-v5-c-alert__toggle {
1487
- margin-block-start: var(--pf-v5-c-alert__toggle--MarginTop);
1488
- margin-block-end: var(--pf-v5-c-alert__toggle--MarginBottom);
1489
- margin-inline-start: var(--pf-v5-c-alert__toggle--MarginLeft);
1490
- }
1491
-
1492
- .pf-v5-c-alert__toggle-icon {
1493
- display: inline-block;
1494
- transition: var(--pf-v5-c-alert__toggle-icon--Transition);
1495
- transform: rotate(var(--pf-v5-c-alert__toggle-icon--Rotate));
1496
- }
1497
-
1498
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-alert__toggle-icon {
1499
- scale: -1 1;
1500
- }
1501
-
1502
- .pf-v5-c-alert__icon {
1503
- display: flex;
1504
- grid-area: icon;
1505
- margin-block-start: var(--pf-v5-c-alert__icon--MarginTop);
1506
- margin-inline-end: var(--pf-v5-c-alert__icon--MarginRight);
1507
- font-size: var(--pf-v5-c-alert__icon--FontSize);
1508
- color: var(--pf-v5-c-alert__icon--Color);
1509
- }
1510
-
1511
- .pf-v5-c-alert__title {
1512
- grid-area: title;
1513
- font-weight: var(--pf-v5-c-alert__title--FontWeight);
1514
- color: var(--pf-v5-c-alert__title--Color);
1515
- word-break: break-word;
1516
- }
1517
-
1518
- .pf-v5-c-alert__title.pf-m-truncate {
1519
- display: -webkit-box;
1520
- -webkit-box-orient: vertical;
1521
- -webkit-line-clamp: var(--pf-v5-c-alert__title--max-lines);
1522
- overflow: hidden;
1523
- }
1524
-
1525
- .pf-v5-c-alert__description {
1526
- grid-area: description;
1527
- padding-block-start: var(--pf-v5-c-alert__description--PaddingTop);
1528
- word-break: break-word;
1529
- }
1530
-
1531
- .pf-v5-c-alert__description + .pf-v5-c-alert__action-group {
1532
- --pf-v5-c-alert__action-group--PaddingTop: var(--pf-v5-c-alert__description--action-group--PaddingTop);
1533
- }
1534
-
1535
- .pf-v5-c-alert__action {
1536
- grid-area: action;
1537
- margin-block-start: var(--pf-v5-c-alert__action--MarginTop);
1538
- margin-block-end: var(--pf-v5-c-alert__action--MarginBottom);
1539
- margin-inline-end: var(--pf-v5-c-alert__action--MarginRight);
1540
- transform: translateY(var(--pf-v5-c-alert__action--TranslateY));
1541
- }
1542
-
1543
- .pf-v5-c-alert__action > .pf-v5-c-button {
1544
- --pf-v5-c-button--LineHeight: 1;
1545
- }
1546
-
1547
- .pf-v5-c-alert__action-group {
1548
- grid-area: actiongroup;
1549
- padding-block-start: var(--pf-v5-c-alert__action-group--PaddingTop);
1550
- }
1551
-
1552
- .pf-v5-c-alert__action-group > .pf-v5-c-button {
1553
- --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: none;
1554
- }
1555
-
1556
- .pf-v5-c-alert__action-group > .pf-v5-c-button:not(:last-child) {
1557
- margin-inline-end: var(--pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight);
1558
- }
1559
-
1560
- :where(.pf-v5-theme-dark) .pf-v5-c-alert {
1561
- --pf-v5-c-alert--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1562
- --pf-v5-c-alert--m-custom__title--Color: var(--pf-v5-global--custom-color--200);
1563
- --pf-v5-c-alert--m-success__title--Color: var(--pf-v5-global--success-color--100);
1564
- --pf-v5-c-alert--m-danger__title--Color: var(--pf-v5-global--danger-color--100);
1565
- --pf-v5-c-alert--m-warning__title--Color: var(--pf-v5-global--warning-color--100);
1566
- --pf-v5-c-alert--m-info__title--Color: var(--pf-v5-global--info-color--100);
1567
- --pf-v5-c-alert--m-inline--m-custom--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1568
- --pf-v5-c-alert--m-inline--m-success--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1569
- --pf-v5-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1570
- --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1571
- --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1572
- }
1573
-
1574
1327
  .pf-v5-c-avatar {
1575
1328
  --pf-v5-c-avatar--BorderColor: transparent;
1576
1329
  --pf-v5-c-avatar--BorderWidth: 0;
@@ -1825,363 +1578,369 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
1825
1578
  --pf-v5-c-avatar--Height: var(--pf-v5-c-avatar--m-xl--Height-on-2xl, var(--pf-v5-c-avatar--m-xl--Height-on-xl, var(--pf-v5-c-avatar--m-xl--Height-on-lg, var(--pf-v5-c-avatar--m-xl--Height-on-md, var(--pf-v5-c-avatar--m-xl--Height-on-sm, var(--pf-v5-c-avatar--m-xl--Height))))));
1826
1579
  }
1827
1580
  }
1828
- .pf-v5-c-back-to-top {
1829
- --pf-v5-c-back-to-top--Right: var(--pf-v5-global--spacer--2xl);
1830
- --pf-v5-c-back-to-top--Bottom: var(--pf-v5-global--spacer--lg);
1831
- --pf-v5-c-back-to-top--md--Bottom: var(--pf-v5-global--spacer--2xl);
1832
- --pf-v5-c-back-to-top--c-button--FontSize: var(--pf-v5-global--FontSize--xs);
1833
- --pf-v5-c-back-to-top--c-button--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
1834
- --pf-v5-c-back-to-top--c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
1835
- --pf-v5-c-back-to-top--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
1836
- --pf-v5-c-back-to-top--c-button--PaddingBottom: var(--pf-v5-global--spacer--xs);
1837
- --pf-v5-c-back-to-top--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
1838
- --pf-v5-c-back-to-top--c-button--BoxShadow: var(--pf-v5-global--BoxShadow--lg-bottom);
1839
- position: absolute;
1840
- inset-block-end: var(--pf-v5-c-back-to-top--Bottom);
1841
- inset-inline-end: var(--pf-v5-c-back-to-top--Right);
1581
+ .pf-v5-c-alert {
1582
+ --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
1583
+ --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
1584
+ --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
1585
+ --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
1586
+ --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
1587
+ --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
1588
+ --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
1589
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
1590
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
1842
1591
  }
1843
1592
 
1844
- @media (min-width: 768px) {
1845
- .pf-v5-c-back-to-top {
1846
- --pf-v5-c-back-to-top--Bottom: var(--pf-v5-c-back-to-top--md--Bottom);
1847
- }
1848
- }
1849
- .pf-v5-c-back-to-top.pf-m-hidden {
1850
- display: none;
1593
+ .pf-v5-c-alert {
1594
+ --pf-v5-c-alert--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
1595
+ --pf-v5-c-alert--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
1596
+ --pf-v5-c-alert--GridTemplateColumns: max-content 1fr max-content;
1597
+ --pf-v5-c-alert--GridTemplateAreas:
1598
+ "icon title action"
1599
+ ". description description"
1600
+ ". actiongroup actiongroup";
1601
+ --pf-v5-c-alert--BorderTopWidth: var(--pf-v5-global--BorderWidth--md);
1602
+ --pf-v5-c-alert--BorderTopColor: var(--pf-v5-global--BorderColor--100);
1603
+ --pf-v5-c-alert--PaddingTop: var(--pf-v5-global--spacer--md);
1604
+ --pf-v5-c-alert--PaddingRight: var(--pf-v5-global--spacer--md);
1605
+ --pf-v5-c-alert--PaddingBottom: var(--pf-v5-global--spacer--md);
1606
+ --pf-v5-c-alert--PaddingLeft: var(--pf-v5-global--spacer--md);
1607
+ --pf-v5-c-alert__FontSize: var(--pf-v5-global--FontSize--sm);
1608
+ --pf-v5-c-alert__toggle--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element) - 0.0625rem);
1609
+ --pf-v5-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
1610
+ --pf-v5-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-v5-global--spacer--md));
1611
+ --pf-v5-c-alert__toggle-icon--Rotate: 0;
1612
+ --pf-v5-c-alert__toggle-icon--Transition: var(--pf-v5-global--Transition);
1613
+ --pf-v5-c-alert__icon--Color: var(--pf-v5-global--Color--100);
1614
+ --pf-v5-c-alert__icon--MarginTop: 0.0625rem;
1615
+ --pf-v5-c-alert__icon--MarginRight: var(--pf-v5-global--spacer--sm);
1616
+ --pf-v5-c-alert__icon--FontSize: var(--pf-v5-global--icon--FontSize--md);
1617
+ --pf-v5-c-alert__title--FontWeight: var(--pf-v5-global--FontWeight--bold);
1618
+ --pf-v5-c-alert__title--Color: var(--pf-v5-global--Color--100);
1619
+ --pf-v5-c-alert__title--max-lines: 1;
1620
+ --pf-v5-c-alert__action--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
1621
+ --pf-v5-c-alert__action--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
1622
+ --pf-v5-c-alert__action--TranslateY: 0.125rem;
1623
+ --pf-v5-c-alert__action--MarginRight: calc(var(--pf-v5-global--spacer--sm) * -1);
1624
+ --pf-v5-c-alert__description--PaddingTop: var(--pf-v5-global--spacer--xs);
1625
+ --pf-v5-c-alert__action-group--PaddingTop-base: var(--pf-v5-global--spacer--xs);
1626
+ --pf-v5-c-alert__action-group--PaddingTop: var(--pf-v5-c-alert__action-group--PaddingTop-base);
1627
+ --pf-v5-c-alert__description--action-group--PaddingTop-base: var(--pf-v5-global--spacer--md);
1628
+ --pf-v5-c-alert__description--action-group--PaddingTop: var(--pf-v5-c-alert__description--action-group--PaddingTop-base);
1629
+ --pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-v5-global--spacer--lg);
1630
+ --pf-v5-c-alert--m-custom--BorderTopColor: var(--pf-v5-global--custom-color--200);
1631
+ --pf-v5-c-alert--m-custom__icon--Color: var(--pf-v5-global--custom-color--200);
1632
+ --pf-v5-c-alert--m-custom__title--Color: var(--pf-v5-global--custom-color--300);
1633
+ --pf-v5-c-alert--m-success--BorderTopColor: var(--pf-v5-global--success-color--100);
1634
+ --pf-v5-c-alert--m-success__icon--Color: var(--pf-v5-global--success-color--100);
1635
+ --pf-v5-c-alert--m-success__title--Color: var(--pf-v5-global--success-color--200);
1636
+ --pf-v5-c-alert--m-danger--BorderTopColor: var(--pf-v5-global--danger-color--100);
1637
+ --pf-v5-c-alert--m-danger__icon--Color: var(--pf-v5-global--danger-color--100);
1638
+ --pf-v5-c-alert--m-danger__title--Color: var(--pf-v5-global--danger-color--200);
1639
+ --pf-v5-c-alert--m-warning--BorderTopColor: var(--pf-v5-global--warning-color--100);
1640
+ --pf-v5-c-alert--m-warning__icon--Color: var(--pf-v5-global--warning-color--100);
1641
+ --pf-v5-c-alert--m-warning__title--Color: var(--pf-v5-global--warning-color--200);
1642
+ --pf-v5-c-alert--m-info--BorderTopColor: var(--pf-v5-global--info-color--100);
1643
+ --pf-v5-c-alert--m-info__icon--Color: var(--pf-v5-global--info-color--100);
1644
+ --pf-v5-c-alert--m-info__title--Color: var(--pf-v5-global--info-color--200);
1645
+ --pf-v5-c-alert--m-inline--BoxShadow: none;
1646
+ --pf-v5-c-alert--m-inline--m-custom--BackgroundColor: var(--pf-v5-global--palette--cyan-50);
1647
+ --pf-v5-c-alert--m-inline--m-success--BackgroundColor: var(--pf-v5-global--palette--green-50);
1648
+ --pf-v5-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-v5-global--palette--red-50);
1649
+ --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-v5-global--palette--gold-50);
1650
+ --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--pf-v5-global--palette--blue-50);
1651
+ --pf-v5-c-alert--m-inline--m-plain--BorderTopWidth: 0;
1652
+ --pf-v5-c-alert--m-inline--m-plain--BackgroundColor: transparent;
1653
+ --pf-v5-c-alert--m-inline--m-plain--PaddingTop: 0;
1654
+ --pf-v5-c-alert--m-inline--m-plain--PaddingRight: 0;
1655
+ --pf-v5-c-alert--m-inline--m-plain--PaddingBottom: 0;
1656
+ --pf-v5-c-alert--m-inline--m-plain--PaddingLeft: 0;
1657
+ --pf-v5-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
1658
+ --pf-v5-c-alert--m-expandable--GridTemplateAreas:
1659
+ "toggle icon title action"
1660
+ ". . description description"
1661
+ ". . actiongroup actiongroup";
1662
+ --pf-v5-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-v5-c-alert__action-group--PaddingTop-base);
1663
+ --pf-v5-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
1664
+ --pf-v5-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-v5-c-alert__description--action-group--PaddingTop-base);
1665
+ color: var(--pf-v5-global--Color--100);
1666
+ position: relative;
1667
+ display: grid;
1668
+ grid-template-areas: var(--pf-v5-c-alert--GridTemplateAreas);
1669
+ grid-template-columns: var(--pf-v5-c-alert--GridTemplateColumns);
1670
+ padding-block-start: var(--pf-v5-c-alert--PaddingTop);
1671
+ padding-block-end: var(--pf-v5-c-alert--PaddingBottom);
1672
+ padding-inline-start: var(--pf-v5-c-alert--PaddingLeft);
1673
+ padding-inline-end: var(--pf-v5-c-alert--PaddingRight);
1674
+ font-size: var(--pf-v5-c-alert__FontSize);
1675
+ background-color: var(--pf-v5-c-alert--BackgroundColor);
1676
+ border-block-start: var(--pf-v5-c-alert--BorderTopWidth) solid var(--pf-v5-c-alert--BorderTopColor);
1677
+ box-shadow: var(--pf-v5-c-alert--BoxShadow);
1851
1678
  }
1852
1679
 
1853
- .pf-v5-c-back-to-top .pf-v5-c-button {
1854
- --pf-v5-c-button--FontSize: var(--pf-v5-c-back-to-top--c-button--FontSize);
1855
- --pf-v5-c-button--BorderRadius: var(--pf-v5-c-back-to-top--c-button--BorderRadius);
1856
- --pf-v5-c-button--PaddingTop: var(--pf-v5-c-back-to-top--c-button--PaddingTop);
1857
- --pf-v5-c-button--PaddingRight: var(--pf-v5-c-back-to-top--c-button--PaddingRight);
1858
- --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-back-to-top--c-button--PaddingBottom);
1859
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-back-to-top--c-button--PaddingLeft);
1860
- box-shadow: var(--pf-v5-c-back-to-top--c-button--BoxShadow);
1680
+ .pf-v5-c-alert.pf-m-custom {
1681
+ --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-custom--BorderTopColor);
1682
+ --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-custom__icon--Color);
1683
+ --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-custom__title--Color);
1684
+ --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-custom--BackgroundColor);
1861
1685
  }
1862
1686
 
1863
- .pf-v5-c-badge {
1864
- --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
1865
- --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
1866
- --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
1867
- --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
1868
- --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
1869
- --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
1870
- --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
1871
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
1872
- --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
1873
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
1874
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
1875
- display: inline-block;
1876
- min-width: var(--pf-v5-c-badge--MinWidth);
1877
- padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
1878
- padding-inline-end: var(--pf-v5-c-badge--PaddingRight);
1879
- font-size: var(--pf-v5-c-badge--FontSize);
1880
- font-weight: var(--pf-v5-c-badge--FontWeight);
1881
- color: var(--pf-v5-c-badge--Color);
1882
- text-align: center;
1883
- white-space: nowrap;
1884
- background-color: var(--pf-v5-c-badge--BackgroundColor);
1885
- border-radius: var(--pf-v5-c-badge--BorderRadius);
1687
+ .pf-v5-c-alert.pf-m-success {
1688
+ --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-success--BorderTopColor);
1689
+ --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-success__icon--Color);
1690
+ --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-success__title--Color);
1691
+ --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-success--BackgroundColor);
1886
1692
  }
1887
1693
 
1888
- .pf-v5-c-badge.pf-m-read {
1889
- --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
1890
- --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
1694
+ .pf-v5-c-alert.pf-m-danger {
1695
+ --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-danger--BorderTopColor);
1696
+ --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-danger__icon--Color);
1697
+ --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-danger__title--Color);
1698
+ --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-danger--BackgroundColor);
1891
1699
  }
1892
1700
 
1893
- .pf-v5-c-badge.pf-m-unread {
1894
- --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
1895
- --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
1701
+ .pf-v5-c-alert.pf-m-warning {
1702
+ --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-warning--BorderTopColor);
1703
+ --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-warning__icon--Color);
1704
+ --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-warning__title--Color);
1705
+ --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-warning--BackgroundColor);
1896
1706
  }
1897
1707
 
1898
- :where(.pf-v5-theme-dark) .pf-v5-c-badge {
1899
- --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
1900
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
1901
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
1708
+ .pf-v5-c-alert.pf-m-info {
1709
+ --pf-v5-c-alert--BorderTopColor: var(--pf-v5-c-alert--m-info--BorderTopColor);
1710
+ --pf-v5-c-alert__icon--Color: var(--pf-v5-c-alert--m-info__icon--Color);
1711
+ --pf-v5-c-alert__title--Color: var(--pf-v5-c-alert--m-info__title--Color);
1712
+ --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-info--BackgroundColor);
1902
1713
  }
1903
1714
 
1904
- .pf-v5-c-backdrop {
1905
- --pf-v5-c-backdrop--Position: fixed;
1906
- --pf-v5-c-backdrop--ZIndex: var(--pf-v5-global--ZIndex--lg);
1907
- --pf-v5-c-backdrop--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
1908
- position: var(--pf-v5-c-backdrop--Position);
1909
- inset-block-start: 0;
1910
- inset-inline-start: 0;
1911
- z-index: var(--pf-v5-c-backdrop--ZIndex);
1912
- width: 100%;
1913
- height: 100%;
1914
- background-color: var(--pf-v5-c-backdrop--BackgroundColor);
1715
+ .pf-v5-c-alert.pf-m-inline {
1716
+ --pf-v5-c-alert--BoxShadow: var(--pf-v5-c-alert--m-inline--BoxShadow);
1717
+ --pf-v5-c-alert--BackgroundColor: var(--pf-v5-c-alert--m-inline--BackgroundColor);
1915
1718
  }
1916
1719
 
1917
- .pf-v5-c-backdrop__open {
1918
- overflow: hidden;
1720
+ .pf-v5-c-alert.pf-m-plain {
1721
+ --pf-v5-c-alert--BorderTopWidth: var(--pf-v5-c-alert--m-inline--m-plain--BorderTopWidth);
1722
+ --pf-v5-c-alert--BackgroundColor: var(--pf-v5-c-alert--m-inline--m-plain--BackgroundColor);
1723
+ --pf-v5-c-alert--PaddingTop: var(--pf-v5-c-alert--m-inline--m-plain--PaddingTop);
1724
+ --pf-v5-c-alert--PaddingRight: var(--pf-v5-c-alert--m-inline--m-plain--PaddingRight);
1725
+ --pf-v5-c-alert--PaddingBottom: var(--pf-v5-c-alert--m-inline--m-plain--PaddingBottom);
1726
+ --pf-v5-c-alert--PaddingLeft: var(--pf-v5-c-alert--m-inline--m-plain--PaddingLeft);
1919
1727
  }
1920
1728
 
1921
- .pf-v5-c-background-image {
1922
- --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
1923
- --pf-v5-c-background-image--BackgroundImage: none;
1924
- --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
1925
- --pf-v5-c-background-image--BackgroundSize--width: 60%;
1926
- --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
1927
- --pf-v5-c-background-image--BackgroundSize: clamp(var(--pf-v5-c-background-image--BackgroundSize--min-width), var(--pf-v5-c-background-image--BackgroundSize--width), var(--pf-v5-c-background-image--BackgroundSize--max-width));
1928
- --pf-v5-c-background-image--BackgroundPosition: bottom right;
1929
- position: fixed;
1930
- inset-block-start: 0;
1931
- inset-inline-start: 0;
1932
- z-index: -1;
1933
- width: 100%;
1934
- height: 100%;
1935
- background-color: var(--pf-v5-c-background-image--BackgroundColor);
1936
- background-image: var(--pf-v5-c-background-image--BackgroundImage);
1937
- background-repeat: no-repeat;
1938
- background-position: var(--pf-v5-c-background-image--BackgroundPosition);
1939
- background-size: var(--pf-v5-c-background-image--BackgroundSize);
1729
+ .pf-v5-c-alert.pf-m-expandable {
1730
+ --pf-v5-c-alert--GridTemplateColumns: var(--pf-v5-c-alert--m-expandable--GridTemplateColumns);
1731
+ --pf-v5-c-alert--GridTemplateAreas: var(--pf-v5-c-alert--m-expandable--GridTemplateAreas);
1732
+ --pf-v5-c-alert__description--action-group--PaddingTop: var(--pf-v5-c-alert--m-expandable__description--action-group--PaddingTop);
1940
1733
  }
1941
1734
 
1942
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-background-image {
1943
- --pf-v5-c-background-image--BackgroundPosition: bottom left;
1735
+ .pf-v5-c-alert.pf-m-expanded {
1736
+ --pf-v5-c-alert__toggle-icon--Rotate: var(--pf-v5-c-alert--m-expanded__toggle-icon--Rotate);
1737
+ --pf-v5-c-alert__description--action-group--PaddingTop: var(--pf-v5-c-alert--m-expanded__description--action-group--PaddingTop);
1944
1738
  }
1945
1739
 
1946
- .pf-v5-c-banner.pf-m-gold, .pf-v5-c-banner.pf-m-blue {
1947
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
1948
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
1949
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
1950
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
1951
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
1952
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
1953
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
1954
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
1955
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
1740
+ .pf-v5-c-alert__toggle {
1741
+ margin-block-start: var(--pf-v5-c-alert__toggle--MarginTop);
1742
+ margin-block-end: var(--pf-v5-c-alert__toggle--MarginBottom);
1743
+ margin-inline-start: var(--pf-v5-c-alert__toggle--MarginLeft);
1956
1744
  }
1957
1745
 
1958
- .pf-v5-c-banner {
1959
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
1960
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
1961
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
1962
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100);
1963
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
1964
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
1965
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
1966
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
1967
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
1746
+ .pf-v5-c-alert__toggle-icon {
1747
+ display: inline-block;
1748
+ transition: var(--pf-v5-c-alert__toggle-icon--Transition);
1749
+ transform: rotate(var(--pf-v5-c-alert__toggle-icon--Rotate));
1968
1750
  }
1969
1751
 
1970
- .pf-v5-c-banner .pf-v5-c-button {
1971
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
1752
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-alert__toggle-icon {
1753
+ scale: -1 1;
1972
1754
  }
1973
1755
 
1974
- .pf-v5-c-banner {
1975
- --pf-v5-c-banner--PaddingTop: var(--pf-v5-global--spacer--xs);
1976
- --pf-v5-c-banner--PaddingRight: var(--pf-v5-global--spacer--md);
1977
- --pf-v5-c-banner--md--PaddingRight: var(--pf-v5-global--spacer--lg);
1978
- --pf-v5-c-banner--PaddingBottom: var(--pf-v5-global--spacer--xs);
1979
- --pf-v5-c-banner--PaddingLeft: var(--pf-v5-global--spacer--md);
1980
- --pf-v5-c-banner--md--PaddingLeft: var(--pf-v5-global--spacer--lg);
1981
- --pf-v5-c-banner--FontSize: var(--pf-v5-global--FontSize--sm);
1982
- --pf-v5-c-banner--Color: var(--pf-v5-global--Color--100);
1983
- --pf-v5-c-banner--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
1984
- --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--Color);
1985
- --pf-v5-c-banner--link--TextDecoration: underline;
1986
- --pf-v5-c-banner--link--hover--Color: var(--pf-v5-c-banner--Color);
1987
- --pf-v5-c-banner--link--hover--FontWeight: var(--pf-v5-global--FontWeight--bold);
1988
- --pf-v5-c-banner--link--disabled--Color: var(--pf-v5-c-banner--Color);
1989
- --pf-v5-c-banner--link--disabled--TextDecoration: none;
1990
- --pf-v5-c-banner--m-blue--BackgroundColor: var(--pf-v5-global--palette--blue-200);
1991
- --pf-v5-c-banner--m-red--BackgroundColor: var(--pf-v5-global--danger-color--100);
1992
- --pf-v5-c-banner--m-green--BackgroundColor: var(--pf-v5-global--success-color--100);
1993
- --pf-v5-c-banner--m-gold--BackgroundColor: var(--pf-v5-global--warning-color--100);
1994
- --pf-v5-c-banner--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--md);
1995
- --pf-v5-c-banner--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--md-bottom);
1996
- color: var(--pf-v5-global--Color--100);
1997
- overflow: hidden;
1998
- text-overflow: ellipsis;
1999
- white-space: nowrap;
2000
- flex-shrink: 0;
2001
- padding-block-start: var(--pf-v5-c-banner--PaddingTop);
2002
- padding-block-end: var(--pf-v5-c-banner--PaddingBottom);
2003
- padding-inline-start: var(--pf-v5-c-banner--PaddingLeft);
2004
- padding-inline-end: var(--pf-v5-c-banner--PaddingRight);
2005
- font-size: var(--pf-v5-c-banner--FontSize);
2006
- color: var(--pf-v5-c-banner--Color);
2007
- white-space: nowrap;
2008
- background-color: var(--pf-v5-c-banner--BackgroundColor);
1756
+ .pf-v5-c-alert__icon {
1757
+ display: flex;
1758
+ grid-area: icon;
1759
+ margin-block-start: var(--pf-v5-c-alert__icon--MarginTop);
1760
+ margin-inline-end: var(--pf-v5-c-alert__icon--MarginRight);
1761
+ font-size: var(--pf-v5-c-alert__icon--FontSize);
1762
+ color: var(--pf-v5-c-alert__icon--Color);
2009
1763
  }
2010
1764
 
2011
- @media (min-width: 768px) {
2012
- .pf-v5-c-banner {
2013
- --pf-v5-c-banner--PaddingRight: var(--pf-v5-c-banner--md--PaddingRight);
2014
- --pf-v5-c-banner--PaddingLeft: var(--pf-v5-c-banner--md--PaddingLeft);
2015
- }
2016
- }
2017
- .pf-v5-c-banner.pf-m-blue {
2018
- --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-blue--BackgroundColor);
1765
+ .pf-v5-c-alert__title {
1766
+ grid-area: title;
1767
+ font-weight: var(--pf-v5-c-alert__title--FontWeight);
1768
+ color: var(--pf-v5-c-alert__title--Color);
1769
+ word-break: break-word;
2019
1770
  }
2020
1771
 
2021
- .pf-v5-c-banner.pf-m-red {
2022
- --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-red--BackgroundColor);
1772
+ .pf-v5-c-alert__title.pf-m-truncate {
1773
+ display: -webkit-box;
1774
+ -webkit-box-orient: vertical;
1775
+ -webkit-line-clamp: var(--pf-v5-c-alert__title--max-lines);
1776
+ overflow: hidden;
2023
1777
  }
2024
1778
 
2025
- .pf-v5-c-banner.pf-m-green {
2026
- --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-green--BackgroundColor);
1779
+ .pf-v5-c-alert__description {
1780
+ grid-area: description;
1781
+ padding-block-start: var(--pf-v5-c-alert__description--PaddingTop);
1782
+ word-break: break-word;
2027
1783
  }
2028
1784
 
2029
- .pf-v5-c-banner.pf-m-gold {
2030
- --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-gold--BackgroundColor);
1785
+ .pf-v5-c-alert__description + .pf-v5-c-alert__action-group {
1786
+ --pf-v5-c-alert__action-group--PaddingTop: var(--pf-v5-c-alert__description--action-group--PaddingTop);
2031
1787
  }
2032
1788
 
2033
- .pf-v5-c-banner.pf-m-sticky {
2034
- position: sticky;
2035
- inset-block-start: 0;
2036
- z-index: var(--pf-v5-c-banner--m-sticky--ZIndex);
2037
- box-shadow: var(--pf-v5-c-banner--m-sticky--BoxShadow);
1789
+ .pf-v5-c-alert__action {
1790
+ grid-area: action;
1791
+ margin-block-start: var(--pf-v5-c-alert__action--MarginTop);
1792
+ margin-block-end: var(--pf-v5-c-alert__action--MarginBottom);
1793
+ margin-inline-end: var(--pf-v5-c-alert__action--MarginRight);
1794
+ transform: translateY(var(--pf-v5-c-alert__action--TranslateY));
2038
1795
  }
2039
1796
 
2040
- .pf-v5-c-banner a {
2041
- color: var(--pf-v5-c-banner--link--Color);
2042
- text-decoration: var(--pf-v5-c-banner--link--TextDecoration);
1797
+ .pf-v5-c-alert__action > .pf-v5-c-button {
1798
+ --pf-v5-c-button--LineHeight: 1;
2043
1799
  }
2044
1800
 
2045
- .pf-v5-c-banner a:hover:not(.pf-m-disabled) {
2046
- --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--link--hover--Color);
2047
- font-weight: var(--pf-v5-c-banner--link--hover--FontWeight);
1801
+ .pf-v5-c-alert__action-group {
1802
+ grid-area: actiongroup;
1803
+ padding-block-start: var(--pf-v5-c-alert__action-group--PaddingTop);
2048
1804
  }
2049
1805
 
2050
- .pf-v5-c-banner a.pf-m-disabled {
2051
- --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--link--disabled--Color);
2052
- --pf-v5-c-banner--link--TextDecoration: var(--pf-v5-c-banner--link--disabled--TextDecoration);
2053
- cursor: not-allowed;
1806
+ .pf-v5-c-alert__action-group > .pf-v5-c-button {
1807
+ --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: none;
2054
1808
  }
2055
1809
 
2056
- .pf-v5-c-banner .pf-v5-c-button.pf-m-inline {
2057
- --pf-v5-c-button--m-link--Color: var(--pf-v5-c-banner--link--Color);
2058
- --pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-v5-c-banner--link--hover--Color);
2059
- --pf-v5-c-button--disabled--Color: var(--pf-v5-c-banner--link--disabled--Color);
2060
- text-decoration: var(--pf-v5-c-banner--link--TextDecoration);
1810
+ .pf-v5-c-alert__action-group > .pf-v5-c-button:not(:last-child) {
1811
+ margin-inline-end: var(--pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight);
2061
1812
  }
2062
1813
 
2063
- .pf-v5-c-banner .pf-v5-c-button.pf-m-inline:hover {
2064
- --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--link--hover--Color);
2065
- font-weight: var(--pf-v5-c-banner--link--hover--FontWeight);
1814
+ :where(.pf-v5-theme-dark) .pf-v5-c-alert {
1815
+ --pf-v5-c-alert--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1816
+ --pf-v5-c-alert--m-custom__title--Color: var(--pf-v5-global--custom-color--200);
1817
+ --pf-v5-c-alert--m-success__title--Color: var(--pf-v5-global--success-color--100);
1818
+ --pf-v5-c-alert--m-danger__title--Color: var(--pf-v5-global--danger-color--100);
1819
+ --pf-v5-c-alert--m-warning__title--Color: var(--pf-v5-global--warning-color--100);
1820
+ --pf-v5-c-alert--m-info__title--Color: var(--pf-v5-global--info-color--100);
1821
+ --pf-v5-c-alert--m-inline--m-custom--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1822
+ --pf-v5-c-alert--m-inline--m-success--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1823
+ --pf-v5-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1824
+ --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
1825
+ --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
2066
1826
  }
2067
1827
 
2068
- .pf-v5-c-banner .pf-v5-c-button.pf-m-inline:disabled, .pf-v5-c-banner .pf-v5-c-button.pf-m-inline.pf-m-disabled {
2069
- --pf-v5-c-banner--link--TextDecoration: var(--pf-v5-c-banner--link--disabled--TextDecoration);
2070
- cursor: not-allowed;
1828
+ .pf-v5-c-back-to-top {
1829
+ --pf-v5-c-back-to-top--Right: var(--pf-v5-global--spacer--2xl);
1830
+ --pf-v5-c-back-to-top--Bottom: var(--pf-v5-global--spacer--lg);
1831
+ --pf-v5-c-back-to-top--md--Bottom: var(--pf-v5-global--spacer--2xl);
1832
+ --pf-v5-c-back-to-top--c-button--FontSize: var(--pf-v5-global--FontSize--xs);
1833
+ --pf-v5-c-back-to-top--c-button--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
1834
+ --pf-v5-c-back-to-top--c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
1835
+ --pf-v5-c-back-to-top--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
1836
+ --pf-v5-c-back-to-top--c-button--PaddingBottom: var(--pf-v5-global--spacer--xs);
1837
+ --pf-v5-c-back-to-top--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
1838
+ --pf-v5-c-back-to-top--c-button--BoxShadow: var(--pf-v5-global--BoxShadow--lg-bottom);
1839
+ position: absolute;
1840
+ inset-block-end: var(--pf-v5-c-back-to-top--Bottom);
1841
+ inset-inline-end: var(--pf-v5-c-back-to-top--Right);
2071
1842
  }
2072
1843
 
2073
- :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button {
2074
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
1844
+ @media (min-width: 768px) {
1845
+ .pf-v5-c-back-to-top {
1846
+ --pf-v5-c-back-to-top--Bottom: var(--pf-v5-c-back-to-top--md--Bottom);
1847
+ }
2075
1848
  }
2076
-
2077
- :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-blue, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-red, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-green, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-gold {
2078
- --pf-v5-c-banner--Color: var(--pf-v5-global--palette--black-900);
1849
+ .pf-v5-c-back-to-top.pf-m-hidden {
1850
+ display: none;
2079
1851
  }
2080
1852
 
2081
- .pf-v5-c-breadcrumb {
2082
- --pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-global--FontSize--sm);
2083
- --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-v5-global--LineHeight--sm);
2084
- --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-v5-global--spacer--sm);
2085
- --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--icon--Color--dark);
2086
- --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-v5-global--spacer--sm);
2087
- --pf-v5-c-breadcrumb__item-divider--FontSize: var(--pf-v5-global--FontSize--sm);
2088
- --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-global--link--Color);
2089
- --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-global--link--TextDecoration);
2090
- --pf-v5-c-breadcrumb__link--hover--Color: var(--pf-v5-global--link--Color--hover);
2091
- --pf-v5-c-breadcrumb__link--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
2092
- --pf-v5-c-breadcrumb__link--m-current--Color: var(--pf-v5-global--Color--100);
2093
- --pf-v5-c-breadcrumb__link--BackgroundColor: transparent;
2094
- --pf-v5-c-breadcrumb__heading--FontSize: var(--pf-v5-global--FontSize--sm);
2095
- --pf-v5-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
2096
- --pf-v5-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v5-c-breadcrumb__item--MarginRight) * -1);
2097
- --pf-v5-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
2098
- --pf-v5-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v5-c-breadcrumb__item-divider--MarginRight) * -1);
2099
- --pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-v5-global--LineHeight--sm);
2100
- display: inline-flex;
1853
+ .pf-v5-c-back-to-top .pf-v5-c-button {
1854
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-back-to-top--c-button--FontSize);
1855
+ --pf-v5-c-button--BorderRadius: var(--pf-v5-c-back-to-top--c-button--BorderRadius);
1856
+ --pf-v5-c-button--PaddingTop: var(--pf-v5-c-back-to-top--c-button--PaddingTop);
1857
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-back-to-top--c-button--PaddingRight);
1858
+ --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-back-to-top--c-button--PaddingBottom);
1859
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-back-to-top--c-button--PaddingLeft);
1860
+ box-shadow: var(--pf-v5-c-back-to-top--c-button--BoxShadow);
2101
1861
  }
2102
1862
 
2103
- .pf-v5-c-breadcrumb__list {
2104
- display: flex;
2105
- flex-wrap: wrap;
2106
- align-items: center;
1863
+ .pf-v5-c-backdrop {
1864
+ --pf-v5-c-backdrop--Position: fixed;
1865
+ --pf-v5-c-backdrop--ZIndex: var(--pf-v5-global--ZIndex--lg);
1866
+ --pf-v5-c-backdrop--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
1867
+ position: var(--pf-v5-c-backdrop--Position);
1868
+ inset-block-start: 0;
1869
+ inset-inline-start: 0;
1870
+ z-index: var(--pf-v5-c-backdrop--ZIndex);
1871
+ width: 100%;
1872
+ height: 100%;
1873
+ background-color: var(--pf-v5-c-backdrop--BackgroundColor);
2107
1874
  }
2108
1875
 
2109
- .pf-v5-c-breadcrumb__item {
2110
- display: flex;
2111
- align-items: baseline;
2112
- font-size: var(--pf-v5-c-breadcrumb__item--FontSize);
2113
- font-weight: var(--pf-v5-c-breadcrumb__item--FontWeight);
2114
- line-height: var(--pf-v5-c-breadcrumb__item--LineHeight);
2115
- white-space: nowrap;
2116
- list-style: none;
1876
+ .pf-v5-c-backdrop__open {
1877
+ overflow: hidden;
2117
1878
  }
2118
1879
 
2119
- .pf-v5-c-breadcrumb__item:not(:last-child) {
2120
- margin-inline-end: var(--pf-v5-c-breadcrumb__item--MarginRight);
1880
+ .pf-v5-c-background-image {
1881
+ --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
1882
+ --pf-v5-c-background-image--BackgroundImage: none;
1883
+ --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
1884
+ --pf-v5-c-background-image--BackgroundSize--width: 60%;
1885
+ --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
1886
+ --pf-v5-c-background-image--BackgroundSize: clamp(var(--pf-v5-c-background-image--BackgroundSize--min-width), var(--pf-v5-c-background-image--BackgroundSize--width), var(--pf-v5-c-background-image--BackgroundSize--max-width));
1887
+ --pf-v5-c-background-image--BackgroundPosition: bottom right;
1888
+ position: fixed;
1889
+ inset-block-start: 0;
1890
+ inset-inline-start: 0;
1891
+ z-index: -1;
1892
+ width: 100%;
1893
+ height: 100%;
1894
+ background-color: var(--pf-v5-c-background-image--BackgroundColor);
1895
+ background-image: var(--pf-v5-c-background-image--BackgroundImage);
1896
+ background-repeat: no-repeat;
1897
+ background-position: var(--pf-v5-c-background-image--BackgroundPosition);
1898
+ background-size: var(--pf-v5-c-background-image--BackgroundSize);
2121
1899
  }
2122
1900
 
2123
- .pf-v5-c-breadcrumb__item-divider {
2124
- margin-inline-end: var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
2125
- font-size: var(--pf-v5-c-breadcrumb__item-divider--FontSize);
2126
- line-height: 1;
2127
- color: var(--pf-v5-c-breadcrumb__item-divider--Color);
1901
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-background-image {
1902
+ --pf-v5-c-background-image--BackgroundPosition: bottom left;
2128
1903
  }
2129
1904
 
2130
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
2131
- scale: -1 1;
1905
+ .pf-v5-c-badge {
1906
+ --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
1907
+ --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
1908
+ --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
1909
+ --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
1910
+ --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
1911
+ --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
1912
+ --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
1913
+ --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
1914
+ --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
1915
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
1916
+ --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
1917
+ display: inline-block;
1918
+ min-width: var(--pf-v5-c-badge--MinWidth);
1919
+ padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
1920
+ padding-inline-end: var(--pf-v5-c-badge--PaddingRight);
1921
+ font-size: var(--pf-v5-c-badge--FontSize);
1922
+ font-weight: var(--pf-v5-c-badge--FontWeight);
1923
+ color: var(--pf-v5-c-badge--Color);
1924
+ text-align: center;
1925
+ white-space: nowrap;
1926
+ background-color: var(--pf-v5-c-badge--BackgroundColor);
1927
+ border-radius: var(--pf-v5-c-badge--BorderRadius);
2132
1928
  }
2133
1929
 
2134
- .pf-v5-c-breadcrumb__link {
2135
- font-size: inherit;
2136
- font-weight: var(--pf-v5-c-breadcrumb__link--FontWeight);
2137
- line-height: inherit;
2138
- color: var(--pf-v5-c-breadcrumb__link--Color);
2139
- text-decoration: var(--pf-v5-c-breadcrumb__link--TextDecoration);
2140
- word-break: break-word;
2141
- background-color: var(--pf-v5-c-breadcrumb__link--BackgroundColor);
2142
- }
2143
-
2144
- .pf-v5-c-breadcrumb__link:hover {
2145
- --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-c-breadcrumb__link--hover--Color);
2146
- --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-c-breadcrumb__link--hover--TextDecoration);
2147
- }
2148
-
2149
- .pf-v5-c-breadcrumb__link.pf-m-current {
2150
- cursor: default;
2151
- }
2152
-
2153
- .pf-v5-c-breadcrumb__link.pf-m-current, .pf-v5-c-breadcrumb__link.pf-m-current:hover {
2154
- color: var(--pf-v5-c-breadcrumb__link--m-current--Color);
2155
- text-decoration: none;
2156
- }
2157
-
2158
- button.pf-v5-c-breadcrumb__link {
2159
- border: none;
2160
- }
2161
-
2162
- .pf-v5-c-breadcrumb__dropdown {
2163
- margin-block-start: var(--pf-v5-c-breadcrumb__dropdown--MarginTop);
2164
- margin-block-end: var(--pf-v5-c-breadcrumb__dropdown--MarginBottom);
2165
- margin-inline-start: var(--pf-v5-c-breadcrumb__dropdown--MarginLeft);
2166
- margin-inline-end: var(--pf-v5-c-breadcrumb__dropdown--MarginRight);
2167
- }
2168
-
2169
- .pf-v5-c-breadcrumb__dropdown .pf-v5-c-dropdown__toggle {
2170
- line-height: var(--pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);
2171
- }
2172
-
2173
- .pf-v5-c-breadcrumb__heading {
2174
- display: inline;
2175
- font-size: var(--pf-v5-c-breadcrumb__heading--FontSize);
1930
+ .pf-v5-c-badge.pf-m-read {
1931
+ --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
1932
+ --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
2176
1933
  }
2177
1934
 
2178
- .pf-v5-c-breadcrumb__link,
2179
- .pf-v5-c-breadcrumb__heading {
2180
- white-space: normal;
1935
+ .pf-v5-c-badge.pf-m-unread {
1936
+ --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
1937
+ --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
2181
1938
  }
2182
1939
 
2183
- .pf-v5-c-breadcrumb__list > :first-child .pf-v5-c-breadcrumb__item-divider {
2184
- display: none;
1940
+ :where(.pf-v5-theme-dark) .pf-v5-c-badge {
1941
+ --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
1942
+ --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
1943
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
2185
1944
  }
2186
1945
 
2187
1946
  .pf-v5-c-brand {
@@ -2248,417 +2007,658 @@ button.pf-v5-c-breadcrumb__link {
2248
2007
  max-width: 100%;
2249
2008
  }
2250
2009
 
2251
- .pf-v5-c-button {
2252
- --pf-v5-c-button--PaddingTop: var(--pf-v5-global--spacer--form-element);
2253
- --pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--md);
2254
- --pf-v5-c-button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
2255
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-global--spacer--md);
2256
- --pf-v5-c-button--LineHeight: var(--pf-v5-global--LineHeight--md);
2257
- --pf-v5-c-button--FontWeight: var(--pf-v5-global--FontWeight--normal);
2258
- --pf-v5-c-button--FontSize: var(--pf-v5-global--FontSize--md);
2259
- --pf-v5-c-button--BackgroundColor: transparent;
2260
- --pf-v5-c-button--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
2261
- --pf-v5-c-button--after--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
2262
- --pf-v5-c-button--after--BorderColor: transparent;
2263
- --pf-v5-c-button--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
2264
- --pf-v5-c-button--hover--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2265
- --pf-v5-c-button--focus--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2266
- --pf-v5-c-button--active--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2267
- --pf-v5-c-button--disabled--Color: var(--pf-v5-global--disabled-color--100);
2268
- --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
2269
- --pf-v5-c-button--disabled--after--BorderColor: transparent;
2270
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--100);
2271
- --pf-v5-c-button--m-primary--Color: var(--pf-v5-global--Color--light-100);
2272
- --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-v5-global--primary-color--200);
2273
- --pf-v5-c-button--m-primary--hover--Color: var(--pf-v5-global--Color--light-100);
2274
- --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-v5-global--primary-color--200);
2275
- --pf-v5-c-button--m-primary--focus--Color: var(--pf-v5-global--Color--light-100);
2276
- --pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-v5-global--primary-color--200);
2277
- --pf-v5-c-button--m-primary--active--Color: var(--pf-v5-global--Color--light-100);
2278
- --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
2279
- --pf-v5-c-button--m-secondary--after--BorderColor: var(--pf-v5-global--primary-color--100);
2280
- --pf-v5-c-button--m-secondary--Color: var(--pf-v5-global--primary-color--100);
2281
- --pf-v5-c-button--m-secondary--hover--BackgroundColor: transparent;
2282
- --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--pf-v5-global--primary-color--100);
2283
- --pf-v5-c-button--m-secondary--hover--Color: var(--pf-v5-global--primary-color--100);
2284
- --pf-v5-c-button--m-secondary--focus--BackgroundColor: transparent;
2285
- --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--pf-v5-global--primary-color--100);
2286
- --pf-v5-c-button--m-secondary--focus--Color: var(--pf-v5-global--primary-color--100);
2287
- --pf-v5-c-button--m-secondary--active--BackgroundColor: transparent;
2288
- --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--pf-v5-global--primary-color--100);
2289
- --pf-v5-c-button--m-secondary--active--Color: var(--pf-v5-global--primary-color--100);
2290
- --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: transparent;
2291
- --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-global--danger-color--100);
2292
- --pf-v5-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-v5-global--danger-color--100);
2293
- --pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
2294
- --pf-v5-c-button--m-secondary--m-danger--hover--Color: var(--pf-v5-global--danger-color--200);
2295
- --pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-v5-global--danger-color--100);
2296
- --pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
2297
- --pf-v5-c-button--m-secondary--m-danger--focus--Color: var(--pf-v5-global--danger-color--200);
2298
- --pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-v5-global--danger-color--100);
2299
- --pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
2300
- --pf-v5-c-button--m-secondary--m-danger--active--Color: var(--pf-v5-global--danger-color--200);
2301
- --pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-v5-global--danger-color--100);
2302
- --pf-v5-c-button--m-tertiary--BackgroundColor: transparent;
2303
- --pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-v5-global--Color--100);
2304
- --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-global--Color--100);
2305
- --pf-v5-c-button--m-tertiary--hover--BackgroundColor: transparent;
2306
- --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-v5-global--Color--100);
2307
- --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-v5-global--Color--100);
2308
- --pf-v5-c-button--m-tertiary--focus--BackgroundColor: transparent;
2309
- --pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-v5-global--Color--100);
2310
- --pf-v5-c-button--m-tertiary--focus--Color: var(--pf-v5-global--Color--100);
2311
- --pf-v5-c-button--m-tertiary--active--BackgroundColor: transparent;
2312
- --pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-v5-global--Color--100);
2313
- --pf-v5-c-button--m-tertiary--active--Color: var(--pf-v5-global--Color--100);
2314
- --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-global--warning-color--100);
2315
- --pf-v5-c-button--m-warning--Color: var(--pf-v5-global--Color--dark-100);
2316
- --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-v5-global--palette--gold-500);
2317
- --pf-v5-c-button--m-warning--hover--Color: var(--pf-v5-global--Color--dark-100);
2318
- --pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-v5-global--palette--gold-500);
2319
- --pf-v5-c-button--m-warning--focus--Color: var(--pf-v5-global--Color--dark-100);
2320
- --pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-v5-global--palette--gold-500);
2321
- --pf-v5-c-button--m-warning--active--Color: var(--pf-v5-global--Color--dark-100);
2322
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-global--danger-color--100);
2323
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-global--Color--light-100);
2324
- --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-global--danger-color--200);
2325
- --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-global--Color--light-100);
2326
- --pf-v5-c-button--m-danger--focus--BackgroundColor: var(--pf-v5-global--danger-color--200);
2327
- --pf-v5-c-button--m-danger--focus--Color: var(--pf-v5-global--Color--light-100);
2328
- --pf-v5-c-button--m-danger--active--BackgroundColor: var(--pf-v5-global--danger-color--200);
2329
- --pf-v5-c-button--m-danger--active--Color: var(--pf-v5-global--Color--light-100);
2330
- --pf-v5-c-button--m-link--BackgroundColor: transparent;
2331
- --pf-v5-c-button--m-link--Color: var(--pf-v5-global--link--Color);
2332
- --pf-v5-c-button--m-link--hover--BackgroundColor: transparent;
2333
- --pf-v5-c-button--m-link--hover--Color: var(--pf-v5-global--link--Color--hover);
2334
- --pf-v5-c-button--m-link--focus--BackgroundColor: transparent;
2335
- --pf-v5-c-button--m-link--focus--Color: var(--pf-v5-global--link--Color--hover);
2336
- --pf-v5-c-button--m-link--active--BackgroundColor: transparent;
2337
- --pf-v5-c-button--m-link--active--Color: var(--pf-v5-global--link--Color--hover);
2338
- --pf-v5-c-button--m-link--disabled--BackgroundColor: transparent;
2339
- --pf-v5-c-button--m-link--disabled--Color: var(--pf-v5-global--disabled-color--100);
2340
- --pf-v5-c-button--m-link--m-inline--FontSize: inherit;
2341
- --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
2342
- --pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-v5-global--link--Color--hover);
2343
- --pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
2344
- --pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
2345
- --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
2346
- --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
2347
- --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-v5-global--spacer--xs);
2348
- --pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-v5-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-v5-global--spacer--sm));
2349
- --pf-v5-c-button--m-link--m-danger--BackgroundColor: transparent;
2350
- --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-global--danger-color--100);
2351
- --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
2352
- --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-v5-global--danger-color--200);
2353
- --pf-v5-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
2354
- --pf-v5-c-button--m-link--m-danger--focus--Color: var(--pf-v5-global--danger-color--200);
2355
- --pf-v5-c-button--m-link--m-danger--active--BackgroundColor: transparent;
2356
- --pf-v5-c-button--m-link--m-danger--active--Color: var(--pf-v5-global--danger-color--200);
2357
- --pf-v5-c-button--m-plain--BackgroundColor: transparent;
2358
- --pf-v5-c-button--m-plain--Color: var(--pf-v5-global--Color--200);
2359
- --pf-v5-c-button--m-plain--hover--BackgroundColor: transparent;
2360
- --pf-v5-c-button--m-plain--hover--Color: var(--pf-v5-global--Color--100);
2361
- --pf-v5-c-button--m-plain--focus--BackgroundColor: transparent;
2362
- --pf-v5-c-button--m-plain--focus--Color: var(--pf-v5-global--Color--100);
2363
- --pf-v5-c-button--m-plain--active--BackgroundColor: transparent;
2364
- --pf-v5-c-button--m-plain--active--Color: var(--pf-v5-global--Color--100);
2365
- --pf-v5-c-button--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200);
2366
- --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
2367
- --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
2368
- --pf-v5-c-button--m-control--Color: var(--pf-v5-global--Color--100);
2369
- --pf-v5-c-button--m-control--BorderRadius: 0;
2370
- --pf-v5-c-button--m-control--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
2371
- --pf-v5-c-button--m-control--after--BorderTopColor: var(--pf-v5-global--BorderColor--300);
2372
- --pf-v5-c-button--m-control--after--BorderRightColor: var(--pf-v5-global--BorderColor--300);
2373
- --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
2374
- --pf-v5-c-button--m-control--after--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
2375
- --pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
2376
- --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
2377
- --pf-v5-c-button--m-control--hover--Color: var(--pf-v5-global--Color--100);
2378
- --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
2379
- --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
2380
- --pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
2381
- --pf-v5-c-button--m-control--active--Color: var(--pf-v5-global--Color--100);
2382
- --pf-v5-c-button--m-control--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
2383
- --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
2384
- --pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
2385
- --pf-v5-c-button--m-control--focus--Color: var(--pf-v5-global--Color--100);
2386
- --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
2387
- --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
2388
- --pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
2389
- --pf-v5-c-button--m-control--m-expanded--Color: var(--pf-v5-global--Color--100);
2390
- --pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
2391
- --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
2392
- --pf-v5-c-button--m-small--FontSize: var(--pf-v5-global--FontSize--sm);
2393
- --pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-v5-global--spacer--md);
2394
- --pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-v5-global--spacer--xl);
2395
- --pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-v5-global--spacer--md);
2396
- --pf-v5-c-button--m-display-lg--PaddingLeft: var(--pf-v5-global--spacer--xl);
2397
- --pf-v5-c-button--m-display-lg--FontWeight: var(--pf-v5-global--FontWeight--bold);
2398
- --pf-v5-c-button--m-link--m-display-lg--FontSize: var(--pf-v5-global--FontSize--lg);
2399
- --pf-v5-c-button__icon--m-start--MarginRight: var(--pf-v5-global--spacer--xs);
2400
- --pf-v5-c-button__icon--m-end--MarginLeft: var(--pf-v5-global--spacer--xs);
2401
- --pf-v5-c-button__progress--width: calc(var(--pf-v5-global--icon--FontSize--md) + var(--pf-v5-global--spacer--sm));
2402
- --pf-v5-c-button__progress--Opacity: 0;
2403
- --pf-v5-c-button__progress--TranslateY: -50%;
2404
- --pf-v5-c-button__progress--TranslateX: 0;
2405
- --pf-v5-c-button__progress--Top: 50%;
2406
- --pf-v5-c-button__progress--Left: var(--pf-v5-global--spacer--md);
2407
- --pf-v5-c-button--m-progress--TransitionProperty: padding;
2408
- --pf-v5-c-button--m-progress--TransitionDuration: var(--pf-v5-global--TransitionDuration);
2409
- --pf-v5-c-button--m-progress--PaddingRight: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
2410
- --pf-v5-c-button--m-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
2411
- --pf-v5-c-button--m-in-progress--PaddingRight: var(--pf-v5-global--spacer--md);
2412
- --pf-v5-c-button--m-in-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width));
2413
- --pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-v5-global--primary-color--100);
2414
- --pf-v5-c-button--m-in-progress--m-plain__progress--Left: 50%;
2415
- --pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
2416
- --pf-v5-c-button__count--MarginLeft: var(--pf-v5-global--spacer--sm);
2417
- --pf-v5-c-button--disabled__c-badge--Color: var(--pf-v5-global--Color--dark-100);
2418
- --pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
2419
- --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-v5-global--BorderColor--300);
2420
- --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
2421
- position: relative;
2422
- display: inline-block;
2423
- padding-block-start: var(--pf-v5-c-button--PaddingTop);
2424
- padding-block-end: var(--pf-v5-c-button--PaddingBottom);
2425
- padding-inline-start: var(--pf-v5-c-button--PaddingLeft);
2426
- padding-inline-end: var(--pf-v5-c-button--PaddingRight);
2427
- font-size: var(--pf-v5-c-button--FontSize);
2428
- font-weight: var(--pf-v5-c-button--FontWeight);
2429
- line-height: var(--pf-v5-c-button--LineHeight);
2430
- text-align: center;
2431
- white-space: nowrap;
2432
- user-select: none;
2433
- border: 0;
2434
- border-radius: var(--pf-v5-c-button--BorderRadius);
2010
+ .pf-v5-c-banner.pf-m-gold, .pf-v5-c-banner.pf-m-blue {
2011
+ --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
2012
+ --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
2013
+ --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
2014
+ --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
2015
+ --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
2016
+ --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
2017
+ --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
2018
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
2019
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
2435
2020
  }
2436
2021
 
2437
- .pf-v5-c-button::after {
2438
- position: absolute;
2439
- inset-block-start: 0;
2440
- inset-block-end: 0;
2441
- inset-inline-start: 0;
2442
- inset-inline-end: 0;
2443
- pointer-events: none;
2444
- content: "";
2445
- border: var(--pf-v5-c-button--after--BorderWidth) solid;
2446
- border-color: var(--pf-v5-c-button--after--BorderColor);
2447
- border-radius: var(--pf-v5-c-button--after--BorderRadius);
2022
+ .pf-v5-c-banner {
2023
+ --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
2024
+ --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
2025
+ --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
2026
+ --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100);
2027
+ --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
2028
+ --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
2029
+ --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
2030
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
2031
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
2448
2032
  }
2449
2033
 
2450
- .pf-v5-c-button:hover {
2451
- --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--hover--after--BorderWidth);
2452
- text-decoration: none;
2034
+ .pf-v5-c-banner .pf-v5-c-button {
2035
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
2453
2036
  }
2454
2037
 
2455
- .pf-v5-c-button:focus {
2456
- --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--focus--after--BorderWidth);
2038
+ .pf-v5-c-banner {
2039
+ --pf-v5-c-banner--PaddingTop: var(--pf-v5-global--spacer--xs);
2040
+ --pf-v5-c-banner--PaddingRight: var(--pf-v5-global--spacer--md);
2041
+ --pf-v5-c-banner--md--PaddingRight: var(--pf-v5-global--spacer--lg);
2042
+ --pf-v5-c-banner--PaddingBottom: var(--pf-v5-global--spacer--xs);
2043
+ --pf-v5-c-banner--PaddingLeft: var(--pf-v5-global--spacer--md);
2044
+ --pf-v5-c-banner--md--PaddingLeft: var(--pf-v5-global--spacer--lg);
2045
+ --pf-v5-c-banner--FontSize: var(--pf-v5-global--FontSize--sm);
2046
+ --pf-v5-c-banner--Color: var(--pf-v5-global--Color--100);
2047
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
2048
+ --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--Color);
2049
+ --pf-v5-c-banner--link--TextDecoration: underline;
2050
+ --pf-v5-c-banner--link--hover--Color: var(--pf-v5-c-banner--Color);
2051
+ --pf-v5-c-banner--link--hover--FontWeight: var(--pf-v5-global--FontWeight--bold);
2052
+ --pf-v5-c-banner--link--disabled--Color: var(--pf-v5-c-banner--Color);
2053
+ --pf-v5-c-banner--link--disabled--TextDecoration: none;
2054
+ --pf-v5-c-banner--m-blue--BackgroundColor: var(--pf-v5-global--palette--blue-200);
2055
+ --pf-v5-c-banner--m-red--BackgroundColor: var(--pf-v5-global--danger-color--100);
2056
+ --pf-v5-c-banner--m-green--BackgroundColor: var(--pf-v5-global--success-color--100);
2057
+ --pf-v5-c-banner--m-gold--BackgroundColor: var(--pf-v5-global--warning-color--100);
2058
+ --pf-v5-c-banner--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--md);
2059
+ --pf-v5-c-banner--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--md-bottom);
2060
+ color: var(--pf-v5-global--Color--100);
2061
+ overflow: hidden;
2062
+ text-overflow: ellipsis;
2063
+ white-space: nowrap;
2064
+ flex-shrink: 0;
2065
+ padding-block-start: var(--pf-v5-c-banner--PaddingTop);
2066
+ padding-block-end: var(--pf-v5-c-banner--PaddingBottom);
2067
+ padding-inline-start: var(--pf-v5-c-banner--PaddingLeft);
2068
+ padding-inline-end: var(--pf-v5-c-banner--PaddingRight);
2069
+ font-size: var(--pf-v5-c-banner--FontSize);
2070
+ color: var(--pf-v5-c-banner--Color);
2071
+ white-space: nowrap;
2072
+ background-color: var(--pf-v5-c-banner--BackgroundColor);
2457
2073
  }
2458
2074
 
2459
- .pf-v5-c-button:active, .pf-v5-c-button.pf-m-active {
2460
- --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--active--after--BorderWidth);
2075
+ @media (min-width: 768px) {
2076
+ .pf-v5-c-banner {
2077
+ --pf-v5-c-banner--PaddingRight: var(--pf-v5-c-banner--md--PaddingRight);
2078
+ --pf-v5-c-banner--PaddingLeft: var(--pf-v5-c-banner--md--PaddingLeft);
2079
+ }
2461
2080
  }
2462
-
2463
- .pf-v5-c-button.pf-m-block {
2464
- display: block;
2465
- width: 100%;
2081
+ .pf-v5-c-banner.pf-m-blue {
2082
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-blue--BackgroundColor);
2466
2083
  }
2467
2084
 
2468
- .pf-v5-c-button.pf-m-small {
2469
- --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-small--FontSize);
2085
+ .pf-v5-c-banner.pf-m-red {
2086
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-red--BackgroundColor);
2470
2087
  }
2471
2088
 
2472
- .pf-v5-c-button.pf-m-primary.pf-m-display-lg, .pf-v5-c-button.pf-m-secondary.pf-m-display-lg, .pf-v5-c-button.pf-m-tertiary.pf-m-display-lg, .pf-v5-c-button.pf-m-link.pf-m-display-lg {
2473
- --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-display-lg--PaddingTop);
2474
- --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-display-lg--PaddingRight);
2475
- --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-display-lg--PaddingBottom);
2476
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-display-lg--PaddingLeft);
2477
- --pf-v5-c-button--FontWeight: var(--pf-v5-c-button--m-display-lg--FontWeight);
2089
+ .pf-v5-c-banner.pf-m-green {
2090
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-green--BackgroundColor);
2478
2091
  }
2479
2092
 
2480
- .pf-v5-c-button.pf-m-primary {
2481
- color: var(--pf-v5-c-button--m-primary--Color);
2482
- background-color: var(--pf-v5-c-button--m-primary--BackgroundColor);
2093
+ .pf-v5-c-banner.pf-m-gold {
2094
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-gold--BackgroundColor);
2483
2095
  }
2484
2096
 
2485
- .pf-v5-c-button.pf-m-primary:hover {
2486
- --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--hover--Color);
2487
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--hover--BackgroundColor);
2097
+ .pf-v5-c-banner.pf-m-sticky {
2098
+ position: sticky;
2099
+ inset-block-start: 0;
2100
+ z-index: var(--pf-v5-c-banner--m-sticky--ZIndex);
2101
+ box-shadow: var(--pf-v5-c-banner--m-sticky--BoxShadow);
2488
2102
  }
2489
2103
 
2490
- .pf-v5-c-button.pf-m-primary:focus {
2491
- --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--focus--Color);
2492
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--focus--BackgroundColor);
2104
+ .pf-v5-c-banner a {
2105
+ color: var(--pf-v5-c-banner--link--Color);
2106
+ text-decoration: var(--pf-v5-c-banner--link--TextDecoration);
2493
2107
  }
2494
2108
 
2495
- .pf-v5-c-button.pf-m-primary:active, .pf-v5-c-button.pf-m-primary.pf-m-active {
2496
- --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--active--Color);
2497
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--active--BackgroundColor);
2109
+ .pf-v5-c-banner a:hover:not(.pf-m-disabled) {
2110
+ --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--link--hover--Color);
2111
+ font-weight: var(--pf-v5-c-banner--link--hover--FontWeight);
2498
2112
  }
2499
2113
 
2500
- .pf-v5-c-button.pf-m-primary .pf-v5-c-badge.pf-m-unread {
2501
- border: var(--pf-v5-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v5-c-button--m-primary__c-badge--BorderColor);
2114
+ .pf-v5-c-banner a.pf-m-disabled {
2115
+ --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--link--disabled--Color);
2116
+ --pf-v5-c-banner--link--TextDecoration: var(--pf-v5-c-banner--link--disabled--TextDecoration);
2117
+ cursor: not-allowed;
2502
2118
  }
2503
2119
 
2504
- .pf-v5-c-button.pf-m-secondary {
2505
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--after--BorderColor);
2506
- color: var(--pf-v5-c-button--m-secondary--Color);
2507
- background-color: var(--pf-v5-c-button--m-secondary--BackgroundColor);
2120
+ .pf-v5-c-banner .pf-v5-c-button.pf-m-inline {
2121
+ --pf-v5-c-button--m-link--Color: var(--pf-v5-c-banner--link--Color);
2122
+ --pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-v5-c-banner--link--hover--Color);
2123
+ --pf-v5-c-button--disabled--Color: var(--pf-v5-c-banner--link--disabled--Color);
2124
+ text-decoration: var(--pf-v5-c-banner--link--TextDecoration);
2508
2125
  }
2509
2126
 
2510
- .pf-v5-c-button.pf-m-secondary:hover {
2511
- --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--hover--Color);
2512
- --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--hover--BackgroundColor);
2513
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--hover--after--BorderColor);
2127
+ .pf-v5-c-banner .pf-v5-c-button.pf-m-inline:hover {
2128
+ --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--link--hover--Color);
2129
+ font-weight: var(--pf-v5-c-banner--link--hover--FontWeight);
2514
2130
  }
2515
2131
 
2516
- .pf-v5-c-button.pf-m-secondary:focus {
2517
- --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--focus--Color);
2518
- --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--focus--BackgroundColor);
2519
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--focus--after--BorderColor);
2132
+ .pf-v5-c-banner .pf-v5-c-button.pf-m-inline:disabled, .pf-v5-c-banner .pf-v5-c-button.pf-m-inline.pf-m-disabled {
2133
+ --pf-v5-c-banner--link--TextDecoration: var(--pf-v5-c-banner--link--disabled--TextDecoration);
2134
+ cursor: not-allowed;
2520
2135
  }
2521
2136
 
2522
- .pf-v5-c-button.pf-m-secondary.pf-m-active, .pf-v5-c-button.pf-m-secondary:active {
2523
- --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--active--Color);
2524
- --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--active--BackgroundColor);
2525
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--active--after--BorderColor);
2137
+ :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button {
2138
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
2526
2139
  }
2527
2140
 
2528
- .pf-v5-c-button.pf-m-tertiary {
2529
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--after--BorderColor);
2530
- color: var(--pf-v5-c-button--m-tertiary--Color);
2531
- background-color: var(--pf-v5-c-button--m-tertiary--BackgroundColor);
2141
+ :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-blue, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-red, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-green, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-gold {
2142
+ --pf-v5-c-banner--Color: var(--pf-v5-global--palette--black-900);
2532
2143
  }
2533
2144
 
2534
- .pf-v5-c-button.pf-m-tertiary:hover {
2535
- --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--hover--Color);
2536
- --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--hover--BackgroundColor);
2537
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--hover--after--BorderColor);
2145
+ .pf-v5-c-breadcrumb {
2146
+ --pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-global--FontSize--sm);
2147
+ --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-v5-global--LineHeight--sm);
2148
+ --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-v5-global--spacer--sm);
2149
+ --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--icon--Color--dark);
2150
+ --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-v5-global--spacer--sm);
2151
+ --pf-v5-c-breadcrumb__item-divider--FontSize: var(--pf-v5-global--FontSize--sm);
2152
+ --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-global--link--Color);
2153
+ --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-global--link--TextDecoration);
2154
+ --pf-v5-c-breadcrumb__link--hover--Color: var(--pf-v5-global--link--Color--hover);
2155
+ --pf-v5-c-breadcrumb__link--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
2156
+ --pf-v5-c-breadcrumb__link--m-current--Color: var(--pf-v5-global--Color--100);
2157
+ --pf-v5-c-breadcrumb__link--BackgroundColor: transparent;
2158
+ --pf-v5-c-breadcrumb__heading--FontSize: var(--pf-v5-global--FontSize--sm);
2159
+ --pf-v5-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
2160
+ --pf-v5-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v5-c-breadcrumb__item--MarginRight) * -1);
2161
+ --pf-v5-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
2162
+ --pf-v5-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v5-c-breadcrumb__item-divider--MarginRight) * -1);
2163
+ --pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-v5-global--LineHeight--sm);
2164
+ display: inline-flex;
2538
2165
  }
2539
2166
 
2540
- .pf-v5-c-button.pf-m-tertiary:focus {
2541
- --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--focus--Color);
2542
- --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--focus--BackgroundColor);
2543
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--focus--after--BorderColor);
2167
+ .pf-v5-c-breadcrumb__list {
2168
+ display: flex;
2169
+ flex-wrap: wrap;
2170
+ align-items: center;
2544
2171
  }
2545
2172
 
2546
- .pf-v5-c-button.pf-m-tertiary:active, .pf-v5-c-button.pf-m-tertiary.pf-m-active {
2547
- --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--active--Color);
2548
- --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--active--BackgroundColor);
2549
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--active--after--BorderColor);
2173
+ .pf-v5-c-breadcrumb__item {
2174
+ display: flex;
2175
+ align-items: baseline;
2176
+ font-size: var(--pf-v5-c-breadcrumb__item--FontSize);
2177
+ font-weight: var(--pf-v5-c-breadcrumb__item--FontWeight);
2178
+ line-height: var(--pf-v5-c-breadcrumb__item--LineHeight);
2179
+ white-space: nowrap;
2180
+ list-style: none;
2550
2181
  }
2551
2182
 
2552
- .pf-v5-c-button.pf-m-link {
2553
- --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-link--disabled--BackgroundColor);
2554
- --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--disabled--Color);
2555
- color: var(--pf-v5-c-button--m-link--Color);
2556
- background-color: var(--pf-v5-c-button--m-link--BackgroundColor);
2183
+ .pf-v5-c-breadcrumb__item:not(:last-child) {
2184
+ margin-inline-end: var(--pf-v5-c-breadcrumb__item--MarginRight);
2557
2185
  }
2558
2186
 
2559
- .pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover {
2560
- --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--hover--Color);
2561
- --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
2187
+ .pf-v5-c-breadcrumb__item-divider {
2188
+ margin-inline-end: var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
2189
+ font-size: var(--pf-v5-c-breadcrumb__item-divider--FontSize);
2190
+ line-height: 1;
2191
+ color: var(--pf-v5-c-breadcrumb__item-divider--Color);
2562
2192
  }
2563
2193
 
2564
- .pf-v5-c-button.pf-m-link:not(.pf-m-inline):focus {
2565
- --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--focus--Color);
2566
- --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--focus--BackgroundColor);
2194
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
2195
+ scale: -1 1;
2567
2196
  }
2568
2197
 
2569
- .pf-v5-c-button.pf-m-link:not(.pf-m-inline):active, .pf-v5-c-button.pf-m-link:not(.pf-m-inline).pf-m-active {
2570
- --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--active--Color);
2571
- --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--active--BackgroundColor);
2198
+ .pf-v5-c-breadcrumb__link {
2199
+ font-size: inherit;
2200
+ font-weight: var(--pf-v5-c-breadcrumb__link--FontWeight);
2201
+ line-height: inherit;
2202
+ color: var(--pf-v5-c-breadcrumb__link--Color);
2203
+ text-decoration: var(--pf-v5-c-breadcrumb__link--TextDecoration);
2204
+ word-break: break-word;
2205
+ background-color: var(--pf-v5-c-breadcrumb__link--BackgroundColor);
2572
2206
  }
2573
2207
 
2574
- .pf-v5-c-button.pf-m-link.pf-m-inline {
2575
- --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-inline--FontSize);
2576
- --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
2577
- display: inline;
2578
- padding-block-start: var(--pf-v5-c-button--m-link--m-inline--PaddingTop);
2579
- padding-block-end: var(--pf-v5-c-button--m-link--m-inline--PaddingBottom);
2580
- padding-inline-start: var(--pf-v5-c-button--m-link--m-inline--PaddingLeft);
2581
- padding-inline-end: var(--pf-v5-c-button--m-link--m-inline--PaddingRight);
2582
- text-align: start;
2583
- white-space: normal;
2584
- cursor: pointer;
2208
+ .pf-v5-c-breadcrumb__link:hover {
2209
+ --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-c-breadcrumb__link--hover--Color);
2210
+ --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-c-breadcrumb__link--hover--TextDecoration);
2585
2211
  }
2586
2212
 
2587
- .pf-v5-c-button.pf-m-link.pf-m-inline:hover {
2588
- --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--m-inline--hover--Color);
2589
- text-decoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
2213
+ .pf-v5-c-breadcrumb__link.pf-m-current {
2214
+ cursor: default;
2590
2215
  }
2591
2216
 
2592
- .pf-v5-c-button.pf-m-link.pf-m-display-lg {
2593
- --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
2217
+ .pf-v5-c-breadcrumb__link.pf-m-current, .pf-v5-c-breadcrumb__link.pf-m-current:hover {
2218
+ color: var(--pf-v5-c-breadcrumb__link--m-current--Color);
2219
+ text-decoration: none;
2594
2220
  }
2595
2221
 
2596
- .pf-v5-c-button.pf-m-danger {
2597
- color: var(--pf-v5-c-button--m-danger--Color);
2598
- background-color: var(--pf-v5-c-button--m-danger--BackgroundColor);
2222
+ button.pf-v5-c-breadcrumb__link {
2223
+ border: none;
2599
2224
  }
2600
2225
 
2601
- .pf-v5-c-button.pf-m-danger:hover {
2602
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--hover--Color);
2603
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--hover--BackgroundColor);
2226
+ .pf-v5-c-breadcrumb__dropdown {
2227
+ margin-block-start: var(--pf-v5-c-breadcrumb__dropdown--MarginTop);
2228
+ margin-block-end: var(--pf-v5-c-breadcrumb__dropdown--MarginBottom);
2229
+ margin-inline-start: var(--pf-v5-c-breadcrumb__dropdown--MarginLeft);
2230
+ margin-inline-end: var(--pf-v5-c-breadcrumb__dropdown--MarginRight);
2604
2231
  }
2605
2232
 
2606
- .pf-v5-c-button.pf-m-danger:focus {
2607
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--focus--Color);
2608
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--focus--BackgroundColor);
2233
+ .pf-v5-c-breadcrumb__dropdown .pf-v5-c-dropdown__toggle {
2234
+ line-height: var(--pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);
2609
2235
  }
2610
2236
 
2611
- .pf-v5-c-button.pf-m-danger:active, .pf-v5-c-button.pf-m-danger.pf-m-active {
2612
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--active--Color);
2613
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--active--BackgroundColor);
2237
+ .pf-v5-c-breadcrumb__heading {
2238
+ display: inline;
2239
+ font-size: var(--pf-v5-c-breadcrumb__heading--FontSize);
2614
2240
  }
2615
2241
 
2616
- .pf-v5-c-button.pf-m-danger.pf-m-secondary {
2617
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--Color);
2618
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--BackgroundColor);
2619
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--after--BorderColor);
2242
+ .pf-v5-c-breadcrumb__link,
2243
+ .pf-v5-c-breadcrumb__heading {
2244
+ white-space: normal;
2620
2245
  }
2621
2246
 
2622
- .pf-v5-c-button.pf-m-danger.pf-m-secondary:hover {
2623
- --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--hover--Color);
2624
- --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor);
2625
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor);
2247
+ .pf-v5-c-breadcrumb__list > :first-child .pf-v5-c-breadcrumb__item-divider {
2248
+ display: none;
2626
2249
  }
2627
2250
 
2628
- .pf-v5-c-button.pf-m-danger.pf-m-secondary:focus {
2629
- --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--focus--Color);
2630
- --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor);
2631
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor);
2251
+ .pf-v5-c-button {
2252
+ --pf-v5-c-button--PaddingTop: var(--pf-v5-global--spacer--form-element);
2253
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--md);
2254
+ --pf-v5-c-button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
2255
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-global--spacer--md);
2256
+ --pf-v5-c-button--LineHeight: var(--pf-v5-global--LineHeight--md);
2257
+ --pf-v5-c-button--FontWeight: var(--pf-v5-global--FontWeight--normal);
2258
+ --pf-v5-c-button--FontSize: var(--pf-v5-global--FontSize--md);
2259
+ --pf-v5-c-button--BackgroundColor: transparent;
2260
+ --pf-v5-c-button--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
2261
+ --pf-v5-c-button--after--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
2262
+ --pf-v5-c-button--after--BorderColor: transparent;
2263
+ --pf-v5-c-button--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
2264
+ --pf-v5-c-button--hover--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2265
+ --pf-v5-c-button--focus--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2266
+ --pf-v5-c-button--active--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
2267
+ --pf-v5-c-button--disabled--Color: var(--pf-v5-global--disabled-color--100);
2268
+ --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
2269
+ --pf-v5-c-button--disabled--after--BorderColor: transparent;
2270
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--100);
2271
+ --pf-v5-c-button--m-primary--Color: var(--pf-v5-global--Color--light-100);
2272
+ --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-v5-global--primary-color--200);
2273
+ --pf-v5-c-button--m-primary--hover--Color: var(--pf-v5-global--Color--light-100);
2274
+ --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-v5-global--primary-color--200);
2275
+ --pf-v5-c-button--m-primary--focus--Color: var(--pf-v5-global--Color--light-100);
2276
+ --pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-v5-global--primary-color--200);
2277
+ --pf-v5-c-button--m-primary--active--Color: var(--pf-v5-global--Color--light-100);
2278
+ --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
2279
+ --pf-v5-c-button--m-secondary--after--BorderColor: var(--pf-v5-global--primary-color--100);
2280
+ --pf-v5-c-button--m-secondary--Color: var(--pf-v5-global--primary-color--100);
2281
+ --pf-v5-c-button--m-secondary--hover--BackgroundColor: transparent;
2282
+ --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--pf-v5-global--primary-color--100);
2283
+ --pf-v5-c-button--m-secondary--hover--Color: var(--pf-v5-global--primary-color--100);
2284
+ --pf-v5-c-button--m-secondary--focus--BackgroundColor: transparent;
2285
+ --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--pf-v5-global--primary-color--100);
2286
+ --pf-v5-c-button--m-secondary--focus--Color: var(--pf-v5-global--primary-color--100);
2287
+ --pf-v5-c-button--m-secondary--active--BackgroundColor: transparent;
2288
+ --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--pf-v5-global--primary-color--100);
2289
+ --pf-v5-c-button--m-secondary--active--Color: var(--pf-v5-global--primary-color--100);
2290
+ --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: transparent;
2291
+ --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-global--danger-color--100);
2292
+ --pf-v5-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-v5-global--danger-color--100);
2293
+ --pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
2294
+ --pf-v5-c-button--m-secondary--m-danger--hover--Color: var(--pf-v5-global--danger-color--200);
2295
+ --pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-v5-global--danger-color--100);
2296
+ --pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
2297
+ --pf-v5-c-button--m-secondary--m-danger--focus--Color: var(--pf-v5-global--danger-color--200);
2298
+ --pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-v5-global--danger-color--100);
2299
+ --pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
2300
+ --pf-v5-c-button--m-secondary--m-danger--active--Color: var(--pf-v5-global--danger-color--200);
2301
+ --pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-v5-global--danger-color--100);
2302
+ --pf-v5-c-button--m-tertiary--BackgroundColor: transparent;
2303
+ --pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-v5-global--Color--100);
2304
+ --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-global--Color--100);
2305
+ --pf-v5-c-button--m-tertiary--hover--BackgroundColor: transparent;
2306
+ --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-v5-global--Color--100);
2307
+ --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-v5-global--Color--100);
2308
+ --pf-v5-c-button--m-tertiary--focus--BackgroundColor: transparent;
2309
+ --pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-v5-global--Color--100);
2310
+ --pf-v5-c-button--m-tertiary--focus--Color: var(--pf-v5-global--Color--100);
2311
+ --pf-v5-c-button--m-tertiary--active--BackgroundColor: transparent;
2312
+ --pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-v5-global--Color--100);
2313
+ --pf-v5-c-button--m-tertiary--active--Color: var(--pf-v5-global--Color--100);
2314
+ --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-global--warning-color--100);
2315
+ --pf-v5-c-button--m-warning--Color: var(--pf-v5-global--Color--dark-100);
2316
+ --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-v5-global--palette--gold-500);
2317
+ --pf-v5-c-button--m-warning--hover--Color: var(--pf-v5-global--Color--dark-100);
2318
+ --pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-v5-global--palette--gold-500);
2319
+ --pf-v5-c-button--m-warning--focus--Color: var(--pf-v5-global--Color--dark-100);
2320
+ --pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-v5-global--palette--gold-500);
2321
+ --pf-v5-c-button--m-warning--active--Color: var(--pf-v5-global--Color--dark-100);
2322
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-global--danger-color--100);
2323
+ --pf-v5-c-button--m-danger--Color: var(--pf-v5-global--Color--light-100);
2324
+ --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-global--danger-color--200);
2325
+ --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-global--Color--light-100);
2326
+ --pf-v5-c-button--m-danger--focus--BackgroundColor: var(--pf-v5-global--danger-color--200);
2327
+ --pf-v5-c-button--m-danger--focus--Color: var(--pf-v5-global--Color--light-100);
2328
+ --pf-v5-c-button--m-danger--active--BackgroundColor: var(--pf-v5-global--danger-color--200);
2329
+ --pf-v5-c-button--m-danger--active--Color: var(--pf-v5-global--Color--light-100);
2330
+ --pf-v5-c-button--m-link--BackgroundColor: transparent;
2331
+ --pf-v5-c-button--m-link--Color: var(--pf-v5-global--link--Color);
2332
+ --pf-v5-c-button--m-link--hover--BackgroundColor: transparent;
2333
+ --pf-v5-c-button--m-link--hover--Color: var(--pf-v5-global--link--Color--hover);
2334
+ --pf-v5-c-button--m-link--focus--BackgroundColor: transparent;
2335
+ --pf-v5-c-button--m-link--focus--Color: var(--pf-v5-global--link--Color--hover);
2336
+ --pf-v5-c-button--m-link--active--BackgroundColor: transparent;
2337
+ --pf-v5-c-button--m-link--active--Color: var(--pf-v5-global--link--Color--hover);
2338
+ --pf-v5-c-button--m-link--disabled--BackgroundColor: transparent;
2339
+ --pf-v5-c-button--m-link--disabled--Color: var(--pf-v5-global--disabled-color--100);
2340
+ --pf-v5-c-button--m-link--m-inline--FontSize: inherit;
2341
+ --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
2342
+ --pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-v5-global--link--Color--hover);
2343
+ --pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
2344
+ --pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
2345
+ --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
2346
+ --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
2347
+ --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-v5-global--spacer--xs);
2348
+ --pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-v5-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-v5-global--spacer--sm));
2349
+ --pf-v5-c-button--m-link--m-danger--BackgroundColor: transparent;
2350
+ --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-global--danger-color--100);
2351
+ --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
2352
+ --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-v5-global--danger-color--200);
2353
+ --pf-v5-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
2354
+ --pf-v5-c-button--m-link--m-danger--focus--Color: var(--pf-v5-global--danger-color--200);
2355
+ --pf-v5-c-button--m-link--m-danger--active--BackgroundColor: transparent;
2356
+ --pf-v5-c-button--m-link--m-danger--active--Color: var(--pf-v5-global--danger-color--200);
2357
+ --pf-v5-c-button--m-plain--BackgroundColor: transparent;
2358
+ --pf-v5-c-button--m-plain--Color: var(--pf-v5-global--Color--200);
2359
+ --pf-v5-c-button--m-plain--hover--BackgroundColor: transparent;
2360
+ --pf-v5-c-button--m-plain--hover--Color: var(--pf-v5-global--Color--100);
2361
+ --pf-v5-c-button--m-plain--focus--BackgroundColor: transparent;
2362
+ --pf-v5-c-button--m-plain--focus--Color: var(--pf-v5-global--Color--100);
2363
+ --pf-v5-c-button--m-plain--active--BackgroundColor: transparent;
2364
+ --pf-v5-c-button--m-plain--active--Color: var(--pf-v5-global--Color--100);
2365
+ --pf-v5-c-button--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200);
2366
+ --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
2367
+ --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
2368
+ --pf-v5-c-button--m-control--Color: var(--pf-v5-global--Color--100);
2369
+ --pf-v5-c-button--m-control--BorderRadius: 0;
2370
+ --pf-v5-c-button--m-control--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
2371
+ --pf-v5-c-button--m-control--after--BorderTopColor: var(--pf-v5-global--BorderColor--300);
2372
+ --pf-v5-c-button--m-control--after--BorderRightColor: var(--pf-v5-global--BorderColor--300);
2373
+ --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
2374
+ --pf-v5-c-button--m-control--after--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
2375
+ --pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
2376
+ --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
2377
+ --pf-v5-c-button--m-control--hover--Color: var(--pf-v5-global--Color--100);
2378
+ --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
2379
+ --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
2380
+ --pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
2381
+ --pf-v5-c-button--m-control--active--Color: var(--pf-v5-global--Color--100);
2382
+ --pf-v5-c-button--m-control--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
2383
+ --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
2384
+ --pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
2385
+ --pf-v5-c-button--m-control--focus--Color: var(--pf-v5-global--Color--100);
2386
+ --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
2387
+ --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
2388
+ --pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
2389
+ --pf-v5-c-button--m-control--m-expanded--Color: var(--pf-v5-global--Color--100);
2390
+ --pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
2391
+ --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
2392
+ --pf-v5-c-button--m-small--FontSize: var(--pf-v5-global--FontSize--sm);
2393
+ --pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-v5-global--spacer--md);
2394
+ --pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-v5-global--spacer--xl);
2395
+ --pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-v5-global--spacer--md);
2396
+ --pf-v5-c-button--m-display-lg--PaddingLeft: var(--pf-v5-global--spacer--xl);
2397
+ --pf-v5-c-button--m-display-lg--FontWeight: var(--pf-v5-global--FontWeight--bold);
2398
+ --pf-v5-c-button--m-link--m-display-lg--FontSize: var(--pf-v5-global--FontSize--lg);
2399
+ --pf-v5-c-button__icon--m-start--MarginRight: var(--pf-v5-global--spacer--xs);
2400
+ --pf-v5-c-button__icon--m-end--MarginLeft: var(--pf-v5-global--spacer--xs);
2401
+ --pf-v5-c-button__progress--width: calc(var(--pf-v5-global--icon--FontSize--md) + var(--pf-v5-global--spacer--sm));
2402
+ --pf-v5-c-button__progress--Opacity: 0;
2403
+ --pf-v5-c-button__progress--TranslateY: -50%;
2404
+ --pf-v5-c-button__progress--TranslateX: 0;
2405
+ --pf-v5-c-button__progress--Top: 50%;
2406
+ --pf-v5-c-button__progress--Left: var(--pf-v5-global--spacer--md);
2407
+ --pf-v5-c-button--m-progress--TransitionProperty: padding;
2408
+ --pf-v5-c-button--m-progress--TransitionDuration: var(--pf-v5-global--TransitionDuration);
2409
+ --pf-v5-c-button--m-progress--PaddingRight: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
2410
+ --pf-v5-c-button--m-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
2411
+ --pf-v5-c-button--m-in-progress--PaddingRight: var(--pf-v5-global--spacer--md);
2412
+ --pf-v5-c-button--m-in-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width));
2413
+ --pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-v5-global--primary-color--100);
2414
+ --pf-v5-c-button--m-in-progress--m-plain__progress--Left: 50%;
2415
+ --pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
2416
+ --pf-v5-c-button__count--MarginLeft: var(--pf-v5-global--spacer--sm);
2417
+ --pf-v5-c-button--disabled__c-badge--Color: var(--pf-v5-global--Color--dark-100);
2418
+ --pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
2419
+ --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-v5-global--BorderColor--300);
2420
+ --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
2421
+ position: relative;
2422
+ display: inline-block;
2423
+ padding-block-start: var(--pf-v5-c-button--PaddingTop);
2424
+ padding-block-end: var(--pf-v5-c-button--PaddingBottom);
2425
+ padding-inline-start: var(--pf-v5-c-button--PaddingLeft);
2426
+ padding-inline-end: var(--pf-v5-c-button--PaddingRight);
2427
+ font-size: var(--pf-v5-c-button--FontSize);
2428
+ font-weight: var(--pf-v5-c-button--FontWeight);
2429
+ line-height: var(--pf-v5-c-button--LineHeight);
2430
+ text-align: center;
2431
+ white-space: nowrap;
2432
+ user-select: none;
2433
+ border: 0;
2434
+ border-radius: var(--pf-v5-c-button--BorderRadius);
2632
2435
  }
2633
2436
 
2634
- .pf-v5-c-button.pf-m-danger.pf-m-secondary:active, .pf-v5-c-button.pf-m-danger.pf-m-secondary.pf-m-active {
2635
- --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--active--Color);
2636
- --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor);
2637
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor);
2437
+ .pf-v5-c-button::after {
2438
+ position: absolute;
2439
+ inset-block-start: 0;
2440
+ inset-block-end: 0;
2441
+ inset-inline-start: 0;
2442
+ inset-inline-end: 0;
2443
+ pointer-events: none;
2444
+ content: "";
2445
+ border: var(--pf-v5-c-button--after--BorderWidth) solid;
2446
+ border-color: var(--pf-v5-c-button--after--BorderColor);
2447
+ border-radius: var(--pf-v5-c-button--after--BorderRadius);
2638
2448
  }
2639
2449
 
2640
- .pf-v5-c-button.pf-m-danger.pf-m-link {
2641
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
2642
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--BackgroundColor);
2450
+ .pf-v5-c-button:hover {
2451
+ --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--hover--after--BorderWidth);
2452
+ text-decoration: none;
2643
2453
  }
2644
2454
 
2645
- .pf-v5-c-button.pf-m-danger.pf-m-link:hover {
2646
- --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
2647
- --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor);
2455
+ .pf-v5-c-button:focus {
2456
+ --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--focus--after--BorderWidth);
2648
2457
  }
2649
2458
 
2650
- .pf-v5-c-button.pf-m-danger.pf-m-link:focus {
2651
- --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--focus--Color);
2652
- --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--focus--BackgroundColor);
2459
+ .pf-v5-c-button:active, .pf-v5-c-button.pf-m-active {
2460
+ --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--active--after--BorderWidth);
2653
2461
  }
2654
2462
 
2655
- .pf-v5-c-button.pf-m-danger.pf-m-link:active, .pf-v5-c-button.pf-m-danger.pf-m-link.pf-m-active {
2656
- --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--active--Color);
2657
- --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--active--BackgroundColor);
2463
+ .pf-v5-c-button.pf-m-block {
2464
+ display: block;
2465
+ width: 100%;
2658
2466
  }
2659
2467
 
2660
- .pf-v5-c-button.pf-m-warning {
2661
- color: var(--pf-v5-c-button--m-warning--Color);
2468
+ .pf-v5-c-button.pf-m-small {
2469
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-small--FontSize);
2470
+ }
2471
+
2472
+ .pf-v5-c-button.pf-m-primary.pf-m-display-lg, .pf-v5-c-button.pf-m-secondary.pf-m-display-lg, .pf-v5-c-button.pf-m-tertiary.pf-m-display-lg, .pf-v5-c-button.pf-m-link.pf-m-display-lg {
2473
+ --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-display-lg--PaddingTop);
2474
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-display-lg--PaddingRight);
2475
+ --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-display-lg--PaddingBottom);
2476
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-display-lg--PaddingLeft);
2477
+ --pf-v5-c-button--FontWeight: var(--pf-v5-c-button--m-display-lg--FontWeight);
2478
+ }
2479
+
2480
+ .pf-v5-c-button.pf-m-primary {
2481
+ color: var(--pf-v5-c-button--m-primary--Color);
2482
+ background-color: var(--pf-v5-c-button--m-primary--BackgroundColor);
2483
+ }
2484
+
2485
+ .pf-v5-c-button.pf-m-primary:hover {
2486
+ --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--hover--Color);
2487
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--hover--BackgroundColor);
2488
+ }
2489
+
2490
+ .pf-v5-c-button.pf-m-primary:focus {
2491
+ --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--focus--Color);
2492
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--focus--BackgroundColor);
2493
+ }
2494
+
2495
+ .pf-v5-c-button.pf-m-primary:active, .pf-v5-c-button.pf-m-primary.pf-m-active {
2496
+ --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--active--Color);
2497
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--active--BackgroundColor);
2498
+ }
2499
+
2500
+ .pf-v5-c-button.pf-m-primary .pf-v5-c-badge.pf-m-unread {
2501
+ border: var(--pf-v5-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v5-c-button--m-primary__c-badge--BorderColor);
2502
+ }
2503
+
2504
+ .pf-v5-c-button.pf-m-secondary {
2505
+ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--after--BorderColor);
2506
+ color: var(--pf-v5-c-button--m-secondary--Color);
2507
+ background-color: var(--pf-v5-c-button--m-secondary--BackgroundColor);
2508
+ }
2509
+
2510
+ .pf-v5-c-button.pf-m-secondary:hover {
2511
+ --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--hover--Color);
2512
+ --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--hover--BackgroundColor);
2513
+ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--hover--after--BorderColor);
2514
+ }
2515
+
2516
+ .pf-v5-c-button.pf-m-secondary:focus {
2517
+ --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--focus--Color);
2518
+ --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--focus--BackgroundColor);
2519
+ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--focus--after--BorderColor);
2520
+ }
2521
+
2522
+ .pf-v5-c-button.pf-m-secondary.pf-m-active, .pf-v5-c-button.pf-m-secondary:active {
2523
+ --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--active--Color);
2524
+ --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--active--BackgroundColor);
2525
+ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--active--after--BorderColor);
2526
+ }
2527
+
2528
+ .pf-v5-c-button.pf-m-tertiary {
2529
+ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--after--BorderColor);
2530
+ color: var(--pf-v5-c-button--m-tertiary--Color);
2531
+ background-color: var(--pf-v5-c-button--m-tertiary--BackgroundColor);
2532
+ }
2533
+
2534
+ .pf-v5-c-button.pf-m-tertiary:hover {
2535
+ --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--hover--Color);
2536
+ --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--hover--BackgroundColor);
2537
+ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--hover--after--BorderColor);
2538
+ }
2539
+
2540
+ .pf-v5-c-button.pf-m-tertiary:focus {
2541
+ --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--focus--Color);
2542
+ --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--focus--BackgroundColor);
2543
+ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--focus--after--BorderColor);
2544
+ }
2545
+
2546
+ .pf-v5-c-button.pf-m-tertiary:active, .pf-v5-c-button.pf-m-tertiary.pf-m-active {
2547
+ --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--active--Color);
2548
+ --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--active--BackgroundColor);
2549
+ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--active--after--BorderColor);
2550
+ }
2551
+
2552
+ .pf-v5-c-button.pf-m-link {
2553
+ --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-link--disabled--BackgroundColor);
2554
+ --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--disabled--Color);
2555
+ color: var(--pf-v5-c-button--m-link--Color);
2556
+ background-color: var(--pf-v5-c-button--m-link--BackgroundColor);
2557
+ }
2558
+
2559
+ .pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover {
2560
+ --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--hover--Color);
2561
+ --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
2562
+ }
2563
+
2564
+ .pf-v5-c-button.pf-m-link:not(.pf-m-inline):focus {
2565
+ --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--focus--Color);
2566
+ --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--focus--BackgroundColor);
2567
+ }
2568
+
2569
+ .pf-v5-c-button.pf-m-link:not(.pf-m-inline):active, .pf-v5-c-button.pf-m-link:not(.pf-m-inline).pf-m-active {
2570
+ --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--active--Color);
2571
+ --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--active--BackgroundColor);
2572
+ }
2573
+
2574
+ .pf-v5-c-button.pf-m-link.pf-m-inline {
2575
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-inline--FontSize);
2576
+ --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
2577
+ display: inline;
2578
+ padding-block-start: var(--pf-v5-c-button--m-link--m-inline--PaddingTop);
2579
+ padding-block-end: var(--pf-v5-c-button--m-link--m-inline--PaddingBottom);
2580
+ padding-inline-start: var(--pf-v5-c-button--m-link--m-inline--PaddingLeft);
2581
+ padding-inline-end: var(--pf-v5-c-button--m-link--m-inline--PaddingRight);
2582
+ text-align: start;
2583
+ white-space: normal;
2584
+ cursor: pointer;
2585
+ }
2586
+
2587
+ .pf-v5-c-button.pf-m-link.pf-m-inline:hover {
2588
+ --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--m-inline--hover--Color);
2589
+ text-decoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
2590
+ }
2591
+
2592
+ .pf-v5-c-button.pf-m-link.pf-m-display-lg {
2593
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
2594
+ }
2595
+
2596
+ .pf-v5-c-button.pf-m-danger {
2597
+ color: var(--pf-v5-c-button--m-danger--Color);
2598
+ background-color: var(--pf-v5-c-button--m-danger--BackgroundColor);
2599
+ }
2600
+
2601
+ .pf-v5-c-button.pf-m-danger:hover {
2602
+ --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--hover--Color);
2603
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--hover--BackgroundColor);
2604
+ }
2605
+
2606
+ .pf-v5-c-button.pf-m-danger:focus {
2607
+ --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--focus--Color);
2608
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--focus--BackgroundColor);
2609
+ }
2610
+
2611
+ .pf-v5-c-button.pf-m-danger:active, .pf-v5-c-button.pf-m-danger.pf-m-active {
2612
+ --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--active--Color);
2613
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--active--BackgroundColor);
2614
+ }
2615
+
2616
+ .pf-v5-c-button.pf-m-danger.pf-m-secondary {
2617
+ --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--Color);
2618
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--BackgroundColor);
2619
+ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--after--BorderColor);
2620
+ }
2621
+
2622
+ .pf-v5-c-button.pf-m-danger.pf-m-secondary:hover {
2623
+ --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--hover--Color);
2624
+ --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor);
2625
+ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor);
2626
+ }
2627
+
2628
+ .pf-v5-c-button.pf-m-danger.pf-m-secondary:focus {
2629
+ --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--focus--Color);
2630
+ --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor);
2631
+ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor);
2632
+ }
2633
+
2634
+ .pf-v5-c-button.pf-m-danger.pf-m-secondary:active, .pf-v5-c-button.pf-m-danger.pf-m-secondary.pf-m-active {
2635
+ --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--active--Color);
2636
+ --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor);
2637
+ --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor);
2638
+ }
2639
+
2640
+ .pf-v5-c-button.pf-m-danger.pf-m-link {
2641
+ --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
2642
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--BackgroundColor);
2643
+ }
2644
+
2645
+ .pf-v5-c-button.pf-m-danger.pf-m-link:hover {
2646
+ --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
2647
+ --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor);
2648
+ }
2649
+
2650
+ .pf-v5-c-button.pf-m-danger.pf-m-link:focus {
2651
+ --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--focus--Color);
2652
+ --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--focus--BackgroundColor);
2653
+ }
2654
+
2655
+ .pf-v5-c-button.pf-m-danger.pf-m-link:active, .pf-v5-c-button.pf-m-danger.pf-m-link.pf-m-active {
2656
+ --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--active--Color);
2657
+ --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--active--BackgroundColor);
2658
+ }
2659
+
2660
+ .pf-v5-c-button.pf-m-warning {
2661
+ color: var(--pf-v5-c-button--m-warning--Color);
2662
2662
  background-color: var(--pf-v5-c-button--m-warning--BackgroundColor);
2663
2663
  }
2664
2664
 
@@ -3581,7 +3581,7 @@ button.pf-v5-c-breadcrumb__link {
3581
3581
  --pf-v5-c-card--m-selectable-raised--active--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
3582
3582
  }
3583
3583
 
3584
- .pf-v5-c-chip {
3584
+ .pf-v5-c-chip-group {
3585
3585
  --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
3586
3586
  --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
3587
3587
  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
@@ -3593,137 +3593,7 @@ button.pf-v5-c-breadcrumb__link {
3593
3593
  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
3594
3594
  }
3595
3595
 
3596
- .pf-v5-c-chip {
3597
- --pf-v5-c-chip--PaddingTop: var(--pf-v5-global--spacer--xs);
3598
- --pf-v5-c-chip--PaddingRight: var(--pf-v5-global--spacer--sm);
3599
- --pf-v5-c-chip--PaddingBottom: var(--pf-v5-global--spacer--xs);
3600
- --pf-v5-c-chip--PaddingLeft: var(--pf-v5-global--spacer--sm);
3601
- --pf-v5-c-chip--BackgroundColor: var(--pf-v5-global--Color--light-100);
3602
- --pf-v5-c-chip--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
3603
- --pf-v5-c-chip--before--BorderColor: var(--pf-v5-global--BorderColor--300);
3604
- --pf-v5-c-chip--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
3605
- --pf-v5-c-chip--before--BorderRadius: var(--pf-v5-c-chip--BorderRadius);
3606
- --pf-v5-c-chip--m-overflow__text--Color: var(--pf-v5-global--primary-color--100);
3607
- --pf-v5-c-chip--m-draggable--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
3608
- --pf-v5-c-chip--m-draggable--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
3609
- --pf-v5-c-chip--m-draggable__icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
3610
- --pf-v5-c-chip__content--FontSize: var(--pf-v5-global--FontSize--xs);
3611
- --pf-v5-c-chip__content--ColumnGap: var(--pf-v5-global--spacer--xs);
3612
- --pf-v5-c-chip__text--Color: var(--pf-v5-global--Color--100);
3613
- --pf-v5-c-chip__text--MaxWidth: 16ch;
3614
- --pf-v5-c-chip__c-badge--MarginLeft: var(--pf-v5-global--spacer--xs);
3615
- --pf-v5-c-chip__actions--FontSize: var(--pf-v5-global--FontSize--xs);
3616
- --pf-v5-c-chip__actions--c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
3617
- --pf-v5-c-chip__actions--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
3618
- --pf-v5-c-chip__actions--c-button--PaddingBottom: var(--pf-v5-global--spacer--xs);
3619
- --pf-v5-c-chip__actions--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
3620
- --pf-v5-c-chip__actions--c-button--MarginTop: calc(var(--pf-v5-c-chip--PaddingTop) * -1);
3621
- --pf-v5-c-chip__actions--c-button--MarginRight: calc(var(--pf-v5-c-chip--PaddingRight) / 2 * -1);
3622
- --pf-v5-c-chip__actions--c-button--MarginBottom: calc(var(--pf-v5-c-chip--PaddingBottom) * -1);
3623
- --pf-v5-c-chip__actions--c-button--FontSize: var(--pf-v5-global--FontSize--xs);
3624
- --pf-v5-c-chip__icon--MarginLeft: var(--pf-v5-global--spacer--sm);
3625
- color: var(--pf-v5-global--Color--100);
3626
- position: relative;
3627
- display: inline-flex;
3628
- align-items: center;
3629
- min-width: 0;
3630
- padding-block-start: var(--pf-v5-c-chip--PaddingTop);
3631
- padding-block-end: var(--pf-v5-c-chip--PaddingBottom);
3632
- padding-inline-start: var(--pf-v5-c-chip--PaddingLeft);
3633
- padding-inline-end: var(--pf-v5-c-chip--PaddingRight);
3634
- list-style: none;
3635
- background-color: var(--pf-v5-c-chip--BackgroundColor);
3636
- border-radius: var(--pf-v5-c-chip--BorderRadius);
3637
- }
3638
-
3639
- .pf-v5-c-chip::before {
3640
- position: absolute;
3641
- inset-block-start: 0;
3642
- inset-block-end: 0;
3643
- inset-inline-start: 0;
3644
- inset-inline-end: 0;
3645
- content: "";
3646
- border: var(--pf-v5-c-chip--before--BorderWidth) solid var(--pf-v5-c-chip--before--BorderColor);
3647
- border-radius: var(--pf-v5-c-chip--before--BorderRadius);
3648
- }
3649
-
3650
- .pf-v5-c-chip.pf-m-overflow {
3651
- border: 0;
3652
- }
3653
-
3654
- .pf-v5-c-chip.pf-m-overflow .pf-v5-c-chip__text {
3655
- color: var(--pf-v5-c-chip--m-overflow__text--Color);
3656
- }
3657
-
3658
- .pf-v5-c-chip.pf-m-draggable {
3659
- --pf-v5-c-chip--BackgroundColor: var(--pf-v5-c-chip--m-draggable--BackgroundColor);
3660
- box-shadow: var(--pf-v5-c-chip--m-draggable--BoxShadow);
3661
- }
3662
-
3663
- .pf-v5-c-chip.pf-m-draggable .pf-v5-c-chip__icon {
3664
- font-size: var(--pf-v5-c-chip--m-draggable__icon--FontSize);
3665
- }
3666
-
3667
- .pf-v5-c-chip__text {
3668
- overflow: hidden;
3669
- text-overflow: ellipsis;
3670
- white-space: nowrap;
3671
- position: relative;
3672
- max-width: var(--pf-v5-c-chip__text--MaxWidth);
3673
- color: var(--pf-v5-c-chip__text--Color);
3674
- }
3675
-
3676
- .pf-v5-c-chip__text .pf-v5-c-badge {
3677
- margin-inline-start: var(--pf-v5-c-chip__c-badge--MarginLeft);
3678
- }
3679
-
3680
- .pf-v5-c-chip__icon + .pf-v5-c-chip__text,
3681
- .pf-v5-c-chip__text + .pf-v5-c-chip__icon {
3682
- margin-inline-start: var(--pf-v5-c-chip__icon--MarginLeft);
3683
- }
3684
-
3685
- .pf-v5-c-chip__content {
3686
- display: flex;
3687
- column-gap: var(--pf-v5-c-chip__content--ColumnGap);
3688
- align-items: center;
3689
- font-size: var(--pf-v5-c-chip__content--FontSize);
3690
- }
3691
-
3692
- .pf-v5-c-chip__actions {
3693
- font-size: var(--pf-v5-c-chip__actions--FontSize);
3694
- }
3695
-
3696
- .pf-v5-c-chip__actions .pf-v5-c-button {
3697
- --pf-v5-c-button--PaddingTop: var(--pf-v5-c-chip__actions--c-button--PaddingTop);
3698
- --pf-v5-c-button--PaddingRight: var(--pf-v5-c-chip__actions--c-button--PaddingRight);
3699
- --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-chip__actions--c-button--PaddingBottom);
3700
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-chip__actions--c-button--PaddingLeft);
3701
- --pf-v5-c-button--FontSize: var(--pf-v5-c-chip__actions--c-button--FontSize);
3702
- margin-block-start: var(--pf-v5-c-chip__actions--c-button--MarginTop);
3703
- margin-block-end: var(--pf-v5-c-chip__actions--c-button--MarginBottom);
3704
- margin-inline-end: var(--pf-v5-c-chip__actions--c-button--MarginRight);
3705
- line-height: 1;
3706
- }
3707
-
3708
- :where(.pf-v5-theme-dark) .pf-v5-c-chip {
3709
- --pf-v5-c-chip--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
3710
- --pf-v5-c-chip--before--BorderColor: var(--pf-v5-global--BorderColor--100);
3711
- --pf-v5-c-chip--m-draggable--BackgroundColor: var(--pf-v5-global--palette--black-600);
3712
- }
3713
-
3714
- .pf-v5-c-chip-group {
3715
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
3716
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
3717
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
3718
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
3719
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
3720
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
3721
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
3722
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
3723
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
3724
- }
3725
-
3726
- .pf-v5-c-chip-group {
3596
+ .pf-v5-c-chip-group {
3727
3597
  color: var(--pf-v5-global--Color--100);
3728
3598
  --pf-v5-c-chip-group--PaddingTop: 0;
3729
3599
  --pf-v5-c-chip-group--PaddingRight: 0;
@@ -3806,6 +3676,136 @@ button.pf-v5-c-breadcrumb__link {
3806
3676
  margin-block-end: var(--pf-v5-c-chip-group__close--MarginBottom);
3807
3677
  }
3808
3678
 
3679
+ .pf-v5-c-chip {
3680
+ --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
3681
+ --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
3682
+ --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
3683
+ --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
3684
+ --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
3685
+ --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
3686
+ --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
3687
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
3688
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
3689
+ }
3690
+
3691
+ .pf-v5-c-chip {
3692
+ --pf-v5-c-chip--PaddingTop: var(--pf-v5-global--spacer--xs);
3693
+ --pf-v5-c-chip--PaddingRight: var(--pf-v5-global--spacer--sm);
3694
+ --pf-v5-c-chip--PaddingBottom: var(--pf-v5-global--spacer--xs);
3695
+ --pf-v5-c-chip--PaddingLeft: var(--pf-v5-global--spacer--sm);
3696
+ --pf-v5-c-chip--BackgroundColor: var(--pf-v5-global--Color--light-100);
3697
+ --pf-v5-c-chip--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
3698
+ --pf-v5-c-chip--before--BorderColor: var(--pf-v5-global--BorderColor--300);
3699
+ --pf-v5-c-chip--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
3700
+ --pf-v5-c-chip--before--BorderRadius: var(--pf-v5-c-chip--BorderRadius);
3701
+ --pf-v5-c-chip--m-overflow__text--Color: var(--pf-v5-global--primary-color--100);
3702
+ --pf-v5-c-chip--m-draggable--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
3703
+ --pf-v5-c-chip--m-draggable--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
3704
+ --pf-v5-c-chip--m-draggable__icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
3705
+ --pf-v5-c-chip__content--FontSize: var(--pf-v5-global--FontSize--xs);
3706
+ --pf-v5-c-chip__content--ColumnGap: var(--pf-v5-global--spacer--xs);
3707
+ --pf-v5-c-chip__text--Color: var(--pf-v5-global--Color--100);
3708
+ --pf-v5-c-chip__text--MaxWidth: 16ch;
3709
+ --pf-v5-c-chip__c-badge--MarginLeft: var(--pf-v5-global--spacer--xs);
3710
+ --pf-v5-c-chip__actions--FontSize: var(--pf-v5-global--FontSize--xs);
3711
+ --pf-v5-c-chip__actions--c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
3712
+ --pf-v5-c-chip__actions--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
3713
+ --pf-v5-c-chip__actions--c-button--PaddingBottom: var(--pf-v5-global--spacer--xs);
3714
+ --pf-v5-c-chip__actions--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
3715
+ --pf-v5-c-chip__actions--c-button--MarginTop: calc(var(--pf-v5-c-chip--PaddingTop) * -1);
3716
+ --pf-v5-c-chip__actions--c-button--MarginRight: calc(var(--pf-v5-c-chip--PaddingRight) / 2 * -1);
3717
+ --pf-v5-c-chip__actions--c-button--MarginBottom: calc(var(--pf-v5-c-chip--PaddingBottom) * -1);
3718
+ --pf-v5-c-chip__actions--c-button--FontSize: var(--pf-v5-global--FontSize--xs);
3719
+ --pf-v5-c-chip__icon--MarginLeft: var(--pf-v5-global--spacer--sm);
3720
+ color: var(--pf-v5-global--Color--100);
3721
+ position: relative;
3722
+ display: inline-flex;
3723
+ align-items: center;
3724
+ min-width: 0;
3725
+ padding-block-start: var(--pf-v5-c-chip--PaddingTop);
3726
+ padding-block-end: var(--pf-v5-c-chip--PaddingBottom);
3727
+ padding-inline-start: var(--pf-v5-c-chip--PaddingLeft);
3728
+ padding-inline-end: var(--pf-v5-c-chip--PaddingRight);
3729
+ list-style: none;
3730
+ background-color: var(--pf-v5-c-chip--BackgroundColor);
3731
+ border-radius: var(--pf-v5-c-chip--BorderRadius);
3732
+ }
3733
+
3734
+ .pf-v5-c-chip::before {
3735
+ position: absolute;
3736
+ inset-block-start: 0;
3737
+ inset-block-end: 0;
3738
+ inset-inline-start: 0;
3739
+ inset-inline-end: 0;
3740
+ content: "";
3741
+ border: var(--pf-v5-c-chip--before--BorderWidth) solid var(--pf-v5-c-chip--before--BorderColor);
3742
+ border-radius: var(--pf-v5-c-chip--before--BorderRadius);
3743
+ }
3744
+
3745
+ .pf-v5-c-chip.pf-m-overflow {
3746
+ border: 0;
3747
+ }
3748
+
3749
+ .pf-v5-c-chip.pf-m-overflow .pf-v5-c-chip__text {
3750
+ color: var(--pf-v5-c-chip--m-overflow__text--Color);
3751
+ }
3752
+
3753
+ .pf-v5-c-chip.pf-m-draggable {
3754
+ --pf-v5-c-chip--BackgroundColor: var(--pf-v5-c-chip--m-draggable--BackgroundColor);
3755
+ box-shadow: var(--pf-v5-c-chip--m-draggable--BoxShadow);
3756
+ }
3757
+
3758
+ .pf-v5-c-chip.pf-m-draggable .pf-v5-c-chip__icon {
3759
+ font-size: var(--pf-v5-c-chip--m-draggable__icon--FontSize);
3760
+ }
3761
+
3762
+ .pf-v5-c-chip__text {
3763
+ overflow: hidden;
3764
+ text-overflow: ellipsis;
3765
+ white-space: nowrap;
3766
+ position: relative;
3767
+ max-width: var(--pf-v5-c-chip__text--MaxWidth);
3768
+ color: var(--pf-v5-c-chip__text--Color);
3769
+ }
3770
+
3771
+ .pf-v5-c-chip__text .pf-v5-c-badge {
3772
+ margin-inline-start: var(--pf-v5-c-chip__c-badge--MarginLeft);
3773
+ }
3774
+
3775
+ .pf-v5-c-chip__icon + .pf-v5-c-chip__text,
3776
+ .pf-v5-c-chip__text + .pf-v5-c-chip__icon {
3777
+ margin-inline-start: var(--pf-v5-c-chip__icon--MarginLeft);
3778
+ }
3779
+
3780
+ .pf-v5-c-chip__content {
3781
+ display: flex;
3782
+ column-gap: var(--pf-v5-c-chip__content--ColumnGap);
3783
+ align-items: center;
3784
+ font-size: var(--pf-v5-c-chip__content--FontSize);
3785
+ }
3786
+
3787
+ .pf-v5-c-chip__actions {
3788
+ font-size: var(--pf-v5-c-chip__actions--FontSize);
3789
+ }
3790
+
3791
+ .pf-v5-c-chip__actions .pf-v5-c-button {
3792
+ --pf-v5-c-button--PaddingTop: var(--pf-v5-c-chip__actions--c-button--PaddingTop);
3793
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-chip__actions--c-button--PaddingRight);
3794
+ --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-chip__actions--c-button--PaddingBottom);
3795
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-chip__actions--c-button--PaddingLeft);
3796
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-chip__actions--c-button--FontSize);
3797
+ margin-block-start: var(--pf-v5-c-chip__actions--c-button--MarginTop);
3798
+ margin-block-end: var(--pf-v5-c-chip__actions--c-button--MarginBottom);
3799
+ margin-inline-end: var(--pf-v5-c-chip__actions--c-button--MarginRight);
3800
+ line-height: 1;
3801
+ }
3802
+
3803
+ :where(.pf-v5-theme-dark) .pf-v5-c-chip {
3804
+ --pf-v5-c-chip--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
3805
+ --pf-v5-c-chip--before--BorderColor: var(--pf-v5-global--BorderColor--100);
3806
+ --pf-v5-c-chip--m-draggable--BackgroundColor: var(--pf-v5-global--palette--black-600);
3807
+ }
3808
+
3809
3809
  .pf-v5-c-clipboard-copy {
3810
3810
  --pf-v5-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
3811
3811
  --pf-v5-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
@@ -7951,79 +7951,6 @@ button.pf-v5-c-breadcrumb__link {
7951
7951
  --pf-v5-c-helper-text__item-text--m-success--Color: var(--pf-v5-global--success-color--100);
7952
7952
  }
7953
7953
 
7954
- .pf-v5-c-hint {
7955
- --pf-v5-c-hint--GridRowGap: var(--pf-v5-global--spacer--md);
7956
- --pf-v5-c-hint--PaddingTop: var(--pf-v5-global--spacer--lg);
7957
- --pf-v5-c-hint--PaddingRight: var(--pf-v5-global--spacer--lg);
7958
- --pf-v5-c-hint--PaddingBottom: var(--pf-v5-global--spacer--lg);
7959
- --pf-v5-c-hint--PaddingLeft: var(--pf-v5-global--spacer--lg);
7960
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--palette--blue-50);
7961
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--palette--blue-100);
7962
- --pf-v5-c-hint--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
7963
- --pf-v5-c-hint--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
7964
- --pf-v5-c-hint--Color: var(--pf-v5-global--Color--100);
7965
- --pf-v5-c-hint__title--FontSize: var(--pf-v5-global--FontSize--lg);
7966
- --pf-v5-c-hint__body--FontSize: var(--pf-v5-global--FontSize--md);
7967
- --pf-v5-c-hint__footer--child--MarginRight: var(--pf-v5-global--spacer--md);
7968
- --pf-v5-c-hint__actions--MarginLeft: var(--pf-v5-global--spacer--2xl);
7969
- --pf-v5-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
7970
- display: grid;
7971
- grid-template-columns: 1fr auto;
7972
- grid-row-gap: var(--pf-v5-c-hint--GridRowGap);
7973
- padding-block-start: var(--pf-v5-c-hint--PaddingTop);
7974
- padding-block-end: var(--pf-v5-c-hint--PaddingBottom);
7975
- padding-inline-start: var(--pf-v5-c-hint--PaddingLeft);
7976
- padding-inline-end: var(--pf-v5-c-hint--PaddingRight);
7977
- color: var(--pf-v5-c-hint--Color);
7978
- background-color: var(--pf-v5-c-hint--BackgroundColor);
7979
- border: var(--pf-v5-c-hint--BorderWidth) solid var(--pf-v5-c-hint--BorderColor);
7980
- box-shadow: var(--pf-v5-c-hint--BoxShadow);
7981
- }
7982
-
7983
- .pf-v5-c-hint .pf-v5-c-button.pf-m-link.pf-m-inline {
7984
- text-align: start;
7985
- white-space: normal;
7986
- }
7987
-
7988
- .pf-v5-c-hint__actions {
7989
- display: inline-grid;
7990
- grid-row: 1;
7991
- grid-column: 2;
7992
- grid-auto-flow: column;
7993
- margin-inline-start: var(--pf-v5-c-hint__actions--MarginLeft);
7994
- text-align: end;
7995
- }
7996
-
7997
- .pf-v5-c-hint__actions .pf-v5-c-dropdown .pf-v5-c-dropdown__toggle.pf-m-plain {
7998
- margin-block-start: var(--pf-v5-c-hint__actions--c-dropdown--MarginTop);
7999
- }
8000
-
8001
- .pf-v5-c-hint__actions + .pf-v5-c-hint__body {
8002
- grid-column: 1;
8003
- }
8004
-
8005
- .pf-v5-c-hint__title {
8006
- font-size: var(--pf-v5-c-hint__title--FontSize);
8007
- }
8008
-
8009
- .pf-v5-c-hint__body {
8010
- grid-column: 1/-1;
8011
- font-size: var(--pf-v5-c-hint__body--FontSize);
8012
- }
8013
-
8014
- .pf-v5-c-hint__footer {
8015
- grid-column: 1/-1;
8016
- }
8017
-
8018
- .pf-v5-c-hint__footer > :not(:last-child) {
8019
- margin-inline-end: var(--pf-v5-c-hint__footer--child--MarginRight);
8020
- }
8021
-
8022
- :where(.pf-v5-theme-dark) .pf-v5-c-hint {
8023
- --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
8024
- --pf-v5-c-hint--BorderColor: var(--pf-v5-global--BorderColor--300);
8025
- }
8026
-
8027
7954
  .pf-v5-c-icon {
8028
7955
  --pf-v5-c-icon--Width: 1em;
8029
7956
  --pf-v5-c-icon--Height: 1em;
@@ -8162,6 +8089,79 @@ button.pf-v5-c-breadcrumb__link {
8162
8089
  transform: translateY(calc(-50% - 0.5 * var(--pf-v5-c-icon__content--svg--VerticalAlign)));
8163
8090
  }
8164
8091
 
8092
+ .pf-v5-c-hint {
8093
+ --pf-v5-c-hint--GridRowGap: var(--pf-v5-global--spacer--md);
8094
+ --pf-v5-c-hint--PaddingTop: var(--pf-v5-global--spacer--lg);
8095
+ --pf-v5-c-hint--PaddingRight: var(--pf-v5-global--spacer--lg);
8096
+ --pf-v5-c-hint--PaddingBottom: var(--pf-v5-global--spacer--lg);
8097
+ --pf-v5-c-hint--PaddingLeft: var(--pf-v5-global--spacer--lg);
8098
+ --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--palette--blue-50);
8099
+ --pf-v5-c-hint--BorderColor: var(--pf-v5-global--palette--blue-100);
8100
+ --pf-v5-c-hint--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
8101
+ --pf-v5-c-hint--BoxShadow: var(--pf-v5-global--BoxShadow--sm);
8102
+ --pf-v5-c-hint--Color: var(--pf-v5-global--Color--100);
8103
+ --pf-v5-c-hint__title--FontSize: var(--pf-v5-global--FontSize--lg);
8104
+ --pf-v5-c-hint__body--FontSize: var(--pf-v5-global--FontSize--md);
8105
+ --pf-v5-c-hint__footer--child--MarginRight: var(--pf-v5-global--spacer--md);
8106
+ --pf-v5-c-hint__actions--MarginLeft: var(--pf-v5-global--spacer--2xl);
8107
+ --pf-v5-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
8108
+ display: grid;
8109
+ grid-template-columns: 1fr auto;
8110
+ grid-row-gap: var(--pf-v5-c-hint--GridRowGap);
8111
+ padding-block-start: var(--pf-v5-c-hint--PaddingTop);
8112
+ padding-block-end: var(--pf-v5-c-hint--PaddingBottom);
8113
+ padding-inline-start: var(--pf-v5-c-hint--PaddingLeft);
8114
+ padding-inline-end: var(--pf-v5-c-hint--PaddingRight);
8115
+ color: var(--pf-v5-c-hint--Color);
8116
+ background-color: var(--pf-v5-c-hint--BackgroundColor);
8117
+ border: var(--pf-v5-c-hint--BorderWidth) solid var(--pf-v5-c-hint--BorderColor);
8118
+ box-shadow: var(--pf-v5-c-hint--BoxShadow);
8119
+ }
8120
+
8121
+ .pf-v5-c-hint .pf-v5-c-button.pf-m-link.pf-m-inline {
8122
+ text-align: start;
8123
+ white-space: normal;
8124
+ }
8125
+
8126
+ .pf-v5-c-hint__actions {
8127
+ display: inline-grid;
8128
+ grid-row: 1;
8129
+ grid-column: 2;
8130
+ grid-auto-flow: column;
8131
+ margin-inline-start: var(--pf-v5-c-hint__actions--MarginLeft);
8132
+ text-align: end;
8133
+ }
8134
+
8135
+ .pf-v5-c-hint__actions .pf-v5-c-dropdown .pf-v5-c-dropdown__toggle.pf-m-plain {
8136
+ margin-block-start: var(--pf-v5-c-hint__actions--c-dropdown--MarginTop);
8137
+ }
8138
+
8139
+ .pf-v5-c-hint__actions + .pf-v5-c-hint__body {
8140
+ grid-column: 1;
8141
+ }
8142
+
8143
+ .pf-v5-c-hint__title {
8144
+ font-size: var(--pf-v5-c-hint__title--FontSize);
8145
+ }
8146
+
8147
+ .pf-v5-c-hint__body {
8148
+ grid-column: 1/-1;
8149
+ font-size: var(--pf-v5-c-hint__body--FontSize);
8150
+ }
8151
+
8152
+ .pf-v5-c-hint__footer {
8153
+ grid-column: 1/-1;
8154
+ }
8155
+
8156
+ .pf-v5-c-hint__footer > :not(:last-child) {
8157
+ margin-inline-end: var(--pf-v5-c-hint__footer--child--MarginRight);
8158
+ }
8159
+
8160
+ :where(.pf-v5-theme-dark) .pf-v5-c-hint {
8161
+ --pf-v5-c-hint--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
8162
+ --pf-v5-c-hint--BorderColor: var(--pf-v5-global--BorderColor--300);
8163
+ }
8164
+
8165
8165
  .pf-v5-c-input-group {
8166
8166
  --pf-v5-c-input-group--child--ZIndex: var(--pf-v5-global--ZIndex--xs);
8167
8167
  --pf-v5-c-input-group__item--offset: var(--pf-v5-global--BorderWidth--sm);
@@ -15240,671 +15240,671 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
15240
15240
  color: var(--pf-v5-global--Color--100);
15241
15241
  }
15242
15242
 
15243
- .pf-v5-c-popover {
15244
- --pf-v5-c-popover--FontSize: var(--pf-v5-global--FontSize--sm);
15245
- --pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
15246
- --pf-v5-c-popover--MaxWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
15247
- --pf-v5-c-popover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
15248
- --pf-v5-c-popover--m-danger__title-icon--Color: var(--pf-v5-global--danger-color--100);
15249
- --pf-v5-c-popover--m-warning__title-icon--Color: var(--pf-v5-global--warning-color--100);
15250
- --pf-v5-c-popover--m-success__title-icon--Color: var(--pf-v5-global--success-color--100);
15251
- --pf-v5-c-popover--m-info__title-icon--Color: var(--pf-v5-global--info-color--100);
15252
- --pf-v5-c-popover--m-custom__title-icon--Color: var(--pf-v5-global--custom-color--200);
15253
- --pf-v5-c-popover--m-danger__title-text--Color: var(--pf-v5-global--danger-color--200);
15254
- --pf-v5-c-popover--m-warning__title-text--Color: var(--pf-v5-global--warning-color--200);
15255
- --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--200);
15256
- --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--200);
15257
- --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--300);
15258
- --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
15259
- --pf-v5-c-popover__content--PaddingTop: var(--pf-v5-global--spacer--md);
15260
- --pf-v5-c-popover__content--PaddingRight: var(--pf-v5-global--spacer--md);
15261
- --pf-v5-c-popover__content--PaddingBottom: var(--pf-v5-global--spacer--md);
15262
- --pf-v5-c-popover__content--PaddingLeft: var(--pf-v5-global--spacer--md);
15263
- --pf-v5-c-popover__arrow--Width: var(--pf-v5-global--arrow--width-lg);
15264
- --pf-v5-c-popover__arrow--Height: var(--pf-v5-global--arrow--width-lg);
15265
- --pf-v5-c-popover__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
15266
- --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
15267
- --pf-v5-c-popover__arrow--m-top--TranslateX: -50%;
15268
- --pf-v5-c-popover__arrow--m-top--TranslateY: 50%;
15269
- --pf-v5-c-popover__arrow--m-top--Rotate: 45deg;
15270
- --pf-v5-c-popover__arrow--m-right--TranslateX: -50%;
15271
- --pf-v5-c-popover__arrow--m-right--TranslateY: -50%;
15272
- --pf-v5-c-popover__arrow--m-right--Rotate: 45deg;
15273
- --pf-v5-c-popover__arrow--m-bottom--TranslateX: -50%;
15274
- --pf-v5-c-popover__arrow--m-bottom--TranslateY: -50%;
15275
- --pf-v5-c-popover__arrow--m-bottom--Rotate: 45deg;
15276
- --pf-v5-c-popover__arrow--m-left--TranslateX: 50%;
15277
- --pf-v5-c-popover__arrow--m-left--TranslateY: -50%;
15278
- --pf-v5-c-popover__arrow--m-left--Rotate: 45deg;
15279
- --pf-v5-c-popover__close--Top: calc(var(--pf-v5-c-popover__content--PaddingTop) - var(--pf-v5-global--spacer--form-element));
15280
- --pf-v5-c-popover__close--Right: calc(var(--pf-v5-c-popover__content--PaddingRight) - var(--pf-v5-global--spacer--md));
15281
- --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-v5-global--spacer--2xl);
15282
- --pf-v5-c-popover__header--MarginBottom: var(--pf-v5-global--spacer--sm);
15283
- --pf-v5-c-popover__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
15284
- --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
15285
- --pf-v5-c-popover__title-text--FontSize: var(--pf-v5-global--FontSize--md);
15286
- --pf-v5-c-popover__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
15287
- --pf-v5-c-popover__title-icon--Color: var(--pf-v5-global--Color--100);
15288
- --pf-v5-c-popover__title-icon--FontSize: var(--pf-v5-global--FontSize--md);
15289
- --pf-v5-c-popover__footer--MarginTop: var(--pf-v5-global--spacer--md);
15290
- position: relative;
15291
- min-width: var(--pf-v5-c-popover--MinWidth);
15292
- max-width: var(--pf-v5-c-popover--MaxWidth);
15293
- font-size: var(--pf-v5-c-popover--FontSize);
15294
- box-shadow: var(--pf-v5-c-popover--BoxShadow);
15243
+ .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input) {
15244
+ appearance: textfield;
15295
15245
  }
15296
15246
 
15297
- .pf-v5-c-popover.pf-m-no-padding {
15298
- --pf-v5-c-popover__content--PaddingTop: 0px;
15299
- --pf-v5-c-popover__content--PaddingRight: 0px;
15300
- --pf-v5-c-popover__content--PaddingBottom: 0px;
15301
- --pf-v5-c-popover__content--PaddingLeft: 0px;
15247
+ .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
15248
+ margin: 0;
15249
+ appearance: none;
15302
15250
  }
15303
15251
 
15304
- .pf-v5-c-popover.pf-m-width-auto {
15305
- --pf-v5-c-popover--MinWidth: auto;
15306
- --pf-v5-c-popover--MaxWidth: none;
15252
+ .pf-v5-c-pagination {
15253
+ --pf-v5-c-pagination--inset: 0;
15254
+ --pf-v5-c-pagination--PaddingRight: var(--pf-v5-c-pagination--inset);
15255
+ --pf-v5-c-pagination--PaddingLeft: var(--pf-v5-c-pagination--inset);
15256
+ --pf-v5-c-pagination--m-page-insets--inset: var(--pf-v5-global--spacer--md);
15257
+ --pf-v5-c-pagination--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
15258
+ --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-global--spacer--lg);
15259
+ --pf-v5-c-pagination--m-bottom--child--MarginRight: 0;
15260
+ --pf-v5-c-pagination--m-bottom--child--md--MarginRight: var(--pf-v5-global--spacer--lg);
15261
+ --pf-v5-c-pagination--m-compact--child--MarginRight: var(--pf-v5-global--spacer--sm);
15262
+ --pf-v5-c-pagination__nav--Display: none;
15263
+ --pf-v5-c-pagination--m-display-summary__nav--Display: none;
15264
+ --pf-v5-c-pagination--m-display-full__nav--Display: inline-flex;
15265
+ --pf-v5-c-pagination__nav-control--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
15266
+ --pf-v5-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
15267
+ --pf-v5-c-pagination__nav-control--c-button--FontSize: var(--pf-v5-global--FontSize--md);
15268
+ --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
15269
+ --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-v5-global--spacer--md);
15270
+ --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-v5-global--spacer--md);
15271
+ --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-v5-global--spacer--md);
15272
+ --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop: var(--pf-v5-global--spacer--form-element);
15273
+ --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight: var(--pf-v5-global--spacer--sm);
15274
+ --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom: var(--pf-v5-global--spacer--form-element);
15275
+ --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft: var(--pf-v5-global--spacer--sm);
15276
+ --pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft: var(--pf-v5-global--spacer--md);
15277
+ --pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-v5-global--FontSize--sm);
15278
+ --pf-v5-c-pagination__nav-page-select--PaddingLeft: var(--pf-v5-global--spacer--md);
15279
+ --pf-v5-c-pagination__nav-page-select--PaddingRight: var(--pf-v5-global--spacer--md);
15280
+ --pf-v5-c-pagination__nav-page-select--child--MarginRight: var(--pf-v5-global--spacer--xs);
15281
+ --pf-v5-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-v5-global--spacer--sm) * 2 + var(--pf-v5-global--BorderWidth--sm) * 2);
15282
+ --pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;
15283
+ --pf-v5-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v5-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
15284
+ --pf-v5-c-pagination__total-items--Display: block;
15285
+ --pf-v5-c-pagination--m-display-summary__total-items--Display: block;
15286
+ --pf-v5-c-pagination--m-display-full__total-items--Display: none;
15287
+ --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
15288
+ --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
15289
+ --pf-v5-c-pagination--m-sticky--md--PaddingTop: var(--pf-v5-global--spacer--md);
15290
+ --pf-v5-c-pagination--m-sticky--md--PaddingRight: var(--pf-v5-global--spacer--md);
15291
+ --pf-v5-c-pagination--m-sticky--md--PaddingBottom: var(--pf-v5-global--spacer--md);
15292
+ --pf-v5-c-pagination--m-sticky--md--PaddingLeft: var(--pf-v5-global--spacer--md);
15293
+ --pf-v5-c-pagination--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--xs);
15294
+ --pf-v5-c-pagination--m-sticky--Top: 0;
15295
+ --pf-v5-c-pagination--m-bottom--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
15296
+ --pf-v5-c-pagination--m-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
15297
+ --pf-v5-c-pagination--m-bottom--Bottom: 0;
15298
+ --pf-v5-c-pagination--m-bottom--md--PaddingTop: var(--pf-v5-global--spacer--md);
15299
+ --pf-v5-c-pagination--m-bottom--md--PaddingRight: var(--pf-v5-global--spacer--md);
15300
+ --pf-v5-c-pagination--m-bottom--md--PaddingBottom: var(--pf-v5-global--spacer--md);
15301
+ --pf-v5-c-pagination--m-bottom--md--PaddingLeft: var(--pf-v5-global--spacer--md);
15302
+ --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
15303
+ --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
15304
+ --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
15305
+ --pf-v5-c-pagination--c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--sm);
15306
+ --pf-v5-c-pagination--c-menu-toggle--Display--base: inline-flex;
15307
+ --pf-v5-c-pagination--c-menu-toggle--Display: none;
15308
+ --pf-v5-c-pagination--c-menu-toggle--md--Display: var(--pf-v5-c-pagination--c-menu-toggle--Display--base);
15309
+ --pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display: none;
15310
+ --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display: var(--pf-v5-c-pagination--c-menu-toggle--Display--base);
15311
+ --pf-v5-c-pagination--m-bottom--c-menu-toggle--Display: var(--pf-v5-c-pagination--c-menu-toggle--Display--base);
15312
+ display: flex;
15313
+ flex-wrap: wrap;
15314
+ align-items: center;
15315
+ justify-content: flex-end;
15316
+ padding-inline-start: var(--pf-v5-c-pagination--PaddingLeft);
15317
+ padding-inline-end: var(--pf-v5-c-pagination--PaddingRight);
15307
15318
  }
15308
15319
 
15309
- .pf-v5-c-popover:is(.pf-m-top,
15310
- .pf-m-top-left,
15311
- .pf-m-top-right) {
15312
- --pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover--m-top--Bottom, 0);
15313
- --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-top--Left, 50%);
15314
- --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-top--TranslateX);
15315
- --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
15316
- --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-top--Rotate);
15320
+ @media screen and (min-width: 768px) {
15321
+ .pf-v5-c-pagination {
15322
+ --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop);
15323
+ --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight);
15324
+ --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom);
15325
+ --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingLeft: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft);
15326
+ --pf-v5-c-pagination--m-bottom--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--md--MarginRight);
15327
+ --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
15328
+ --pf-v5-c-pagination--m-bottom--BoxShadow: none;
15329
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--c-menu-toggle--md--Display);
15330
+ --pf-v5-c-pagination__nav--Display: inline-flex;
15331
+ --pf-v5-c-pagination__total-items--Display: none;
15332
+ }
15333
+ }
15334
+ @media screen and (min-width: 1200px) {
15335
+ .pf-v5-c-pagination {
15336
+ --pf-v5-c-pagination--m-bottom--md--PaddingRight: var(--pf-v5-c-pagination--m-bottom--xl--PaddingRight);
15337
+ --pf-v5-c-pagination--m-bottom--md--PaddingLeft: var(--pf-v5-c-pagination--m-bottom--xl--PaddingLeft);
15338
+ --pf-v5-c-pagination__scroll-button--Width: var(--pf-v5-c-pagination__scroll-button--xl--Width);
15339
+ --pf-v5-c-pagination--m-page-insets--inset: var(--pf-v5-c-pagination--m-page-insets--xl--inset);
15340
+ }
15341
+ }
15342
+ .pf-v5-c-pagination > *:not(:last-child):not(.pf-v5-c-pagination__total-items) {
15343
+ margin-inline-end: var(--pf-v5-c-pagination--child--MarginRight);
15317
15344
  }
15318
15345
 
15319
- .pf-v5-c-popover:is(.pf-m-bottom,
15320
- .pf-m-bottom-left,
15321
- .pf-m-bottom-right) {
15322
- --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-bottom--Top, 0);
15323
- --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-bottom--Left, 50%);
15324
- --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-bottom--TranslateX);
15325
- --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-bottom--TranslateY);
15326
- --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-bottom--Rotate);
15346
+ .pf-v5-c-pagination .pf-v5-c-menu-toggle {
15347
+ display: var(--pf-v5-c-pagination--c-menu-toggle--Display);
15348
+ font-size: var(--pf-v5-c-pagination--c-menu-toggle--FontSize);
15327
15349
  }
15328
15350
 
15329
- .pf-v5-c-popover:is(.pf-m-left,
15330
- .pf-m-left-top,
15331
- .pf-m-left-bottom) {
15332
- --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-left--Top, 50%);
15333
- --pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover--m-left--Right, 0);
15334
- --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
15335
- --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-left--TranslateY);
15336
- --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-left--Rotate);
15351
+ .pf-v5-c-pagination.pf-m-bottom {
15352
+ --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--MarginRight);
15353
+ --pf-v5-c-pagination__nav-control--c-button--PaddingRight: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
15354
+ --pf-v5-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
15355
+ --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow);
15356
+ --pf-v5-c-pagination--m-sticky--Top: auto;
15357
+ position: sticky;
15358
+ inset-block-end: var(--pf-v5-c-pagination--m-bottom--Bottom);
15359
+ justify-content: center;
15360
+ background-color: var(--pf-v5-c-pagination--m-bottom--BackgroundColor);
15361
+ box-shadow: var(--pf-v5-c-pagination--m-bottom--BoxShadow);
15337
15362
  }
15338
15363
 
15339
- .pf-v5-c-popover:is(.pf-m-right,
15340
- .pf-m-right-top,
15341
- .pf-m-right-bottom) {
15342
- --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-right--Top, 50%);
15343
- --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-right--Left, 0);
15344
- --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-right--TranslateX);
15345
- --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-right--TranslateY);
15346
- --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-right--Rotate);
15364
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control .pf-v5-c-button {
15365
+ --pf-v5-c-button--PaddingTop: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop);
15366
+ --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom);
15367
+ outline-offset: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset);
15347
15368
  }
15348
15369
 
15349
- .pf-v5-c-popover:is(.pf-m-left-top,
15350
- .pf-m-right-top) {
15351
- --pf-v5-c-popover__arrow--Top: 0;
15352
- --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
15370
+ .pf-v5-c-pagination.pf-m-bottom.pf-m-static {
15371
+ --pf-v5-c-pagination--m-bottom--MarginTop: 0;
15372
+ --pf-v5-c-pagination--m-bottom--BorderTopWidth: 0;
15373
+ position: relative;
15374
+ box-shadow: none;
15353
15375
  }
15354
15376
 
15355
- .pf-v5-c-popover:is(.pf-m-left-bottom,
15356
- .pf-m-right-bottom) {
15357
- --pf-v5-c-popover__arrow--Top: auto;
15358
- --pf-v5-c-popover__arrow--Bottom: 0;
15377
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-first,
15378
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-last,
15379
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
15380
+ display: none;
15359
15381
  }
15360
15382
 
15361
- .pf-v5-c-popover:is(.pf-m-top-left,
15362
- .pf-m-bottom-left) {
15363
- --pf-v5-c-popover__arrow--Left: 0;
15364
- --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
15383
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
15384
+ position: absolute;
15385
+ display: var(--pf-v5-c-pagination--m-bottom--c-menu-toggle--Display);
15365
15386
  }
15366
15387
 
15367
- .pf-v5-c-popover:is(.pf-m-top-right,
15368
- .pf-m-bottom-right) {
15369
- --pf-v5-c-popover__arrow--Right: 0;
15370
- --pf-v5-c-popover__arrow--Left: auto;
15388
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav {
15389
+ display: flex;
15390
+ flex-basis: 100%;
15391
+ justify-content: space-between;
15371
15392
  }
15372
15393
 
15373
- .pf-v5-c-popover.pf-m-danger {
15374
- --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
15375
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-danger__title-text--Color);
15394
+ @media screen and (min-width: 768px) {
15395
+ .pf-v5-c-pagination.pf-m-bottom {
15396
+ --pf-v5-c-pagination--m-bottom--BorderTopWidth: 0;
15397
+ --pf-v5-c-pagination--m-bottom--MarginTop: 0;
15398
+ --pf-v5-c-pagination--m-bottom--Bottom: auto;
15399
+ position: relative;
15400
+ justify-content: flex-end;
15401
+ padding-block-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingTop);
15402
+ padding-block-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingBottom);
15403
+ padding-inline-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingLeft);
15404
+ padding-inline-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingRight);
15405
+ }
15406
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-first,
15407
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-last,
15408
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
15409
+ display: block;
15410
+ }
15411
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
15412
+ display: inline-flex;
15413
+ }
15414
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
15415
+ position: relative;
15416
+ }
15417
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav {
15418
+ display: inline-flex;
15419
+ flex-basis: auto;
15420
+ }
15421
+ }
15422
+ .pf-v5-c-pagination.pf-m-sticky {
15423
+ --pf-v5-c-pagination--m-bottom--Bottom: 0;
15424
+ position: sticky;
15425
+ inset-block-start: var(--pf-v5-c-pagination--m-sticky--Top);
15426
+ z-index: var(--pf-v5-c-pagination--m-sticky--ZIndex);
15427
+ padding-block-start: var(--pf-v5-c-pagination--m-sticky--PaddingTop);
15428
+ padding-block-end: var(--pf-v5-c-pagination--m-sticky--PaddingBottom);
15429
+ padding-inline-start: var(--pf-v5-c-pagination--m-sticky--PaddingLeft);
15430
+ padding-inline-end: var(--pf-v5-c-pagination--m-sticky--PaddingRight);
15431
+ background-color: var(--pf-v5-c-pagination--m-sticky--BackgroundColor);
15432
+ box-shadow: var(--pf-v5-c-pagination--m-sticky--BoxShadow);
15376
15433
  }
15377
15434
 
15378
- .pf-v5-c-popover.pf-m-warning {
15379
- --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-warning__title-icon--Color);
15380
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-warning__title-text--Color);
15435
+ @media screen and (min-width: 768px) {
15436
+ .pf-v5-c-pagination.pf-m-sticky {
15437
+ padding-block-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingTop);
15438
+ padding-block-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingBottom);
15439
+ padding-inline-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingLeft);
15440
+ padding-inline-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingRight);
15441
+ }
15442
+ }
15443
+ .pf-v5-c-pagination.pf-m-compact {
15444
+ --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-compact--child--MarginRight);
15381
15445
  }
15382
15446
 
15383
- .pf-v5-c-popover.pf-m-success {
15384
- --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-success__title-icon--Color);
15385
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-success__title-text--Color);
15447
+ .pf-v5-c-pagination.pf-m-page-insets {
15448
+ --pf-v5-c-pagination--inset: var(--pf-v5-c-pagination--m-page-insets--inset);
15386
15449
  }
15387
15450
 
15388
- .pf-v5-c-popover.pf-m-custom {
15389
- --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-custom__title-icon--Color);
15390
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-custom__title-text--Color);
15451
+ .pf-v5-c-pagination__nav {
15452
+ display: var(--pf-v5-c-pagination__nav--Display);
15453
+ justify-content: flex-end;
15391
15454
  }
15392
15455
 
15393
- .pf-v5-c-popover.pf-m-info {
15394
- --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-info__title-icon--Color);
15395
- --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-info__title-text--Color);
15456
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
15457
+ scale: -1 1;
15396
15458
  }
15397
15459
 
15398
- .pf-v5-c-popover__content {
15399
- position: relative;
15400
- padding-block-start: var(--pf-v5-c-popover__content--PaddingTop);
15401
- padding-block-end: var(--pf-v5-c-popover__content--PaddingBottom);
15402
- padding-inline-start: var(--pf-v5-c-popover__content--PaddingLeft);
15403
- padding-inline-end: var(--pf-v5-c-popover__content--PaddingRight);
15404
- background-color: var(--pf-v5-c-popover__content--BackgroundColor);
15460
+ .pf-v5-c-pagination__nav-control .pf-v5-c-button {
15461
+ padding-inline-start: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
15462
+ padding-inline-end: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);
15463
+ font-size: var(--pf-v5-c-pagination__nav-control--c-button--FontSize);
15405
15464
  }
15406
15465
 
15407
- .pf-v5-c-popover__close {
15408
- position: absolute;
15409
- inset-block-start: var(--pf-v5-c-popover__close--Top);
15410
- inset-inline-end: var(--pf-v5-c-popover__close--Right);
15466
+ .pf-v5-c-pagination.pf-m-compact .pf-v5-c-pagination__nav-control + .pf-v5-c-pagination__nav-control {
15467
+ margin-inline-start: var(--pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
15411
15468
  }
15412
15469
 
15413
- .pf-v5-c-popover__close + * {
15414
- padding-inline-end: var(--pf-v5-c-popover__close--sibling--PaddingRight);
15470
+ .pf-v5-c-pagination__nav-page-select {
15471
+ display: flex;
15472
+ align-items: center;
15473
+ padding-inline-start: var(--pf-v5-c-pagination__nav-page-select--PaddingLeft);
15474
+ padding-inline-end: var(--pf-v5-c-pagination__nav-page-select--PaddingRight);
15415
15475
  }
15416
15476
 
15417
- .pf-v5-c-popover__arrow {
15418
- position: absolute;
15419
- top: var(--pf-v5-c-popover__arrow--Top, auto);
15420
- right: var(--pf-v5-c-popover__arrow--Right, auto);
15421
- bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
15422
- left: var(--pf-v5-c-popover__arrow--Left, auto);
15423
- width: var(--pf-v5-c-popover__arrow--Width);
15424
- height: var(--pf-v5-c-popover__arrow--Height);
15425
- pointer-events: none;
15426
- background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
15427
- box-shadow: var(--pf-v5-c-popover__arrow--BoxShadow);
15428
- transform: translateX(var(--pf-v5-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-popover__arrow--Rotate, 0));
15477
+ .pf-v5-c-pagination__nav-page-select > * {
15478
+ font-size: var(--pf-v5-c-pagination__nav-page-select--FontSize);
15479
+ white-space: nowrap;
15429
15480
  }
15430
15481
 
15431
- .pf-v5-c-popover__header {
15432
- margin-block-end: var(--pf-v5-c-popover__header--MarginBottom);
15482
+ .pf-v5-c-pagination__nav-page-select > *:not(:last-child) {
15483
+ margin-inline-end: var(--pf-v5-c-pagination__nav-page-select--child--MarginRight);
15433
15484
  }
15434
15485
 
15435
- .pf-v5-c-popover__title {
15436
- display: flex;
15437
- flex: 0 0 auto;
15486
+ .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
15487
+ width: var(--pf-v5-c-pagination__nav-page-select--c-form-control--Width);
15438
15488
  }
15439
15489
 
15440
- .pf-v5-c-popover__title-icon {
15441
- margin-inline-end: var(--pf-v5-c-popover__title-icon--MarginRight);
15442
- font-size: var(--pf-v5-c-popover__title-icon--FontSize);
15443
- color: var(--pf-v5-c-popover__title-icon--Color);
15490
+ .pf-v5-c-pagination__total-items {
15491
+ display: var(--pf-v5-c-pagination__total-items--Display);
15444
15492
  }
15445
15493
 
15446
- .pf-v5-c-popover__title-text {
15447
- font-family: var(--pf-v5-c-popover__title-text--FontFamily);
15448
- font-size: var(--pf-v5-c-popover__title-text--FontSize);
15449
- line-height: var(--pf-v5-c-popover__title-text--LineHeight);
15450
- color: var(--pf-v5-c-popover__title-text--Color, inherit);
15494
+ .pf-v5-c-pagination.pf-m-display-summary {
15495
+ --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
15496
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
15497
+ --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
15451
15498
  }
15452
15499
 
15453
- .pf-v5-c-popover__body {
15454
- word-wrap: break-word;
15500
+ .pf-v5-c-pagination.pf-m-display-full {
15501
+ --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
15502
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
15503
+ --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
15455
15504
  }
15456
15505
 
15457
- .pf-v5-c-popover__footer {
15458
- margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
15506
+ .pf-v5-c-pagination.pf-m-inset-none {
15507
+ --pf-v5-c-pagination--inset: 0;
15459
15508
  }
15460
15509
 
15461
- :where(.pf-v5-theme-dark) .pf-v5-c-popover {
15462
- --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
15463
- --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
15464
- --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
15465
- --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
15466
- --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
15510
+ .pf-v5-c-pagination.pf-m-inset-sm {
15511
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
15467
15512
  }
15468
15513
 
15469
- .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input) {
15470
- appearance: textfield;
15514
+ .pf-v5-c-pagination.pf-m-inset-md {
15515
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--md);
15471
15516
  }
15472
15517
 
15473
- .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
15474
- margin: 0;
15475
- appearance: none;
15518
+ .pf-v5-c-pagination.pf-m-inset-lg {
15519
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--lg);
15476
15520
  }
15477
15521
 
15478
- .pf-v5-c-pagination {
15479
- --pf-v5-c-pagination--inset: 0;
15480
- --pf-v5-c-pagination--PaddingRight: var(--pf-v5-c-pagination--inset);
15481
- --pf-v5-c-pagination--PaddingLeft: var(--pf-v5-c-pagination--inset);
15482
- --pf-v5-c-pagination--m-page-insets--inset: var(--pf-v5-global--spacer--md);
15483
- --pf-v5-c-pagination--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
15484
- --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-global--spacer--lg);
15485
- --pf-v5-c-pagination--m-bottom--child--MarginRight: 0;
15486
- --pf-v5-c-pagination--m-bottom--child--md--MarginRight: var(--pf-v5-global--spacer--lg);
15487
- --pf-v5-c-pagination--m-compact--child--MarginRight: var(--pf-v5-global--spacer--sm);
15488
- --pf-v5-c-pagination__nav--Display: none;
15489
- --pf-v5-c-pagination--m-display-summary__nav--Display: none;
15490
- --pf-v5-c-pagination--m-display-full__nav--Display: inline-flex;
15491
- --pf-v5-c-pagination__nav-control--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
15492
- --pf-v5-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
15493
- --pf-v5-c-pagination__nav-control--c-button--FontSize: var(--pf-v5-global--FontSize--md);
15494
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
15495
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-v5-global--spacer--md);
15496
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-v5-global--spacer--md);
15497
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-v5-global--spacer--md);
15498
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop: var(--pf-v5-global--spacer--form-element);
15499
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight: var(--pf-v5-global--spacer--sm);
15500
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom: var(--pf-v5-global--spacer--form-element);
15501
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft: var(--pf-v5-global--spacer--sm);
15502
- --pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft: var(--pf-v5-global--spacer--md);
15503
- --pf-v5-c-pagination__nav-page-select--FontSize: var(--pf-v5-global--FontSize--sm);
15504
- --pf-v5-c-pagination__nav-page-select--PaddingLeft: var(--pf-v5-global--spacer--md);
15505
- --pf-v5-c-pagination__nav-page-select--PaddingRight: var(--pf-v5-global--spacer--md);
15506
- --pf-v5-c-pagination__nav-page-select--child--MarginRight: var(--pf-v5-global--spacer--xs);
15507
- --pf-v5-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-v5-global--spacer--sm) * 2 + var(--pf-v5-global--BorderWidth--sm) * 2);
15508
- --pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;
15509
- --pf-v5-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v5-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v5-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
15510
- --pf-v5-c-pagination__total-items--Display: block;
15511
- --pf-v5-c-pagination--m-display-summary__total-items--Display: block;
15512
- --pf-v5-c-pagination--m-display-full__total-items--Display: none;
15513
- --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
15514
- --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
15515
- --pf-v5-c-pagination--m-sticky--md--PaddingTop: var(--pf-v5-global--spacer--md);
15516
- --pf-v5-c-pagination--m-sticky--md--PaddingRight: var(--pf-v5-global--spacer--md);
15517
- --pf-v5-c-pagination--m-sticky--md--PaddingBottom: var(--pf-v5-global--spacer--md);
15518
- --pf-v5-c-pagination--m-sticky--md--PaddingLeft: var(--pf-v5-global--spacer--md);
15519
- --pf-v5-c-pagination--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--xs);
15520
- --pf-v5-c-pagination--m-sticky--Top: 0;
15521
- --pf-v5-c-pagination--m-bottom--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
15522
- --pf-v5-c-pagination--m-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
15523
- --pf-v5-c-pagination--m-bottom--Bottom: 0;
15524
- --pf-v5-c-pagination--m-bottom--md--PaddingTop: var(--pf-v5-global--spacer--md);
15525
- --pf-v5-c-pagination--m-bottom--md--PaddingRight: var(--pf-v5-global--spacer--md);
15526
- --pf-v5-c-pagination--m-bottom--md--PaddingBottom: var(--pf-v5-global--spacer--md);
15527
- --pf-v5-c-pagination--m-bottom--md--PaddingLeft: var(--pf-v5-global--spacer--md);
15528
- --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
15529
- --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
15530
- --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
15531
- --pf-v5-c-pagination--c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--sm);
15532
- --pf-v5-c-pagination--c-menu-toggle--Display--base: inline-flex;
15533
- --pf-v5-c-pagination--c-menu-toggle--Display: none;
15534
- --pf-v5-c-pagination--c-menu-toggle--md--Display: var(--pf-v5-c-pagination--c-menu-toggle--Display--base);
15535
- --pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display: none;
15536
- --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display: var(--pf-v5-c-pagination--c-menu-toggle--Display--base);
15537
- --pf-v5-c-pagination--m-bottom--c-menu-toggle--Display: var(--pf-v5-c-pagination--c-menu-toggle--Display--base);
15538
- display: flex;
15539
- flex-wrap: wrap;
15540
- align-items: center;
15541
- justify-content: flex-end;
15542
- padding-inline-start: var(--pf-v5-c-pagination--PaddingLeft);
15543
- padding-inline-end: var(--pf-v5-c-pagination--PaddingRight);
15522
+ .pf-v5-c-pagination.pf-m-inset-xl {
15523
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--xl);
15544
15524
  }
15545
15525
 
15546
- @media screen and (min-width: 768px) {
15547
- .pf-v5-c-pagination {
15548
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop);
15549
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight);
15550
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom);
15551
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingLeft: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft);
15552
- --pf-v5-c-pagination--m-bottom--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--md--MarginRight);
15553
- --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
15554
- --pf-v5-c-pagination--m-bottom--BoxShadow: none;
15555
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--c-menu-toggle--md--Display);
15556
- --pf-v5-c-pagination__nav--Display: inline-flex;
15557
- --pf-v5-c-pagination__total-items--Display: none;
15526
+ .pf-v5-c-pagination.pf-m-inset-2xl {
15527
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
15528
+ }
15529
+
15530
+ @media (min-width: 576px) {
15531
+ .pf-v5-c-pagination.pf-m-display-summary-on-sm {
15532
+ --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
15533
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
15534
+ --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
15535
+ }
15536
+ .pf-v5-c-pagination.pf-m-display-full-on-sm {
15537
+ --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
15538
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
15539
+ --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
15540
+ }
15541
+ .pf-v5-c-pagination.pf-m-inset-none-on-sm {
15542
+ --pf-v5-c-pagination--inset: 0;
15543
+ }
15544
+ .pf-v5-c-pagination.pf-m-inset-sm-on-sm {
15545
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
15546
+ }
15547
+ .pf-v5-c-pagination.pf-m-inset-md-on-sm {
15548
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--md);
15549
+ }
15550
+ .pf-v5-c-pagination.pf-m-inset-lg-on-sm {
15551
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--lg);
15552
+ }
15553
+ .pf-v5-c-pagination.pf-m-inset-xl-on-sm {
15554
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--xl);
15555
+ }
15556
+ .pf-v5-c-pagination.pf-m-inset-2xl-on-sm {
15557
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
15558
15558
  }
15559
15559
  }
15560
- @media screen and (min-width: 1200px) {
15561
- .pf-v5-c-pagination {
15562
- --pf-v5-c-pagination--m-bottom--md--PaddingRight: var(--pf-v5-c-pagination--m-bottom--xl--PaddingRight);
15563
- --pf-v5-c-pagination--m-bottom--md--PaddingLeft: var(--pf-v5-c-pagination--m-bottom--xl--PaddingLeft);
15564
- --pf-v5-c-pagination__scroll-button--Width: var(--pf-v5-c-pagination__scroll-button--xl--Width);
15565
- --pf-v5-c-pagination--m-page-insets--inset: var(--pf-v5-c-pagination--m-page-insets--xl--inset);
15560
+ @media (min-width: 768px) {
15561
+ .pf-v5-c-pagination.pf-m-display-summary-on-md {
15562
+ --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
15563
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
15564
+ --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
15565
+ }
15566
+ .pf-v5-c-pagination.pf-m-display-full-on-md {
15567
+ --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
15568
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
15569
+ --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
15570
+ }
15571
+ .pf-v5-c-pagination.pf-m-inset-none-on-md {
15572
+ --pf-v5-c-pagination--inset: 0;
15573
+ }
15574
+ .pf-v5-c-pagination.pf-m-inset-sm-on-md {
15575
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
15576
+ }
15577
+ .pf-v5-c-pagination.pf-m-inset-md-on-md {
15578
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--md);
15579
+ }
15580
+ .pf-v5-c-pagination.pf-m-inset-lg-on-md {
15581
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--lg);
15582
+ }
15583
+ .pf-v5-c-pagination.pf-m-inset-xl-on-md {
15584
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--xl);
15585
+ }
15586
+ .pf-v5-c-pagination.pf-m-inset-2xl-on-md {
15587
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
15566
15588
  }
15567
15589
  }
15568
- .pf-v5-c-pagination > *:not(:last-child):not(.pf-v5-c-pagination__total-items) {
15569
- margin-inline-end: var(--pf-v5-c-pagination--child--MarginRight);
15590
+ @media (min-width: 992px) {
15591
+ .pf-v5-c-pagination.pf-m-display-summary-on-lg {
15592
+ --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
15593
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
15594
+ --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
15595
+ }
15596
+ .pf-v5-c-pagination.pf-m-display-full-on-lg {
15597
+ --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
15598
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
15599
+ --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
15600
+ }
15601
+ .pf-v5-c-pagination.pf-m-inset-none-on-lg {
15602
+ --pf-v5-c-pagination--inset: 0;
15603
+ }
15604
+ .pf-v5-c-pagination.pf-m-inset-sm-on-lg {
15605
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
15606
+ }
15607
+ .pf-v5-c-pagination.pf-m-inset-md-on-lg {
15608
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--md);
15609
+ }
15610
+ .pf-v5-c-pagination.pf-m-inset-lg-on-lg {
15611
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--lg);
15612
+ }
15613
+ .pf-v5-c-pagination.pf-m-inset-xl-on-lg {
15614
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--xl);
15615
+ }
15616
+ .pf-v5-c-pagination.pf-m-inset-2xl-on-lg {
15617
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
15618
+ }
15570
15619
  }
15571
-
15572
- .pf-v5-c-pagination .pf-v5-c-menu-toggle {
15573
- display: var(--pf-v5-c-pagination--c-menu-toggle--Display);
15574
- font-size: var(--pf-v5-c-pagination--c-menu-toggle--FontSize);
15620
+ @media (min-width: 1200px) {
15621
+ .pf-v5-c-pagination.pf-m-display-summary-on-xl {
15622
+ --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
15623
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
15624
+ --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
15625
+ }
15626
+ .pf-v5-c-pagination.pf-m-display-full-on-xl {
15627
+ --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
15628
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
15629
+ --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
15630
+ }
15631
+ .pf-v5-c-pagination.pf-m-inset-none-on-xl {
15632
+ --pf-v5-c-pagination--inset: 0;
15633
+ }
15634
+ .pf-v5-c-pagination.pf-m-inset-sm-on-xl {
15635
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
15636
+ }
15637
+ .pf-v5-c-pagination.pf-m-inset-md-on-xl {
15638
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--md);
15639
+ }
15640
+ .pf-v5-c-pagination.pf-m-inset-lg-on-xl {
15641
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--lg);
15642
+ }
15643
+ .pf-v5-c-pagination.pf-m-inset-xl-on-xl {
15644
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--xl);
15645
+ }
15646
+ .pf-v5-c-pagination.pf-m-inset-2xl-on-xl {
15647
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
15648
+ }
15575
15649
  }
15576
-
15577
- .pf-v5-c-pagination.pf-m-bottom {
15578
- --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--MarginRight);
15579
- --pf-v5-c-pagination__nav-control--c-button--PaddingRight: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
15580
- --pf-v5-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
15581
- --pf-v5-c-pagination--m-sticky--BoxShadow: var(--pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow);
15582
- --pf-v5-c-pagination--m-sticky--Top: auto;
15583
- position: sticky;
15584
- inset-block-end: var(--pf-v5-c-pagination--m-bottom--Bottom);
15585
- justify-content: center;
15586
- background-color: var(--pf-v5-c-pagination--m-bottom--BackgroundColor);
15587
- box-shadow: var(--pf-v5-c-pagination--m-bottom--BoxShadow);
15650
+ @media (min-width: 1450px) {
15651
+ .pf-v5-c-pagination.pf-m-display-summary-on-2xl {
15652
+ --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
15653
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
15654
+ --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
15655
+ }
15656
+ .pf-v5-c-pagination.pf-m-display-full-on-2xl {
15657
+ --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
15658
+ --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
15659
+ --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
15660
+ }
15661
+ .pf-v5-c-pagination.pf-m-inset-none-on-2xl {
15662
+ --pf-v5-c-pagination--inset: 0;
15663
+ }
15664
+ .pf-v5-c-pagination.pf-m-inset-sm-on-2xl {
15665
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
15666
+ }
15667
+ .pf-v5-c-pagination.pf-m-inset-md-on-2xl {
15668
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--md);
15669
+ }
15670
+ .pf-v5-c-pagination.pf-m-inset-lg-on-2xl {
15671
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--lg);
15672
+ }
15673
+ .pf-v5-c-pagination.pf-m-inset-xl-on-2xl {
15674
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--xl);
15675
+ }
15676
+ .pf-v5-c-pagination.pf-m-inset-2xl-on-2xl {
15677
+ --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
15678
+ }
15588
15679
  }
15589
-
15590
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control .pf-v5-c-button {
15591
- --pf-v5-c-button--PaddingTop: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingTop);
15592
- --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--PaddingBottom);
15593
- outline-offset: var(--pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset);
15680
+ :where(.pf-v5-theme-dark) .pf-v5-c-pagination {
15681
+ --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
15594
15682
  }
15595
15683
 
15596
- .pf-v5-c-pagination.pf-m-bottom.pf-m-static {
15597
- --pf-v5-c-pagination--m-bottom--MarginTop: 0;
15598
- --pf-v5-c-pagination--m-bottom--BorderTopWidth: 0;
15684
+ .pf-v5-c-popover {
15685
+ --pf-v5-c-popover--FontSize: var(--pf-v5-global--FontSize--sm);
15686
+ --pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
15687
+ --pf-v5-c-popover--MaxWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
15688
+ --pf-v5-c-popover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
15689
+ --pf-v5-c-popover--m-danger__title-icon--Color: var(--pf-v5-global--danger-color--100);
15690
+ --pf-v5-c-popover--m-warning__title-icon--Color: var(--pf-v5-global--warning-color--100);
15691
+ --pf-v5-c-popover--m-success__title-icon--Color: var(--pf-v5-global--success-color--100);
15692
+ --pf-v5-c-popover--m-info__title-icon--Color: var(--pf-v5-global--info-color--100);
15693
+ --pf-v5-c-popover--m-custom__title-icon--Color: var(--pf-v5-global--custom-color--200);
15694
+ --pf-v5-c-popover--m-danger__title-text--Color: var(--pf-v5-global--danger-color--200);
15695
+ --pf-v5-c-popover--m-warning__title-text--Color: var(--pf-v5-global--warning-color--200);
15696
+ --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--200);
15697
+ --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--200);
15698
+ --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--300);
15699
+ --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
15700
+ --pf-v5-c-popover__content--PaddingTop: var(--pf-v5-global--spacer--md);
15701
+ --pf-v5-c-popover__content--PaddingRight: var(--pf-v5-global--spacer--md);
15702
+ --pf-v5-c-popover__content--PaddingBottom: var(--pf-v5-global--spacer--md);
15703
+ --pf-v5-c-popover__content--PaddingLeft: var(--pf-v5-global--spacer--md);
15704
+ --pf-v5-c-popover__arrow--Width: var(--pf-v5-global--arrow--width-lg);
15705
+ --pf-v5-c-popover__arrow--Height: var(--pf-v5-global--arrow--width-lg);
15706
+ --pf-v5-c-popover__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
15707
+ --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
15708
+ --pf-v5-c-popover__arrow--m-top--TranslateX: -50%;
15709
+ --pf-v5-c-popover__arrow--m-top--TranslateY: 50%;
15710
+ --pf-v5-c-popover__arrow--m-top--Rotate: 45deg;
15711
+ --pf-v5-c-popover__arrow--m-right--TranslateX: -50%;
15712
+ --pf-v5-c-popover__arrow--m-right--TranslateY: -50%;
15713
+ --pf-v5-c-popover__arrow--m-right--Rotate: 45deg;
15714
+ --pf-v5-c-popover__arrow--m-bottom--TranslateX: -50%;
15715
+ --pf-v5-c-popover__arrow--m-bottom--TranslateY: -50%;
15716
+ --pf-v5-c-popover__arrow--m-bottom--Rotate: 45deg;
15717
+ --pf-v5-c-popover__arrow--m-left--TranslateX: 50%;
15718
+ --pf-v5-c-popover__arrow--m-left--TranslateY: -50%;
15719
+ --pf-v5-c-popover__arrow--m-left--Rotate: 45deg;
15720
+ --pf-v5-c-popover__close--Top: calc(var(--pf-v5-c-popover__content--PaddingTop) - var(--pf-v5-global--spacer--form-element));
15721
+ --pf-v5-c-popover__close--Right: calc(var(--pf-v5-c-popover__content--PaddingRight) - var(--pf-v5-global--spacer--md));
15722
+ --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-v5-global--spacer--2xl);
15723
+ --pf-v5-c-popover__header--MarginBottom: var(--pf-v5-global--spacer--sm);
15724
+ --pf-v5-c-popover__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
15725
+ --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
15726
+ --pf-v5-c-popover__title-text--FontSize: var(--pf-v5-global--FontSize--md);
15727
+ --pf-v5-c-popover__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
15728
+ --pf-v5-c-popover__title-icon--Color: var(--pf-v5-global--Color--100);
15729
+ --pf-v5-c-popover__title-icon--FontSize: var(--pf-v5-global--FontSize--md);
15730
+ --pf-v5-c-popover__footer--MarginTop: var(--pf-v5-global--spacer--md);
15599
15731
  position: relative;
15600
- box-shadow: none;
15732
+ min-width: var(--pf-v5-c-popover--MinWidth);
15733
+ max-width: var(--pf-v5-c-popover--MaxWidth);
15734
+ font-size: var(--pf-v5-c-popover--FontSize);
15735
+ box-shadow: var(--pf-v5-c-popover--BoxShadow);
15601
15736
  }
15602
15737
 
15603
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-first,
15604
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-last,
15605
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
15606
- display: none;
15738
+ .pf-v5-c-popover.pf-m-no-padding {
15739
+ --pf-v5-c-popover__content--PaddingTop: 0px;
15740
+ --pf-v5-c-popover__content--PaddingRight: 0px;
15741
+ --pf-v5-c-popover__content--PaddingBottom: 0px;
15742
+ --pf-v5-c-popover__content--PaddingLeft: 0px;
15607
15743
  }
15608
15744
 
15609
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
15610
- position: absolute;
15611
- display: var(--pf-v5-c-pagination--m-bottom--c-menu-toggle--Display);
15745
+ .pf-v5-c-popover.pf-m-width-auto {
15746
+ --pf-v5-c-popover--MinWidth: auto;
15747
+ --pf-v5-c-popover--MaxWidth: none;
15612
15748
  }
15613
15749
 
15614
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav {
15615
- display: flex;
15616
- flex-basis: 100%;
15617
- justify-content: space-between;
15750
+ .pf-v5-c-popover:is(.pf-m-top,
15751
+ .pf-m-top-left,
15752
+ .pf-m-top-right) {
15753
+ --pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover--m-top--Bottom, 0);
15754
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-top--Left, 50%);
15755
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-top--TranslateX);
15756
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
15757
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-top--Rotate);
15618
15758
  }
15619
15759
 
15620
- @media screen and (min-width: 768px) {
15621
- .pf-v5-c-pagination.pf-m-bottom {
15622
- --pf-v5-c-pagination--m-bottom--BorderTopWidth: 0;
15623
- --pf-v5-c-pagination--m-bottom--MarginTop: 0;
15624
- --pf-v5-c-pagination--m-bottom--Bottom: auto;
15625
- position: relative;
15626
- justify-content: flex-end;
15627
- padding-block-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingTop);
15628
- padding-block-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingBottom);
15629
- padding-inline-start: var(--pf-v5-c-pagination--m-bottom--md--PaddingLeft);
15630
- padding-inline-end: var(--pf-v5-c-pagination--m-bottom--md--PaddingRight);
15631
- }
15632
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-first,
15633
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-control.pf-m-last,
15634
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
15635
- display: block;
15636
- }
15637
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
15638
- display: inline-flex;
15639
- }
15640
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
15641
- position: relative;
15642
- }
15643
- .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav {
15644
- display: inline-flex;
15645
- flex-basis: auto;
15646
- }
15647
- }
15648
- .pf-v5-c-pagination.pf-m-sticky {
15649
- --pf-v5-c-pagination--m-bottom--Bottom: 0;
15650
- position: sticky;
15651
- inset-block-start: var(--pf-v5-c-pagination--m-sticky--Top);
15652
- z-index: var(--pf-v5-c-pagination--m-sticky--ZIndex);
15653
- padding-block-start: var(--pf-v5-c-pagination--m-sticky--PaddingTop);
15654
- padding-block-end: var(--pf-v5-c-pagination--m-sticky--PaddingBottom);
15655
- padding-inline-start: var(--pf-v5-c-pagination--m-sticky--PaddingLeft);
15656
- padding-inline-end: var(--pf-v5-c-pagination--m-sticky--PaddingRight);
15657
- background-color: var(--pf-v5-c-pagination--m-sticky--BackgroundColor);
15658
- box-shadow: var(--pf-v5-c-pagination--m-sticky--BoxShadow);
15760
+ .pf-v5-c-popover:is(.pf-m-bottom,
15761
+ .pf-m-bottom-left,
15762
+ .pf-m-bottom-right) {
15763
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-bottom--Top, 0);
15764
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-bottom--Left, 50%);
15765
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-bottom--TranslateX);
15766
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-bottom--TranslateY);
15767
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-bottom--Rotate);
15659
15768
  }
15660
15769
 
15661
- @media screen and (min-width: 768px) {
15662
- .pf-v5-c-pagination.pf-m-sticky {
15663
- padding-block-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingTop);
15664
- padding-block-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingBottom);
15665
- padding-inline-start: var(--pf-v5-c-pagination--m-sticky--md--PaddingLeft);
15666
- padding-inline-end: var(--pf-v5-c-pagination--m-sticky--md--PaddingRight);
15667
- }
15770
+ .pf-v5-c-popover:is(.pf-m-left,
15771
+ .pf-m-left-top,
15772
+ .pf-m-left-bottom) {
15773
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-left--Top, 50%);
15774
+ --pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover--m-left--Right, 0);
15775
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
15776
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-left--TranslateY);
15777
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-left--Rotate);
15668
15778
  }
15669
- .pf-v5-c-pagination.pf-m-compact {
15670
- --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-compact--child--MarginRight);
15779
+
15780
+ .pf-v5-c-popover:is(.pf-m-right,
15781
+ .pf-m-right-top,
15782
+ .pf-m-right-bottom) {
15783
+ --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover--m-right--Top, 50%);
15784
+ --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover--m-right--Left, 0);
15785
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-right--TranslateX);
15786
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-right--TranslateY);
15787
+ --pf-v5-c-popover__arrow--Rotate: var(--pf-v5-c-popover__arrow--m-right--Rotate);
15671
15788
  }
15672
15789
 
15673
- .pf-v5-c-pagination.pf-m-page-insets {
15674
- --pf-v5-c-pagination--inset: var(--pf-v5-c-pagination--m-page-insets--inset);
15790
+ .pf-v5-c-popover:is(.pf-m-left-top,
15791
+ .pf-m-right-top) {
15792
+ --pf-v5-c-popover__arrow--Top: 0;
15793
+ --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
15675
15794
  }
15676
15795
 
15677
- .pf-v5-c-pagination__nav {
15678
- display: var(--pf-v5-c-pagination__nav--Display);
15679
- justify-content: flex-end;
15796
+ .pf-v5-c-popover:is(.pf-m-left-bottom,
15797
+ .pf-m-right-bottom) {
15798
+ --pf-v5-c-popover__arrow--Top: auto;
15799
+ --pf-v5-c-popover__arrow--Bottom: 0;
15680
15800
  }
15681
15801
 
15682
- :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-pagination__nav-control {
15683
- scale: -1 1;
15802
+ .pf-v5-c-popover:is(.pf-m-top-left,
15803
+ .pf-m-bottom-left) {
15804
+ --pf-v5-c-popover__arrow--Left: 0;
15805
+ --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
15684
15806
  }
15685
15807
 
15686
- .pf-v5-c-pagination__nav-control .pf-v5-c-button {
15687
- padding-inline-start: var(--pf-v5-c-pagination__nav-control--c-button--PaddingLeft);
15688
- padding-inline-end: var(--pf-v5-c-pagination__nav-control--c-button--PaddingRight);
15689
- font-size: var(--pf-v5-c-pagination__nav-control--c-button--FontSize);
15808
+ .pf-v5-c-popover:is(.pf-m-top-right,
15809
+ .pf-m-bottom-right) {
15810
+ --pf-v5-c-popover__arrow--Right: 0;
15811
+ --pf-v5-c-popover__arrow--Left: auto;
15690
15812
  }
15691
15813
 
15692
- .pf-v5-c-pagination.pf-m-compact .pf-v5-c-pagination__nav-control + .pf-v5-c-pagination__nav-control {
15693
- margin-inline-start: var(--pf-v5-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
15814
+ .pf-v5-c-popover.pf-m-danger {
15815
+ --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
15816
+ --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-danger__title-text--Color);
15694
15817
  }
15695
15818
 
15696
- .pf-v5-c-pagination__nav-page-select {
15697
- display: flex;
15698
- align-items: center;
15699
- padding-inline-start: var(--pf-v5-c-pagination__nav-page-select--PaddingLeft);
15700
- padding-inline-end: var(--pf-v5-c-pagination__nav-page-select--PaddingRight);
15819
+ .pf-v5-c-popover.pf-m-warning {
15820
+ --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-warning__title-icon--Color);
15821
+ --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-warning__title-text--Color);
15701
15822
  }
15702
15823
 
15703
- .pf-v5-c-pagination__nav-page-select > * {
15704
- font-size: var(--pf-v5-c-pagination__nav-page-select--FontSize);
15705
- white-space: nowrap;
15824
+ .pf-v5-c-popover.pf-m-success {
15825
+ --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-success__title-icon--Color);
15826
+ --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-success__title-text--Color);
15706
15827
  }
15707
15828
 
15708
- .pf-v5-c-pagination__nav-page-select > *:not(:last-child) {
15709
- margin-inline-end: var(--pf-v5-c-pagination__nav-page-select--child--MarginRight);
15829
+ .pf-v5-c-popover.pf-m-custom {
15830
+ --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-custom__title-icon--Color);
15831
+ --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-custom__title-text--Color);
15710
15832
  }
15711
15833
 
15712
- .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
15713
- width: var(--pf-v5-c-pagination__nav-page-select--c-form-control--Width);
15834
+ .pf-v5-c-popover.pf-m-info {
15835
+ --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-info__title-icon--Color);
15836
+ --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-info__title-text--Color);
15714
15837
  }
15715
15838
 
15716
- .pf-v5-c-pagination__total-items {
15717
- display: var(--pf-v5-c-pagination__total-items--Display);
15839
+ .pf-v5-c-popover__content {
15840
+ position: relative;
15841
+ padding-block-start: var(--pf-v5-c-popover__content--PaddingTop);
15842
+ padding-block-end: var(--pf-v5-c-popover__content--PaddingBottom);
15843
+ padding-inline-start: var(--pf-v5-c-popover__content--PaddingLeft);
15844
+ padding-inline-end: var(--pf-v5-c-popover__content--PaddingRight);
15845
+ background-color: var(--pf-v5-c-popover__content--BackgroundColor);
15718
15846
  }
15719
15847
 
15720
- .pf-v5-c-pagination.pf-m-display-summary {
15721
- --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
15722
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
15723
- --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
15848
+ .pf-v5-c-popover__close {
15849
+ position: absolute;
15850
+ inset-block-start: var(--pf-v5-c-popover__close--Top);
15851
+ inset-inline-end: var(--pf-v5-c-popover__close--Right);
15724
15852
  }
15725
15853
 
15726
- .pf-v5-c-pagination.pf-m-display-full {
15727
- --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
15728
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
15729
- --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
15854
+ .pf-v5-c-popover__close + * {
15855
+ padding-inline-end: var(--pf-v5-c-popover__close--sibling--PaddingRight);
15730
15856
  }
15731
15857
 
15732
- .pf-v5-c-pagination.pf-m-inset-none {
15733
- --pf-v5-c-pagination--inset: 0;
15858
+ .pf-v5-c-popover__arrow {
15859
+ position: absolute;
15860
+ top: var(--pf-v5-c-popover__arrow--Top, auto);
15861
+ right: var(--pf-v5-c-popover__arrow--Right, auto);
15862
+ bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
15863
+ left: var(--pf-v5-c-popover__arrow--Left, auto);
15864
+ width: var(--pf-v5-c-popover__arrow--Width);
15865
+ height: var(--pf-v5-c-popover__arrow--Height);
15866
+ pointer-events: none;
15867
+ background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
15868
+ box-shadow: var(--pf-v5-c-popover__arrow--BoxShadow);
15869
+ transform: translateX(var(--pf-v5-c-popover__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-popover__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-popover__arrow--Rotate, 0));
15734
15870
  }
15735
15871
 
15736
- .pf-v5-c-pagination.pf-m-inset-sm {
15737
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
15872
+ .pf-v5-c-popover__header {
15873
+ margin-block-end: var(--pf-v5-c-popover__header--MarginBottom);
15738
15874
  }
15739
15875
 
15740
- .pf-v5-c-pagination.pf-m-inset-md {
15741
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--md);
15876
+ .pf-v5-c-popover__title {
15877
+ display: flex;
15878
+ flex: 0 0 auto;
15742
15879
  }
15743
15880
 
15744
- .pf-v5-c-pagination.pf-m-inset-lg {
15745
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--lg);
15881
+ .pf-v5-c-popover__title-icon {
15882
+ margin-inline-end: var(--pf-v5-c-popover__title-icon--MarginRight);
15883
+ font-size: var(--pf-v5-c-popover__title-icon--FontSize);
15884
+ color: var(--pf-v5-c-popover__title-icon--Color);
15746
15885
  }
15747
15886
 
15748
- .pf-v5-c-pagination.pf-m-inset-xl {
15749
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--xl);
15887
+ .pf-v5-c-popover__title-text {
15888
+ font-family: var(--pf-v5-c-popover__title-text--FontFamily);
15889
+ font-size: var(--pf-v5-c-popover__title-text--FontSize);
15890
+ line-height: var(--pf-v5-c-popover__title-text--LineHeight);
15891
+ color: var(--pf-v5-c-popover__title-text--Color, inherit);
15750
15892
  }
15751
15893
 
15752
- .pf-v5-c-pagination.pf-m-inset-2xl {
15753
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
15894
+ .pf-v5-c-popover__body {
15895
+ word-wrap: break-word;
15754
15896
  }
15755
15897
 
15756
- @media (min-width: 576px) {
15757
- .pf-v5-c-pagination.pf-m-display-summary-on-sm {
15758
- --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
15759
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
15760
- --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
15761
- }
15762
- .pf-v5-c-pagination.pf-m-display-full-on-sm {
15763
- --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
15764
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
15765
- --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
15766
- }
15767
- .pf-v5-c-pagination.pf-m-inset-none-on-sm {
15768
- --pf-v5-c-pagination--inset: 0;
15769
- }
15770
- .pf-v5-c-pagination.pf-m-inset-sm-on-sm {
15771
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
15772
- }
15773
- .pf-v5-c-pagination.pf-m-inset-md-on-sm {
15774
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--md);
15775
- }
15776
- .pf-v5-c-pagination.pf-m-inset-lg-on-sm {
15777
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--lg);
15778
- }
15779
- .pf-v5-c-pagination.pf-m-inset-xl-on-sm {
15780
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--xl);
15781
- }
15782
- .pf-v5-c-pagination.pf-m-inset-2xl-on-sm {
15783
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
15784
- }
15785
- }
15786
- @media (min-width: 768px) {
15787
- .pf-v5-c-pagination.pf-m-display-summary-on-md {
15788
- --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
15789
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
15790
- --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
15791
- }
15792
- .pf-v5-c-pagination.pf-m-display-full-on-md {
15793
- --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
15794
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
15795
- --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
15796
- }
15797
- .pf-v5-c-pagination.pf-m-inset-none-on-md {
15798
- --pf-v5-c-pagination--inset: 0;
15799
- }
15800
- .pf-v5-c-pagination.pf-m-inset-sm-on-md {
15801
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
15802
- }
15803
- .pf-v5-c-pagination.pf-m-inset-md-on-md {
15804
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--md);
15805
- }
15806
- .pf-v5-c-pagination.pf-m-inset-lg-on-md {
15807
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--lg);
15808
- }
15809
- .pf-v5-c-pagination.pf-m-inset-xl-on-md {
15810
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--xl);
15811
- }
15812
- .pf-v5-c-pagination.pf-m-inset-2xl-on-md {
15813
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
15814
- }
15815
- }
15816
- @media (min-width: 992px) {
15817
- .pf-v5-c-pagination.pf-m-display-summary-on-lg {
15818
- --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
15819
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
15820
- --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
15821
- }
15822
- .pf-v5-c-pagination.pf-m-display-full-on-lg {
15823
- --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
15824
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
15825
- --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
15826
- }
15827
- .pf-v5-c-pagination.pf-m-inset-none-on-lg {
15828
- --pf-v5-c-pagination--inset: 0;
15829
- }
15830
- .pf-v5-c-pagination.pf-m-inset-sm-on-lg {
15831
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
15832
- }
15833
- .pf-v5-c-pagination.pf-m-inset-md-on-lg {
15834
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--md);
15835
- }
15836
- .pf-v5-c-pagination.pf-m-inset-lg-on-lg {
15837
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--lg);
15838
- }
15839
- .pf-v5-c-pagination.pf-m-inset-xl-on-lg {
15840
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--xl);
15841
- }
15842
- .pf-v5-c-pagination.pf-m-inset-2xl-on-lg {
15843
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
15844
- }
15845
- }
15846
- @media (min-width: 1200px) {
15847
- .pf-v5-c-pagination.pf-m-display-summary-on-xl {
15848
- --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
15849
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
15850
- --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
15851
- }
15852
- .pf-v5-c-pagination.pf-m-display-full-on-xl {
15853
- --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
15854
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
15855
- --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
15856
- }
15857
- .pf-v5-c-pagination.pf-m-inset-none-on-xl {
15858
- --pf-v5-c-pagination--inset: 0;
15859
- }
15860
- .pf-v5-c-pagination.pf-m-inset-sm-on-xl {
15861
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
15862
- }
15863
- .pf-v5-c-pagination.pf-m-inset-md-on-xl {
15864
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--md);
15865
- }
15866
- .pf-v5-c-pagination.pf-m-inset-lg-on-xl {
15867
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--lg);
15868
- }
15869
- .pf-v5-c-pagination.pf-m-inset-xl-on-xl {
15870
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--xl);
15871
- }
15872
- .pf-v5-c-pagination.pf-m-inset-2xl-on-xl {
15873
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
15874
- }
15875
- }
15876
- @media (min-width: 1450px) {
15877
- .pf-v5-c-pagination.pf-m-display-summary-on-2xl {
15878
- --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
15879
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
15880
- --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
15881
- }
15882
- .pf-v5-c-pagination.pf-m-display-full-on-2xl {
15883
- --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
15884
- --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
15885
- --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
15886
- }
15887
- .pf-v5-c-pagination.pf-m-inset-none-on-2xl {
15888
- --pf-v5-c-pagination--inset: 0;
15889
- }
15890
- .pf-v5-c-pagination.pf-m-inset-sm-on-2xl {
15891
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--sm);
15892
- }
15893
- .pf-v5-c-pagination.pf-m-inset-md-on-2xl {
15894
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--md);
15895
- }
15896
- .pf-v5-c-pagination.pf-m-inset-lg-on-2xl {
15897
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--lg);
15898
- }
15899
- .pf-v5-c-pagination.pf-m-inset-xl-on-2xl {
15900
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--xl);
15901
- }
15902
- .pf-v5-c-pagination.pf-m-inset-2xl-on-2xl {
15903
- --pf-v5-c-pagination--inset: var(--pf-v5-global--spacer--2xl);
15904
- }
15898
+ .pf-v5-c-popover__footer {
15899
+ margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
15905
15900
  }
15906
- :where(.pf-v5-theme-dark) .pf-v5-c-pagination {
15907
- --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
15901
+
15902
+ :where(.pf-v5-theme-dark) .pf-v5-c-popover {
15903
+ --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
15904
+ --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
15905
+ --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
15906
+ --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
15907
+ --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
15908
15908
  }
15909
15909
 
15910
15910
  .pf-v5-c-progress {
@@ -17795,48 +17795,6 @@ svg.pf-v5-c-spinner.pf-m-xl {
17795
17795
  --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
17796
17796
  }
17797
17797
 
17798
- .pf-v5-c-tab-content {
17799
- --pf-v5-c-tab-content__body--PaddingTop: 0;
17800
- --pf-v5-c-tab-content__body--PaddingRight: 0;
17801
- --pf-v5-c-tab-content__body--PaddingBottom: 0;
17802
- --pf-v5-c-tab-content__body--PaddingLeft: 0;
17803
- --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
17804
- --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
17805
- --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
17806
- --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
17807
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
17808
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
17809
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
17810
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
17811
- --pf-v5-c-tab-content--m-light-300: var(--pf-v5-global--BackgroundColor--light-300);
17812
- }
17813
-
17814
- @media screen and (min-width: 1200px) {
17815
- .pf-v5-c-tab-content {
17816
- --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingTop);
17817
- --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingRight);
17818
- --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom);
17819
- --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft);
17820
- }
17821
- }
17822
- .pf-v5-c-tab-content.pf-m-light-300 {
17823
- background-color: var(--pf-v5-c-tab-content--m-light-300);
17824
- }
17825
-
17826
- .pf-v5-c-tab-content__body {
17827
- padding-block-start: var(--pf-v5-c-tab-content__body--PaddingTop);
17828
- padding-block-end: var(--pf-v5-c-tab-content__body--PaddingBottom);
17829
- padding-inline-start: var(--pf-v5-c-tab-content__body--PaddingLeft);
17830
- padding-inline-end: var(--pf-v5-c-tab-content__body--PaddingRight);
17831
- }
17832
-
17833
- .pf-v5-c-tab-content__body.pf-m-padding {
17834
- --pf-v5-c-tab-content__body--PaddingTop: var(--pf-v5-c-tab-content__body--m-padding--PaddingTop);
17835
- --pf-v5-c-tab-content__body--PaddingRight: var(--pf-v5-c-tab-content__body--m-padding--PaddingRight);
17836
- --pf-v5-c-tab-content__body--PaddingBottom: var(--pf-v5-c-tab-content__body--m-padding--PaddingBottom);
17837
- --pf-v5-c-tab-content__body--PaddingLeft: var(--pf-v5-c-tab-content__body--m-padding--PaddingLeft);
17838
- }
17839
-
17840
17798
  .pf-v5-c-tabs {
17841
17799
  --pf-v5-c-tabs--inset: 0;
17842
17800
  --pf-v5-c-tabs--Width: auto;
@@ -18781,6 +18739,48 @@ svg.pf-v5-c-spinner.pf-m-xl {
18781
18739
  --pf-v5-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
18782
18740
  }
18783
18741
 
18742
+ .pf-v5-c-tab-content {
18743
+ --pf-v5-c-tab-content__body--PaddingTop: 0;
18744
+ --pf-v5-c-tab-content__body--PaddingRight: 0;
18745
+ --pf-v5-c-tab-content__body--PaddingBottom: 0;
18746
+ --pf-v5-c-tab-content__body--PaddingLeft: 0;
18747
+ --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
18748
+ --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
18749
+ --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
18750
+ --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
18751
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
18752
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
18753
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
18754
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
18755
+ --pf-v5-c-tab-content--m-light-300: var(--pf-v5-global--BackgroundColor--light-300);
18756
+ }
18757
+
18758
+ @media screen and (min-width: 1200px) {
18759
+ .pf-v5-c-tab-content {
18760
+ --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingTop);
18761
+ --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingRight);
18762
+ --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom);
18763
+ --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft);
18764
+ }
18765
+ }
18766
+ .pf-v5-c-tab-content.pf-m-light-300 {
18767
+ background-color: var(--pf-v5-c-tab-content--m-light-300);
18768
+ }
18769
+
18770
+ .pf-v5-c-tab-content__body {
18771
+ padding-block-start: var(--pf-v5-c-tab-content__body--PaddingTop);
18772
+ padding-block-end: var(--pf-v5-c-tab-content__body--PaddingBottom);
18773
+ padding-inline-start: var(--pf-v5-c-tab-content__body--PaddingLeft);
18774
+ padding-inline-end: var(--pf-v5-c-tab-content__body--PaddingRight);
18775
+ }
18776
+
18777
+ .pf-v5-c-tab-content__body.pf-m-padding {
18778
+ --pf-v5-c-tab-content__body--PaddingTop: var(--pf-v5-c-tab-content__body--m-padding--PaddingTop);
18779
+ --pf-v5-c-tab-content__body--PaddingRight: var(--pf-v5-c-tab-content__body--m-padding--PaddingRight);
18780
+ --pf-v5-c-tab-content__body--PaddingBottom: var(--pf-v5-c-tab-content__body--m-padding--PaddingBottom);
18781
+ --pf-v5-c-tab-content__body--PaddingLeft: var(--pf-v5-c-tab-content__body--m-padding--PaddingLeft);
18782
+ }
18783
+
18784
18784
  .pf-v5-c-content {
18785
18785
  --pf-v5-c-content--MarginBottom: var(--pf-v5-global--spacer--md);
18786
18786
  --pf-v5-c-content--LineHeight: var(--pf-v5-global--LineHeight--md);