@patternfly/react-templates 6.5.0-prerelease.37 → 6.5.0-prerelease.38

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-Xxt4GgPH.css → output-eb68M_5Z.css} +2117 -2117
  6. package/package.json +4 -4
package/dist/umd/assets/{output-Xxt4GgPH.css → output-eb68M_5Z.css} RENAMED
@@ -570,2471 +570,2355 @@
570
570
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
571
571
  }
572
572
 
573
- .pf-v6-c-check {
574
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
575
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
576
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
577
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
578
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
579
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
580
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
581
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
582
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
583
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
584
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
585
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
586
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
587
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
573
+ .pf-v6-c-label {
574
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
575
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
576
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
577
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
578
+ --pf-v6-c-label--MaxWidth: 100%;
579
+ --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
580
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
581
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
582
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
583
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
584
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
585
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
586
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
587
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
588
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
589
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
590
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
591
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
592
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
593
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
594
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
595
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
596
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
597
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
598
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
599
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
600
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
601
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
602
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
603
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
604
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
605
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
606
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
607
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
608
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
609
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
610
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
611
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
612
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
613
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
614
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
615
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
616
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
617
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
618
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
619
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
620
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
621
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
622
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
623
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
624
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
625
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
626
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
627
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
628
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
629
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
630
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
631
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
632
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
633
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
634
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
635
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
636
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
637
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
638
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
639
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
640
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
641
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
642
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
643
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
644
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
645
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
646
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
647
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
648
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
649
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
650
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
651
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
652
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
653
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
654
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
655
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
656
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
657
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
658
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
659
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
660
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
661
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
662
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
663
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
664
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
665
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
666
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
667
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
668
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
669
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
670
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
671
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
672
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
673
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
674
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
675
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
676
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
677
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
678
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
679
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
680
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
681
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
682
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
683
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
684
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
685
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
686
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
687
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
688
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
689
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
690
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
691
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
692
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
693
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
694
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
695
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
696
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
697
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
698
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
699
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
700
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
701
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
702
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
703
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
704
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
705
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
706
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
707
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
708
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
709
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
710
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
711
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
712
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
713
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
714
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
715
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
716
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
717
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
718
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
719
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
720
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
721
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
722
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
723
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
724
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
725
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
726
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
727
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
728
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
729
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
730
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
731
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
732
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
733
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
734
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
735
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
736
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
737
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
738
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
739
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
740
+ --pf-v6-c-label__content--MaxWidth: 100%;
741
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
742
+ --pf-v6-c-label__content--Cursor: initial;
743
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
744
+ --pf-v6-c-label__text--MaxWidth: 100%;
745
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
746
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
747
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
748
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
749
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
750
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
751
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
752
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
753
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
754
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
755
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
756
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
757
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
758
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
759
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
760
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
761
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
762
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
763
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
764
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
765
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
766
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
767
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
768
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
588
769
  }
589
770
 
590
- .pf-v6-c-check {
591
- display: grid;
592
- grid-template-columns: auto 1fr;
593
- grid-gap: var(--pf-v6-c-check--GridGap);
594
- accent-color: var(--pf-v6-c-check--AccentColor);
771
+ .pf-v6-c-label {
772
+ position: relative;
773
+ gap: var(--pf-v6-c-label--Gap);
774
+ min-width: var(--pf-v6-c-label--MinWidth);
775
+ max-width: var(--pf-v6-c-label--MaxWidth);
776
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
777
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
778
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
779
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
780
+ font-size: var(--pf-v6-c-label--FontSize);
781
+ white-space: nowrap;
782
+ background: transparent;
783
+ isolation: isolate;
784
+ border: 0;
785
+ border-radius: var(--pf-v6-c-label--BorderRadius);
595
786
  }
596
787
 
597
- .pf-v6-c-check.pf-m-standalone {
598
- display: inline-grid;
599
- grid-template-columns: auto;
600
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
788
+ .pf-v6-c-label.pf-m-blue {
789
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
790
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
791
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
792
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
793
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
794
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
795
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
796
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
601
797
  }
602
798
 
603
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
604
- align-self: center;
605
- transform: none;
799
+ .pf-v6-c-label.pf-m-red {
800
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
801
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
802
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
803
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
804
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
805
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
806
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
807
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
606
808
  }
607
809
 
608
- .pf-v6-c-check__input {
609
- align-self: start;
610
- font-size: var(--pf-v6-c-check__label--FontSize);
611
- line-height: var(--pf-v6-c-check__label--LineHeight);
612
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
810
+ .pf-v6-c-label.pf-m-orange {
811
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
812
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
813
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
814
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
815
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
816
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
817
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
818
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
613
819
  }
614
820
 
615
- .pf-v6-c-check__label {
616
- font-size: var(--pf-v6-c-check__label--FontSize);
617
- font-weight: var(--pf-v6-c-check__label--FontWeight);
618
- line-height: var(--pf-v6-c-check__label--LineHeight);
619
- color: var(--pf-v6-c-check__label--Color);
821
+ .pf-v6-c-label.pf-m-orangered {
822
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
823
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
824
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
825
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
826
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
827
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
828
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
829
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
620
830
  }
621
831
 
622
- .pf-v6-c-check__description {
623
- grid-column: 2;
624
- font-size: var(--pf-v6-c-check__description--FontSize);
625
- color: var(--pf-v6-c-check__description--Color);
832
+ .pf-v6-c-label.pf-m-yellow {
833
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
834
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
835
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
836
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
837
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
838
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
839
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
840
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
626
841
  }
627
842
 
628
- .pf-v6-c-check__body {
629
- grid-column: 2;
843
+ .pf-v6-c-label.pf-m-green {
844
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
845
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
846
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
847
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
848
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
849
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
850
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
851
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
630
852
  }
631
853
 
632
- .pf-v6-c-check__label,
633
- .pf-v6-c-check__input {
634
- justify-self: start;
854
+ .pf-v6-c-label.pf-m-teal {
855
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
856
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
857
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
858
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
859
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
860
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
861
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
862
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
635
863
  }
636
864
 
637
- label.pf-v6-c-check, .pf-v6-c-check__label,
638
- .pf-v6-c-check__input {
639
- cursor: pointer;
865
+ .pf-v6-c-label.pf-m-purple {
866
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
867
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
868
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
869
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
870
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
871
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
872
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
873
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
640
874
  }
641
875
 
642
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
643
- .pf-v6-c-check__input:disabled,
644
- .pf-v6-c-check__input.pf-m-disabled {
645
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
646
- cursor: not-allowed;
876
+ .pf-v6-c-label.pf-m-success {
877
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
878
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
879
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
880
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
881
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
882
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
883
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
884
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
885
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
886
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
647
887
  }
648
888
 
649
- .pf-v6-c-check__label-required {
650
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
651
- font-size: var(--pf-v6-c-check__label-required--FontSize);
652
- color: var(--pf-v6-c-check__label-required--Color);
889
+ .pf-v6-c-label.pf-m-warning {
890
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
891
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
892
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
893
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
894
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
895
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
896
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
897
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
898
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
899
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
653
900
  }
654
901
 
655
- .pf-v6-c-button {
656
- --pf-v6-c-button--Display: inline-flex;
657
- --pf-v6-c-button--AlignItems: baseline;
658
- --pf-v6-c-button--JustifyContent: center;
659
- --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
660
- --pf-v6-c-button--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
661
- --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
662
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
663
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
664
- --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
665
- --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
666
- --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
667
- --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
668
- --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
669
- --pf-v6-c-button--BackgroundColor: transparent;
670
- --pf-v6-c-button--BorderColor: transparent;
671
- --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
672
- --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
673
- --pf-v6-c-button--TextDecorationLine: none;
674
- --pf-v6-c-button--TextDecorationStyle: none;
675
- --pf-v6-c-button--TextDecorationColor: currentcolor;
676
- --pf-v6-c-button--TransitionDelay: 0s;
677
- --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
678
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
679
- --pf-v6-c-button--TransitionProperty: color, background, border-color;
680
- --pf-v6-c-button--ScaleX: 1;
681
- --pf-v6-c-button--ScaleY: 1;
682
- --pf-v6-c-button--border--offset: 0;
683
- --pf-v6-c-button--hover--BackgroundColor: transparent;
684
- --pf-v6-c-button--hover--BorderColor: transparent;
685
- --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
686
- --pf-v6-c-button--hover--TextDecorationLine: none;
687
- --pf-v6-c-button--hover--TextDecorationStyle: none;
688
- --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
689
- --pf-v6-c-button--hover--ScaleX: 1;
690
- --pf-v6-c-button--hover--ScaleY: 1;
691
- --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
692
- --pf-v6-c-button--m-clicked--BorderColor: transparent;
693
- --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
694
- --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
695
- --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
696
- --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
697
- --pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
698
- --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
699
- --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
700
- --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
701
- --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
702
- --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
703
- --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
704
- --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
705
- --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
706
- --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
707
- --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
708
- --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
709
- --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
710
- --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
711
- --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
712
- --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
713
- --pf-v6-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
714
- --pf-v6-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
715
- --pf-v6-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
716
- --pf-v6-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
717
- --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
718
- --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
719
- --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
720
- --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
721
- --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
722
- --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
723
- --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
724
- --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
725
- --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
726
- --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
727
- --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
728
- --pf-v6-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
729
- --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
730
- --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
731
- --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
732
- --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
733
- --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
734
- --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
735
- --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
736
- --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
737
- --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
738
- --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
739
- --pf-v6-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
740
- --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
741
- --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
742
- --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
743
- --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
744
- --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
745
- --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
746
- --pf-v6-c-button--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
747
- --pf-v6-c-button--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
748
- --pf-v6-c-button--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
749
- --pf-v6-c-button--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast);
750
- --pf-v6-c-button--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
751
- --pf-v6-c-button--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
752
- --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
753
- --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
754
- --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
755
- --pf-v6-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
756
- --pf-v6-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
757
- --pf-v6-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
758
- --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
759
- --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
760
- --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
761
- --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
762
- --pf-v6-c-button--m-link--m-inline--JustifyContent: flex-start;
763
- --pf-v6-c-button--m-link--m-inline--FontSize: initial;
764
- --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
765
- --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
766
- --pf-v6-c-button--m-link--m-inline--PaddingBlockStart: 0;
767
- --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
768
- --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
769
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
770
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
771
- --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
772
- --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
773
- --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
774
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
775
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
776
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
777
- --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
778
- --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
779
- --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
780
- --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
781
- --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
782
- --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
783
- --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
784
- --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
785
- --pf-v6-c-button--span--m-link--m-inline--Display: inline;
786
- --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
787
- --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
788
- --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
789
- --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
790
- --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
791
- --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
792
- --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
793
- --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
794
- --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
795
- --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
796
- --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
797
- --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
798
- --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
799
- --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
800
- --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
801
- --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
802
- --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
803
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
804
- --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
805
- --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
806
- --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
807
- --pf-v6-c-button--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
808
- --pf-v6-c-button--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
809
- --pf-v6-c-button--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
810
- --pf-v6-c-button--m-plain--BorderColor: transparent;
811
- --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
812
- --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
813
- --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
814
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: 0;
815
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
816
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: 0;
817
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: 0;
818
- --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart: 0;
819
- --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd: 0;
820
- --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-t--global--icon--color--subtle);
821
- --pf-v6-c-button--m-plain--m-no-padding--BackgroundColor: transparent;
822
- --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
823
- --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
824
- --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
825
- --pf-v6-c-button--m-plain--m-no-padding--border--offset: calc(0.125rem * -1);
826
- --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
827
- --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
828
- --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
829
- --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
830
- --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
831
- --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--control--default);
832
- --pf-v6-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
833
- --pf-v6-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
834
- --pf-v6-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
835
- --pf-v6-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
836
- --pf-v6-c-button--m-control--hover--BorderColor: var(--pf-t--global--border--color--hover);
837
- --pf-v6-c-button--m-control--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
838
- --pf-v6-c-button--m-control--hover__icon--Color: var(--pf-t--global--icon--color--regular);
839
- --pf-v6-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
840
- --pf-v6-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
841
- --pf-v6-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
842
- --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
843
- --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
844
- --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
845
- --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
846
- --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
847
- --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
848
- --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
849
- --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
850
- --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
851
- --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
852
- --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
853
- --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
854
- --pf-v6-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
855
- --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
856
- --pf-v6-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
857
- --pf-v6-c-button--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
858
- --pf-v6-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default);
859
- --pf-v6-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
860
- --pf-v6-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
861
- --pf-v6-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--hover);
862
- --pf-v6-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
863
- --pf-v6-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
864
- --pf-v6-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--clicked);
865
- --pf-v6-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
866
- --pf-v6-c-button--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
867
- --pf-v6-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
868
- --pf-v6-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default);
869
- --pf-v6-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover);
870
- --pf-v6-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover);
871
- --pf-v6-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover);
872
- --pf-v6-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked);
873
- --pf-v6-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked);
874
- --pf-v6-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked);
875
- --pf-v6-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
876
- --pf-v6-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
877
- --pf-v6-c-button--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
878
- --pf-v6-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
879
- --pf-v6-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
880
- --pf-v6-c-button--m-warning--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
881
- --pf-v6-c-button--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked);
882
- --pf-v6-c-button--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked);
883
- --pf-v6-c-button--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked);
884
- --pf-v6-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
885
- --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
886
- --pf-v6-c-button--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
887
- --pf-v6-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
888
- --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
889
- --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
890
- --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
891
- --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
892
- --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
893
- --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious);
894
- --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
895
- --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
896
- --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
897
- --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
898
- --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
899
- --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
900
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
901
- --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
902
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
903
- --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
904
- --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
905
- --pf-v6-c-button--disabled--TextDecorationColor: currentcolor;
906
- --pf-v6-c-button--disabled--BorderColor: transparent;
907
- --pf-v6-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
908
- --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
909
- --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
910
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
911
- --pf-v6-c-button__icon--MarginInlineStart: 0;
912
- --pf-v6-c-button__icon--MarginInlineEnd: 0;
913
- --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
914
- --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
915
- --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
916
- --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
917
- --pf-v6-c-button__icon--TransitionDelay: 0s;
918
- --pf-v6-c-button__icon--TransitionTimingFunction: auto;
919
- --pf-v6-c-button__icon--TransitionDuration: 0s;
920
- --pf-v6-c-button__icon--TransitionProperty: none;
921
- --pf-v6-c-button__icon--Rotate: 0deg;
922
- --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
923
- --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
924
- --pf-v6-c-button--hover__icon--TransitionProperty: none;
925
- --pf-v6-c-button--hover__icon--Rotate: 0deg;
926
- --pf-v6-c-button__icon--ScaleX: 1;
927
- --pf-v6-c-button__icon--ScaleY: 1;
928
- --pf-v6-c-button--hover__icon--ScaleX: 1;
929
- --pf-v6-c-button--hover__icon--ScaleY: 1;
930
- --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
931
- --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
932
- --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
933
- --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
934
- --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
935
- --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
936
- --pf-v6-c-button__icon--favorite--Opacity: 1;
937
- --pf-v6-c-button__icon--favorited--Opacity: 0;
938
- --pf-v6-c-button--m-favorited__icon--favorite--Opacity: 0;
939
- --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
940
- --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
941
- --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
942
- --pf-v6-c-button__progress--Opacity: 0;
943
- --pf-v6-c-button__progress--TranslateY: -50%;
944
- --pf-v6-c-button__progress--TranslateX: 0;
945
- --pf-v6-c-button__progress--InsetBlockStart: 50%;
946
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
947
- --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
948
- --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
949
- --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
950
- --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
951
- --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
952
- --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
953
- --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
954
- --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
955
- --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
956
- --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
957
- --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
958
- --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
959
- --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
960
- --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--alt);
961
- --pf-v6-c-button--m-block--Display: flex;
962
- --pf-v6-c-button--m-block--Width: 100%;
963
- --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
964
- --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
965
- --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
966
- --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
967
- --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
968
- --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
969
- --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
970
- --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
971
- --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
972
- --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
973
- --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
974
- --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
975
- --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
976
- --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
977
- --pf-v6-c-button--m-circle--ScaleX: 1.29;
978
- --pf-v6-c-button--m-circle--ScaleY: 1.29;
979
- --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
980
- --pf-v6-c-button--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
981
- --pf-v6-c-button--m-circle--PaddingBlockStart: var(--pf-v6-c-button--m-circle--Padding--base);
982
- --pf-v6-c-button--m-circle--PaddingInlineEnd: 0;
983
- --pf-v6-c-button--m-circle--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--Padding--base);
984
- --pf-v6-c-button--m-circle--PaddingInlineStart: 0;
985
- }
986
-
987
- .pf-v6-c-button {
988
- position: relative;
989
- display: var(--pf-v6-c-button--Display);
990
- gap: var(--pf-v6-c-button--Gap);
991
- align-items: var(--pf-v6-c-button--AlignItems);
992
- justify-content: var(--pf-v6-c-button--JustifyContent);
993
- min-width: var(--pf-v6-c-button--MinWidth);
994
- padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
995
- padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
996
- padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
997
- padding-inline-end: var(--pf-v6-c-button--PaddingInlineEnd);
998
- font-size: var(--pf-v6-c-button--FontSize, inherit);
999
- font-weight: var(--pf-v6-c-button--FontWeight, inherit);
1000
- line-height: var(--pf-v6-c-button--LineHeight, inherit);
1001
- color: var(--pf-v6-c-button--Color);
1002
- text-align: center;
1003
- text-decoration-line: var(--pf-v6-c-button--TextDecorationLine);
1004
- text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle);
1005
- text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
1006
- white-space: nowrap;
1007
- cursor: pointer;
1008
- -webkit-user-select: none;
1009
- user-select: none;
1010
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
1011
- border: 0;
1012
- border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
1013
- border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
1014
- border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
1015
- border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
1016
- transition-delay: var(--pf-v6-c-button--TransitionDelay);
1017
- transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
1018
- transition-duration: var(--pf-v6-c-button--TransitionDuration);
1019
- transition-property: var(--pf-v6-c-button--TransitionProperty);
1020
- scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY);
1021
- }
1022
-
1023
- .pf-v6-c-button::after {
1024
- position: absolute;
1025
- inset: var(--pf-v6-c-button--border--offset);
1026
- pointer-events: none;
1027
- content: "";
1028
- border: var(--pf-v6-c-button--BorderWidth) solid;
1029
- border-color: var(--pf-v6-c-button--BorderColor);
1030
- border-radius: inherit;
1031
- transition: inherit;
1032
- }
1033
-
1034
- .pf-v6-c-button.pf-m-primary {
1035
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
1036
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-primary--BackgroundColor);
1037
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-primary__icon--Color);
1038
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-primary--hover--Color);
1039
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-primary--hover--BackgroundColor);
1040
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-primary--hover__icon--Color);
1041
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-primary--m-clicked--Color);
1042
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-primary--m-clicked--BackgroundColor);
1043
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
1044
- }
1045
-
1046
- .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
1047
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
1048
- }
1049
-
1050
- .pf-v6-c-button.pf-m-secondary {
1051
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
1052
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-secondary--BorderColor);
1053
- --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-secondary--TransitionDuration);
1054
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-secondary__icon--Color);
1055
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-secondary--hover--Color);
1056
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-secondary--hover--BorderColor);
1057
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-secondary--hover__icon--Color);
1058
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-clicked--Color);
1059
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-clicked--BorderColor);
1060
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-clicked__icon--Color);
1061
- --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-secondary--m-danger--Color);
1062
- --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger__icon--Color);
1063
- --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover--Color);
1064
- --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover__icon--Color);
1065
- --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--Color);
1066
- --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color);
902
+ .pf-v6-c-label.pf-m-danger {
903
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
904
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
905
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
906
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
907
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
908
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
909
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
910
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
911
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
912
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
1067
913
  }
