

.pf-c-button {
  // Component
  --pf-c-button--PaddingY: var(--pf-global--spacer--form-element);
  --pf-c-button--PaddingX: var(--pf-global--spacer--md);
  --pf-c-button--LineHeight: var(--pf-global--LineHeight--md);
  --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
  --pf-c-button--FontSize: var(--pf-global--FontSize--md);
  --pf-c-button--BorderRadius: var(--pf-global--BorderRadius--sm);
  --pf-c-button--BorderColor: transparent;
  --pf-c-button--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-button--hover--BorderWidth: var(--pf-global--BorderWidth--md); // Hover/focus/active state vars are shared and represented as a single 'hover' var for each button variation
  --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--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);

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

  // Tertiary btn
  --pf-c-button--m-tertiary--BackgroundColor: transparent;
  --pf-c-button--m-tertiary--BorderColor: var(--pf-global--secondary-color--100);
  --pf-c-button--m-tertiary--Color: var(--pf-global--Color--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);

  // Link btn
  --pf-c-button--m-link--Color: var(--pf-global--link--Color);
  --pf-c-button--m-link--hover--Color: var(--pf-global--link--Color--hover);
  --pf-c-button--m-link--disabled--BackgroundColor: transparent;

  // Plain btn
  --pf-c-button--m-plain--Color: var(--pf-global--Color--200);
  --pf-c-button--m-plain--hover--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;

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

  position: relative;
  display: inline-block;
  padding: var(--pf-c-button--PaddingY) var(--pf-c-button--PaddingX);
  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;
    content: "";
    border: var(--pf-c-button--BorderWidth) solid var(--pf-c-button--BorderColor);
    border-radius: var(--pf-c-button--BorderRadius);
  }

  &:hover,
  &.pf-m-hover,
  &:active,
  &.pf-m-active,
  &:focus,
  &.pf-m-focus {
    text-decoration: none;

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

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

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

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

  // Secondary Buttons
  &.pf-m-secondary {
    color: var(--pf-c-button--m-secondary--Color);
    background-color: var(--pf-c-button--m-secondary--BackgroundColor);

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

  // Tertiary Buttons
  &.pf-m-tertiary {
    color: var(--pf-c-button--m-tertiary--Color);
    background-color: var(--pf-c-button--m-tertiary--BackgroundColor);

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

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

    &:hover,
    &.pf-m-hover,
    &:active,
    &.pf-m-active,
    &:focus,
    &.pf-m-focus {
      --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--hover--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 {
    color: var(--pf-c-button--disabled--Color);
    pointer-events: none;
    background-color: var(--pf-c-button--disabled--BackgroundColor);

    &::after {
      --pf-c-button--BorderColor: var(--pf-c-button--disabled--BorderColor);
    }
  }

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

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

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

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

  // Icon Buttons
  &.pf-m-plain {
    color: var(--pf-c-button--m-plain--Color);

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

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

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

// Add spacing to an icon in the button
.pf-c-button__icon {
  margin-right: var(--pf-c-button__icon--MarginRight);
}
