@patternfly/elements 2.3.2 → 3.0.0

package/pf-button/pf-button.css

@@ -1,9 +1,10 @@
-/* hi */
-button {
-  color: var(--pf-c-button--m-primary--Color,
-    var(--pf-global--Color--light-100, #fff));
-  background-color: var(--pf-c-button--m-primary--BackgroundColor,
-    var(--pf-global--primary-color--100, #06c));
+:host {
+  position: relative;
+	font-size: var(--pf-c-button--FontSize);
+	font-weight: var(--pf-c-button--FontWeight);
+	line-height: var(--pf-c-button--LineHeight);
+	text-align: center;
+	white-space: nowrap;
   font-size: var(--pf-c-button--FontSize,
     var(--pf-global--FontSize--md, 1rem));
   font-weight: var(--pf-c-button--FontWeight,
@@ -19,40 +20,67 @@ button {
       var(--pf-global--spacer--form-element, 0.375rem))
     var(--pf-c-button--PaddingLeft,
       var(--pf-global--spacer--md, 1rem));
-}
-
-:host, button {
+  display: inline-block;
+  height: max-content;
+  cursor: pointer;
+  position: relative;
+  font-family: inherit;
+  border-width: 0;
+  border-style: solid;
   border-radius: var(--pf-c-button--BorderRadius,
     var(--pf-global--BorderRadius--sm, 3px));
 }
 
-pf-icon, ::slotted(pf-icon) {
-  color: currentColor;
+:host([hidden]),
+[hidden] {
+  display: none !important;
 }
 
-button::after {
-  border-color: var(--pf-c-button--after--BorderColor, transparent);
-  border-width: var(--pf-c-button--after--BorderWidth,
-    var(--pf-global--BorderWidth--sm, 1px));
-  border-radius: var(--pf-c-button--after--BorderRadius,
-    var(--pf-global--BorderRadius--sm, 3px));
+:host([inline]) {
+  display: inline;
+  --pf-c-button--PaddingTop: 0;
+  --pf-c-button--PaddingLeft: 0;
+  --pf-c-button--PaddingBottom: 0;
+  --pf-c-button--PaddingRight: 0;
 }
 
-button:active {
-  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color,
-    var(--pf-global--Color--light-100, #fff));
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor,
-    var(--pf-global--primary-color--200, #004080));
-  --pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth,
-    var(--pf-global--BorderWidth--md, 2px));
-  /* DANGER */
-  --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--active--Color,
-    var(--pf-global--Color--light-100, #fff));
-  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--active--BackgroundColor,
-    var(--pf-global--danger-color--200, #a30000));
+pf-icon,
+::slotted(pf-icon) {
+  color: currentcolor;
+  padding-inline-start: var(--_button-icon-padding-inline-start);
+  padding-inline-end: var(--_button-icon-padding-inline-end);
+  vertical-align: var(--_button-icon-vertical-align);
+}
+
+#button {
+  display: contents;
+  color: var(--_button-color);
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+    content: "";
+  }
+  &::before {
+    background-color: var(--_button-background-color);
+    border-radius: var(--pf-c-button--BorderRadius,
+      var(--pf-global--BorderRadius--sm, 3px));
+  }
+  &::after {
+    pointer-events: none;
+    border-style: solid;
+    border-width: var(--pf-c-button--after--BorderWidth);
+    border-color: var(--pf-c-button--after--BorderColor);
+    border-radius: var(--pf-c-button--after--BorderRadius);
+  }
+}
+
+#text {
+  display: inline;
+  position: relative;
 }
 
-button:focus {
+:host(:focus) {
   --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--focus--Color,
     var(--pf-global--Color--light-100, #fff));
   --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--focus--BackgroundColor,
@@ -64,9 +92,18 @@ button:focus {
     var(--pf-global--Color--light-100, #fff));
   --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--focus--BackgroundColor,
     var(--pf-global--danger-color--200, #a30000));
+  /* LINK */
+  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--focus--Color,
+    var(--pf-global--link--Color--hover, #004080));
+  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor, transparent);
+  /* PLAIN */
+  --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--focus--Color,
+    var(--pf-global--Color--100, #151515));
+  --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--focus--BackgroundColor,
+    transparent);
 }
 
-button:hover {
+:host(:hover) {
   --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color,
     var(--pf-global--Color--light-100, #fff));
   --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor,
@@ -78,49 +115,63 @@ button:hover {
     var(--pf-global--Color--light-100, #fff));
   --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--hover--BackgroundColor,
     var(--pf-global--danger-color--200, #a30000));
+  /* LINK */
+  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--hover--Color,
+    var(--pf-global--link--Color--hover, #004080));
+  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor, transparent);
+  /* PLAIN */
+  --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--hover--Color,
+    var(--pf-global--Color--100, #151515));
+  --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--hover--BackgroundColor,
+    transparent);
 }
 
-/******************************
- *                            *
- *          WARNING           *
- *                            *
- ******************************/
-
-:host([warning]) button {
-  color: var(--pf-c-button--m-warning--Color,
-    var(--pf-global--Color--dark-100, #151515));
-  background-color: var(--pf-c-button--m-warning--BackgroundColor,
-    var(--pf-global--warning-color--100, #f0ab00));
+:host(:active) {
+  --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color,
+    var(--pf-global--Color--light-100, #fff));
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor,
+    var(--pf-global--primary-color--200, #004080));
+  --pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth,
+    var(--pf-global--BorderWidth--md, 2px));
+  /* DANGER */
+  --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--active--Color,
+    var(--pf-global--Color--light-100, #fff));
+  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--active--BackgroundColor,
+    var(--pf-global--danger-color--200, #a30000));
+  /* LINK */
+  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color,
+    var(--pf-global--link--Color--hover, #004080));
+  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor, transparent);
 }
 
-:host([warning]) button:active {
-  --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--active--Color,
-    var(--pf-global--Color--dark-100, #151515));
-  --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--active--BackgroundColor,
-    var(--pf-global--palette--gold-500, #c58c00));
+.disabled,
+:host(:disabled),
+:host([danger]:disabled),
+:host([link]:disabled) .link {
+  pointer-events: none;
+  cursor: default;
 }
 
-:host([warning]) button:focus {
-  --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--focus--Color,
-    var(--pf-global--Color--dark-100, #151515));
-  --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--focus--BackgroundColor,
-    var(--pf-global--palette--gold-500, #c58c00));
+[part=icon] {
+  --pf-icon--size: 16px;
+  display: inline-flex;
+  align-items: center;
+  position: absolute;
+  & ::slotted(*) {
+    width: 16px;
+    max-width: 16px;
+    height: 16px;
+    max-height: 16px;
+  }
 }
 
-:host([warning]) button:hover {
-  --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--hover--Color,
-    var(--pf-global--Color--dark-100, #151515));
-  --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--hover--BackgroundColor,
-    var(--pf-global--palette--gold-500, #c58c00));
+.hasIcon [part=icon] {
+  cursor: pointer;
 }
 
-:host([disabled][warning]) button {
-  pointer-events: none;
-  cursor: default;
-  color: var(--pf-c-button--disabled--Color,
-    var(--pf-global--disabled-color--100, #6a6e73));
-  background-color: var(--pf-c-button--disabled--BackgroundColor,
-    var(--pf-global--disabled-color--200, #d2d2d2));
+.hasIcon #button {
+  position: absolute;
+  inset: 0;
 }
 
 /******************************
@@ -129,88 +180,92 @@ button:hover {
  *                            *
  ******************************/
 
-:host([plain]) {
+#button.plain {
   --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-plain--disabled--BackgroundColor, transparent);
-}
-
-:host([plain]) button {
-  --pf-c-button--after--BorderWidth: 0;
+  --pf-c-button--after--BorderWidth: 0 !important;
   --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor,
     var(--pf-global--Color--100, #151515));
   --pf-c-button--disabled--Color: var(--pf-c-button--m-plain--disabled--Color,
     var(--pf-global--disabled-color--200, #d2d2d2));
-  color: var(--pf-c-button--m-plain--Color,
+  --_button-color: var(--pf-c-button--m-plain--Color,
     var(--pf-global--Color--200, #6a6e73));
-  background-color: var(--pf-c-button--m-plain--BackgroundColor,
-    transparent);
-}
-
-:host([plain]) button:active {
-  --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--active--Color,
-    var(--pf-global--Color--100, #151515));
-  --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--active--BackgroundColor,
-    tranparent);
-}
-
-:host([plain]) button:focus {
-  --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--focus--Color,
-    var(--pf-global--Color--100, #151515));
-  --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--focus--BackgroundColor,
-    transparent);
-}
-
-:host([plain]) button:hover {
-  --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--hover--Color,
-    var(--pf-global--Color--100, #151515));
-  --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--hover--BackgroundColor,
+  --_button-background-color: var(--pf-c-button--m-plain--BackgroundColor,
     transparent);
-}
-
-:host([plain]) .hasIcon [part=icon],
-:host([loading][plain]) [part=icon] {
-  left: 16px;
-}
-
-:host([plain][disabled]),
-:host([plain][disabled][variant=link]) button,
-:host([plain][disabled]) button,
-:host([plain]) button[aria-disabled=true],
-:host([plain]) button:disabled {
-  color: var(--pf-c-button--disabled--Color,
-    var(--pf-c-button--m-plain--disabled--Color,
-      var(--pf-global--disabled--color--200, #d2d2d2)));
+  :host(:active) & {
+    --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--active--Color,
+      var(--pf-global--Color--100, #151515));
+    --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--active--BackgroundColor,
+      tranparent);
+  }
+  &:not(.hasIcon) [part=icon],
+  &.loading [part=icon] {
+    left: 16px;
+  }
+  & [part=icon] {
+    display: contents;
+  }
+  &.disabled,
+  &.link.disabled {
+    --_button-color: var(--pf-c-button--disabled--Color,
+      var(--pf-c-button--m-plain--disabled--Color,
+        var(--pf-global--disabled--color--200, #d2d2d2)));
+  }
+}
+
+.hasIcon:not(.plain) [part=icon] {
+  position: relative;
 }
 
 /******************************
  *                            *
- *            ICON            *
+ *    ICON POSITION RIGHT     *
  *                            *
  ******************************/
 
-.hasIcon {
-  gap: calc(2 * var(--pf-c-button__icon--m-start--MarginLeft,
-    var(--pf-global--spacer--xs, 0.25rem)));
+:host([icon-position=right]) .loading [part=icon] {
+  order: 1;
 }
 
-.hasIcon [part=icon] {
-  --pf-icon--size: 16px;
-  position: relative;
+:host([icon-position=right]) #button.hasIcon  {
+  padding-left: var(--pf-c-button--PaddingLeft, var(--pf-global--spacer--md, 1rem));
+  padding-right: calc(16px + 8px + var(--pf-c-button--PaddingRight, var(--pf-global--spacer--md, 1rem)));
 }
 
 /******************************
  *                            *
- *    ICON POSITION RIGHT     *
+ *          WARNING           *
  *                            *
  ******************************/
 
-:host([icon-position=right]) .hasIcon [part=icon],
-:host([icon-position=right][loading]) [part=icon] {
-  order: 1;
-}
-
-:host([icon-position=right]) .hasIcon button {
-  padding-left: var(--pf-c-button--PaddingLeft, var(--pf-global--spacer--md, 1rem));
-  padding-right: calc(16px + 8px + var(--pf-c-button--PaddingRight, var(--pf-global--spacer--md, 1rem)));
+#button.warning {
+  --_button-color: var(--pf-c-button--m-warning--Color,
+    var(--pf-global--Color--dark-100, #151515));
+  --_button-background-color: var(--pf-c-button--m-warning--BackgroundColor,
+    var(--pf-global--warning-color--100, #f0ab00));
+  :host(:focus) & {
+    --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--focus--Color,
+      var(--pf-global--Color--dark-100, #151515));
+    --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--focus--BackgroundColor,
+      var(--pf-global--palette--gold-500, #c58c00));
+  }
+  :host(:hover) & {
+    --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--hover--Color,
+      var(--pf-global--Color--dark-100, #151515));
+    --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--hover--BackgroundColor,
+      var(--pf-global--palette--gold-500, #c58c00));
+  }
+  :host(:active) & {
+    --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--active--Color,
+      var(--pf-global--Color--dark-100, #151515));
+    --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--active--BackgroundColor,
+      var(--pf-global--palette--gold-500, #c58c00));
+  }
+  &.disabled {
+    --_button-color: var(--pf-c-button--disabled--Color,
+      var(--pf-global--disabled-color--100, #6a6e73));
+    --_button-background-color: var(--pf-c-button--disabled--BackgroundColor,
+      var(--pf-global--disabled-color--200, #d2d2d2));
+  }
 }
 
 /******************************
@@ -219,44 +274,42 @@ button:hover {
  *                            *
  ******************************/
 
-:host([loading]) button {
+:host([loading]) {
   position: relative;
   display: flex;
   align-items: center;
 }
 
-:host([loading]) button [part=icon] {
-  display: inline-block;
-  z-index: 1;
-  position: absolute;
-  cursor: pointer;
-  top: var(--pf-c-button__progress--Top, 50%);
-  left: var(--pf-c-button__progress--Left,
-    var(--pf-global--spacer--md, 1rem));
-  line-height: 1;
-  transform: translate(
-    var(--pf-c-button__progress--TranslateX, 0),
-    var(--pf-c-button__progress--TranslateY, -50%));
-  margin-inline-end: var(--pf-c-button__icon--m-start--MarginRight,
-    var(--pf-global--spacer--xs, 0.25rem));
-}
-
-:host([loading][variant=primary]:not([plain])),
-:host([loading][danger]) {
-  --pf-c-spinner--Color: white;
-}
-
-:host([loading]:not([plain])) {
-  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight,
-    var(--pf-global--spacer--md, 1rem));
-  --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft,
-    calc(
-      var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width,
-        calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem))) / 2));
-}
+#button.loading {
+  & [part=icon] {
+    display: inline-block;
+    z-index: 1;
+    position: absolute;
+    cursor: pointer;
+    top: var(--pf-c-button__progress--Top, 50%);
+    left: var(--pf-c-button__progress--Left,
+      var(--pf-global--spacer--md, 1rem));
+    line-height: 1;
+    transform: translate(
+      var(--pf-c-button__progress--TranslateX, 0),
+      var(--pf-c-button__progress--TranslateY, -50%));
+    margin-inline-end: var(--pf-c-button__icon--m-start--MarginRight,
+      var(--pf-global--spacer--xs, 0.25rem));
+  }
+  &.primary:not(.plain),
+  &.danger {
+    --pf-c-spinner--Color: white;
+  }
+  &:not(.plain) {
+    padding-left: calc(12px + var(--pf-c-button--PaddingLeft, var(--pf-global--spacer--md, 1rem)));
+    --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight,
+      var(--pf-global--spacer--md, 1rem));
+    --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft,
+      calc(
+        var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width,
+          calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem))) / 2));
+  }
 
-:host([loading]:not([plain])) button {
-  padding-left: calc(12px + var(--pf-c-button--PaddingLeft, var(--pf-global--spacer--md, 1rem)));
 }
 
 /******************************
@@ -265,78 +318,68 @@ button:hover {
  *                            *
  ******************************/
 
-:host([variant=secondary]) {
+#button.secondary {
   --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--Color,
     var(--pf-global--danger-color--100, #c9190b));
   --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent);
-}
-
-:host([variant=secondary]) button {
-  color: var(--pf-c-button--m-secondary--Color,
+  --_button-color: var(--pf-c-button--m-secondary--Color,
     var(--pf-global--primary-color--100, #06c));
-  background-color: var(--pf-c-button--m-secondary--BackgroundColor, transparent);
+  --_button-background-color: var(--pf-c-button--m-secondary--BackgroundColor, transparent);
   --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor,
     var(--pf-global--primary-color--100, #06c));
-}
-
-:host([variant=secondary]) button:active {
-  --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--active--Color,
-    var(--pf-global--primary-color--100, #06c));
-  --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--active--BackgroundColor, transparent);
-  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--active--after--BorderColor,
-    var(--pf-global--primary-color--100, #06c));
-  /* DANGER */
-  --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--active--Color,
-    var(--pf-global--danger--color--200, #a30000));
-  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor, transparent);
-}
-
-:host([variant=secondary]) button:focus {
-  --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--focus--Color,
-    var(--pf-global--primary-color--100, #06c));
-  --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--focus--BackgroundColor, transparent);
-  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--focus--after--BorderColor,
-    var(--pf-global--primary-color--100, #06c));
-  /* DANGER */
-  --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--focus--Color,
-    var(--pf-global--danger--color--200, #a30000));
-  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--focus--BackgroundColor, transparent);
-}
-
-:host([variant=secondary]) button:hover {
-  --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--hover--Color,
-    var(--pf-global--primary-color--100, #06c));
-  --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--hover--BackgroundColor,
-    transparent);
-  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--hover--after--BorderColor,
-    var(--pf-global--primary-color--100, #06c));
-  /* DANGER */
-  --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--hover--Color,
-    var(--pf-global--danger--color--200, #a30000));
-  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor, transparent);
-}
-
-:host([variant=secondary][danger]) button {
-  color: var(--pf-c-button--m-secondary--m-danger--Color,
-    var(--pf-global--danger--color--100, #c9190b));
-  background-color: var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent);
-  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--after--BorderColor,
-    var(--pf-global--danger--color--100, #c9190b));
-}
-
-:host([variant=secondary][danger]) button:active {
-  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor,
-    var(--pf-global--danger--color--100, #c9190b));
-}
-
-:host([variant=secondary][danger]) button:focus {
-  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--focus--after--BorderColor,
-    var(--pf-global--danger--color--100, #c9190b));
-}
-
-:host([variant=secondary][danger]) button:hover {
-  --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor,
-    var(--pf-global--danger--color--100, #c9190b));
+  :host(:focus) & {
+    --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--focus--Color,
+      var(--pf-global--primary-color--100, #06c));
+    --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--focus--BackgroundColor, transparent);
+    --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--focus--after--BorderColor,
+      var(--pf-global--primary-color--100, #06c));
+    /* DANGER */
+    --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--focus--Color,
+      var(--pf-global--danger--color--200, #a30000));
+    --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--focus--BackgroundColor, transparent);
+  }
+  :host(:hover) & {
+    --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--hover--Color,
+      var(--pf-global--primary-color--100, #06c));
+    --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--hover--BackgroundColor,
+      transparent);
+    --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--hover--after--BorderColor,
+      var(--pf-global--primary-color--100, #06c));
+    /* DANGER */
+    --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--hover--Color,
+      var(--pf-global--danger--color--200, #a30000));
+    --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor, transparent);
+  }
+  :host(:active) & {
+    --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--active--Color,
+      var(--pf-global--primary-color--100, #06c));
+    --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--active--BackgroundColor, transparent);
+    --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--active--after--BorderColor,
+      var(--pf-global--primary-color--100, #06c));
+    /* DANGER */
+    --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--active--Color,
+      var(--pf-global--danger--color--200, #a30000));
+    --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor, transparent);
+  }
+  &.danger {
+    --_button-color: var(--pf-c-button--m-secondary--m-danger--Color,
+      var(--pf-global--danger--color--100, #c9190b));
+    --_button-background-color: var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent);
+    --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--after--BorderColor,
+      var(--pf-global--danger--color--100, #c9190b));
+    :host(:focus) & {
+      --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--focus--after--BorderColor,
+        var(--pf-global--danger--color--100, #c9190b));
+    }
+    :host(:hover) & {
+      --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor,
+        var(--pf-global--danger--color--100, #c9190b));
+    }
+    :host(:active) & {
+      --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor,
+        var(--pf-global--danger--color--100, #c9190b));
+    }
+  }
 }
 
 /******************************
@@ -345,37 +388,34 @@ button:hover {
  *                            *
  ******************************/
 
-:host([variant=tertiary]) button {
+#button.tertiary {
   --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor,
     var(--pf-global--Color--100, #151515));
-  color: var(--pf-c-button--m-tertiary--Color,
-    var(--pf-global--Color--100, #151515));
-  background-color: var(--pf-c-button--m-tertiary--BackgroundColor, transparent);
-}
-
-:host([variant=tertiary]) button:active {
-  --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--active--Color,
-    var(--pf-global--Color--100, #151515));
-  --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--active--BackgroundColor, transparent);
-  --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--active--after--BorderColor,
-    var(--pf-global--Color--100, #151515));
-}
-
-:host([variant=tertiary]) button:focus {
-  --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--focus--Color,
-    var(--pf-global--Color--100, #151515));
-  --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--focus--BackgroundColor,
-    transparent);
-  --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--focus--after--BorderColor,
-    var(--pf-global--Color--100, #151515));
-}
-
-:host([variant=tertiary]) button:hover {
-  --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--hover--Color,
-    var(--pf-global--Color--100, #151515));
-  --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--hover--BackgroundColor, transparent);
-  --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--hover--after--BorderColor,
+  --_button-color: var(--pf-c-button--m-tertiary--Color,
     var(--pf-global--Color--100, #151515));
+  --_button-background-color: var(--pf-c-button--m-tertiary--BackgroundColor, transparent);
+  :host(:focus) & {
+    --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--focus--Color,
+      var(--pf-global--Color--100, #151515));
+    --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--focus--BackgroundColor,
+      transparent);
+    --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--focus--after--BorderColor,
+      var(--pf-global--Color--100, #151515));
+  }
+  :host(:hover) & {
+    --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--hover--Color,
+      var(--pf-global--Color--100, #151515));
+    --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--hover--BackgroundColor, transparent);
+    --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--hover--after--BorderColor,
+      var(--pf-global--Color--100, #151515));
+  }
+  :host(:active) & {
+    --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--active--Color,
+      var(--pf-global--Color--100, #151515));
+    --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--active--BackgroundColor, transparent);
+    --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--active--after--BorderColor,
+      var(--pf-global--Color--100, #151515));
+  }
 }
 
 /******************************
@@ -384,7 +424,7 @@ button:hover {
  *                            *
  ******************************/
 
-:host([variant=control]) button {
+#button.control {
   --pf-c-button--BorderRadius: var(--pf-c-button--m-control--BorderRadius, 0);
   --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-control--disabled--BackgroundColor,
     var(--pf-global--disabled-color--300, #f0f0f0));
@@ -400,52 +440,46 @@ button:hover {
       var(--pf-global--BorderColor--200, #8a8d90))
     var(--pf-c-button--m-control--after--BorderLeftColor,
       var(--pf-global--BorderColor--300, #f0f0f0));
-  color: var(--pf-c-button--m-control--Color,
-    var(--pf-global--Color--100, #151515));
-  background-color: var(--pf-c-button--m-control--BackgroundColor,
-    var(--pf-global--BackgroundColor--100, #fff));
-}
-
-:host([variant=control]) button:active {
-  --pf-c-button--m-control--Color: var(--pf-c-button--m-control--active--Color,
+  --_button-color: var(--pf-c-button--m-control--Color,
     var(--pf-global--Color--100, #151515));
-  --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--active--BackgroundColor,
+  --_button-background-color: var(--pf-c-button--m-control--BackgroundColor,
     var(--pf-global--BackgroundColor--100, #fff));
-  --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--active--after--BorderBottomColor,
-    var(--pf-global--active-color--100, #06c));
-}
-
-:host([variant=control]) button:focus {
-  --pf-c-button--m-control--Color: var(--pf-c-button--m-control--focus--Color,
-    var(--pf-global--Color--100, #151515));
-  --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--focus--BackgroundColor,
-    var(--pf-global--BackgroundColor--100, #fff));
-  --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--focus--after--BorderBottomColor,
-    var(--pf-global--active-color--100, #06c));
-}
-
-:host([variant=control]) button:hover {
-  --pf-c-button--m-control--Color: var(--pf-c-button--m-control--hover--Color,
-    var(--pf-global--Color--100, #151515));
-  --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--hover--BackgroundColor,
-    var(--pf-global--BackgroundColor--100, #fff));
-  --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--hover--after--BorderBottomColor,
-    var(--pf-global--active-color--100, #06c));
-}
-
-:host([variant=control]) button:active::after {
-  border-block-end-width: var(--pf-c-button--m-control--active--after--BorderBottomWidth,
-    var(--pf-global--BorderWidth--md, 2px));
-}
-
-:host([variant=control]) button:focus::after {
-  border-block-end-width: var(--pf-c-button--m-control--focus--after--BorderBottomWidth,
-    var(--pf-global--BorderWidth--md, 2px));
-}
-
-:host([variant=control]) button:hover::after {
-  border-block-end-width: var(--pf-c-button--m-control--hover--after--BorderBottomWidth,
-    var(--pf-global--BorderWidth--md, 2px));
+  :host(:focus) & {
+    --pf-c-button--m-control--Color: var(--pf-c-button--m-control--focus--Color,
+      var(--pf-global--Color--100, #151515));
+    --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--focus--BackgroundColor,
+      var(--pf-global--BackgroundColor--100, #fff));
+    --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--focus--after--BorderBottomColor,
+      var(--pf-global--active-color--100, #06c));
+    &::after {
+      border-block-end-width: var(--pf-c-button--m-control--focus--after--BorderBottomWidth,
+        var(--pf-global--BorderWidth--md, 2px));
+    }
+  }
+  :host(:hover) & {
+    --pf-c-button--m-control--Color: var(--pf-c-button--m-control--hover--Color,
+      var(--pf-global--Color--100, #151515));
+    --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--hover--BackgroundColor,
+      var(--pf-global--BackgroundColor--100, #fff));
+    --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--hover--after--BorderBottomColor,
+      var(--pf-global--active-color--100, #06c));
+    &::after {
+      border-block-end-width: var(--pf-c-button--m-control--hover--after--BorderBottomWidth,
+        var(--pf-global--BorderWidth--md, 2px));
+    }
+  }
+  :host(:active) & {
+    --pf-c-button--m-control--Color: var(--pf-c-button--m-control--active--Color,
+      var(--pf-global--Color--100, #151515));
+    --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--active--BackgroundColor,
+      var(--pf-global--BackgroundColor--100, #fff));
+    --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--active--after--BorderBottomColor,
+      var(--pf-global--active-color--100, #06c));
+    &::after {
+      border-block-end-width: var(--pf-c-button--m-control--active--after--BorderBottomWidth,
+        var(--pf-global--BorderWidth--md, 2px));
+    }
+  }
 }
 
 /******************************
@@ -454,90 +488,37 @@ button:hover {
  *                            *
  ******************************/
 
-:host([variant=link]) button {
-  color: var(--pf-c-button--m-link--Color,
-    var(--pf-global--link--Color, #06c));
-}
-
-:host([variant=link]) button {
-  background-color: var(--pf-c-button--m-link--BackgroundColor,
-    var(--pf-c-button--m-link--hover--BackgroundColor, transparent));
-}
-
-:host([variant=link][inline]),
-:host([variant=link][inline]) button {
-  display: inline;
-}
-
-:host([variant=link][inline]) {
-  --pf-c-button--PaddingTop: 0;
-  --pf-c-button--PaddingLeft: 0;
-  --pf-c-button--PaddingBottom: 0;
-  --pf-c-button--PaddingRight: 0;
-}
-
-:host([variant=link][inline]) button:hover {
-  text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration,
-    var(--pf-global--link--TextDecoration--hover, underline));
-}
-
-:host([variant=link]) {
+#button.link {
   --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor, transparent);
-}
-
-:host(:hover) {
-  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--hover--Color,
-    var(--pf-global--link--Color--hover, #004080));
-  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor, transparent);
-}
-
-:host(:focus),
-:host(:focus-within) {
-  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--focus--Color,
-    var(--pf-global--link--Color--hover, #004080));
-  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor, transparent);
-}
-
-:host(:not([inline])) button:active {
-  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color,
-    var(--pf-global--link--Color--hover, #004080));
-  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor, transparent);
-}
-
-:host(:not([inline]):has(button:active)) {
-  --pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color,
-    var(--pf-global--link--Color--hover, #004080));
-  --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor, transparent);
-}
-
-:host([variant=link][danger]) button {
-  --pf-c-button--m-danger--Color: var(--pf-c-button--m-link--m-danger--Color,
-      var(--pf-global--danger-color--100, #c9190b));
-  --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--BackgroundColor, transparent);
-}
-
-:host([variant=link][danger]) button:hover {
-  --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--hover--Color,
-      var(--pf-global--danger-color--200, #a30000));
-  --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--hover--BackgroundColor, transparent);
-}
-
-:host([variant=link][danger]) button:active {
-  --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--active--Color,
-    var(--pf-global--danger-color--200, #a30000));
-  --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent);
-}
-
-:host([variant=link][danger]:has(button:active)) {
-  --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--active--Color,
-    var(--pf-global--danger-color--200, #a30000));
-  --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent);
-}
-
-:host([variant=link][danger]:is(:focus, :focus-within)) {
-  --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--focus--Color,
-    var(--pf-global--danger-color--200, #a30000));
-  --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--focus--BackgroundColor, transparent);
+  --_button-color: var(--pf-c-button--m-link--Color, var(--pf-global--link--Color, #06c));
+  --_button-background-color: var(--pf-c-button--m-link--BackgroundColor,
+    var(--pf-c-button--m-link--BackgroundColor, transparent));
+  &.inline {
+    :host(:hover) & {
+      text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration,
+        var(--pf-global--link--TextDecoration--hover, underline));
+    }
+  }
+  &.danger {
+    --pf-c-button--m-danger--Color: var(--pf-c-button--m-link--m-danger--Color,
+        var(--pf-global--danger-color--100, #c9190b));
+    --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--BackgroundColor, transparent);
+    :host(:hover) & {
+      --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--hover--Color,
+          var(--pf-global--danger-color--200, #a30000));
+      --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--hover--BackgroundColor, transparent);
+    }
+    :host(:focus) & {
+      --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--focus--Color,
+        var(--pf-global--danger-color--200, #a30000));
+      --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--focus--BackgroundColor, transparent);
+    }
+    :host(:active) & {
+      --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--active--Color,
+        var(--pf-global--danger-color--200, #a30000));
+      --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent);
+    }
+  }
 }
 
 /******************************
@@ -546,18 +527,21 @@ button:hover {
  *                            *
  ******************************/
 
-:host(:is(:disabled, [aria-disabled=true])),
-:host(:is(:disabled, [aria-disabled=true])) button,
-:host(:is(:disabled, [aria-disabled=true])[danger]) button,
-:host(:is(:disabled, [aria-disabled=true])[variant=link]) button {
-  color: var(--pf-c-button--disabled--Color,
-    var(--pf-global--disabled-color--100, #6a6e73));
-  background-color: var(--pf-c-button--disabled--BackgroundColor,
-    var(--pf-global--disabled-color--200, #d2d2d2));
+:host(:is(:disabled,[disabled])) {
+  pointer-events: none;
+  cursor: default;
 }
 
-:host(:is(:disabled, [aria-disabled=true])) button::after {
-  border-color: var(--pf-c-button--disabled--after--BorderColor, transparent);
+#button.disabled {
+  &:not(.plain) {
+    --_button-color: var(--pf-c-button--disabled--Color,
+      var(--pf-global--disabled-color--100, #6a6e73));
+    --_button-background-color: var(--pf-c-button--disabled--BackgroundColor,
+      var(--pf-global--disabled-color--200, #d2d2d2));
+  }
+  &::after {
+    border-color: var(--pf-c-button--disabled--after--BorderColor, transparent);
+  }
 }
 
 /******************************
@@ -566,8 +550,7 @@ button:hover {
  *                            *
  ******************************/
 
-:host([block]),
-:host([block]) button {
+:host([block]) {
   display: flex;
   width: 100%;
   justify-content: center;
@@ -579,7 +562,7 @@ button:hover {
  *                            *
  ******************************/
 
-:host([size=large]) button {
+:host([size="large"]) {
   --pf-c-button--PaddingTop: var(--pf-c-button--m-display-lg--PaddingTop,
     var(--pf-global--spacer--md, 1rem));
   --pf-c-button--PaddingRight: var(--pf-c-button--m-display-lg--PaddingRight,
@@ -598,7 +581,7 @@ button:hover {
  *                            *
  ******************************/
 
-:host([size=small]) button {
+:host([size="small"]) {
   --pf-c-button--FontSize: var(--pf-c-button--m-small--FontSize,
     var(--pf-global--FontSize--md, 1rem));
 }
@@ -609,10 +592,10 @@ button:hover {
  *                            *
  ******************************/
 
-:host([danger]) button {
-  color: var(--pf-c-button--m-danger--Color,
+#button.danger {
+  --_button-color: var(--pf-c-button--m-danger--Color,
     var(--pf-global--Color--light-100, #fff));
-  background-color: var(--pf-c-button--m-danger--BackgroundColor,
+  --_button-background-color: var(--pf-c-button--m-danger--BackgroundColor,
     var(--pf-global--danger-color--100, #c9190b));
 }