1068
914
 
1069
- .pf-v6-c-button.pf-m-secondary.pf-m-danger {
1070
- --pf-v6-c-button--m-secondary--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--BorderColor);
1071
- --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--hover--BorderColor);
1072
- --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor);
1073
- --pf-v6-c-button--m-danger--BackgroundColor: transparent;
1074
- --pf-v6-c-button--m-danger--hover--BackgroundColor: transparent;
1075
- --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: transparent;
915
+ .pf-v6-c-label.pf-m-info {
916
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
917
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
918
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
919
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
920
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
921
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
922
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
923
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
924
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
925
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
1076
926
  }
1077
927
 
1078
- .pf-v6-c-button.pf-m-tertiary {
1079
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-tertiary--Color);
1080
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-tertiary--BorderColor);
1081
- --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-tertiary--TransitionDuration);
1082
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-tertiary__icon--Color);
1083
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-tertiary--hover--Color);
1084
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-tertiary--hover--BorderColor);
1085
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-tertiary--hover__icon--Color);
1086
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-tertiary--m-clicked--Color);
1087
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-tertiary--m-clicked--BorderColor);
1088
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-tertiary--m-clicked__icon--Color);
928
+ .pf-v6-c-label.pf-m-custom {
929
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
930
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
931
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
932
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
933
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
934
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
935
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
936
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
937
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
938
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1089
939
  }
1090
940
 
1091
- .pf-v6-c-button.pf-m-link {
1092
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--PaddingInlineEnd);
1093
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--PaddingInlineStart);
1094
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-link--Color);
1095
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-link--BorderWidth);
1096
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-link--hover--BorderColor);
1097
- --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-link--hover--BorderWidth);
1098
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-link--m-clicked--BorderColor);
1099
- --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-link--m-clicked--BorderWidth);
1100
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-link--BorderColor);
1101
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius);
1102
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor);
1103
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-link__icon--Color);
1104
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-link--hover--Color);
1105
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-link--hover--BackgroundColor);
1106
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-link--hover__icon--Color);
1107
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-link--m-clicked--Color);
1108
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-clicked--BackgroundColor);
1109
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
1110
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
1111
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
941
+ .pf-v6-c-label.pf-m-compact {
942
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
943
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
944
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
945
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
946
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
947
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
948
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1112
949
  }
1113
950
 
1114
- span.pf-v6-c-button.pf-m-link.pf-m-inline {
1115
- --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
1116
- --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
1117
- --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
951
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
952
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1118
953
  }
1119
954
 
1120
- .pf-v6-c-button.pf-m-link.pf-m-inline {
1121
- --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
1122
- --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
1123
- --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
1124
- --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
1125
- --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
1126
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockStart);
1127
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
1128
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
1129
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
1130
- --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
1131
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
1132
- --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
1133
- --pf-v6-c-button--BackgroundColor: transparent;
1134
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
1135
- --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
1136
- --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
1137
- --pf-v6-c-button--hover--BackgroundColor: transparent;
1138
- --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
1139
- --pf-v6-c-button--disabled--BackgroundColor: transparent;
1140
- --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
1141
- --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
1142
- --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
1143
- --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
1144
- --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
1145
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
1146
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
1147
- --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
1148
- --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
1149
- --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
1150
- --pf-v6-c-button--BorderWidth: 0;
1151
- --pf-v6-c-button--hover--BorderWidth: 0;
1152
- --pf-v6-c-button--m-clicked--BorderWidth: 0;
1153
- text-align: start;
1154
- text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
1155
- white-space: normal;
1156
- background: transparent;
1157
- outline-offset: 0.125rem;
955
+ .pf-v6-c-label.pf-m-outline {
956
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
957
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
958
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
959
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
960
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
961
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
962
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
963
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
964
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
965
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1158
966
  }
1159
967
 
1160
- .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
1161
- --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
968
+ .pf-v6-c-label.pf-m-editable {
969
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
970
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1162
971
  }
1163
972
 
1164
- .pf-v6-c-button.pf-m-link.pf-m-danger {
1165
- --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
1166
- --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
1167
- --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-link--m-danger__icon--Color);
1168
- --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-link--m-danger--hover--Color);
1169
- --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--hover--BackgroundColor);
1170
- --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-link--m-danger--hover__icon--Color);
1171
- --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked--Color);
1172
- --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor);
1173
- --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color);
973
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
974
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
975
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1174
976
  }
1175
977
 
1176
- .pf-v6-c-button.pf-m-link.pf-m-display-lg {
1177
- --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-display-lg--FontSize);
978
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
979
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
980
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
981
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1178
982
  }
1179
983
 
1180
- .pf-v6-c-button.pf-m-warning {
1181
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-warning--Color);
1182
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-warning--BackgroundColor);
1183
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-warning__icon--Color);
1184
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-warning--hover--Color);
1185
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-warning--hover--BackgroundColor);
1186
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-warning--hover__icon--Color);
1187
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-warning--m-clicked--Color);
1188
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-warning--m-clicked--BackgroundColor);
1189
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-warning--m-clicked__icon--Color);
984
+ .pf-v6-c-label.pf-m-editable-active {
985
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
986
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
987
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
988
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1190
989
  }
1191
990
 
1192
- .pf-v6-c-button.pf-m-danger {
1193
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-danger--Color);
1194
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-danger--BackgroundColor);
1195
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-danger__icon--Color);
1196
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-danger--hover--Color);
1197
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-danger--hover--BackgroundColor);
1198
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-danger--hover__icon--Color);
1199
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-danger--m-clicked--Color);
1200
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-danger--m-clicked--BackgroundColor);
1201
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-danger--m-clicked__icon--Color);
991
+ .pf-v6-c-label.pf-m-overflow {
992
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
993
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
994
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1202
995
  }
1203
996
 
1204
- .pf-v6-c-button.pf-m-control {
1205
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-control--BorderRadius);
1206
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-control--PaddingInlineStart);
1207
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-control--PaddingInlineEnd);
1208
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-control--Color);
1209
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-control--BackgroundColor);
1210
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-control--BorderColor);
1211
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-control--BorderWidth);
1212
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-control__icon--Color);
1213
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-control--hover--Color);
1214
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-control--hover--BackgroundColor);
1215
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-control--hover--BorderColor);
1216
- --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-control--hover--BorderWidth);
1217
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-control--hover__icon--Color);
1218
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-control--m-clicked--Color);
1219
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-control--m-clicked--BackgroundColor);
1220
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-control--m-clicked--BorderColor);
1221
- --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-control--m-clicked--BorderWidth);
1222
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-control--m-clicked__icon--Color);
1223
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
1224
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
997
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
998
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
999
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1000
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1225
1001
  }
1226
1002
 
1227
- .pf-v6-c-button.pf-m-stateful {
1228
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
1229
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
1230
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
1231
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
1232
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
1003
+ .pf-v6-c-label.pf-m-add {
1004
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1005
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1006
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1007
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1233
1008
  }
1234
1009
 
1235
- .pf-v6-c-button.pf-m-read {
1236
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
1237
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
1238
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
1239
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
1240
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
1241
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
1010
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1011
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1012
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1013
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1014
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1242
1015
  }
1243
1016
 
1244
- .pf-v6-c-button.pf-m-unread {
1245
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
1246
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
1247
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
1248
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
1249
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
1250
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
1251
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
1252
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
1253
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
1017
+ .pf-v6-c-label.pf-m-clickable {
1018
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1254
1019
  }
1255
1020
 
1256
- .pf-v6-c-button.pf-m-attention {
1257
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
1258
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
1259
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
1260
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
1261
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
1262
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
1263
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
1264
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
1265
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
1021
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1022
+ text-decoration-line: none;
1266
1023
  }
1267
1024
 
1268
- .pf-v6-c-button.pf-m-plain {
1269
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
1270
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
1271
- --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-plain--hover--BorderWidth);
1272
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-plain--m-clicked--BorderColor);
1273
- --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-plain--m-clicked--BorderWidth);
1274
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-plain--BorderColor);
1275
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius);
1276
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
1277
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
1278
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
1279
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
1280
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
1281
- --pf-v6-c-button__progress--Color: var(--pf-v6-c-button--m-in-progress--m-plain--Color);
1282
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-plain--hover--Color);
1283
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
1284
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color);
1285
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
1286
- --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
1287
- --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
1288
- --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
1289
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
1290
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
1025
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1026
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1027
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1028
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1029
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1030
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1031
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1032
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1291
1033
  }
1292
1034
 
1293
- .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
1294
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
1295
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor);
1296
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor);
1297
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
1298
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
1299
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
1300
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
1301
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
1302
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
1303
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
1304
- --pf-v6-c-button--border--offset: var(--pf-v6-c-button--m-plain--m-no-padding--border--offset);
1305
- min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
1306
- background: var(--pf-v6-c-button--BackgroundColor);
1035
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1036
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1307
1037
  }
1308
1038
 
