@import "../../themes/dark/imports";
@import "./themes/dark/button";

.pf-c-button {
  // Component
  --pf-c-button--PaddingTop: var(--pf-global--spacer--form-element);
  --pf-c-button--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-button--PaddingBottom: var(--pf-global--spacer--form-element);
  --pf-c-button--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-button--LineHeight: var(--pf-global--LineHeight--md);
  --pf-c-button--FontWeight: var(--pf-global--FontWeight--normal);
  --pf-c-button--FontSize: var(--pf-global--FontSize--md);
  --pf-c-button--BackgroundColor: transparent;
  --pf-c-button--BorderRadius: var(--pf-global--BorderRadius--sm);
  --pf-c-button--after--BorderRadius: var(--pf-global--BorderRadius--sm);
  --pf-c-button--after--BorderColor: transparent;
  --pf-c-button--after--BorderWidth: var(--pf-global--BorderWidth--sm);

  // Hover state variables
  --pf-c-button--hover--after--BorderWidth: var(--pf-global--BorderWidth--md);

  // Focus state variables
  --pf-c-button--focus--after--BorderWidth: var(--pf-global--BorderWidth--md);

  // Active state variables
  --pf-c-button--active--after--BorderWidth: var(--pf-global--BorderWidth--md);

  // Disabled state variables
  --pf-c-button--disabled--Color: var(--pf-global--disabled-color--100);
  --pf-c-button--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
  --pf-c-button--disabled--after--BorderColor: transparent;

  // Primary btn
  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);

  // Secondary btn
  --pf-c-button--m-secondary--BackgroundColor: transparent;
  --pf-c-button--m-secondary--after--BorderColor: var(--pf-global--primary-color--100);
  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
  --pf-c-button--m-secondary--hover--BackgroundColor: transparent;
  --pf-c-button--m-secondary--hover--after--BorderColor: var(--pf-global--primary-color--100);
  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
  --pf-c-button--m-secondary--focus--BackgroundColor: transparent;
  --pf-c-button--m-secondary--focus--after--BorderColor: var(--pf-global--primary-color--100);
  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
  --pf-c-button--m-secondary--active--BackgroundColor: transparent;
  --pf-c-button--m-secondary--active--after--BorderColor: var(--pf-global--primary-color--100);
  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);

  // Secondary danger
  --pf-c-button--m-secondary--m-danger--BackgroundColor: transparent;
  --pf-c-button--m-secondary--m-danger--Color: var(--pf-global--danger-color--100);
  --pf-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-global--danger-color--100);
  --pf-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
  --pf-c-button--m-secondary--m-danger--hover--Color: var(--pf-global--danger-color--200);
  --pf-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-global--danger-color--100);
  --pf-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
  --pf-c-button--m-secondary--m-danger--focus--Color: var(--pf-global--danger-color--200);
  --pf-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-global--danger-color--100);
  --pf-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
  --pf-c-button--m-secondary--m-danger--active--Color: var(--pf-global--danger-color--200);
  --pf-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-global--danger-color--100);

  // Tertiary btn
  --pf-c-button--m-tertiary--BackgroundColor: transparent;
  --pf-c-button--m-tertiary--after--BorderColor: var(--pf-global--Color--100);
  --pf-c-button--m-tertiary--Color: var(--pf-global--Color--100);
  --pf-c-button--m-tertiary--hover--BackgroundColor: transparent;
  --pf-c-button--m-tertiary--hover--after--BorderColor: var(--pf-global--Color--100);
  --pf-c-button--m-tertiary--hover--Color: var(--pf-global--Color--100);
  --pf-c-button--m-tertiary--focus--BackgroundColor: transparent;
  --pf-c-button--m-tertiary--focus--after--BorderColor: var(--pf-global--Color--100);
  --pf-c-button--m-tertiary--focus--Color: var(--pf-global--Color--100);
  --pf-c-button--m-tertiary--active--BackgroundColor: transparent;
  --pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--Color--100);
  --pf-c-button--m-tertiary--active--Color: var(--pf-global--Color--100);

  // Warning btn
  --pf-c-button--m-warning--BackgroundColor: var(--pf-global--warning-color--100);
  --pf-c-button--m-warning--Color: var(--pf-global--Color--dark-100);
  --pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--palette--gold-500);
  --pf-c-button--m-warning--hover--Color: var(--pf-global--Color--dark-100);
  --pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--palette--gold-500);
  --pf-c-button--m-warning--focus--Color: var(--pf-global--Color--dark-100);
  --pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--palette--gold-500);
  --pf-c-button--m-warning--active--Color: var(--pf-global--Color--dark-100);

  // Danger btn
  --pf-c-button--m-danger--BackgroundColor: var(--pf-global--danger-color--100);
  --pf-c-button--m-danger--Color: var(--pf-global--Color--light-100);
  --pf-c-button--m-danger--hover--BackgroundColor: var(--pf-global--danger-color--200);
  --pf-c-button--m-danger--hover--Color: var(--pf-global--Color--light-100);
  --pf-c-button--m-danger--focus--BackgroundColor: var(--pf-global--danger-color--200);
  --pf-c-button--m-danger--focus--Color: var(--pf-global--Color--light-100);
  --pf-c-button--m-danger--active--BackgroundColor: var(--pf-global--danger-color--200);
  --pf-c-button--m-danger--active--Color: var(--pf-global--Color--light-100);

  // Link btn
  --pf-c-button--m-link--BackgroundColor: transparent;
  --pf-c-button--m-link--Color: var(--pf-global--link--Color);
  --pf-c-button--m-link--hover--BackgroundColor: transparent;
  --pf-c-button--m-link--hover--Color: var(--pf-global--link--Color--hover);
  --pf-c-button--m-link--focus--BackgroundColor: transparent;
  --pf-c-button--m-link--focus--Color: var(--pf-global--link--Color--hover);
  --pf-c-button--m-link--active--BackgroundColor: transparent;
  --pf-c-button--m-link--active--Color: var(--pf-global--link--Color--hover);
  --pf-c-button--m-link--disabled--BackgroundColor: transparent;
  --pf-c-button--m-link--m-inline--FontSize: inherit;
  --pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
  --pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);

  // Link danger
  --pf-c-button--m-link--m-danger--BackgroundColor: transparent;
  --pf-c-button--m-link--m-danger--Color: var(--pf-global--danger-color--100);
  --pf-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
  --pf-c-button--m-link--m-danger--hover--Color: var(--pf-global--danger-color--200);
  --pf-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
  --pf-c-button--m-link--m-danger--focus--Color: var(--pf-global--danger-color--200);
  --pf-c-button--m-link--m-danger--active--BackgroundColor: transparent;
  --pf-c-button--m-link--m-danger--active--Color: var(--pf-global--danger-color--200);

  // Plain btn
  --pf-c-button--m-plain--BackgroundColor: transparent;
  --pf-c-button--m-plain--Color: var(--pf-global--Color--200);
  --pf-c-button--m-plain--hover--BackgroundColor: transparent;
  --pf-c-button--m-plain--hover--Color: var(--pf-global--Color--100);
  --pf-c-button--m-plain--focus--BackgroundColor: transparent;
  --pf-c-button--m-plain--focus--Color: var(--pf-global--Color--100);
  --pf-c-button--m-plain--active--BackgroundColor: transparent;
  --pf-c-button--m-plain--active--Color: var(--pf-global--Color--100);
  --pf-c-button--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
  --pf-c-button--m-plain--disabled--BackgroundColor: transparent;

  // Control Button
  --pf-c-button--m-control--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-button--m-control--Color: var(--pf-global--Color--100);
  --pf-c-button--m-control--BorderRadius: 0;
  --pf-c-button--m-control--after--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-button--m-control--after--BorderTopColor: var(--pf-global--BorderColor--300);
  --pf-c-button--m-control--after--BorderRightColor: var(--pf-global--BorderColor--300);
  --pf-c-button--m-control--after--BorderBottomColor: var(--pf-global--BorderColor--200);
  --pf-c-button--m-control--after--BorderLeftColor: var(--pf-global--BorderColor--300);
  --pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
  --pf-c-button--m-control--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-button--m-control--hover--Color: var(--pf-global--Color--100);
  --pf-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
  --pf-c-button--m-control--hover--after--BorderBottomColor: var(--pf-global--active-color--100);
  --pf-c-button--m-control--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-button--m-control--active--Color: var(--pf-global--Color--100);
  --pf-c-button--m-control--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
  --pf-c-button--m-control--active--after--BorderBottomColor: var(--pf-global--active-color--100);
  --pf-c-button--m-control--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-button--m-control--focus--Color: var(--pf-global--Color--100);
  --pf-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
  --pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--active-color--100);
  --pf-c-button--m-control--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-button--m-control--m-expanded--Color: var(--pf-global--Color--100);
  --pf-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
  --pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
  --pf-c-button--m-small--FontSize: var(--pf-global--FontSize--sm);

  // CTA Button
  --pf-c-button--m-display-lg--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-button--m-display-lg--PaddingRight: var(--pf-global--spacer--xl);
  --pf-c-button--m-display-lg--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-button--m-display-lg--PaddingLeft: var(--pf-global--spacer--xl);
  --pf-c-button--m-display-lg--FontWeight: var(--pf-global--FontWeight--bold);
  --pf-c-button--m-link--m-display-lg--FontSize: var(--pf-global--FontSize--lg);

  // Styles for an icon in button
  --pf-c-button__icon--m-start--MarginRight: var(--pf-global--spacer--xs);
  --pf-c-button__icon--m-end--MarginLeft: var(--pf-global--spacer--xs);

  // Progress
  --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm)); // matches medium spinner diameter plus a spacer
  --pf-c-button__progress--Opacity: 0;
  --pf-c-button__progress--TranslateY: -50%;
  --pf-c-button__progress--TranslateX: 0;
  --pf-c-button__progress--Top: 50%;
  --pf-c-button__progress--Left: var(--pf-global--spacer--md);
  --pf-c-button--m-progress--TransitionProperty: padding;
  --pf-c-button--m-progress--TransitionDuration: var(--pf-global--TransitionDuration);
  --pf-c-button--m-progress--PaddingRight: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
  --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
  --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
  --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
  --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
  --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;

  position: relative;
  display: inline-block;
  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
  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;
  user-select: none;
  border: 0;
  border-radius: var(--pf-c-button--BorderRadius);

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    content: "";
    border: var(--pf-c-button--after--BorderWidth) solid;
    border-color: var(--pf-c-button--after--BorderColor);
    border-radius: var(--pf-c-button--after--BorderRadius);
  }

  &:hover {
    --pf-c-button--after--BorderWidth: var(--pf-c-button--hover--after--BorderWidth);

    text-decoration: none;
  }

  &:focus {
    --pf-c-button--after--BorderWidth: var(--pf-c-button--focus--after--BorderWidth);
  }

  &:active,
  &.pf-m-active {
    --pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth);
  }

  &.pf-m-block {
    display: block;
    width: 100%;
  }

  &.pf-m-small {
    --pf-c-button--FontSize: var(--pf-c-button--m-small--FontSize);
  }

  &.pf-m-primary,
  &.pf-m-secondary,
  &.pf-m-tertiary,
  &.pf-m-link {
    &.pf-m-display-lg {
      --pf-c-button--PaddingTop: var(--pf-c-button--m-display-lg--PaddingTop);
      --pf-c-button--PaddingRight: var(--pf-c-button--m-display-lg--PaddingRight);
      --pf-c-button--PaddingBottom: var(--pf-c-button--m-display-lg--PaddingBottom);
      --pf-c-button--PaddingLeft: var(--pf-c-button--m-display-lg--PaddingLeft);
      --pf-c-button--FontWeight: var(--pf-c-button--m-display-lg--FontWeight);
    }
  }

  // Primary buttons
  &.pf-m-primary {
    color: var(--pf-c-button--m-primary--Color);
    background-color: var(--pf-c-button--m-primary--BackgroundColor);

    &:hover {
      --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color);
      --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor);
    }

    &:focus {
      --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--focus--Color);
      --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--focus--BackgroundColor);
    }

    &:active,
    &.pf-m-active {
      --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color);
      --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor);
    }
  }

  // Secondary buttons
  &.pf-m-secondary {
    --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor);

    color: var(--pf-c-button--m-secondary--Color);
    background-color: var(--pf-c-button--m-secondary--BackgroundColor);

    &:hover {
      --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--hover--Color);
      --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--hover--BackgroundColor);
      --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--hover--after--BorderColor);
    }

    &:focus {
      --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--focus--Color);
      --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--focus--BackgroundColor);
      --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--focus--after--BorderColor);
    }

    &.pf-m-active,
    &:active {
      --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--active--Color);
      --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--active--BackgroundColor);
      --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--active--after--BorderColor);
    }
  }

  // Tertiary buttons
  &.pf-m-tertiary {
    --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor);

    color: var(--pf-c-button--m-tertiary--Color);
    background-color: var(--pf-c-button--m-tertiary--BackgroundColor);

    &:hover {
      --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--hover--Color);
      --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--hover--BackgroundColor);
      --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--hover--after--BorderColor);
    }

    &:focus {
      --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--focus--Color);
      --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--focus--BackgroundColor);
      --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--focus--after--BorderColor);
    }

    &:active,
    &.pf-m-active {
      --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--active--Color);
      --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--active--BackgroundColor);
      --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--active--after--BorderColor);
    }
  }

  // Link buttons
  &.pf-m-link {
    --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor);

    color: var(--pf-c-button--m-link--Color);
    background-color: var(--pf-c-button--m-link--BackgroundColor);

    &:not(.pf-m-inline) {
      &:hover {
        --pf-c-button--m-link--Color: var(--pf-c-button--m-link--hover--Color);
        --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor);
      }

      &:focus {
        --pf-c-button--m-link--Color: var(--pf-c-button--m-link--focus--Color);
        --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--focus--BackgroundColor);
      }

      &:active,
      &.pf-m-active {
        --pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color);
        --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor);
      }
    }

    &.pf-m-inline {
      --pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);

      display: inline;
      padding: 0;
      text-align: left;
      white-space: normal;
      cursor: pointer;

      &:hover {
        --pf-c-button--m-link--Color: var(--pf-c-button--m-link--m-inline--hover--Color);

        text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration);
      }
    }

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

  // Danger buttons
  &.pf-m-danger {
    color: var(--pf-c-button--m-danger--Color);
    background-color: var(--pf-c-button--m-danger--BackgroundColor);

    &:hover {
      --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--hover--Color);
      --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--hover--BackgroundColor);
    }

    &:focus {
      --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--focus--Color);
      --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--focus--BackgroundColor);
    }

    &:active,
    &.pf-m-active {
      --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--active--Color);
      --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--active--BackgroundColor);
    }

    // Secondary danger
    &.pf-m-secondary {
      --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--Color);
      --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--BackgroundColor);
      --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--after--BorderColor);

      &:hover {
        --pf-c-button--m-secondary--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--hover--Color);
        --pf-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor);
        --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor);
      }

      &:focus {
        --pf-c-button--m-secondary--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--focus--Color);
        --pf-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--focus--BackgroundColor);
        --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--focus--after--BorderColor);
      }

      &:active,
      &.pf-m-active {
        --pf-c-button--m-secondary--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--active--Color);
        --pf-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor);
        --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor);
      }
    }

    // Link danger
    &.pf-m-link {
      --pf-c-button--m-danger--Color: var(--pf-c-button--m-link--m-danger--Color);
      --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--BackgroundColor);

      &:hover {
        --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--hover--Color);
        --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--hover--BackgroundColor);
      }

      &:focus {
        --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--focus--Color);
        --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--focus--BackgroundColor);
      }

      &:active,
      &.pf-m-active {
        --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--active--Color);
        --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--active--BackgroundColor);
      }
    }
  }

  // Warning buttons
  &.pf-m-warning {
    color: var(--pf-c-button--m-warning--Color);
    background-color: var(--pf-c-button--m-warning--BackgroundColor);

    &:hover {
      --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--hover--Color);
      --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--hover--BackgroundColor);
    }

    &:focus {
      --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--focus--Color);
      --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--focus--BackgroundColor);
    }

    &:active,
    &.pf-m-active {
      --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--active--Color);
      --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--active--BackgroundColor);
    }
  }

  &.pf-m-control {
    --pf-c-button--BorderRadius: var(--pf-c-button--m-control--BorderRadius);
    --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-control--disabled--BackgroundColor);
    --pf-c-button--after--BorderWidth: var(--pf-c-button--m-control--after--BorderWidth);
    --pf-c-button--after--BorderColor: var(--pf-c-button--m-control--after--BorderTopColor) var(--pf-c-button--m-control--after--BorderRightColor) var(--pf-c-button--m-control--after--BorderBottomColor) var(--pf-c-button--m-control--after--BorderLeftColor);

    color: var(--pf-c-button--m-control--Color);
    background-color: var(--pf-c-button--m-control--BackgroundColor);

    &::after {
      border-radius: initial;
    }

    &:hover {
      --pf-c-button--m-control--Color: var(--pf-c-button--m-control--hover--Color);
      --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--hover--BackgroundColor);
      --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--hover--after--BorderBottomColor);

      &::after {
        border-bottom-width: var(--pf-c-button--m-control--hover--after--BorderBottomWidth);
      }
    }

    &:active,
    &.pf-m-active {
      --pf-c-button--m-control--Color: var(--pf-c-button--m-control--active--Color);
      --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--active--BackgroundColor);
      --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--active--after--BorderBottomColor);

      &::after {
        border-bottom-width: var(--pf-c-button--m-control--active--after--BorderBottomWidth);
      }
    }

    &:focus {
      --pf-c-button--m-control--Color: var(--pf-c-button--m-control--focus--Color);
      --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--focus--BackgroundColor);
      --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--focus--after--BorderBottomColor);

      &::after {
        border-bottom-width: var(--pf-c-button--m-control--focus--after--BorderBottomWidth);
      }
    }

    &.pf-m-expanded {
      --pf-c-button--m-control--Color: var(--pf-c-button--m-control--m-expanded--Color);
      --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--m-expanded--BackgroundColor);
      --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--m-expanded--after--BorderBottomColor);

      &::after {
        border-bottom-width: var(--pf-c-button--m-control--m-expanded--after--BorderBottomWidth);
      }
    }
  }

  // Icon buttons
  &.pf-m-plain {
    --pf-c-button--disabled--Color: var(--pf-c-button--m-plain--disabled--Color);
    --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-plain--disabled--BackgroundColor);

    color: var(--pf-c-button--m-plain--Color);
    background-color: var(--pf-c-button--m-plain--BackgroundColor);

    &:hover {
      --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--hover--Color);
      --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--hover--BackgroundColor);
    }

    &:active,
    &.pf-m-active {
      --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--active--Color);
      --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--active--BackgroundColor);
    }

    &:focus {
      --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--focus--Color);
      --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--focus--BackgroundColor);
    }
  }

  // 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 {
    &::after {
      border-color: var(--pf-c-button--disabled--after--BorderColor);
    }

    color: var(--pf-c-button--disabled--Color);
    background-color: var(--pf-c-button--disabled--BackgroundColor);
  }

  &.pf-m-aria-disabled {
    --pf-c-button--after--BorderWidth: 0;
    --pf-c-button--m-link--m-inline--hover--TextDecoration: none;

    cursor: default;
  }

  &.pf-m-progress {
    --pf-c-button--PaddingRight: var(--pf-c-button--m-progress--PaddingRight);
    --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);

    transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
  }

  &.pf-m-in-progress {
    &:not(.pf-m-plain) {
      --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
      --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
    }

    &.pf-m-plain {
      --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
      --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
      --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);

      > :not(.pf-c-button__progress) {
        opacity: 0;
      }
    }
  }
}

.pf-c-button__icon {
  &.pf-m-start {
    margin-right: var(--pf-c-button__icon--m-start--MarginRight);
  }

  &.pf-m-end {
    margin-left: var(--pf-c-button__icon--m-end--MarginLeft);
  }
}

.pf-c-button__progress {
  position: absolute;
  top: var(--pf-c-button__progress--Top);
  left: var(--pf-c-button__progress--Left);
  line-height: 1;
  transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));

  .pf-c-spinner {
    --pf-c-spinner--Color: currentColor;
  }
}

// RedHat Font overrides
@include pf-m-overpass-font {
  .pf-c-button {
    --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
  }
}

:where(#{$pf-theme-dark-class}) {
  @include button;
}