.pf-c-input-group {
  // Input group
  --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);

  // Input group text
  --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
  --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
  --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
  --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
  --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
  --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
  --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);

  // Form control
  --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
  --pf-c-input-group--c-form-control--MarginRight: 0;

  // This component always needs to be light
  @include pf-t-light;

  display: flex;
  width: 100%;
  background-color: var(--pf-c-input-group--BackgroundColor);

  // stylelint-disable
  > * + * {
    margin-left: -1px;
  }
  // stylelint-enable

  > :focus,
  > :focus-within {
    z-index: var(--pf-c-input-group--child--ZIndex);
  }

  .pf-c-form-control {
    &[aria-invalid="true"] {
      &:not(:last-child) {
        margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
      }
    }
  }

  input:not([type="checkbox"]):not([type="radio"]),
  textarea {
    flex: 2;
    min-width: 0;
  }

  textarea {
    min-height: var(--pf-c-input-group__textarea--MinHeight);
  }
}

.pf-c-input-group__text {
  display: flex;
  align-items: center;
  padding-right: var(--pf-c-input-group__text--PaddingRight);
  padding-left: var(--pf-c-input-group__text--PaddingLeft);
  font-size: var(--pf-c-input-group__text--FontSize);
  color: var(--pf-c-input-group__text--Color);
  text-align: center;
  background-color: var(--pf-c-input-group__text--BackgroundColor);
  border: var(--pf-c-input-group__text--BorderWidth) solid;
  border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);

  @at-root label#{&} {
    cursor: pointer;
  }

  &.pf-m-plain {
    --pf-c-input-group__text--BorderWidth: 0;

    margin-left: 0;
  }
}