1309
- .pf-v6-c-button.pf-m-block {
1310
- --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
1311
- width: var(--pf-v6-c-button--m-block--Width);
1039
+ .pf-v6-c-label.pf-m-disabled {
1040
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1041
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1042
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1043
+ --pf-v6-c-label--BorderWidth: 0;
1044
+ pointer-events: none;
1312
1045
  }
1313
1046
 
1314
- .pf-v6-c-button.pf-m-small {
1315
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
1316
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-small--PaddingInlineEnd);
1317
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-small--PaddingBlockEnd);
1318
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-small--PaddingInlineStart);
1047
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1048
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1319
1049
  }
1320
1050
 
1321
- .pf-v6-c-button.pf-m-display-lg {
1322
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-display-lg--PaddingBlockStart);
1323
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-display-lg--PaddingInlineEnd);
1324
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd);
1325
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
1326
- --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
1051
+ .pf-v6-c-label,
1052
+ .pf-v6-c-label__content {
1053
+ display: inline-flex;
1054
+ align-items: center;
1055
+ justify-content: center;
1327
1056
  }
1328
1057
 
1329
- .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
1330
- display: grid;
1331
- transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
1332
- transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
1333
- transition-property: color;
1058
+ .pf-v6-c-label__text {
1059
+ overflow: hidden;
1060
+ text-overflow: ellipsis;
1061
+ white-space: nowrap;
1062
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
1334
1063
  }
1335
1064
 
1336
- .pf-v6-c-button.pf-m-favorited {
1337
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
1338
- --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
1339
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
1340
- --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
1341
- --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
1342
- --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
1065
+ .pf-v6-c-label__content {
1066
+ gap: var(--pf-v6-c-label__content--Gap);
1067
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
1068
+ padding: 0;
1069
+ overflow: hidden;
1070
+ color: var(--pf-v6-c-label--Color);
1071
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
1072
+ background: transparent;
1073
+ border-width: 0;
1343
1074
  }
1344
1075
 
1345
- .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
1346
- animation-name: pf-v6-c-button-icon-favorited;
1347
- animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
1348
- animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
1076
+ .pf-v6-c-label__content::before {
1077
+ position: absolute;
1078
+ inset: 0;
1079
+ z-index: -1;
1080
+ pointer-events: none;
1081
+ content: "";
1082
+ background-color: var(--pf-v6-c-label--BackgroundColor);
1083
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1084
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1085
+ }
1086
+
1087
+ input.pf-v6-c-label__content {
1088
+ overflow: hidden;
1089
+ text-overflow: ellipsis;
1090
+ white-space: nowrap;
1091
+ }
1092
+
1093
+ .pf-v6-c-label__icon {
1094
+ color: var(--pf-v6-c-label__icon--Color);
1095
+ }
1096
+
1097
+ .pf-v6-c-label__actions {
1098
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1349
1099
  }
1350
1100
 
1351
- .pf-v6-c-button.pf-m-settings {
1352
- --pf-v6-c-button__icon--TransitionProperty: rotate;
1353
- --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
1354
- --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
1355
- --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
1356
- --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
1357
- --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
1358
- --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
1101
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1102
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1359
1103
  }
1360
1104
 
1361
- .pf-v6-c-button.pf-m-hamburger {
1362
- --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1105
+ .pf-v6-c-label__actions .pf-v6-c-button {
1106
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1107
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1108
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1109
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1110
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1111
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1112
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1113
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1114
+ }
1115
+
1116
+ .pf-v6-c-button {
1117
+ --pf-v6-c-button--Display: inline-flex;
1118
+ --pf-v6-c-button--AlignItems: baseline;
1119
+ --pf-v6-c-button--JustifyContent: center;
1120
+ --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1121
+ --pf-v6-c-button--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
1122
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1123
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1124
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1125
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1126
+ --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
1127
+ --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
1128
+ --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
1129
+ --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
1130
+ --pf-v6-c-button--BackgroundColor: transparent;
1131
+ --pf-v6-c-button--BorderColor: transparent;
1132
+ --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
1133
+ --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
1134
+ --pf-v6-c-button--TextDecorationLine: none;
1135
+ --pf-v6-c-button--TextDecorationStyle: none;
1136
+ --pf-v6-c-button--TextDecorationColor: currentcolor;
1137
+ --pf-v6-c-button--TransitionDelay: 0s;
1138
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1139
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1140
+ --pf-v6-c-button--TransitionProperty: color, background, border-color;
1141
+ --pf-v6-c-button--ScaleX: 1;
1142
+ --pf-v6-c-button--ScaleY: 1;
1143
+ --pf-v6-c-button--border--offset: 0;
1144
+ --pf-v6-c-button--hover--BackgroundColor: transparent;
1145
+ --pf-v6-c-button--hover--BorderColor: transparent;
1146
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1147
+ --pf-v6-c-button--hover--TextDecorationLine: none;
1148
+ --pf-v6-c-button--hover--TextDecorationStyle: none;
1149
+ --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
1150
+ --pf-v6-c-button--hover--ScaleX: 1;
1151
+ --pf-v6-c-button--hover--ScaleY: 1;
1152
+ --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
1153
+ --pf-v6-c-button--m-clicked--BorderColor: transparent;
1154
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1155
+ --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1156
+ --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1157
+ --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1158
+ --pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
1159
+ --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1160
+ --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
1161
+ --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
1162
+ --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1163
+ --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
1164
+ --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
1165
+ --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
1166
+ --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1167
+ --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
1168
+ --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1169
+ --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
1170
+ --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1171
+ --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1172
+ --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
1173
+ --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1174
+ --pf-v6-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
1175
+ --pf-v6-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1176
+ --pf-v6-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1177
+ --pf-v6-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
1178
+ --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1179
+ --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1180
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
1181
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
1182
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
1183
+ --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
1184
+ --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
1185
+ --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1186
+ --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
1187
+ --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1188
+ --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
1189
+ --pf-v6-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1190
+ --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1191
+ --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
1192
+ --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1193
+ --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
1194
+ --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1195
+ --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1196
+ --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
1197
+ --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1198
+ --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
1199
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
1200
+ --pf-v6-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1201
+ --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
1202
+ --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1203
+ --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1204
+ --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
1205
+ --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1206
+ --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1207
+ --pf-v6-c-button--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1208
+ --pf-v6-c-button--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
1209
+ --pf-v6-c-button--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1210
+ --pf-v6-c-button--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast);
1211
+ --pf-v6-c-button--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
1212
+ --pf-v6-c-button--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1213
+ --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
1214
+ --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1215
+ --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
1216
+ --pf-v6-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
1217
+ --pf-v6-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1218
+ --pf-v6-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
1219
+ --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
1220
+ --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1221
+ --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
1222
+ --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
1223
+ --pf-v6-c-button--m-link--m-inline--JustifyContent: flex-start;
1224
+ --pf-v6-c-button--m-link--m-inline--FontSize: initial;
1225
+ --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
1226
+ --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
1227
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockStart: 0;
1228
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
1229
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
1230
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
1231
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
1232
+ --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
1233
+ --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
1234
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
1235
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1236
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1237
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1238
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1239
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
1240
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
1241
+ --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
1242
+ --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
1243
+ --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
1244
+ --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
1245
+ --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1246
+ --pf-v6-c-button--span--m-link--m-inline--Display: inline;
1247
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
1248
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
1249
+ --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
1250
+ --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
1251
+ --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
1252
+ --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1253
+ --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1254
+ --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1255
+ --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1256
+ --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
1257
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
1258
+ --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1259
+ --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
1260
+ --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1261
+ --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
1262
+ --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1263
+ --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
1264
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1265
+ --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
1266
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1267
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1268
+ --pf-v6-c-button--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1269
+ --pf-v6-c-button--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
1270
+ --pf-v6-c-button--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1271
+ --pf-v6-c-button--m-plain--BorderColor: transparent;
1272
+ --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
1273
+ --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1274
+ --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
1275
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: 0;
1276
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
1277
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: 0;
1278
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: 0;
1279
+ --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart: 0;
1280
+ --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd: 0;
1281
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-t--global--icon--color--subtle);
1282
+ --pf-v6-c-button--m-plain--m-no-padding--BackgroundColor: transparent;
1283
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1284
+ --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
1285
+ --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
1286
+ --pf-v6-c-button--m-plain--m-no-padding--border--offset: calc(0.125rem * -1);
1287
+ --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
1288
+ --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1289
+ --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1290
+ --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
1291
+ --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
1292
+ --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--control--default);
1293
+ --pf-v6-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
1294
+ --pf-v6-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
1295
+ --pf-v6-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
1296
+ --pf-v6-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
1297
+ --pf-v6-c-button--m-control--hover--BorderColor: var(--pf-t--global--border--color--hover);
1298
+ --pf-v6-c-button--m-control--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
1299
+ --pf-v6-c-button--m-control--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1300
+ --pf-v6-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
1301
+ --pf-v6-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
1302
+ --pf-v6-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
1303
+ --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
1304
+ --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
1305
+ --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1306
+ --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1307
+ --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
1308
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1309
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1310
+ --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1311
+ --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1312
+ --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
1313
+ --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
1314
+ --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
1315
+ --pf-v6-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
1316
+ --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
1317
+ --pf-v6-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
1318
+ --pf-v6-c-button--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
1319
+ --pf-v6-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default);
1320
+ --pf-v6-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
1321
+ --pf-v6-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
1322
+ --pf-v6-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--hover);
1323
+ --pf-v6-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
1324
+ --pf-v6-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
1325
+ --pf-v6-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--clicked);
1326
+ --pf-v6-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
1327
+ --pf-v6-c-button--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
1328
+ --pf-v6-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
1329
+ --pf-v6-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default);
1330
+ --pf-v6-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover);
1331
+ --pf-v6-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover);
1332
+ --pf-v6-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover);
1333
+ --pf-v6-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked);
1334
+ --pf-v6-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked);
1335
+ --pf-v6-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked);
1336
+ --pf-v6-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1337
+ --pf-v6-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1338
+ --pf-v6-c-button--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1339
+ --pf-v6-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1340
+ --pf-v6-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1341
+ --pf-v6-c-button--m-warning--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1342
+ --pf-v6-c-button--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked);
1343
+ --pf-v6-c-button--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked);
1344
+ --pf-v6-c-button--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked);
1345
+ --pf-v6-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1346
+ --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1347
+ --pf-v6-c-button--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1348
+ --pf-v6-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1349
+ --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1350
+ --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1351
+ --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
1352
+ --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
1353
+ --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
1354
+ --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious);
1355
+ --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
1356
+ --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
1357
+ --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
1358
+ --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
1359
+ --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
1360
+ --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
1361
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1362
+ --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
1363
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1364
+ --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1365
+ --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1366
+ --pf-v6-c-button--disabled--TextDecorationColor: currentcolor;
1367
+ --pf-v6-c-button--disabled--BorderColor: transparent;
1368
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1369
+ --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
1370
+ --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1371
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
1372
+ --pf-v6-c-button__icon--MarginInlineStart: 0;
1373
+ --pf-v6-c-button__icon--MarginInlineEnd: 0;
1374
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
1375
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
1376
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
1377
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
1378
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
1379
+ --pf-v6-c-button__icon--TransitionTimingFunction: auto;
1363
1380
  --pf-v6-c-button__icon--TransitionDuration: 0s;
1364
- --pf-v6-c-button__icon--TransitionProperty: scale;
1365
- --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1381
+ --pf-v6-c-button__icon--TransitionProperty: none;
1382
+ --pf-v6-c-button__icon--Rotate: 0deg;
1383
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
1366
1384
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
1367
- --pf-v6-c-button--hover__icon--TransitionProperty: scale;
1368
- }
1369
-
1370
- .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
1371
- --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
1372
- --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
1373
- --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
1374
- --pf-v6-c-button__icon--TransitionDelay: 0s;
1375
- --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
1376
- --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
1377
- --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
1378
- }
1379
-
1380
- .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
1381
- --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
1382
- --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
1383
- --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
1384
- --pf-v6-c-button__icon--TransitionDelay: 0s;
1385
+ --pf-v6-c-button--hover__icon--TransitionProperty: none;
1386
+ --pf-v6-c-button--hover__icon--Rotate: 0deg;
1385
1387
  --pf-v6-c-button__icon--ScaleX: 1;
1386
- --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
1388
+ --pf-v6-c-button__icon--ScaleY: 1;
1387
1389
  --pf-v6-c-button--hover__icon--ScaleX: 1;
1390
+ --pf-v6-c-button--hover__icon--ScaleY: 1;
1391
+ --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
1392
+ --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1393
+ --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
1394
+ --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
1395
+ --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
1396
+ --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
1397
+ --pf-v6-c-button__icon--favorite--Opacity: 1;
1398
+ --pf-v6-c-button__icon--favorited--Opacity: 0;
1399
+ --pf-v6-c-button--m-favorited__icon--favorite--Opacity: 0;
1400
+ --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
1401
+ --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
1402
+ --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
1403
+ --pf-v6-c-button__progress--Opacity: 0;
1404
+ --pf-v6-c-button__progress--TranslateY: -50%;
1405
+ --pf-v6-c-button__progress--TranslateX: 0;
1406
+ --pf-v6-c-button__progress--InsetBlockStart: 50%;
1407
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1408
+ --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
1409
+ --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
1410
+ --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
1411
+ --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1412
+ --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
1413
+ --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
1414
+ --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
1415
+ --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
1416
+ --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1417
+ --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1418
+ --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1419
+ --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1420
+ --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
1421
+ --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--alt);
1422
+ --pf-v6-c-button--m-block--Display: flex;
1423
+ --pf-v6-c-button--m-block--Width: 100%;
1424
+ --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1425
+ --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
1426
+ --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
1427
+ --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
1428
+ --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
1429
+ --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
1430
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
1431
+ --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
1432
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
1433
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
1434
+ --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
1435
+ --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
1436
+ --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
1437
+ --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
1438
+ --pf-v6-c-button--m-circle--ScaleX: 1.29;
1439
+ --pf-v6-c-button--m-circle--ScaleY: 1.29;
1440
+ --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
1441
+ --pf-v6-c-button--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
1442
+ --pf-v6-c-button--m-circle--PaddingBlockStart: var(--pf-v6-c-button--m-circle--Padding--base);
1443
+ --pf-v6-c-button--m-circle--PaddingInlineEnd: 0;
1444
+ --pf-v6-c-button--m-circle--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--Padding--base);
1445
+ --pf-v6-c-button--m-circle--PaddingInlineStart: 0;
1388
1446
  }
