• Home
• org.mvnpm.at.patternfly
• patternfly
• 6.0.0
• source code
• button.scss

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

package.components.Button.button.scss Maven / Gradle / Ivy

@use '../../sass-utilities' as *;

@include pf-root($button) {
  --#{$button}--Display: inline-flex;
  --#{$button}--AlignItems: baseline;
  --#{$button}--JustifyContent: center;
  --#{$button}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
  --#{$button}--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--PaddingBlockStart) + var(--#{$button}--PaddingBlockEnd));
  --#{$button}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
  --#{$button}--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
  --#{$button}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
  --#{$button}--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
  --#{$button}--Color: var(--pf-t--global--text--color--regular);
  --#{$button}--LineHeight: var(--pf-t--global--font--line-height--body);
  --#{$button}--FontWeight: var(--pf-t--global--font--weight--body--default);
  --#{$button}--FontSize: var(--pf-t--global--font--size--body--default);
  --#{$button}--BackgroundColor: transparent;
  --#{$button}--BorderColor: transparent;
  --#{$button}--BorderWidth: var(--pf-t--global--border--width--action--default);
  --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
  --#{$button}--TextDecorationLine: none;
  --#{$button}--TextDecorationStyle: none;
  --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
  --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
  --#{$button}--TransitionProperty: color, background-color, border-width, border-color, padding;

  // Hover
  --#{$button}--hover--BackgroundColor: transparent;
  --#{$button}--hover--BorderColor: transparent;
  --#{$button}--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
  --#{$button}--hover--TextDecorationLine: none;
  --#{$button}--hover--TextDecorationStyle: none;

  // Clicked
  --#{$button}--m-clicked--BackgroundColor: transparent;
  --#{$button}--m-clicked--BorderColor: transparent;
  --#{$button}--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);

  // Primary
  --#{$button}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
  --#{$button}--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
  --#{$button}--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
  --#{$button}--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
  --#{$button}--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
  --#{$button}--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
  --#{$button}--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
  --#{$button}--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
  --#{$button}--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);

  // Secondary
  --#{$button}--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
  --#{$button}--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
  --#{$button}--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
  --#{$button}--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
  --#{$button}--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
  --#{$button}--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
  --#{$button}--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
  --#{$button}--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
  --#{$button}--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
  --#{$button}--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
  --#{$button}--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
  --#{$button}--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
  --#{$button}--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
  --#{$button}--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
  --#{$button}--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
  --#{$button}--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
  --#{$button}--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
  --#{$button}--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
  --#{$button}--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);

  // Tertiary
  --#{$button}--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
  --#{$button}--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
  --#{$button}--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
  --#{$button}--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
  --#{$button}--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
  --#{$button}--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
  --#{$button}--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
  --#{$button}--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
  --#{$button}--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
  --#{$button}--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);

  // Link
  --#{$button}--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
  --#{$button}--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
  --#{$button}--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
  --#{$button}--m-link--Color: var(--pf-t--global--text--color--brand--default);
  --#{$button}--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
  --#{$button}--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
  --#{$button}--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
  --#{$button}--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
  --#{$button}--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
  --#{$button}--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
  --#{$button}--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
  --#{$button}--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);

  // Link danger
  --#{$button}--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
  --#{$button}--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
  --#{$button}--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
  --#{$button}--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
  --#{$button}--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
  --#{$button}--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
  --#{$button}--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
  --#{$button}--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
  --#{$button}--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);

  // Link inline
  --#{$button}--m-link--m-inline--Display: inline-flex;
  --#{$button}--m-link--m-inline--JustifyContent: flex-start;
  --#{$button}--m-link--m-inline--FontSize: initial;
  --#{$button}--m-link--m-inline--LineHeight: initial;
  --#{$button}--m-link--m-inline--FontWeight: initial;
  --#{$button}--m-link--m-inline--PaddingBlockStart: 0;
  --#{$button}--m-link--m-inline--PaddingInlineEnd: 0;
  --#{$button}--m-link--m-inline--PaddingBlockEnd: 0;
  --#{$button}--m-link--m-inline--PaddingInlineStart: 0;
  --#{$button}--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
  --#{$button}--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
  --#{$button}--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
  --#{$button}--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
  --#{$button}--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
  --#{$button}--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--#{$button}--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
  --#{$button}--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
  --#{$button}--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
  --#{$button}--span--m-link--m-inline--Display: inline;
  --#{$button}--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
  --#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);

  // Plain
  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
  --#{$button}--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
  --#{$button}--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
  --#{$button}--m-plain--Color: var(--pf-t--global--icon--color--regular);
  --#{$button}--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
  --#{$button}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
  --#{$button}--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
  --#{$button}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
  --#{$button}--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
  --#{$button}--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
  --#{$button}--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
  --#{$button}--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
  --#{$button}--m-plain--disabled--BackgroundColor: transparent;
  --#{$button}--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
  --#{$button}--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);

  // Plain no padding
  --#{$button}--m-plain--m-no-padding--MinWidth: auto;
  --#{$button}--m-plain--m-no-padding--PaddingBlockStart: 0;
  --#{$button}--m-plain--m-no-padding--PaddingInlineEnd: 0;
  --#{$button}--m-plain--m-no-padding--PaddingBlockEnd: 0;
  --#{$button}--m-plain--m-no-padding--PaddingInlineStart: 0;
  --#{$button}--m-plain--m-no-padding__icon--Color: var(--pf-t--global--icon--color--subtle);
  --#{$button}--m-plain--m-no-padding--BackgroundColor: transparent;
  --#{$button}--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
  --#{$button}--m-plain--m-no-padding--hover--BackgroundColor: transparent;
  --#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
  --#{$button}__progress--Color: var(--#{$button}__icon--Color);

  // Control
  --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
  --#{$button}--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
  --#{$button}--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
  --#{$button}--m-control--Color: var(--pf-t--global--text--color--regular);
  --#{$button}--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
  --#{$button}--m-control--BorderColor: var(--pf-t--global--border--color--default);
  --#{$button}--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
  --#{$button}--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
  --#{$button}--m-control--hover--Color: var(--pf-t--global--text--color--regular);
  --#{$button}--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
  --#{$button}--m-control--hover--BorderColor: var(--pf-t--global--border--color--hover);
  --#{$button}--m-control--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
  --#{$button}--m-control--hover__icon--Color: var(--pf-t--global--icon--color--regular);
  --#{$button}--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
  --#{$button}--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
  --#{$button}--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
  --#{$button}--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
  --#{$button}--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);

  // Stateful
  --#{$button}--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
  --#{$button}--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
  --#{$button}--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);

  // Read
  --#{$button}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
  --#{$button}--m-read--BorderColor: var(--pf-t--global--border--color--default);
  --#{$button}--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
  --#{$button}--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
  --#{$button}--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
  --#{$button}--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);

  // Unread
  --#{$button}--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
  --#{$button}--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default);
  --#{$button}--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
  --#{$button}--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
  --#{$button}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--hover);
  --#{$button}--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
  --#{$button}--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
  --#{$button}--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--clicked);
  --#{$button}--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);

  // Attention
  --#{$button}--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
  --#{$button}--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
  --#{$button}--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default);
  --#{$button}--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover);
  --#{$button}--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover);
  --#{$button}--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover);
  --#{$button}--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked);
  --#{$button}--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked);
  --#{$button}--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked);

  // Warning
  --#{$button}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
  --#{$button}--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
  --#{$button}--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
  --#{$button}--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
  --#{$button}--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
  --#{$button}--m-warning--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
  --#{$button}--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked);
  --#{$button}--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked);
  --#{$button}--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked);

  // Danger
  --#{$button}--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
  --#{$button}--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
  --#{$button}--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
  --#{$button}--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
  --#{$button}--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
  --#{$button}--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
  --#{$button}--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
  --#{$button}--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
  --#{$button}--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);

  // CTA
  --#{$button}--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious);
  --#{$button}--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
  --#{$button}--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
  --#{$button}--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
  --#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
  --#{$button}--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);

  // Small
  --#{$button}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
  --#{$button}--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
  --#{$button}--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
  --#{$button}--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);

  // Disabled
  --#{$button}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
  --#{$button}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
  --#{$button}--disabled--BorderColor: transparent;
  --#{$button}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);

  // Icons
  --#{$button}__icon--Color: var(--pf-t--global--icon--color--regular);
  --#{$button}--hover__icon--Color: var(--pf-t--global--icon--color--regular);
  --#{$button}--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
  --#{$button}__icon--MarginInlineStart: 0;
  --#{$button}__icon--MarginInlineEnd: 0;
  --#{$button}__icon--m-start--MarginInlineEnd: 0;
  --#{$button}__icon--m-end--MarginInlineStart: 0;

  // Progress
  --#{$button}__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
  --#{$button}__progress--Opacity: 0;
  --#{$button}__progress--TranslateY: -50%;
  --#{$button}__progress--TranslateX: 0;
  --#{$button}__progress--InsetBlockStart: 50%;
  --#{$button}__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
  --#{$button}__progress--Color: var(--#{$button}__icon--Color);
  --#{$button}--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width) / 2);
  --#{$button}--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width) / 2);
  --#{$button}--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
  --#{$button}--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width));
  --#{$button}--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
  --#{$button}--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
  --#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;

  // Count
  --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);

  // Block
  --#{$button}--m-block--Display: flex;
  --#{$button}--m-block--Width: 100%;
}