1389
1447
 
1390
- .pf-v6-c-button.pf-m-circle {
1391
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
1392
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
1393
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
1394
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
1395
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
1396
- }
1397
-
1398
- .pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
1399
- scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
1400
- }
1401
-
1402
- .pf-v6-c-button:hover, .pf-v6-c-button:focus {
1403
- --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
1404
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
1405
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
1406
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
1407
- --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
1408
- --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
1409
- --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
1410
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
1411
- --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
1412
- --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
1413
- --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
1414
- --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
1415
- --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
1416
- --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
1417
- text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
1418
- text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
1419
- text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
1420
- outline-offset: var(--pf-t--global--focus-ring--position--offset);
1421
- }
1422
-
1423
- .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
1424
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
1425
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
1426
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
1427
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
1428
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
1429
- }
1430
-
1431
- .pf-v6-c-button:active {
1432
- background-size: 100% 100%;
1433
- transition-duration: 0s;
1434
- }
1435
-
1436
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
1437
- pointer-events: none;
1438
- }
1439
-
1440
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
1441
- color: var(--pf-v6-c-button--disabled--Color);
1442
- text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
1443
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
1444
- }
1445
-
1446
- .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
1447
- border-color: transparent;
1448
- }
1449
-
1450
- .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
1451
- color: var(--pf-v6-c-button--disabled__icon--Color);
1452
- }
1453
-
1454
- .pf-v6-c-button.pf-m-aria-disabled {
1455
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
1456
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
1457
- cursor: default;
1458
- }
1459
-
1460
- .pf-v6-c-button.pf-m-progress {
1461
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
1462
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
1463
- }
1464
-
1465
- .pf-v6-c-button.pf-m-in-progress {
1466
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
1467
- }
1468
-
1469
- .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
1470
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
1471
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
1472
- }
1473
-
1474
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
1475
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
1476
- --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
1477
- }
1478
-
1479
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
1480
- opacity: 0;
1481
- }
1482
-
1483
- .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
1484
- animation-name: pf-v6-c-button-icon-notify;
1485
- animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
1486
- animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
1487
- }
1488
-
1489
- .pf-v6-c-button__icon {
1490
- margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
1491
- margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
1492
- color: var(--pf-v6-c-button__icon--Color);
1493
- transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
1494
- transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
1495
- transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
1496
- transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
1497
- rotate: var(--pf-v6-c-button__icon--Rotate);
1498
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
1499
- }
1500
-
1501
- .pf-v6-c-button__icon.pf-m-start {
1502
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
1503
- }
1504
-
1505
- .pf-v6-c-button__icon.pf-m-end {
1506
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
1507
- }
1508
-
1509
- .pf-v6-c-button__icon-favorite,
1510
- .pf-v6-c-button__icon-favorited {
1511
- grid-area: 1/1/1/1;
1512
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
1513
- transition-property: opacity;
1514
- }
1515
-
1516
- .pf-v6-c-button__icon-favorite {
1517
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
1518
- }
1519
-
1520
- .pf-v6-c-button__icon-favorited {
1521
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
1448
+ .pf-v6-c-button {
1449
+ position: relative;
1450
+ display: var(--pf-v6-c-button--Display);
1451
+ gap: var(--pf-v6-c-button--Gap);
1452
+ align-items: var(--pf-v6-c-button--AlignItems);
1453
+ justify-content: var(--pf-v6-c-button--JustifyContent);
1454
+ min-width: var(--pf-v6-c-button--MinWidth);
1455
+ padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
1456
+ padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
1457
+ padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
1458
+ padding-inline-end: var(--pf-v6-c-button--PaddingInlineEnd);
1459
+ font-size: var(--pf-v6-c-button--FontSize, inherit);
1460
+ font-weight: var(--pf-v6-c-button--FontWeight, inherit);
1461
+ line-height: var(--pf-v6-c-button--LineHeight, inherit);
1462
+ color: var(--pf-v6-c-button--Color);
1463
+ text-align: center;
1464
+ text-decoration-line: var(--pf-v6-c-button--TextDecorationLine);
1465
+ text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle);
1466
+ text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
1467
+ white-space: nowrap;
1468
+ cursor: pointer;
1469
+ -webkit-user-select: none;
1470
+ user-select: none;
1471
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
1472
+ border: 0;
1473
+ border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
1474
+ border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
1475
+ border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
1476
+ border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
1477
+ transition-delay: var(--pf-v6-c-button--TransitionDelay);
1478
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
1479
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
1480
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
1481
+ scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY);
1522
1482
  }
1523
1483
 
1524
- .pf-v6-c-button__progress {
1484
+ .pf-v6-c-button::after {
1525
1485
  position: absolute;
1526
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
1527
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
1528
- line-height: 1;
1529
- color: var(--pf-v6-c-button__progress--Color);
1530
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
1486
+ inset: var(--pf-v6-c-button--border--offset);
1487
+ pointer-events: none;
1488
+ content: "";
1489
+ border: var(--pf-v6-c-button--BorderWidth) solid;
1490
+ border-color: var(--pf-v6-c-button--BorderColor);
1491
+ border-radius: inherit;
1492
+ transition: inherit;
1531
1493
  }
1532
1494
 
1533
- .pf-v6-c-button__progress .pf-v6-c-spinner {
1534
- --pf-v6-c-spinner--Color: currentcolor;
1495
+ .pf-v6-c-button.pf-m-primary {
1496
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
1497
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-primary--BackgroundColor);
1498
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-primary__icon--Color);
1499
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-primary--hover--Color);
1500
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-primary--hover--BackgroundColor);
1501
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-primary--hover__icon--Color);
1502
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-primary--m-clicked--Color);
1503
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-primary--m-clicked--BackgroundColor);
1504
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
1535
1505
  }
1536
1506
 
1537
- .pf-v6-c-button__text {
1538
- text-decoration: inherit;
1507
+ .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
1508
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
1539
1509
  }
1540
1510
 
1541
- .pf-v6-c-button__count {
1542
- display: inline-flex;
1543
- align-items: center;
1511
+ .pf-v6-c-button.pf-m-secondary {
1512
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
1513
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-secondary--BorderColor);
1514
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-secondary--TransitionDuration);
1515
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-secondary__icon--Color);
1516
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-secondary--hover--Color);
1517
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-secondary--hover--BorderColor);
1518
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-secondary--hover__icon--Color);
1519
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-clicked--Color);
1520
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-clicked--BorderColor);
1521
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-clicked__icon--Color);
1522
+ --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-secondary--m-danger--Color);
1523
+ --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger__icon--Color);
1524
+ --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover--Color);
1525
+ --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--hover__icon--Color);
1526
+ --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--Color);
1527
+ --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color);
1544
1528
  }
1545
1529
 
1546
- .pf-v6-c-button--hamburger-icon path {
1547
- fill: none;
1548
- stroke: currentcolor;
1549
- stroke-linecap: round;
1550
- stroke-linejoin: round;
1551
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
1530
+ .pf-v6-c-button.pf-m-secondary.pf-m-danger {
1531
+ --pf-v6-c-button--m-secondary--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--BorderColor);
1532
+ --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--hover--BorderColor);
1533
+ --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor);
1534
+ --pf-v6-c-button--m-danger--BackgroundColor: transparent;
1535
+ --pf-v6-c-button--m-danger--hover--BackgroundColor: transparent;
1536
+ --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: transparent;
1552
1537
  }
1553
1538
 
1554
- .pf-v6-c-button--hamburger-icon--top {
1555
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
1539
+ .pf-v6-c-button.pf-m-tertiary {
1540
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-tertiary--Color);
1541
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-tertiary--BorderColor);
1542
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-tertiary--TransitionDuration);
1543
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-tertiary__icon--Color);
1544
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-tertiary--hover--Color);
1545
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-tertiary--hover--BorderColor);
1546
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-tertiary--hover__icon--Color);
1547
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-tertiary--m-clicked--Color);
1548
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-tertiary--m-clicked--BorderColor);
1549
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-tertiary--m-clicked__icon--Color);
1556
1550
  }
1557
1551
 
1558
- .pf-v6-c-button--hamburger-icon--middle {
1559
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
1552
+ .pf-v6-c-button.pf-m-link {
1553
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--PaddingInlineEnd);
1554
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--PaddingInlineStart);
1555
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-link--Color);
1556
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-link--BorderWidth);
1557
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-link--hover--BorderColor);
1558
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-link--hover--BorderWidth);
1559
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-link--m-clicked--BorderColor);
1560
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-link--m-clicked--BorderWidth);
1561
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-link--BorderColor);
1562
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius);
1563
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor);
1564
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-link__icon--Color);
1565
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-link--hover--Color);
1566
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-link--hover--BackgroundColor);
1567
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-link--hover__icon--Color);
1568
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-link--m-clicked--Color);
1569
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-clicked--BackgroundColor);
1570
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
1571
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
1572
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
1560
1573
  }
1561
1574
 
1562
- .pf-v6-c-button--hamburger-icon--arrow {
1563
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
1575
+ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1576
+ --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
1577
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
1578
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
1564
1579
  }
1565
1580
 
1566
- .pf-v6-c-button--hamburger-icon--bottom {
1567
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
1581
+ .pf-v6-c-button.pf-m-link.pf-m-inline {
1582
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
1583
+ --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
1584
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
1585
+ --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
1586
+ --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
1587
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockStart);
1588
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
1589
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
1590
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
1591
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
1592
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
1593
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
1594
+ --pf-v6-c-button--BackgroundColor: transparent;
1595
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
1596
+ --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
1597
+ --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
1598
+ --pf-v6-c-button--hover--BackgroundColor: transparent;
1599
+ --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
1600
+ --pf-v6-c-button--disabled--BackgroundColor: transparent;
1601
+ --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
1602
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
1603
+ --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
1604
+ --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
1605
+ --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
1606
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
1607
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
1608
+ --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
1609
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
1610
+ --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
1611
+ --pf-v6-c-button--BorderWidth: 0;
1612
+ --pf-v6-c-button--hover--BorderWidth: 0;
1613
+ --pf-v6-c-button--m-clicked--BorderWidth: 0;
1614
+ text-align: start;
1615
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
1616
+ white-space: normal;
1617
+ background: transparent;
1618
+ outline-offset: 0.125rem;
1568
1619
  }
1569
1620
 
1570
- @keyframes pf-v6-c-button-icon-notify {
1571
- 33% {
1572
- transform: rotate(30deg);
1573
- }
1574
- 66% {
1575
- transform: rotate(-60deg);
1576
- }
1577
- }
1578
- @keyframes pf-v6-c-button-icon-favorited {
1579
- 50% {
1580
- scale: 1.5;
1581
- }
1621
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
1622
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
1582
1623
  }
1583
- .pf-v6-c-label-group {
1584
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1585
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1586
- --pf-v6-c-label-group--MaxWidth: 100%;
1587
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1588
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1589
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1590
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1591
- --pf-v6-c-label-group__main--MaxWidth: 100%;
1592
- --pf-v6-c-label-group__main--MinWidth: 0;
1593
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1594
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1595
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1596
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1597
- --pf-v6-c-label-group__list--MaxWidth: 100%;
1598
- --pf-v6-c-label-group__list--MinWidth: 0;
1599
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1600
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1601
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1602
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1603
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1604
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1605
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1606
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1607
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1608
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1609
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1610
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
1611
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1612
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1613
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1614
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1615
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1616
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1617
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1618
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1619
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1620
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1624
+
1625
+ .pf-v6-c-button.pf-m-link.pf-m-danger {
1626
+ --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
1627
+ --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
1628
+ --pf-v6-c-button--m-danger__icon--Color: var(--pf-v6-c-button--m-link--m-danger__icon--Color);
1629
+ --pf-v6-c-button--m-danger--hover--Color: var(--pf-v6-c-button--m-link--m-danger--hover--Color);
1630
+ --pf-v6-c-button--m-danger--hover--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--hover--BackgroundColor);
1631
+ --pf-v6-c-button--m-danger--hover__icon--Color: var(--pf-v6-c-button--m-link--m-danger--hover__icon--Color);
1632
+ --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked--Color);
1633
+ --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor);
1634
+ --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color);
1621
1635
  }
1622
1636
 
1623
- .pf-v6-c-label-group {
1624
- display: inline-flex;
1625
- row-gap: var(--pf-v6-c-label-group--RowGap);
1626
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1627
- align-items: center;
1628
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1637
+ .pf-v6-c-button.pf-m-link.pf-m-display-lg {
1638
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-display-lg--FontSize);
1629
1639
  }
1630
1640
 
1631
- .pf-v6-c-label-group.pf-m-category {
1632
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1633
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1634
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1635
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1636
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1637
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1638
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1641
+ .pf-v6-c-button.pf-m-warning {
1642
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-warning--Color);
1643
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-warning--BackgroundColor);
1644
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-warning__icon--Color);
1645
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-warning--hover--Color);
1646
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-warning--hover--BackgroundColor);
1647
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-warning--hover__icon--Color);
1648
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-warning--m-clicked--Color);
1649
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-warning--m-clicked--BackgroundColor);
1650
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-warning--m-clicked__icon--Color);
1639
1651
  }
1640
1652
 
1641
- .pf-v6-c-label-group.pf-m-vertical {
1642
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1643
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1644
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1645
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1646
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1647
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1648
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1653
+ .pf-v6-c-button.pf-m-danger {
1654
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-danger--Color);
1655
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-danger--BackgroundColor);
1656
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-danger__icon--Color);
1657
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-danger--hover--Color);
1658
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-danger--hover--BackgroundColor);
1659
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-danger--hover__icon--Color);
1660
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-danger--m-clicked--Color);
1661
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-danger--m-clicked--BackgroundColor);
1662
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-danger--m-clicked__icon--Color);
1649
1663
  }
1650
1664
 
1651
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1652
- align-items: flex-start;
1665
+ .pf-v6-c-button.pf-m-control {
1666
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-control--BorderRadius);
1667
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-control--PaddingInlineStart);
1668
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-control--PaddingInlineEnd);
1669
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-control--Color);
1670
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-control--BackgroundColor);
1671
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-control--BorderColor);
1672
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-control--BorderWidth);
1673
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-control__icon--Color);
1674
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-control--hover--Color);
1675
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-control--hover--BackgroundColor);
1676
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-control--hover--BorderColor);
1677
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-control--hover--BorderWidth);
1678
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-control--hover__icon--Color);
1679
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-control--m-clicked--Color);
1680
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-control--m-clicked--BackgroundColor);
1681
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-control--m-clicked--BorderColor);
1682
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-control--m-clicked--BorderWidth);
1683
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-control--m-clicked__icon--Color);
1684
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
1685
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
1653
1686
  }
1654
1687
 
1655
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1656
- flex-direction: column;
1657
- align-items: flex-start;
1658
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1688
+ .pf-v6-c-button.pf-m-stateful {
1689
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
1690
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
1691
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
1692
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
1693
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
1659
1694
  }
1660
1695
 
1661
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1662
- flex-direction: column;
1663
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1696
+ .pf-v6-c-button.pf-m-read {
1697
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
1698
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
1699
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
1700
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
1701
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
1702
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
1664
1703
  }
1665
1704
 
1666
- .pf-v6-c-label-group.pf-m-editable,
1667
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1668
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1669
- display: flex;
1705
+ .pf-v6-c-button.pf-m-unread {
1706
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
1707
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
1708
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
1709
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
1710
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
1711
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
1712
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
1713
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
1714
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
1670
1715
  }
1671
1716
 
1672
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1673
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1674
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1675
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1676
- flex: 1;
1717
+ .pf-v6-c-button.pf-m-attention {
1718
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
1719
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
1720
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
1721
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
1722
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
1723
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
1724
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
1725
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
1726
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
1677
1727
  }
1678
1728
 
1679
- .pf-v6-c-label-group__main {
1680
- display: flex;
1681
- flex: 1;
1682
- flex-wrap: wrap;
1683
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1684
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1685
- align-items: baseline;
1686
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1729
+ .pf-v6-c-button.pf-m-plain {
1730
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
1731
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
1732
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-plain--hover--BorderWidth);
1733
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-plain--m-clicked--BorderColor);
1734
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-plain--m-clicked--BorderWidth);
1735
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-plain--BorderColor);
1736
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius);
1737
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
1738
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
1739
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
1740
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
1741
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
1742
+ --pf-v6-c-button__progress--Color: var(--pf-v6-c-button--m-in-progress--m-plain--Color);
1743
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-plain--hover--Color);
1744
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
1745
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color);
1746
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
1747
+ --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
1748
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
1749
+ --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
1750
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
1751
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
1687
1752
  }
1688
1753
 
1689
- .pf-v6-c-label-group__list {
1690
- display: inline-flex;
1691
- flex-wrap: wrap;
1692
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1693
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1694
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1754
+ .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
1755
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
1756
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor);
1757
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor);
1758
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
1759
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
1760
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
1761
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
1762
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
1763
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
1764
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
1765
+ --pf-v6-c-button--border--offset: var(--pf-v6-c-button--m-plain--m-no-padding--border--offset);
1766
+ min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
1767
+ background: var(--pf-v6-c-button--BackgroundColor);
1695
1768
  }
1696
1769
 
1697
- .pf-v6-c-label-group__list-item {
1698
- display: inline-flex;
1699
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1770
+ .pf-v6-c-button.pf-m-block {
1771
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
1772
+ width: var(--pf-v6-c-button--m-block--Width);
1700
1773
  }
1701
1774
 
1702
- .pf-v6-c-label-group__label {
1703
- overflow: hidden;
1704
- text-overflow: ellipsis;
1705
- white-space: nowrap;
1706
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1775
+ .pf-v6-c-button.pf-m-small {
1776
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
1777
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-small--PaddingInlineEnd);
1778
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-small--PaddingBlockEnd);
1779
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-small--PaddingInlineStart);
1707
1780
  }
1708
1781
 
1709
- .pf-v6-c-label-group__close {
1710
- display: flex;
1711
- align-self: flex-start;
1782
+ .pf-v6-c-button.pf-m-display-lg {
1783
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-display-lg--PaddingBlockStart);
1784
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-display-lg--PaddingInlineEnd);
1785
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-display-lg--PaddingBlockEnd);
1786
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
1787
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
1712
1788
  }
1713
1789
 
1714
- .pf-v6-c-label-group__close .pf-v6-c-button {
1715
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1716
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1717
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1718
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1719
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1790
+ .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
1791
+ display: grid;
1792
+ transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
1793
+ transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
1794
+ transition-property: color;
1720
1795
  }
1721
1796
 
1722
- .pf-v6-c-label-group__textarea {
1723
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1724
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1725
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1726
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1727
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1728
- white-space: nowrap;
1729
- resize: none;
1730
- scrollbar-width: none;
1731
- -ms-overflow-style: none;
1732
- border: 0;
1797
+ .pf-v6-c-button.pf-m-favorited {
1798
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
1799
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
1800
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
1801
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
1802
+ --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
1803
+ --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
1733
1804
  }
1734
1805
 
1735
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1736
- display: none;
1806
+ .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
1807
+ animation-name: pf-v6-c-button-icon-favorited;
1808
+ animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
1809
+ animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
1737
1810
  }
1738
1811
 