.#{$button} {
  position: relative;
  display: var(--#{$button}--Display);
  gap: var(--#{$button}--Gap);
  align-items: var(--#{$button}--AlignItems);
  justify-content: var(--#{$button}--JustifyContent);
  min-width: var(--#{$button}--MinWidth);
  padding-block-start: var(--#{$button}--PaddingBlockStart);
  padding-block-end: var(--#{$button}--PaddingBlockEnd);
  padding-inline-start: var(--#{$button}--PaddingInlineStart);
  padding-inline-end: var(--#{$button}--PaddingInlineEnd);
  font-size: var(--#{$button}--FontSize, inherit);
  font-weight: var(--#{$button}--FontWeight, inherit);
  line-height: var(--#{$button}--LineHeight, inherit);
  color: var(--#{$button}--Color);
  text-align: center;
  text-decoration: var(--#{$button}--TextDecorationLine) var(--#{$button}--TextDecorationStyle);
  white-space: nowrap;
  cursor: pointer; // needed for when a button does not use  - eg, 
  user-select: none;
  background-color: var(--#{$button}--BackgroundColor);
  border: 0;
  border-start-start-radius: var(--#{$button}--BorderStartStartRadius, var(--#{$button}--BorderRadius));
  border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
  border-end-start-radius: var(--#{$button}--BorderEndStartRadius, var(--#{$button}--BorderRadius));
  border-end-end-radius: var(--#{$button}--BorderEndEndRadius, var(--#{$button}--BorderRadius));
  transition-timing-function: var(--#{$button}--TransitionTimingFunction);
  transition-duration: var(--#{$button}--TransitionDuration);
  transition-property: var(--#{$button}--TransitionProperty);

  &::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    border: var(--#{$button}--BorderWidth) solid;
    border-color: var(--#{$button}--BorderColor);
    border-radius: inherit;
    transition: inherit;
  }

  // Primary
  &.pf-m-primary {
    --#{$button}--Color: var(--#{$button}--m-primary--Color);
    --#{$button}--BackgroundColor: var(--#{$button}--m-primary--BackgroundColor);
    --#{$button}__icon--Color: var(--#{$button}--m-primary__icon--Color);
    --#{$button}--hover--Color: var(--#{$button}--m-primary--hover--Color);
    --#{$button}--hover--BackgroundColor: var(--#{$button}--m-primary--hover--BackgroundColor);
    --#{$button}--hover__icon--Color: var(--#{$button}--m-primary--hover__icon--Color);
    --#{$button}--m-clicked--Color: var(--#{$button}--m-primary--m-clicked--Color);
    --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-primary--m-clicked--BackgroundColor);
    --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-primary--m-clicked__icon--Color);

    .#{$badge}.pf-m-unread {
      --#{$badge}--BorderColor: var(--#{$button}--m-primary__c-badge--BorderColor);
    }
  }

  // Secondary
  &.pf-m-secondary {
    --#{$button}--Color: var(--#{$button}--m-secondary--Color);
    --#{$button}--BorderColor: var(--#{$button}--m-secondary--BorderColor);
    --#{$button}--TransitionDuration: var(--#{$button}--m-secondary--TransitionDuration);
    --#{$button}__icon--Color: var(--#{$button}--m-secondary__icon--Color);
    --#{$button}--hover--Color: var(--#{$button}--m-secondary--hover--Color);
    --#{$button}--hover--BorderColor: var(--#{$button}--m-secondary--hover--BorderColor);
    --#{$button}--hover__icon--Color: var(--#{$button}--m-secondary--hover__icon--Color);
    --#{$button}--m-clicked--Color: var(--#{$button}--m-secondary--m-clicked--Color);
    --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-secondary--m-clicked--BorderColor);
    --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-secondary--m-clicked__icon--Color);
    --#{$button}--m-danger--Color: var(--#{$button}--m-secondary--m-danger--Color);
    --#{$button}--m-danger__icon--Color: var(--#{$button}--m-secondary--m-danger__icon--Color);
    --#{$button}--m-danger--hover--Color: var(--#{$button}--m-secondary--m-danger--hover--Color);
    --#{$button}--m-danger--hover__icon--Color: var(--#{$button}--m-secondary--m-danger--hover__icon--Color);
    --#{$button}--m-danger--m-clicked--Color: var(--#{$button}--m-secondary--m-danger--m-clicked--Color);
    --#{$button}--m-danger--m-clicked__icon--Color: var(--#{$button}--m-secondary--m-danger--m-clicked__icon--Color);

    &.pf-m-danger {
      --#{$button}--m-secondary--BorderColor: var(--#{$button}--m-secondary--m-danger--BorderColor);
      --#{$button}--m-secondary--hover--BorderColor: var(--#{$button}--m-secondary--m-danger--hover--BorderColor);
      --#{$button}--m-secondary--m-clicked--BorderColor: var(--#{$button}--m-secondary--m-danger--m-clicked--BorderColor);
      --#{$button}--m-danger--BackgroundColor: transparent;
      --#{$button}--m-danger--hover--BackgroundColor: transparent;
      --#{$button}--m-danger--m-clicked--BackgroundColor: transparent;
    }
  }

  // Tertiary
  &.pf-m-tertiary {
    --#{$button}--Color: var(--#{$button}--m-tertiary--Color);
    --#{$button}--BorderColor: var(--#{$button}--m-tertiary--BorderColor);
    --#{$button}--TransitionDuration: var(--#{$button}--m-tertiary--TransitionDuration);
    --#{$button}__icon--Color: var(--#{$button}--m-tertiary__icon--Color);
    --#{$button}--hover--Color: var(--#{$button}--m-tertiary--hover--Color);
    --#{$button}--hover--BorderColor: var(--#{$button}--m-tertiary--hover--BorderColor);
    --#{$button}--hover__icon--Color: var(--#{$button}--m-tertiary--hover__icon--Color);
    --#{$button}--m-clicked--Color: var(--#{$button}--m-tertiary--m-clicked--Color);
    --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-tertiary--m-clicked--BorderColor);
    --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-tertiary--m-clicked__icon--Color);
  }

  // Link
  &.pf-m-link {
    --#{$button}--PaddingInlineEnd: var(--#{$button}--m-link--PaddingInlineEnd);
    --#{$button}--PaddingInlineStart: var(--#{$button}--m-link--PaddingInlineStart);
    --#{$button}--Color: var(--#{$button}--m-link--Color);
    --#{$button}--BorderRadius: var(--#{$button}--m-link--BorderRadius);
    --#{$button}--BackgroundColor: var(--#{$button}--m-link--BackgroundColor);
    --#{$button}__icon--Color: var(--#{$button}--m-link__icon--Color);
    --#{$button}--hover--Color: var(--#{$button}--m-link--hover--Color);
    --#{$button}--hover--BackgroundColor: var(--#{$button}--m-link--hover--BackgroundColor);
    --#{$button}--hover__icon--Color: var(--#{$button}--m-link--hover__icon--Color);
    --#{$button}--m-clicked--Color: var(--#{$button}--m-link--m-clicked--Color);
    --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-link--m-clicked--BackgroundColor);
    --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-link--m-clicked__icon--Color);

    &.pf-m-inline {
      @at-root span#{&} {
        --#{$button}--m-link--m-inline--Display: var(--#{$button}--span--m-link--m-inline--Display);
        --#{$button}__icon--m-start--MarginInlineEnd: var(--#{$button}--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
        --#{$button}__icon--m-end--MarginInlineStart: var(--#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart);
      }

      --#{$button}--Display: var(--#{$button}--m-link--m-inline--Display);
      --#{$button}--JustifyContent: var(--#{$button}--m-link--m-inline--JustifyContent);
      --#{$button}--FontSize: var(--#{$button}--m-link--m-inline--FontSize);
      --#{$button}--LineHeight: var(--#{$button}--m-link--m-inline--LineHeight);
      --#{$button}--FontWeight: var(--#{$button}--m-link--m-inline--FontWeight);
      --#{$button}--PaddingBlockStart: var(--#{$button}--m-link--m-inline--PaddingBlockStart);
      --#{$button}--PaddingInlineEnd: var(--#{$button}--m-link--m-inline--PaddingInlineEnd);
      --#{$button}--PaddingBlockEnd: var(--#{$button}--m-link--m-inline--PaddingBlockEnd);
      --#{$button}--PaddingInlineStart: var(--#{$button}--m-link--m-inline--PaddingInlineStart);
      --#{$button}--BackgroundColor: transparent;
      --#{$button}__progress--InsetInlineStart: var(--#{$button}--m-link--m-inline__progress--InsetInlineStart);
      --#{$button}--TextDecorationLine: var(--#{$button}--m-link--m-inline--TextDecorationLine);
      --#{$button}--TextDecorationStyle: var(--#{$button}--m-link--m-inline--TextDecorationStyle);
      --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-link--m-inline--hover--TextDecorationLine);
      --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-link--m-inline--hover--TextDecorationStyle);
      --#{$button}--hover--BackgroundColor: transparent;
      --#{$button}--m-clicked--BackgroundColor: transparent;
      --#{$button}--disabled--BackgroundColor: transparent;
      --#{$button}--disabled--Color: var(--#{$button}--m-link--m-inline--disabled--Color);
      --#{$button}--disabled__icon--Color: var(--#{$button}--m-link--m-inline--disabled__icon--Color);

      text-align: start;
      white-space: normal;
      outline-offset: #{pf-size-prem(2px)};
    }

    &.pf-m-danger {
      --#{$button}--m-danger--Color: var(--#{$button}--m-link--m-danger--Color);
      --#{$button}--m-danger--BackgroundColor: var(--#{$button}--m-link--m-danger--BackgroundColor);
      --#{$button}--m-danger__icon--Color: var(--#{$button}--m-link--m-danger__icon--Color);
      --#{$button}--m-danger--hover--Color: var(--#{$button}--m-link--m-danger--hover--Color);
      --#{$button}--m-danger--hover--BackgroundColor: var(--#{$button}--m-link--m-danger--hover--BackgroundColor);
      --#{$button}--m-danger--hover__icon--Color: var(--#{$button}--m-link--m-danger--hover__icon--Color);
      --#{$button}--m-danger--m-clicked--Color: var(--#{$button}--m-link--m-danger--m-clicked--Color);
      --#{$button}--m-danger--m-clicked--BackgroundColor: var(--#{$button}--m-link--m-danger--m-clicked--BackgroundColor);
      --#{$button}--m-danger--m-clicked__icon--Color: var(--#{$button}--m-link--m-danger--m-clicked__icon--Color);
    }

    &.pf-m-display-lg {
      --#{$button}--FontSize: var(--#{$button}--m-link--m-display-lg--FontSize);
    }
  }

  // Warning
  &.pf-m-warning {
    --#{$button}--Color: var(--#{$button}--m-warning--Color);
    --#{$button}--BackgroundColor: var(--#{$button}--m-warning--BackgroundColor);
    --#{$button}__icon--Color: var(--#{$button}--m-warning__icon--Color);
    --#{$button}--hover--Color: var(--#{$button}--m-warning--hover--Color);
    --#{$button}--hover--BackgroundColor: var(--#{$button}--m-warning--hover--BackgroundColor);
    --#{$button}--hover__icon--Color: var(--#{$button}--m-warning--hover__icon--Color);
    --#{$button}--m-clicked--Color: var(--#{$button}--m-warning--m-clicked--Color);
    --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-warning--m-clicked--BackgroundColor);
    --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-warning--m-clicked__icon--Color);
  }

  // Danger
  &.pf-m-danger {
    --#{$button}--Color: var(--#{$button}--m-danger--Color);
    --#{$button}--BackgroundColor: var(--#{$button}--m-danger--BackgroundColor);
    --#{$button}__icon--Color: var(--#{$button}--m-danger__icon--Color);
    --#{$button}--hover--Color: var(--#{$button}--m-danger--hover--Color);
    --#{$button}--hover--BackgroundColor: var(--#{$button}--m-danger--hover--BackgroundColor);
    --#{$button}--hover__icon--Color: var(--#{$button}--m-danger--hover__icon--Color);
    --#{$button}--m-clicked--Color: var(--#{$button}--m-danger--m-clicked--Color);
    --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-danger--m-clicked--BackgroundColor);
    --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-danger--m-clicked__icon--Color);
  }

  // Control
  &.pf-m-control {
    --#{$button}--BorderRadius: var(--#{$button}--m-control--BorderRadius);
    --#{$button}--PaddingInlineStart: var(--#{$button}--m-control--PaddingInlineStart);
    --#{$button}--PaddingInlineEnd: var(--#{$button}--m-control--PaddingInlineEnd);
    --#{$button}--Color: var(--#{$button}--m-control--Color);
    --#{$button}--BackgroundColor: var(--#{$button}--m-control--BackgroundColor);
    --#{$button}--BorderColor: var(--#{$button}--m-control--BorderColor);
    --#{$button}--BorderWidth: var(--#{$button}--m-control--BorderWidth);
    --#{$button}__icon--Color: var(--#{$button}--m-control__icon--Color);
    --#{$button}--hover--Color: var(--#{$button}--m-control--hover--Color);
    --#{$button}--hover--BackgroundColor: var(--#{$button}--m-control--hover--BackgroundColor);
    --#{$button}--hover--BorderColor: var(--#{$button}--m-control--hover--BorderColor);
    --#{$button}--hover--BorderWidth: var(--#{$button}--m-control--hover--BorderWidth);
    --#{$button}--hover__icon--Color: var(--#{$button}--m-control--hover__icon--Color);
    --#{$button}--m-clicked--Color: var(--#{$button}--m-control--m-clicked--Color);
    --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-control--m-clicked--BackgroundColor);
    --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-control--m-clicked--BorderColor);
    --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-control--m-clicked--BorderWidth);
    --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-control--m-clicked__icon--Color);
  }

  // Stateful
  &.pf-m-stateful {
    --#{$button}--BorderRadius: var(--#{$button}--m-stateful--BorderRadius);
    --#{$button}--PaddingInlineStart: var(--#{$button}--m-stateful--PaddingInlineStart);
    --#{$button}--PaddingInlineEnd: var(--#{$button}--m-stateful--PaddingInlineEnd);
  }

  // Read
  &.pf-m-read {
    --#{$button}--BackgroundColor: var(--#{$button}--m-read--BackgroundColor);
    --#{$button}--BorderColor: var(--#{$button}--m-read--BorderColor);
    --#{$button}--hover--BackgroundColor: var(--#{$button}--m-read--hover--BackgroundColor);
    --#{$button}--hover--BorderColor: var(--#{$button}--m-read--hover--BorderColor);
    --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-read--m-clicked--BackgroundColor);
    --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-read--m-clicked--BorderColor);
  }

  // Unread
  &.pf-m-unread {
    --#{$button}--Color: var(--#{$button}--m-unread--Color);
    --#{$button}--BackgroundColor: var(--#{$button}--m-unread--BackgroundColor);
    --#{$button}__icon--Color: var(--#{$button}--m-unread__icon--Color);
    --#{$button}--hover--Color: var(--#{$button}--m-unread--hover--Color);
    --#{$button}--hover--BackgroundColor: var(--#{$button}--m-unread--hover--BackgroundColor);
    --#{$button}--hover__icon--Color: var(--#{$button}--m-unread--hover__icon--Color);
    --#{$button}--m-clicked--Color: var(--#{$button}--m-unread--m-clicked--Color);
    --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-unread--m-clicked--BackgroundColor);
    --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-unread--m-clicked__icon--Color);
  }

  // Attention
  &.pf-m-attention {
    --#{$button}--Color: var(--#{$button}--m-attention--Color);
    --#{$button}--BackgroundColor: var(--#{$button}--m-attention--BackgroundColor);
    --#{$button}__icon--Color: var(--#{$button}--m-attention__icon--Color);
    --#{$button}--hover--Color: var(--#{$button}--m-attention--hover--Color);
    --#{$button}--hover--BackgroundColor: var(--#{$button}--m-attention--hover--BackgroundColor);
    --#{$button}--hover__icon--Color: var(--#{$button}--m-attention--hover__icon--Color);
    --#{$button}--m-clicked--Color: var(--#{$button}--m-attention--m-clicked--Color);
    --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-attention--m-clicked--BackgroundColor);
    --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-attention--m-clicked__icon--Color);
  }

  // Icon buttons
  &.pf-m-plain {
    --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
    --#{$button}--Color: var(--#{$button}--m-plain--Color);
    --#{$button}__icon--Color: var(--#{$button}--m-plain__icon--Color);
    --#{$button}--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
    --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--PaddingInlineEnd);
    --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--PaddingInlineStart);
    --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
    --#{$button}--hover--Color: var(--#{$button}--m-plain--hover--Color);
    --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
    --#{$button}--m-clicked--Color: var(--#{$button}--m-plain--m-clicked--Color);
    --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
    --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
    --#{$button}--disabled__icon--Color: var(--#{$button}--m-plain--disabled__icon--Color);
    --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
    --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-small--PaddingInlineEnd);
    --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-small--PaddingInlineStart);

    &.pf-m-no-padding {
      --#{$button}__icon--Color: var(--#{$button}--m-plain--m-no-padding__icon--Color);
      --#{$button}--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--BackgroundColor);
      --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--hover--BackgroundColor);
      --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor);
      --#{$button}--PaddingBlockStart: var(--#{$button}--m-plain--m-no-padding--PaddingBlockStart);
      --#{$button}--PaddingBlockEnd: var(--#{$button}--m-plain--m-no-padding--PaddingBlockEnd);
      --#{$button}--m-plain--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--PaddingInlineEnd);
      --#{$button}--m-plain--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart);

      min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
    }
  }

  &.pf-m-block {
    --#{$button}--Display: var(--#{$button}--m-block--Display);

    width: var(--#{$button}--m-block--Width);
  }

  &.pf-m-small {
    --#{$button}--PaddingBlockStart: var(--#{$button}--m-small--PaddingBlockStart);
    --#{$button}--PaddingInlineEnd: var(--#{$button}--m-small--PaddingInlineEnd);
    --#{$button}--PaddingBlockEnd: var(--#{$button}--m-small--PaddingBlockEnd);
    --#{$button}--PaddingInlineStart: var(--#{$button}--m-small--PaddingInlineStart);
  }

  &.pf-m-display-lg {
    --#{$button}--PaddingBlockStart: var(--#{$button}--m-display-lg--PaddingBlockStart);
    --#{$button}--PaddingInlineEnd: var(--#{$button}--m-display-lg--PaddingInlineEnd);
    --#{$button}--PaddingBlockEnd: var(--#{$button}--m-display-lg--PaddingBlockEnd);
    --#{$button}--PaddingInlineStart: var(--#{$button}--m-display-lg--PaddingInlineStart);
    --#{$button}--FontSize: var(--#{$button}--m-display-lg--FontSize);
  }

  &:hover,
  &:focus {
    --#{$button}--Color: var(--#{$button}--hover--Color);
    --#{$button}--BackgroundColor: var(--#{$button}--hover--BackgroundColor);
    --#{$button}--BorderColor: var(--#{$button}--hover--BorderColor);
    --#{$button}--BorderWidth: var(--#{$button}--hover--BorderWidth);
    --#{$button}--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-plain--m-no-padding--hover__icon--Color);
    --#{$button}__icon--Color: var(--#{$button}--hover__icon--Color);

    text-decoration: var(--#{$button}--hover--TextDecorationLine) var(--#{$button}--hover--TextDecorationStyle);
  }

  &.pf-m-clicked {
    --#{$button}--Color: var(--#{$button}--m-clicked--Color);
    --#{$button}--BackgroundColor: var(--#{$button}--m-clicked--BackgroundColor);
    --#{$button}--BorderWidth: var(--#{$button}--m-clicked--BorderWidth);
    --#{$button}--BorderColor: var(--#{$button}--m-clicked--BorderColor);
    --#{$button}__icon--Color: var(--#{$button}--m-clicked__icon--Color);
  }

  // Disabled buttons
  // These styles need to go after the button types because they need to override some of the type styling
  &:disabled,
  &.pf-m-disabled {
    pointer-events: none;
  }

  &:disabled,
  &.pf-m-disabled,
  &.pf-m-aria-disabled {
    color: var(--#{$button}--disabled--Color);
    background-color: var(--#{$button}--disabled--BackgroundColor);

    &::after {
      border-color: transparent;
    }

    .#{$button}__icon {
      color: var(--#{$button}--disabled__icon--Color);
    }
  }

  &.pf-m-aria-disabled {
    --#{$button}--m-link--m-inline--hover--TextDecorationLine: var(--#{$button}--TextDecorationLine);
    --#{$button}--m-link--m-inline--hover--TextDecorationStyle: var(--#{$button}--TextDecorationStyle);

    cursor: default;
  }

  &.pf-m-progress {
    --#{$button}--PaddingInlineEnd: var(--#{$button}--m-progress--PaddingInlineEnd);
    --#{$button}--PaddingInlineStart: var(--#{$button}--m-progress--PaddingInlineStart);
  }

  &.pf-m-in-progress {
    --#{$button}--m-link--m-inline--PaddingInlineStart: var(--#{$button}--m-link--m-inline--m-in-progress--PaddingInlineStart);

    &:not(.pf-m-plain) {
      --#{$button}--PaddingInlineEnd: var(--#{$button}--m-in-progress--PaddingInlineEnd);
      --#{$button}--PaddingInlineStart: var(--#{$button}--m-in-progress--PaddingInlineStart);
    }

    &.pf-m-plain {
      --#{$button}__progress--InsetInlineStart: var(--#{$button}--m-in-progress--m-plain__progress--InsetInlineStart);
      --#{$button}__progress--TranslateX: var(--#{$button}--m-in-progress--m-plain__progress--TranslateX);

      > :not(.#{$button}__progress) {
        opacity: 0;
      }
    }
  }
}

.#{$button}__icon {
  margin-inline-start: var(--#{$button}__icon--MarginInlineStart);
  margin-inline-end: var(--#{$button}__icon--MarginInlineEnd);
  color: var(--#{$button}__icon--Color);

  &.pf-m-start {
    --#{$button}__icon--MarginInlineEnd: var(--#{$button}__icon--m-start--MarginInlineEnd);
  }

  &.pf-m-end {
    --#{$button}__icon--MarginInlineStart: var(--#{$button}__icon--m-end--MarginInlineStart);
  }
}

.#{$button}__progress {
  position: absolute;
  inset-block-start: var(--#{$button}__progress--InsetBlockStart);
  inset-inline-start: var(--#{$button}__progress--InsetInlineStart);
  line-height: 1;
  color: var(--#{$button}__progress--Color);
  transform: translate(var(--#{$button}__progress--TranslateX), var(--#{$button}__progress--TranslateY));

  .#{$spinner} {
    --#{$spinner}--Color: currentcolor;
  }
}

.#{$button}__count {
  display: inline-flex;
  align-items: center;
}