1739
- .pf-v6-c-text-input-group {
1740
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1741
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
1742
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1743
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1744
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1745
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1746
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1747
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1748
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1749
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1750
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1751
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1752
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1753
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1754
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1755
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1756
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1757
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1758
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
1759
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1760
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1761
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1762
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1763
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1764
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1765
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1766
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1767
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1768
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1769
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1770
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1771
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1772
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
1773
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1774
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1775
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1776
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1777
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1778
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1779
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1780
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1781
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1782
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1783
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1784
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1785
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1786
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1787
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1788
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1789
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1790
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1812
+ .pf-v6-c-button.pf-m-settings {
1813
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
1814
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
1815
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
1816
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
1817
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
1818
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
1819
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
1791
1820
  }
1792
1821
 
1793
- .pf-v6-c-text-input-group {
1794
- position: relative;
1795
- display: flex;
1796
- width: 100%;
1797
- font-size: var(--pf-v6-c-text-input-group__FontSize);
1798
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
1799
- color: var(--pf-v6-c-text-input-group--Color, inherit);
1800
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1801
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1802
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1803
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1804
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1822
+ .pf-v6-c-button.pf-m-hamburger {
1823
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1824
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
1825
+ --pf-v6-c-button__icon--TransitionProperty: scale;
1826
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1827
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
1828
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
1805
1829
  }
1806
1830
 
1807
- .pf-v6-c-text-input-group::before {
1808
- position: absolute;
1809
- inset: 0;
1810
- pointer-events: none;
1811
- content: "";
1812
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1813
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1814
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1815
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1816
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1831
+ .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
1832
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
1833
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
1834
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
1835
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
1836
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
1837
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
1838
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
1817
1839
  }
1818
1840
 
1819
- .pf-v6-c-text-input-group.pf-m-disabled {
1820
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1821
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1822
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1823
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1824
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1825
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1826
- pointer-events: none;
1841
+ .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
1842
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
1843
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
1844
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
1845
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
1846
+ --pf-v6-c-button__icon--ScaleX: 1;
1847
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
1848
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
1827
1849
  }
1828
1850
 
1829
- .pf-v6-c-text-input-group.pf-m-plain {
1830
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
1851
+ .pf-v6-c-button.pf-m-circle {
1852
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
1853
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
1854
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
1855
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
1856
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
1831
1857
  }
1832
1858
 
1833
- .pf-v6-c-text-input-group.pf-m-plain::before {
1834
- border: 0;
1859
+ .pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
1860
+ scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
1835
1861
  }
1836
1862
 
1837
- .pf-v6-c-text-input-group.pf-m-success {
1838
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1839
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1840
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1863
+ .pf-v6-c-button:hover, .pf-v6-c-button:focus {
1864
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
1865
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
1866
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
1867
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
1868
+ --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
1869
+ --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
1870
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
1871
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
1872
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
1873
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
1874
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
1875
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
1876
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
1877
+ --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
1878
+ text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
1879
+ text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
1880
+ text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
1881
+ outline-offset: var(--pf-t--global--focus-ring--position--offset);
1841
1882
  }
1842
1883
 
1843
- .pf-v6-c-text-input-group.pf-m-warning {
1844
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1845
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1846
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1884
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
1885
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
1886
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
1887
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
1888
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
1889
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
1847
1890
  }
1848
1891
 
1849
- .pf-v6-c-text-input-group.pf-m-error {
1850
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1851
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1852
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1892
+ .pf-v6-c-button:active {
1893
+ background-size: 100% 100%;
1894
+ transition-duration: 0s;
1853
1895
  }
1854
1896
 
1855
- @media (prefers-reduced-motion: no-preference) {
1856
- .pf-v6-c-text-input-group.pf-m-error {
1857
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1858
- animation-name: pf-v6-global-danger-jiggle-motion;
1859
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1860
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1861
- animation-fill-mode: both;
1862
- }
1897
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
1898
+ pointer-events: none;
1863
1899
  }
1864
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1865
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1866
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1867
- animation-name: pf-v6-global-fade-in;
1868
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1869
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1900
+
1901
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
1902
+ color: var(--pf-v6-c-button--disabled--Color);
1903
+ text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
1904
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
1870
1905
  }
1871
1906
 
1872
- .pf-v6-c-text-input-group:hover {
1873
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1907
+ .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
1908
+ border-color: transparent;
1874
1909
  }
1875
1910
 
1876
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1877
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1911
+ .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
1912
+ color: var(--pf-v6-c-button--disabled__icon--Color);
1878
1913
  }
1879
1914
 
1880
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1881
- --pf-v6-c-text-input-group__text--Position: relative;
1915
+ .pf-v6-c-button.pf-m-aria-disabled {
1916
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
1917
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
1918
+ cursor: default;
1882
1919
  }
1883
1920
 
1884
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1885
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1886
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1921
+ .pf-v6-c-button.pf-m-progress {
1922
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
1923
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
1887
1924
  }
1888
1925
 
1889
- .pf-v6-c-text-input-group__main {
1890
- display: flex;
1891
- flex: 1;
1892
- flex-wrap: wrap;
1893
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1894
- min-width: 0;
1926
+ .pf-v6-c-button.pf-m-in-progress {
1927
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
1895
1928
  }
1896
1929
 
1897
- .pf-v6-c-text-input-group__main.pf-m-icon {
1898
- --pf-v6-c-text-input-group__text--Position: relative;
1899
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1900
- display: inline-flex;
1901
- align-items: center;
1902
- justify-content: center;
1903
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1930
+ .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
1931
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
1932
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
1904
1933
  }
1905
1934
 
1906
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1907
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1935
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
1936
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
1937
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
1908
1938
  }
1909
1939
 
1910
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1911
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1912
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1913
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1940
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
1941
+ opacity: 0;
1914
1942
  }
1915
1943
 
1916
- .pf-v6-c-text-input-group__text {
1917
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
1918
- display: inline-grid;
1919
- flex: 1;
1920
- grid-template-areas: "text-input";
1921
- grid-template-columns: 1fr;
1944
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
1945
+ animation-name: pf-v6-c-button-icon-notify;
1946
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
1947
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
1922
1948
  }
1923
1949
 
1924
- .pf-v6-c-text-input-group__icon {
1925
- position: absolute;
1926
- inset-block-start: 50%;
1927
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1928
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1929
- color: var(--pf-v6-c-text-input-group__icon--Color);
1930
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1950
+ .pf-v6-c-button__icon {
1951
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
1952
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
1953
+ color: var(--pf-v6-c-button__icon--Color);
1954
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
1955
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
1956
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
1957
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
1958
+ rotate: var(--pf-v6-c-button__icon--Rotate);
1959
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
1931
1960
  }
1932
1961
 
1933
- .pf-v6-c-text-input-group__icon.pf-m-status {
1934
- inset-inline-start: auto;
1935
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1936
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1962
+ .pf-v6-c-button__icon.pf-m-start {
1963
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
1937
1964
  }
1938
1965
 
1939
- .pf-v6-c-text-input-group__text-input {
1940
- overflow: hidden;
1941
- text-overflow: ellipsis;
1942
- white-space: nowrap;
1943
- position: relative;
1944
- width: 100%;
1945
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1946
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1947
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1948
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1949
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1950
- color: var(--pf-v6-c-text-input-group__text-input--Color);
1951
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1952
- border: 0;
1953
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1966
+ .pf-v6-c-button__icon.pf-m-end {
1967
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
1954
1968
  }
1955
1969
 
1956
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1957
- grid-area: text-input;
1970
+ .pf-v6-c-button__icon-favorite,
1971
+ .pf-v6-c-button__icon-favorited {
1972
+ grid-area: 1/1/1/1;
1973
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
1974
+ transition-property: opacity;
1975
+ }
1976
+
1977
+ .pf-v6-c-button__icon-favorite {
1978
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
1979
+ }
1980
+
1981
+ .pf-v6-c-button__icon-favorited {
1982
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
1983
+ }
1984
+
1985
+ .pf-v6-c-button__progress {
1986
+ position: absolute;
1987
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
1988
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
1989
+ line-height: 1;
1990
+ color: var(--pf-v6-c-button__progress--Color);
1991
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
1958
1992
  }
1959
1993
 
1960
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
1961
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1994
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
1995
+ --pf-v6-c-spinner--Color: currentcolor;
1962
1996
  }
1963
1997
 
1964
- .pf-v6-c-text-input-group__text-input::placeholder {
1965
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1998
+ .pf-v6-c-button__text {
1999
+ text-decoration: inherit;
1966
2000
  }
1967
2001
 
1968
- .pf-v6-c-text-input-group__utilities {
1969
- display: flex;
2002
+ .pf-v6-c-button__count {
2003
+ display: inline-flex;
1970
2004
  align-items: center;
1971
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1972
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1973
2005
  }
1974
2006
 
1975
- .pf-v6-c-text-input-group__utilities > * + * {
1976
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2007
+ .pf-v6-c-button--hamburger-icon path {
2008
+ fill: none;
2009
+ stroke: currentcolor;
2010
+ stroke-linecap: round;
2011
+ stroke-linejoin: round;
2012
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
1977
2013
  }
1978
2014
 
1979
- .pf-v6-c-text-input-group__group {
1980
- display: flex;
2015
+ .pf-v6-c-button--hamburger-icon--top {
2016
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
1981
2017
  }
1982
2018
 
1983
- .pf-v6-c-badge {
1984
- --pf-v6-c-badge--BorderColor: transparent;
1985
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1986
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1987
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1988
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1989
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1990
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1991
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1992
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1993
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1994
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1995
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1996
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1997
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
1998
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1999
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2000
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2001
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2002
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2003
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2004
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2019
+ .pf-v6-c-button--hamburger-icon--middle {
2020
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2005
2021
  }
2006
2022
 
2007
- .pf-v6-c-badge {
2008
- position: relative;
2009
- display: inline-block;
2010
- min-width: var(--pf-v6-c-badge--MinWidth);
2011
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2012
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2013
- font-size: var(--pf-v6-c-badge--FontSize);
2014
- font-weight: var(--pf-v6-c-badge--FontWeight);
2015
- color: var(--pf-v6-c-badge--Color);
2016
- text-align: center;
2017
- white-space: nowrap;
2018
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2019
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2023
+ .pf-v6-c-button--hamburger-icon--arrow {
2024
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2020
2025
  }
2021
2026
 
2022
- .pf-v6-c-badge::after {
2023
- position: absolute;
2024
- inset: 0;
2025
- pointer-events: none;
2026
- content: "";
2027
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2028
- border-radius: inherit;
2027
+ .pf-v6-c-button--hamburger-icon--bottom {
2028
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2029
2029
  }
2030
2030
 
2031
- .pf-v6-c-badge.pf-m-read {
2032
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2033
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2034
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2035
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2031
+ @keyframes pf-v6-c-button-icon-notify {
2032
+ 33% {
2033
+ transform: rotate(30deg);
2034
+ }
2035
+ 66% {
2036
+ transform: rotate(-60deg);
2037
+ }
2036
2038
  }
2037
-
2038
- .pf-v6-c-badge.pf-m-unread {
2039
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2040
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2041
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2039
+ @keyframes pf-v6-c-button-icon-favorited {
2040
+ 50% {
2041
+ scale: 1.5;
2042
+ }
2042
2043
  }
2043
-
2044
- .pf-v6-c-badge.pf-m-disabled {
2045
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2046
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2044
+ .pf-v6-c-label-group {
2045
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2046
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2047
+ --pf-v6-c-label-group--MaxWidth: 100%;
2048
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2049
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2050
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2051
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2052
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
2053
+ --pf-v6-c-label-group__main--MinWidth: 0;
2054
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2055
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2056
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2057
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2058
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
2059
+ --pf-v6-c-label-group__list--MinWidth: 0;
2060
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2061
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2062
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2063
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2064
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2065
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2066
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2067
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2068
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2069
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2070
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2071
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
2072
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2073
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2074
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2075
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2076
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2077
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2078
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2079
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2080
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2081
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2047
2082
  }
2048
2083
 
2049
- .pf-v6-c-badge.pf-m-disabled::after {
2050
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2084
+ .pf-v6-c-label-group {
2085
+ display: inline-flex;
2086
+ row-gap: var(--pf-v6-c-label-group--RowGap);
2087
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
2088
+ align-items: center;
2089
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
2051
2090
  }
2052
2091
 
2053
- .pf-v6-c-badge__toggle-icon {
2054
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2055
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2092
+ .pf-v6-c-label-group.pf-m-category {
2093
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2094
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2095
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2096
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2097
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2098
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2099
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2056
2100
  }
2057
2101
 
2058
- .pf-v6-c-divider {
2059
- --pf-v6-c-divider--Display: flex;
2060
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2061
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2062
- --pf-v6-c-divider--before--FlexBasis: 100%;
2102
+ .pf-v6-c-label-group.pf-m-vertical {
2103
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2104
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2105
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2106
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2107
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2108
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2109
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2063
2110
  }
2064
2111
 
2065
- .pf-v6-c-divider {
2066
- flex-direction: row;
2067
- width: 100%;
2068
- height: var(--pf-v6-c-divider--Size);
2069
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2070
- --pf-v6-hidden-visible--hidden--Display: none;
2071
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2072
- display: var(--pf-v6-hidden-visible--Display);
2112
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2113
+ align-items: flex-start;
2073
2114
  }
2074
2115
 
2075
- .pf-v6-c-divider.pf-m-hidden {
2076
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2116
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2117
+ flex-direction: column;
2118
+ align-items: flex-start;
2119
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2077
2120
  }
2078
2121
 
2079
- @media screen and (min-width: 36rem) {
2080
- .pf-v6-c-divider.pf-m-hidden-on-sm {
2081
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2082
- }
2083
- .pf-v6-c-divider.pf-m-visible-on-sm {
2084
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2085
- }
2086
- }
2087
- @media screen and (min-width: 48rem) {
2088
- .pf-v6-c-divider.pf-m-hidden-on-md {
2089
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2090
- }
2091
- .pf-v6-c-divider.pf-m-visible-on-md {
2092
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2093
- }
2094
- }
2095
- @media screen and (min-width: 62rem) {
2096
- .pf-v6-c-divider.pf-m-hidden-on-lg {
2097
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2098
- }
2099
- .pf-v6-c-divider.pf-m-visible-on-lg {
2100
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2101
- }
2102
- }
2103
- @media screen and (min-width: 75rem) {
2104
- .pf-v6-c-divider.pf-m-hidden-on-xl {
2105
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2106
- }
2107
- .pf-v6-c-divider.pf-m-visible-on-xl {
2108
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2109
- }
2122
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2123
+ flex-direction: column;
2124
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2110
2125
  }
2111
- @media screen and (min-width: 90.625rem) {
2112
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
2113
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2114
- }
2115
- .pf-v6-c-divider.pf-m-visible-on-2xl {
2116
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2117
- }
2126
+
2127
+ .pf-v6-c-label-group.pf-m-editable,
2128
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2129
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2130
+ display: flex;
2118
2131
  }
2119
- .pf-v6-c-divider {
2120
- flex-shrink: 0;
2121
- align-items: stretch;
2122
- align-self: stretch;
2123
- justify-content: center;
2124
- border: 0;
2132
+
2133
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2134
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2135
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2136
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2137
+ flex: 1;
2125
2138
  }
2126
2139
 
2127
- .pf-v6-c-divider::before {
2128
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2129
- content: "";
2130
- background-color: var(--pf-v6-c-divider--Color);
2131
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2132
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2140
+ .pf-v6-c-label-group__main {
2141
+ display: flex;
2142
+ flex: 1;
2143
+ flex-wrap: wrap;
2144
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
2145
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2146
+ align-items: baseline;
2147
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2133
2148
  }
2134
2149
 
2135
- .pf-v6-c-divider.pf-m-horizontal {
2136
- flex-direction: row;
2137
- width: 100%;
2138
- height: var(--pf-v6-c-divider--Size);
2150
+ .pf-v6-c-label-group__list {
2151
+ display: inline-flex;
2152
+ flex-wrap: wrap;
2153
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
2154
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2155
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2139
2156
  }
2140
2157
 
2141
- .pf-v6-c-divider.pf-m-vertical {
2142
- flex-direction: column;
2143
- width: var(--pf-v6-c-divider--Size);
2144
- height: inherit;
2158
+ .pf-v6-c-label-group__list-item {
2159
+ display: inline-flex;
2160
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2145
2161
  }
2146
2162
 
2147
- .pf-v6-c-divider.pf-m-inset-none {
2148
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2163
+ .pf-v6-c-label-group__label {
2164
+ overflow: hidden;
2165
+ text-overflow: ellipsis;
2166
+ white-space: nowrap;
2167
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2149
2168
  }
2150
2169
 
2151
- .pf-v6-c-divider.pf-m-inset-xs {
2152
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2170
+ .pf-v6-c-label-group__close {
2171
+ display: flex;
2172
+ align-self: flex-start;
2153
2173
  }
2154
2174
 
2155
- .pf-v6-c-divider.pf-m-inset-sm {
2156
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2175
+ .pf-v6-c-label-group__close .pf-v6-c-button {
2176
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2177
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2178
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2179
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2180
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2157
2181
  }
2158
2182
 
2159
- .pf-v6-c-divider.pf-m-inset-md {
2160
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2183
+ .pf-v6-c-label-group__textarea {
2184
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2185
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2186
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2187
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2188
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2189
+ white-space: nowrap;
2190
+ resize: none;
2191
+ scrollbar-width: none;
2192
+ -ms-overflow-style: none;
2193
+ border: 0;
2161
2194
  }
2162
2195
 
2163
- .pf-v6-c-divider.pf-m-inset-lg {
2164
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2196
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2197
+ display: none;
2165
2198
  }
2166
2199
 
2167
- .pf-v6-c-divider.pf-m-inset-xl {
2168
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2200
+ .pf-v6-c-check {
2201
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2202
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2203
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2204
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2205
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2206
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2207
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2208
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2209
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2210
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2211
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2212
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2213
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2214
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2169
2215
  }
2170
2216
 
2171
- .pf-v6-c-divider.pf-m-inset-2xl {
2172
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2217
+ .pf-v6-c-check {
2218
+ display: grid;
2219
+ grid-template-columns: auto 1fr;
2220
+ grid-gap: var(--pf-v6-c-check--GridGap);
2221
+ accent-color: var(--pf-v6-c-check--AccentColor);
2173
2222
  }
2174
2223
 
2175
- .pf-v6-c-divider.pf-m-inset-3xl {
2176
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2224
+ .pf-v6-c-check.pf-m-standalone {
2225
+ display: inline-grid;
2226
+ grid-template-columns: auto;
2227
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2177
2228
  }
2178
2229
 
2179
- @media (min-width: 36rem) {
2180
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
2181
- flex-direction: row;
2182
- width: 100%;
2183
- height: var(--pf-v6-c-divider--Size);
2184
- }
2185
- }
2186
- @media (min-width: 36rem) {
2187
- .pf-v6-c-divider.pf-m-vertical-on-sm {
2188
- flex-direction: column;
2189
- width: var(--pf-v6-c-divider--Size);
2190
- height: inherit;
2191
- }
2192
- }
2193
- @media (min-width: 36rem) {
2194
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
2195
- --pf-v6-c-divider--before--FlexBasis: 100%;
2196
- }
2197
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2198
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2199
- }
2200
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2201
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2202
- }
2203
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
2204
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2205
- }
2206
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2207
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2208
- }
2209
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2210
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2211
- }
2212
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2213
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2214
- }
2215
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2216
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2217
- }
2218
- }
2219
- @media (min-width: 48rem) {
2220
- .pf-v6-c-divider.pf-m-horizontal-on-md {
2221
- flex-direction: row;
2222
- width: 100%;
2223
- height: var(--pf-v6-c-divider--Size);
2224
- }
2225
- }
2226
- @media (min-width: 48rem) {
2227
- .pf-v6-c-divider.pf-m-vertical-on-md {
2228
- flex-direction: column;
2229
- width: var(--pf-v6-c-divider--Size);
2230
- height: inherit;
2231
- }
2232
- }
2233
- @media (min-width: 48rem) {
2234
- .pf-v6-c-divider.pf-m-inset-none-on-md {
2235
- --pf-v6-c-divider--before--FlexBasis: 100%;
2236
- }
2237
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
2238
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2239
- }
2240
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
2241
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2242
- }
2243
- .pf-v6-c-divider.pf-m-inset-md-on-md {
2244
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2245
- }
2246
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
2247
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2248
- }
2249
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
2250
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2251
- }
2252
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2253
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2254
- }
2255
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2256
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2257
- }
2258
- }
2259
- @media (min-width: 62rem) {
2260
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
2261
- flex-direction: row;
2262
- width: 100%;
2263
- height: var(--pf-v6-c-divider--Size);
2264
- }
2265
- }
2266
- @media (min-width: 62rem) {
2267
- .pf-v6-c-divider.pf-m-vertical-on-lg {
2268
- flex-direction: column;
2269
- width: var(--pf-v6-c-divider--Size);
2270
- height: inherit;
2271
- }
2272
- }
2273
- @media (min-width: 62rem) {
2274
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
2275
- --pf-v6-c-divider--before--FlexBasis: 100%;
2276
- }
2277
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2278
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2279
- }
2280
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2281
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2282
- }
2283
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
2284
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2285
- }
2286
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2287
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2288
- }
2289
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2290
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2291
- }
2292
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2293
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2294
- }
2295
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2296
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2297
- }
2230
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2231
+ align-self: center;
2232
+ transform: none;
2298
2233
  }
2299
- @media (min-width: 75rem) {
2300
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
2301
- flex-direction: row;
2302
- width: 100%;
2303
- height: var(--pf-v6-c-divider--Size);
2304
- }
2234
+
2235
+ .pf-v6-c-check__input {
2236
+ align-self: start;
2237
+ font-size: var(--pf-v6-c-check__label--FontSize);
2238
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2239
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2305
2240
  }
2306
- @media (min-width: 75rem) {
2307
- .pf-v6-c-divider.pf-m-vertical-on-xl {
2308
- flex-direction: column;
2309
- width: var(--pf-v6-c-divider--Size);
2310
- height: inherit;
2311
- }
2241
+
2242
+ .pf-v6-c-check__label {
2243
+ font-size: var(--pf-v6-c-check__label--FontSize);
2244
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
2245
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2246
+ color: var(--pf-v6-c-check__label--Color);
2312
2247
  }
2313
- @media (min-width: 75rem) {
2314
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
2315
- --pf-v6-c-divider--before--FlexBasis: 100%;
2316
- }
2317
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2318
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2319
- }
2320
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2321
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2322
- }
2323
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
2324
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2325
- }
2326
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2327
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2328
- }
2329
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2330
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2331
- }
2332
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2333
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2334
- }
2335
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2336
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2337
- }
2248
+
2249
+ .pf-v6-c-check__description {
2250
+ grid-column: 2;
2251
+ font-size: var(--pf-v6-c-check__description--FontSize);
2252
+ color: var(--pf-v6-c-check__description--Color);
2338
2253
  }
2339
- @media (min-width: 90.625rem) {
2340
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2341
- flex-direction: row;
2342
- width: 100%;
2343
- height: var(--pf-v6-c-divider--Size);
2344
- }
2254
+
2255
+ .pf-v6-c-check__body {
2256
+ grid-column: 2;
2345
2257
  }
2346
- @media (min-width: 90.625rem) {
2347
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
2348
- flex-direction: column;
2349
- width: var(--pf-v6-c-divider--Size);
2350
- height: inherit;
2351
- }
2258
+
2259
+ .pf-v6-c-check__label,
2260
+ .pf-v6-c-check__input {
2261
+ justify-self: start;
2352
2262
  }
2353
- @media (min-width: 90.625rem) {
2354
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2355
- --pf-v6-c-divider--before--FlexBasis: 100%;
2356
- }
2357
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2358
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2359
- }
2360
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2361
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2362
- }
2363
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2364
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2365
- }
2366
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2367
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2368
- }
2369
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2370
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2371
- }
2372
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2373
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2374
- }
2375
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2376
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2377
- }
2263
+
2264
+ label.pf-v6-c-check, .pf-v6-c-check__label,
2265
+ .pf-v6-c-check__input {
2266
+ cursor: pointer;
2378
2267
  }
2379
- .pf-v6-c-label {
2380
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2381
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2382
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2383
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2384
- --pf-v6-c-label--MaxWidth: 100%;
2385
- --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
2386
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
2387
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
2388
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
2389
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
2390
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2391
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2392
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2393
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2394
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
2395
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
2396
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
2397
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
2398
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
2399
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
2400
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
2401
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
2402
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
2403
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
2404
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
2405
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
2406
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
2407
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
2408
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
2409
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
2410
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
2411
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
2412
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
2413
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
2414
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
2415
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
2416
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
2417
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
2418
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
2419
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
2420
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
2421
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
2422
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
2423
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
2424
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
2425
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
2426
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
2427
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
2428
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
2429
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
2430
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
2431
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
2432
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
2433
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
2434
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
2435
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
2436
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
2437
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
2438
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
2439
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
2440
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
2441
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
2442
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
2443
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
2444
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
2445
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
2446
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
2447
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
2448
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
2449
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
2450
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
2451
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
2452
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
2453
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
2454
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
2455
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
2456
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
2457
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
2458
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
2459
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
2460
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
2461
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
2462
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
2463
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
2464
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
2465
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
2466
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
2467
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
2468
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
2469
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
2470
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
2471
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2472
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
2473
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
2474
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
2475
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
2476
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
2477
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
2478
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
2479
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
2480
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2481
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2482
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
2483
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
2484
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
2485
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
2486
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
2487
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
2488
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
2489
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
2490
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2491
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2492
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
2493
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
2494
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
2495
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
2496
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
2497
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
2498
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
2499
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
2500
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
2501
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
2502
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
2503
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
2504
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
2505
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
2506
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
2507
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
2508
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
2509
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
2510
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
2511
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
2512
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
2513
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2514
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
2515
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
2516
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
2517
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
2518
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
2519
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
2520
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
2521
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
2522
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2523
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
2524
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
2525
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
2526
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2527
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2528
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
2529
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2530
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2531
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
2532
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
2533
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
2534
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
2535
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
2536
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
2537
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
2538
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2539
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
2540
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2541
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
2542
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2543
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
2544
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
2545
- --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
2546
- --pf-v6-c-label__content--MaxWidth: 100%;
2547
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2548
- --pf-v6-c-label__content--Cursor: initial;
2549
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2550
- --pf-v6-c-label__text--MaxWidth: 100%;
2551
- --pf-v6-c-label__actions--MarginInlineEnd: 0;
2552
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2553
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
2554
- --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
2555
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
2556
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
2557
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
2558
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
2559
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
2560
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
2561
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
2562
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
2563
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
2564
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
2565
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
2566
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
2567
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
2568
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
2569
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
2570
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
2571
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2572
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2573
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2574
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2268
+
2269
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2270
+ .pf-v6-c-check__input:disabled,
2271
+ .pf-v6-c-check__input.pf-m-disabled {
2272
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2273
+ cursor: not-allowed;
2274
+ }
2275
+
2276
+ .pf-v6-c-check__label-required {
2277
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2278
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
2279
+ color: var(--pf-v6-c-check__label-required--Color);
2575
2280
  }
2576
2281
 
2577
- .pf-v6-c-label {
2282
+ .pf-v6-c-text-input-group {
2283
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2284
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
2285
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2286
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2287
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2288
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2289
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2290
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2291
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2292
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2293
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2294
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2295
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2296
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
2297
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
2298
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
2299
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2300
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2301
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
2302
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2303
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2304
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2305
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2306
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2307
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2308
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2309
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2310
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2311
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2312
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2313
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2314
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2315
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2316
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2317
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2318
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2319
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2320
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2321
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2322
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2323
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2324
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2325
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2326
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2327
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2328
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2329
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2330
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2331
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2332
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2333
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2334
+ }
2335
+
2336
+ .pf-v6-c-text-input-group {
2578
2337
  position: relative;
2579
- gap: var(--pf-v6-c-label--Gap);
2580
- min-width: var(--pf-v6-c-label--MinWidth);
2581
- max-width: var(--pf-v6-c-label--MaxWidth);
2582
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
2583
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
2584
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
2585
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
2586
- font-size: var(--pf-v6-c-label--FontSize);
2587
- white-space: nowrap;
2588
- background: transparent;
2589
- isolation: isolate;
2338
+ display: flex;
2339
+ width: 100%;
2340
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
2341
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
2342
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
2343
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2344
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2345
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2346
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2347
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2348
+ }
2349
+
2350
+ .pf-v6-c-text-input-group::before {
2351
+ position: absolute;
2352
+ inset: 0;
2353
+ pointer-events: none;
2354
+ content: "";
2355
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2356
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2357
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2358
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2359
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2360
+ }
2361
+
2362
+ .pf-v6-c-text-input-group.pf-m-disabled {
2363
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2364
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2365
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2366
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2367
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2368
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2369
+ pointer-events: none;
2370
+ }
2371
+
2372
+ .pf-v6-c-text-input-group.pf-m-plain {
2373
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
2374
+ }
2375
+
2376
+ .pf-v6-c-text-input-group.pf-m-plain::before {
2590
2377
  border: 0;
2591
- border-radius: var(--pf-v6-c-label--BorderRadius);
2592
2378
  }
2593
2379
 
2594
- .pf-v6-c-label.pf-m-blue {
2595
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
2596
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
2597
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
2598
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
2599
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
2600
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
2601
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
2602
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
2380
+ .pf-v6-c-text-input-group.pf-m-success {
2381
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2382
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2383
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2603
2384
  }
2604
2385
 
2605
- .pf-v6-c-label.pf-m-red {
2606
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
2607
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
2608
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
2609
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
2610
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
2611
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
2612
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
2613
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
2386
+ .pf-v6-c-text-input-group.pf-m-warning {
2387
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2388
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2389
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2614
2390
  }
2615
2391
 
2616
- .pf-v6-c-label.pf-m-orange {
2617
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
2618
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
2619
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
2620
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
2621
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
2622
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
2623
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
2624
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
2392
+ .pf-v6-c-text-input-group.pf-m-error {
2393
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2394
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2395
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2625
2396
  }
2626
2397
 
2627
- .pf-v6-c-label.pf-m-orangered {
2628
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
2629
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
2630
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
2631
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
2632
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
2633
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
2634
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
2635
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
2398
+ @media (prefers-reduced-motion: no-preference) {
2399
+ .pf-v6-c-text-input-group.pf-m-error {
2400
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2401
+ animation-name: pf-v6-global-danger-jiggle-motion;
2402
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2403
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2404
+ animation-fill-mode: both;
2405
+ }
2406
+ }
2407
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2408
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2409
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2410
+ animation-name: pf-v6-global-fade-in;
2411
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2412
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2636
2413
  }
2637
2414
 
2638
- .pf-v6-c-label.pf-m-yellow {
2639
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
2640
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
2641
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
2642
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
2643
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
2644
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
2645
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
2646
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
2415
+ .pf-v6-c-text-input-group:hover {
2416
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2647
2417
  }
2648
2418
 
2649
- .pf-v6-c-label.pf-m-green {
2650
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
2651
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
2652
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
2653
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
2654
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
2655
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
2656
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
2657
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
2419
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2420
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2658
2421
  }
2659
2422
 
2660
- .pf-v6-c-label.pf-m-teal {
2661
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
2662
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
2663
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
2664
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
2665
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
2666
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
2667
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
2668
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
2423
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2424
+ --pf-v6-c-text-input-group__text--Position: relative;
2425
+ }
2426
+
2427
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2428
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2429
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2430
+ }
2431
+
2432
+ .pf-v6-c-text-input-group__main {
2433
+ display: flex;
2434
+ flex: 1;
2435
+ flex-wrap: wrap;
2436
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2437
+ min-width: 0;
2438
+ }
2439
+
2440
+ .pf-v6-c-text-input-group__main.pf-m-icon {
2441
+ --pf-v6-c-text-input-group__text--Position: relative;
2442
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2443
+ display: inline-flex;
2444
+ align-items: center;
2445
+ justify-content: center;
2446
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2447
+ }
2448
+
2449
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2450
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2451
+ }
2452
+
2453
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2454
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2455
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2456
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2457
+ }
2458
+
2459
+ .pf-v6-c-text-input-group__text {
2460
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
2461
+ display: inline-grid;
2462
+ flex: 1;
2463
+ grid-template-areas: "text-input";
2464
+ grid-template-columns: 1fr;
2465
+ }
2466
+
2467
+ .pf-v6-c-text-input-group__icon {
2468
+ position: absolute;
2469
+ inset-block-start: 50%;
2470
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2471
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2472
+ color: var(--pf-v6-c-text-input-group__icon--Color);
2473
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2669
2474
  }
2670
2475
 
2671
- .pf-v6-c-label.pf-m-purple {
2672
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
2673
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
2674
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
2675
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
2676
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
2677
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
2678
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
2679
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
2476
+ .pf-v6-c-text-input-group__icon.pf-m-status {
2477
+ inset-inline-start: auto;
2478
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2479
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2680
2480
  }
2681
2481
 
2682
- .pf-v6-c-label.pf-m-success {
2683
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
2684
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
2685
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
2686
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
2687
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
2688
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
2689
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
2690
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
2691
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
2692
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2482
+ .pf-v6-c-text-input-group__text-input {
2483
+ overflow: hidden;
2484
+ text-overflow: ellipsis;
2485
+ white-space: nowrap;
2486
+ position: relative;
2487
+ width: 100%;
2488
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2489
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2490
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2491
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2492
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2493
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
2494
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2495
+ border: 0;
2496
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2693
2497
  }
2694
2498
 
2695
- .pf-v6-c-label.pf-m-warning {
2696
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
2697
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
2698
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
2699
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
2700
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
2701
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
2702
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
2703
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
2704
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
2705
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
2499
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2500
+ grid-area: text-input;
2706
2501
  }
2707
2502
 
2708
- .pf-v6-c-label.pf-m-danger {
2709
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
2710
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
2711
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
2712
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
2713
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
2714
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
2715
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
2716
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
2717
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
2718
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
2503
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
2504
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2719
2505
  }
2720
2506
 
2721
- .pf-v6-c-label.pf-m-info {
2722
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
2723
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
2724
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
2725
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
2726
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
2727
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
2728
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
2729
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
2730
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
2731
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
2507
+ .pf-v6-c-text-input-group__text-input::placeholder {
2508
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2732
2509
  }
2733
2510
 
2734
- .pf-v6-c-label.pf-m-custom {
2735
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
2736
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
2737
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
2738
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
2739
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
2740
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
2741
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
2742
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
2743
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
2744
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2511
+ .pf-v6-c-text-input-group__utilities {
2512
+ display: flex;
2513
+ align-items: center;
2514
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2515
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2745
2516
  }
2746
2517
 
2747
- .pf-v6-c-label.pf-m-compact {
2748
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
2749
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
2750
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
2751
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
2752
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
2753
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
2754
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
2518
+ .pf-v6-c-text-input-group__utilities > * + * {
2519
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2755
2520
  }
2756
2521
 
2757
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
2758
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
2522
+ .pf-v6-c-text-input-group__group {
2523
+ display: flex;
2759
2524
  }
2760
2525
 
2761
- .pf-v6-c-label.pf-m-outline {
2762
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
2763
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
2764
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
2765
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
2766
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
2767
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
2768
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2769
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2770
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
2771
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
2526
+ .pf-v6-c-badge {
2527
+ --pf-v6-c-badge--BorderColor: transparent;
2528
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2529
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2530
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2531
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2532
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2533
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2534
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2535
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2536
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2537
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2538
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2539
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2540
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2541
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2542
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2543
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2544
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2545
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2546
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2547
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2772
2548
  }
2773
2549
 
2774
- .pf-v6-c-label.pf-m-editable {
2775
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
2776
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
2550
+ .pf-v6-c-badge {
2551
+ position: relative;
2552
+ display: inline-block;
2553
+ min-width: var(--pf-v6-c-badge--MinWidth);
2554
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2555
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2556
+ font-size: var(--pf-v6-c-badge--FontSize);
2557
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2558
+ color: var(--pf-v6-c-badge--Color);
2559
+ text-align: center;
2560
+ white-space: nowrap;
2561
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2562
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2777
2563
  }
2778
2564
 
2779
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
2780
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
2781
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
2565
+ .pf-v6-c-badge::after {
2566
+ position: absolute;
2567
+ inset: 0;
2568
+ pointer-events: none;
2569
+ content: "";
2570
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2571
+ border-radius: inherit;
2782
2572
  }
2783
2573
 
2784
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
2785
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
2786
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
2787
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
2574
+ .pf-v6-c-badge.pf-m-read {
2575
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2576
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2577
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2578
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2788
2579
  }
2789
2580
 
2790
- .pf-v6-c-label.pf-m-editable-active {
2791
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
2792
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
2793
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
2794
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
2581
+ .pf-v6-c-badge.pf-m-unread {
2582
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2583
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2584
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2795
2585
  }
2796
2586
 
2797
- .pf-v6-c-label.pf-m-overflow {
2798
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
2799
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
2800
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
2587
+ .pf-v6-c-badge.pf-m-disabled {
2588
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2589
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2801
2590
  }
2802
2591
 
2803
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
2804
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
2805
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
2806
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
2592
+ .pf-v6-c-badge.pf-m-disabled::after {
2593
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2807
2594
  }
2808
2595
 
2809
- .pf-v6-c-label.pf-m-add {
2810
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
2811
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
2812
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
2813
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
2596
+ .pf-v6-c-badge__toggle-icon {
2597
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2598
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2814
2599
  }
2815
2600
 
2816
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
2817
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
2818
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
2819
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
2820
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
2601
+ .pf-v6-c-divider {
2602
+ --pf-v6-c-divider--Display: flex;
2603
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2604
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2605
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2821
2606
  }
2822
2607
 
2823
- .pf-v6-c-label.pf-m-clickable {
2824
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
2608
+ .pf-v6-c-divider {
2609
+ flex-direction: row;
2610
+ width: 100%;
2611
+ height: var(--pf-v6-c-divider--Size);
2612
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2613
+ --pf-v6-hidden-visible--hidden--Display: none;
2614
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2615
+ display: var(--pf-v6-hidden-visible--Display);
2825
2616
  }
2826
2617
 
2827
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2828
- text-decoration-line: none;
2618
+ .pf-v6-c-divider.pf-m-hidden {
2619
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2829
2620
  }
2830
2621
 
2831
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2832
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
2833
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2834
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
2835
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
2836
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
2837
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2838
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2622
+ @media screen and (min-width: 36rem) {
2623
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
2624
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2625
+ }
2626
+ .pf-v6-c-divider.pf-m-visible-on-sm {
2627
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2628
+ }
2839
2629
  }
2840
-
2841
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
2842
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2630
+ @media screen and (min-width: 48rem) {
2631
+ .pf-v6-c-divider.pf-m-hidden-on-md {
2632
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2633
+ }
2634
+ .pf-v6-c-divider.pf-m-visible-on-md {
2635
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2636
+ }
2843
2637
  }
2844
-
2845
- .pf-v6-c-label.pf-m-disabled {
2846
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
2847
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
2848
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
2849
- --pf-v6-c-label--BorderWidth: 0;
2850
- pointer-events: none;
2638
+ @media screen and (min-width: 62rem) {
2639
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
2640
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2641
+ }
2642
+ .pf-v6-c-divider.pf-m-visible-on-lg {
2643
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2644
+ }
2851
2645
  }
2852
-
2853
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
2854
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
2646
+ @media screen and (min-width: 75rem) {
2647
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
2648
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2649
+ }
2650
+ .pf-v6-c-divider.pf-m-visible-on-xl {
2651
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2652
+ }
2855
2653
  }
2856
-
2857
- .pf-v6-c-label,
2858
- .pf-v6-c-label__content {
2859
- display: inline-flex;
2860
- align-items: center;
2654
+ @media screen and (min-width: 90.625rem) {
2655
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
2656
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2657
+ }
2658
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
2659
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2660
+ }
2661
+ }
2662
+ .pf-v6-c-divider {
2663
+ flex-shrink: 0;
2664
+ align-items: stretch;
2665
+ align-self: stretch;
2861
2666
  justify-content: center;
2667
+ border: 0;
2862
2668
  }
2863
2669
 
2864
- .pf-v6-c-label__text {
2865
- overflow: hidden;
2866
- text-overflow: ellipsis;
2867
- white-space: nowrap;
2868
- max-width: var(--pf-v6-c-label__text--MaxWidth);
2670
+ .pf-v6-c-divider::before {
2671
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2672
+ content: "";
2673
+ background-color: var(--pf-v6-c-divider--Color);
2674
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2675
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2869
2676
  }
2870
2677
 
2871
- .pf-v6-c-label__content {
2872
- gap: var(--pf-v6-c-label__content--Gap);
2873
- max-width: var(--pf-v6-c-label__content--MaxWidth);
2874
- padding: 0;
2875
- overflow: hidden;
2876
- color: var(--pf-v6-c-label--Color);
2877
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
2878
- background: transparent;
2879
- border-width: 0;
2678
+ .pf-v6-c-divider.pf-m-horizontal {
2679
+ flex-direction: row;
2680
+ width: 100%;
2681
+ height: var(--pf-v6-c-divider--Size);
2880
2682
  }
2881
2683
 
2882
- .pf-v6-c-label__content::before {
2883
- position: absolute;
2884
- inset: 0;
2885
- z-index: -1;
2886
- pointer-events: none;
2887
- content: "";
2888
- background-color: var(--pf-v6-c-label--BackgroundColor);
2889
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
2890
- border-radius: var(--pf-v6-c-label--BorderRadius);
2684
+ .pf-v6-c-divider.pf-m-vertical {
2685
+ flex-direction: column;
2686
+ width: var(--pf-v6-c-divider--Size);
2687
+ height: inherit;
2891
2688
  }
2892
2689
 
2893
- input.pf-v6-c-label__content {
2894
- overflow: hidden;
2895
- text-overflow: ellipsis;
2896
- white-space: nowrap;
2690
+ .pf-v6-c-divider.pf-m-inset-none {
2691
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2897
2692
  }
2898
2693
 
2899
- .pf-v6-c-label__icon {
2900
- color: var(--pf-v6-c-label__icon--Color);
2694
+ .pf-v6-c-divider.pf-m-inset-xs {
2695
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2901
2696
  }
2902
2697
 
2903
- .pf-v6-c-label__actions {
2904
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2698
+ .pf-v6-c-divider.pf-m-inset-sm {
2699
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2905
2700
  }
2906
2701
 
2907
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
2908
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
2702
+ .pf-v6-c-divider.pf-m-inset-md {
2703
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2909
2704
  }
2910
2705
 
2911
- .pf-v6-c-label__actions .pf-v6-c-button {
2912
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2913
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2914
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2915
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2916
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2917
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2918
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2919
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2706
+ .pf-v6-c-divider.pf-m-inset-lg {
2707
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2920
2708
  }
2921
2709
 
2922
- .pf-v6-c-breadcrumb {
2923
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2924
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
2925
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2926
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
2927
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2928
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
2929
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2930
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2931
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
2932
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2933
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2934
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
2935
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2936
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2937
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
2938
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
2939
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
2940
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2941
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2942
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2943
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2710
+ .pf-v6-c-divider.pf-m-inset-xl {
2711
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2944
2712
  }
2945
2713
 
2946
- .pf-v6-c-breadcrumb {
2947
- display: inline-flex;
2714
+ .pf-v6-c-divider.pf-m-inset-2xl {
2715
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2948
2716
  }
2949
2717
 
2950
- .pf-v6-c-breadcrumb__list {
2951
- display: flex;
2952
- flex-wrap: wrap;
2953
- align-items: center;
2718
+ .pf-v6-c-divider.pf-m-inset-3xl {
2719
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2954
2720
  }
2955
2721
 
2956
- .pf-v6-c-breadcrumb__item {
2957
- display: flex;
2958
- align-items: baseline;
2959
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
2960
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
2961
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
2962
- white-space: nowrap;
2963
- list-style: none;
2722
+ @media (min-width: 36rem) {
2723
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
2724
+ flex-direction: row;
2725
+ width: 100%;
2726
+ height: var(--pf-v6-c-divider--Size);
2727
+ }
2964
2728
  }
2965
-
2966
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
2967
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2729
+ @media (min-width: 36rem) {
2730
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
2731
+ flex-direction: column;
2732
+ width: var(--pf-v6-c-divider--Size);
2733
+ height: inherit;
2734
+ }
2968
2735
  }
2969
-
2970
- .pf-v6-c-breadcrumb__item:not(:last-child) {
2971
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2736
+ @media (min-width: 36rem) {
2737
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
2738
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2739
+ }
2740
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2741
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2742
+ }
2743
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2744
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2745
+ }
2746
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
2747
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2748
+ }
2749
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2750
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2751
+ }
2752
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2753
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2754
+ }
2755
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2756
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2757
+ }
2758
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2759
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2760
+ }
2972
2761
  }
2973
-
2974
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
2975
- scale: -1 1;
2762
+ @media (min-width: 48rem) {
2763
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
2764
+ flex-direction: row;
2765
+ width: 100%;
2766
+ height: var(--pf-v6-c-divider--Size);
2767
+ }
2976
2768
  }
2977
-
2978
- .pf-v6-c-breadcrumb__item-divider {
2979
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
2980
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
2981
- line-height: 1;
2982
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
2769
+ @media (min-width: 48rem) {
2770
+ .pf-v6-c-divider.pf-m-vertical-on-md {
2771
+ flex-direction: column;
2772
+ width: var(--pf-v6-c-divider--Size);
2773
+ height: inherit;
2774
+ }
2983
2775
  }
2984
-
2985
- .pf-v6-c-breadcrumb__link {
2986
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
2987
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
2988
- font-size: inherit;
2989
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
2990
- line-height: inherit;
2991
- color: var(--pf-v6-c-breadcrumb__link--Color);
2992
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
2993
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
2994
- word-break: break-word;
2995
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2776
+ @media (min-width: 48rem) {
2777
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2778
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2779
+ }
2780
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2781
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2782
+ }
2783
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2784
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2785
+ }
2786
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2787
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2788
+ }
2789
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2790
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2791
+ }
2792
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2793
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2794
+ }
2795
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2796
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2797
+ }
2798
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2799
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2800
+ }
2801
+ }
2802
+ @media (min-width: 62rem) {
2803
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2804
+ flex-direction: row;
2805
+ width: 100%;
2806
+ height: var(--pf-v6-c-divider--Size);
2807
+ }
2996
2808
  }
2997
-
2998
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
2999
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3000
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3001
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
2809
+ @media (min-width: 62rem) {
2810
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2811
+ flex-direction: column;
2812
+ width: var(--pf-v6-c-divider--Size);
2813
+ height: inherit;
2814
+ }
3002
2815
  }
3003
-
3004
- .pf-v6-c-breadcrumb__link.pf-m-current {
3005
- cursor: default;
2816
+ @media (min-width: 62rem) {
2817
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2818
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2819
+ }
2820
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2821
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2822
+ }
2823
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2824
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2825
+ }
2826
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2827
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2828
+ }
2829
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2830
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2831
+ }
2832
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2833
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2834
+ }
2835
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2836
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2837
+ }
2838
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2839
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2840
+ }
3006
2841
  }
3007
-
3008
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3009
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3010
- text-decoration-line: none;
2842
+ @media (min-width: 75rem) {
2843
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2844
+ flex-direction: row;
2845
+ width: 100%;
2846
+ height: var(--pf-v6-c-divider--Size);
2847
+ }
3011
2848
  }
3012
-
3013
- button.pf-v6-c-breadcrumb__link {
3014
- border: none;
2849
+ @media (min-width: 75rem) {
2850
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2851
+ flex-direction: column;
2852
+ width: var(--pf-v6-c-divider--Size);
2853
+ height: inherit;
2854
+ }
3015
2855
  }
3016
-
3017
- .pf-v6-c-breadcrumb__dropdown {
3018
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3019
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3020
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3021
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
2856
+ @media (min-width: 75rem) {
2857
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2858
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2859
+ }
2860
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2861
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2862
+ }
2863
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2864
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2865
+ }
2866
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2867
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2868
+ }
2869
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2870
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2871
+ }
2872
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2873
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2874
+ }
2875
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2876
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2877
+ }
2878
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2879
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2880
+ }
3022
2881
  }
3023
-
3024
- .pf-v6-c-breadcrumb__heading {
3025
- display: inline;
3026
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2882
+ @media (min-width: 90.625rem) {
2883
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2884
+ flex-direction: row;
2885
+ width: 100%;
2886
+ height: var(--pf-v6-c-divider--Size);
2887
+ }
3027
2888
  }
3028
-
3029
- .pf-v6-c-breadcrumb__link,
3030
- .pf-v6-c-breadcrumb__heading {
3031
- white-space: normal;
2889
+ @media (min-width: 90.625rem) {
2890
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2891
+ flex-direction: column;
2892
+ width: var(--pf-v6-c-divider--Size);
2893
+ height: inherit;
2894
+ }
3032
2895
  }
3033
-
3034
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3035
- display: none;
2896
+ @media (min-width: 90.625rem) {
2897
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2898
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2899
+ }
2900
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2901
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2902
+ }
2903
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2904
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2905
+ }
2906
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2907
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2908
+ }
2909
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2910
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2911
+ }
2912
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2913
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2914
+ }
2915
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2916
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2917
+ }
2918
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2919
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2920
+ }
3036
2921
  }
3037
-
3038
2922
  .pf-v6-c-menu {
3039
2923
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
3040
2924
  --pf-v6-c-menu--Width: auto;
@@ -3731,6 +3615,122 @@ button.pf-v6-c-breadcrumb__link {
3731
3615
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3732
3616
  }
3733
3617
 
3618
+ .pf-v6-c-breadcrumb {
3619
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3620
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3621
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3622
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3623
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3624
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3625
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3626
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3627
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3628
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3629
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3630
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3631
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3632
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3633
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3634
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3635
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3636
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3637
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3638
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3639
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3640
+ }
3641
+
3642
+ .pf-v6-c-breadcrumb {
3643
+ display: inline-flex;
3644
+ }
3645
+
3646
+ .pf-v6-c-breadcrumb__list {
3647
+ display: flex;
3648
+ flex-wrap: wrap;
3649
+ align-items: center;
3650
+ }
3651
+
3652
+ .pf-v6-c-breadcrumb__item {
3653
+ display: flex;
3654
+ align-items: baseline;
3655
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3656
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3657
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3658
+ white-space: nowrap;
3659
+ list-style: none;
3660
+ }
3661
+
3662
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3663
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3664
+ }
3665
+
3666
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3667
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3668
+ }
3669
+
3670
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3671
+ scale: -1 1;
3672
+ }
3673
+
3674
+ .pf-v6-c-breadcrumb__item-divider {
3675
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3676
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3677
+ line-height: 1;
3678
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3679
+ }
3680
+
3681
+ .pf-v6-c-breadcrumb__link {
3682
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3683
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3684
+ font-size: inherit;
3685
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3686
+ line-height: inherit;
3687
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3688
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3689
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3690
+ word-break: break-word;
3691
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3692
+ }
3693
+
3694
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3695
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3696
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3697
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3698
+ }
3699
+
3700
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3701
+ cursor: default;
3702
+ }
3703
+
3704
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3705
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3706
+ text-decoration-line: none;
3707
+ }
3708
+
3709
+ button.pf-v6-c-breadcrumb__link {
3710
+ border: none;
3711
+ }
3712
+
3713
+ .pf-v6-c-breadcrumb__dropdown {
3714
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3715
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3716
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3717
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3718
+ }
3719
+
3720
+ .pf-v6-c-breadcrumb__heading {
3721
+ display: inline;
3722
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3723
+ }
3724
+
3725
+ .pf-v6-c-breadcrumb__link,
3726
+ .pf-v6-c-breadcrumb__heading {
3727
+ white-space: normal;
3728
+ }
3729
+
3730
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3731
+ display: none;
3732
+ }
3733
+
3734
3734
  .pf-v6-c-spinner {
3735
3735
  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3736
3736
  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);