@patternfly/elements/pf-progress-stepper/pf-progress-stepper.css

PatternFly Elements

[hidden] {
  display: none !important;
}

:host {
  /** Grid auto flow for vertical layout */
  --pf-c-progress-stepper--m-vertical--GridAutoFlow: row;
  /** Grid template columns for vertical layout */
  --pf-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
  /** Top position for vertical step connector pseudo-element */
  --pf-c-progress-stepper--m-vertical__step-connector--before--Top: 0;
  /** Left position for vertical step connector pseudo-element */
  --pf-c-progress-stepper--m-vertical__step-connector--before--Left: calc(var(--pf-c-progress-stepper__step-icon--Width) / 2);
  /** Width for vertical step connector pseudo-element */
  --pf-c-progress-stepper--m-vertical__step-connector--before--Width: auto;
  /** Height for vertical step connector pseudo-element */
  --pf-c-progress-stepper--m-vertical__step-connector--before--Height: 100%;
  /** Right border width for vertical step connector pseudo-element */
  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-global--BorderWidth--md, 2px);
  /** Right border color for vertical step connector pseudo-element */
  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-global--BorderColor--100, #d2d2d2);
  /** Bottom border width for vertical step connector pseudo-element */
  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0;
  /** Bottom border color for vertical step connector pseudo-element */
  --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor: transparent;
  /** Transform for vertical step connector pseudo-element */
  --pf-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);
  /** Top margin for vertical step main content */
  --pf-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem);
  /** Right margin for vertical step main content */
  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: 0;
  /** Bottom margin for vertical step main content */
  --pf-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-global--spacer--xl, 2rem);
  /** Left margin for vertical step main content */
  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
  /** Grid template columns for vertical compact layout */
  --pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;
  /** Padding bottom for vertical compact step connector */
  --pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
  /** Grid row for vertical compact step connector */
  --pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;
  /** Right margin for vertical compact step main content */
  --pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight: 0;
  /** Right margin for vertical centered step main content */
  --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight: 0;
  /** Left margin for vertical centered step main content */
  --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft: 0;
  /** Grid auto flow for horizontal layout */
  --pf-c-progress-stepper--m-horizontal--GridAutoFlow: column;
  /** Grid template columns for horizontal layout */
  --pf-c-progress-stepper--m-horizontal--GridTemplateColumns: initial;
  /** Top position for horizontal step connector pseudo-element */
  --pf-c-progress-stepper--m-horizontal__step-connector--before--Top: calc(var(--pf-c-progress-stepper__step-icon--Height) / 2);
  /** Left position for horizontal step connector pseudo-element */
  --pf-c-progress-stepper--m-horizontal__step-connector--before--Left: 0;
  /** Width for horizontal step connector pseudo-element */
  --pf-c-progress-stepper--m-horizontal__step-connector--before--Width: 100%;
  /** Height for horizontal step connector pseudo-element */
  --pf-c-progress-stepper--m-horizontal__step-connector--before--Height: auto;
  /** Right border width for horizontal step connector pseudo-element */
  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth: 0;
  /** Right border color for horizontal step connector pseudo-element */
  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor: unset;
  /** Bottom border width for horizontal step connector pseudo-element */
  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
  /** Bottom border color for horizontal step connector pseudo-element */
  --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2);
  /** Transform for horizontal step connector pseudo-element */
  --pf-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%);
  /** Top margin for horizontal step main content */
  --pf-c-progress-stepper--m-horizontal__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem);
  /** Right margin for horizontal step main content */
  --pf-c-progress-stepper--m-horizontal__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
  /** Bottom margin for horizontal step main content */
  --pf-c-progress-stepper--m-horizontal__step-main--MarginBottom: 0;
  /** Left margin for horizontal step main content */
  --pf-c-progress-stepper--m-horizontal__step-main--MarginLeft: 0;
  /** Grid template columns for horizontal compact layout */
  --pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem);
  /** Padding bottom for horizontal compact step connector */
  --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom: 0;
  /** Grid row for horizontal compact step connector */
  --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2;
  /** Grid auto flow for compact layout */
  --pf-c-progress-stepper--m-compact--GridAutoFlow: row;
  /** Top margin for compact step main content */
  --pf-c-progress-stepper--m-compact__step-main--MarginTop: 0;
  /** Bottom margin for compact step main content */
  --pf-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-global--spacer--xs, 0.25rem);
  /** Minimum width for compact step connector */
  --pf-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem;
  /** Width for compact step icon */
  --pf-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;
  /** Font size for compact step icon */
  --pf-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
  /** Font size for compact step title */
  --pf-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
  /** Font weight for compact step title */
  --pf-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
  /** Top margin for compact pficon */
  --pf-c-progress-stepper--m-compact__pficon--MarginTop: 2px;
  /** Top margin for compact exclamation triangle icon */
  --pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px;
  /** Left position for centered step connector pseudo-element */
  --pf-c-progress-stepper--m-center__step-connector--before--Left: 50%;
  /** Grid template columns for centered layout */
  --pf-c-progress-stepper--m-center--GridTemplateColumns: 1fr;
  /** Justify content for centered step connector */
  --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
  /** Right margin for centered step main content */
  --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
  /** Left margin for centered step main content */
  --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
  /** Text alignment for centered step main content */
  --pf-c-progress-stepper--m-center__step-main--TextAlign: center;
  /** Right margin for centered step description */
  --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
  /** Left margin for centered step description */
  --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
  /** Grid template rows */
  --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
  /** Justify content for step connector */
  --pf-c-progress-stepper__step-connector--JustifyContent: start;
  /** Z-index for step icon */
  --pf-c-progress-stepper__step-icon--ZIndex: var(--pf-global--ZIndex--xs, 100);
  /** Width of the step icon */
  --pf-c-progress-stepper__step-icon--Width: 1.75rem;
  /** Height of the step icon */
  --pf-c-progress-stepper__step-icon--Height: var(--pf-c-progress-stepper__step-icon--Width);
  /** Font size of the step icon */
  --pf-c-progress-stepper__step-icon--FontSize: var(--pf-global--FontSize--md, 1rem);
  /** Color of the step icon */
  --pf-c-progress-stepper__step-icon--Color: var(--pf-global--Color--100, #151515);
  /** Background color of the step icon */
  --pf-c-progress-stepper__step-icon--BackgroundColor: var(--pf-global--BackgroundColor--light-200, #fafafa);
  /** Border width of the step icon */
  --pf-c-progress-stepper__step-icon--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
  /** Border color of the step icon */
  --pf-c-progress-stepper__step-icon--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
  /** Top margin for pficon */
  --pf-c-progress-stepper__pficon--MarginTop: 3px;
  /** Top margin for exclamation triangle icon */
  --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px;
  /** Color of the step title */
  --pf-c-progress-stepper__step-title--Color: var(--pf-global--Color--100, #151515);
  /** Text alignment of the step title */
  --pf-c-progress-stepper__step-title--TextAlign: left;
  /** Font size of the step title */
  --pf-c-progress-stepper__step-title--FontSize: var(--pf-global--FontSize--md, 1rem);
  /** Font weight of the step title */
  --pf-c-progress-stepper__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400);
  /** Font weight for current step title */
  --pf-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-global--FontWeight--bold, 700);
  /** Color for current step title */
  --pf-c-progress-stepper__step--m-current__step-title--Color: var(--pf-global--Color--100, #151515);
  /** Color for pending step title */
  --pf-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-global--Color--200, #6a6e73);
  /** Color for danger step title */
  --pf-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-global--danger-color--100, #c9190b);
  /** Text decoration color for help text step title */
  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200, #8a8d90);
  /** Text decoration thickness for help text step title */
  --pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm, 1px);
  /** Text underline offset for help text step title */
  --pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset: 0.25rem;
  /** Text decoration color for help text step title on hover */
  --pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100, #151515);
  /** Text decoration color for help text step title on focus */
  --pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100, #151515);
  /** Color for help text step title on hover */
  --pf-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-global--Color--100, #151515);
  /** Color for help text step title on focus */
  --pf-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-global--Color--100, #151515);
  /** Color for danger help text step title on hover */
  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-global--danger-color--200, #a30000);
  /** Color for danger help text step title on focus */
  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color: var(--pf-global--danger-color--200, #a30000);
  /** Text decoration color for danger help text step title */
  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--pf-global--danger-color--100, #c9190b);
  /** Text decoration color for danger help text step title on hover */
  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--danger-color--200, #a30000);
  /** Text decoration color for danger help text step title on focus */
  --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor: var(--pf-global--danger-color--200, #a30000);
  /** Top margin for step description */
  --pf-c-progress-stepper__step-description--MarginTop: var(--pf-global--spacer--xs, 0.25rem);
  /** Font size of the step description */
  --pf-c-progress-stepper__step-description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
  /** Color of the step description */
  --pf-c-progress-stepper__step-description--Color: var(--pf-global--Color--200, #6a6e73);
  /** Text alignment of the step description */
  --pf-c-progress-stepper__step-description--TextAlign: left;
  /** Grid auto flow (defaults to vertical) */
  --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
  /** Grid template columns (defaults to vertical) */
  --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
  /** Top position for step connector pseudo-element (defaults to vertical) */
  --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);
  --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);
  --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);
  --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);
  --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);
  --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);
  --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);
  --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);
  --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);
  --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);
  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);
  --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);
  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);
  --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
  --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
  --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);
  --pf-c-progress-stepper--m-center__step-connector--before--Content: none;
  --pf-c-progress-stepper--m-center__step-main--before--Content: '';
  --pf-c-progress-stepper__step-connector--before--Content: '';
  --pf-c-progress-stepper__step-main--before--Content: none;
  position: relative;
  display: grid;
  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
  grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
  grid-template-rows: var(--pf-c-progress-stepper--GridTemplateRows);
  grid-auto-columns: 1fr;
}

@media (min-width: 768px) {
  :host {
    --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-horizontal--GridAutoFlow, column);
    --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--GridTemplateColumns, initial);
    --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Top);
    --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Left);
    --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Width);
    --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Height);
    --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth);
    --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor);
    --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth);
    --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor);
    --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-horizontal__step-connector--before--Transform);
    --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginTop);
    --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginRight);
    --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginBottom);
    --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-horizontal__step-main--MarginLeft);
    --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns);
    --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow);
    --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom);
    --pf-c-progress-stepper__step-connector--before--Content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);
    --pf-c-progress-stepper__step-main--before--Content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);
    --pf-c-progress-stepper--m-center__step-connector--before--Content: '';
    --pf-c-progress-stepper--m-center__step-main--before--Content: none;
  }
}

:host([center]) {
  --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);
  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);
  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);
  --pf-c-progress-stepper--step-main--TextAlign: var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);
  --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);
  --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);
  --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);
  --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);
  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);
  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);
  --pf-c-progress-stepper__step-connector--before--Content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);
  --pf-c-progress-stepper__step-main--before--Content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);
  --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-center__step-connector--before--Left);

  grid-template-columns: var(--pf-c-progress-stepper--m-center--GridTemplateColumns);
}

:host([center]:not([compact])) {
  --pf-c-progress-stepper__step-main--before--Content: var(--pf-c-progress-stepper--m-center__step-main--before--Content);
  --pf-c-progress-stepper__step-connector--before--Content: var(--pf-c-progress-stepper--m-center__step-connector--before--Content);
}

:host([vertical]) ::slotted(pf-progress-step) {
  flex-direction: row;
  align-items: flex-start;
}

:host([vertical]) {
  --pf-c-progress-stepper--GridAutoFlow: var(--pf-c-progress-stepper--m-vertical--GridAutoFlow);
  --pf-c-progress-stepper--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--GridTemplateColumns);
  --pf-c-progress-stepper__step-connector--before--Top: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Top);
  --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Left);
  --pf-c-progress-stepper__step-connector--before--Width: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Width);
  --pf-c-progress-stepper__step-connector--before--Height: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Height);
  --pf-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth);
  --pf-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor);
  --pf-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth);
  --pf-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor);
  --pf-c-progress-stepper__step-connector--before--Transform: var(--pf-c-progress-stepper--m-vertical__step-connector--before--Transform);
  --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-vertical__step-main--MarginTop);
  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical__step-main--MarginRight);
  --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-vertical__step-main--MarginBottom);
  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical__step-main--MarginLeft);
  --pf-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns);
  --pf-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow);
  --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);
  --pf-c-progress-stepper__step-connector--before--Content: '';
  --pf-c-progress-stepper__step-main--before--Content: none;
  --pf-c-progress-stepper--m-center__step-connector--before--Content: none;
  --pf-c-progress-stepper--m-center__step-main--before--Content: '';
  --pf-c-progress-stepper__step-main--Position: relative;
}

:host([vertical][center]) {
  --pf-c-progress-stepper__step-connector--before--Left: var(--pf-c-progress-stepper--m-center__step-connector--before--Left);
}

:host([compact]) {
  --pf-c-progress-stepper__step-main--MarginTop: var(--pf-c-progress-stepper--m-compact__step-main--MarginTop);
  --pf-c-progress-stepper__step-main--MarginBottom: var(--pf-c-progress-stepper--m-compact__step-main--MarginBottom);
  --pf-c-progress-stepper__step-icon--Width: var(--pf-c-progress-stepper--m-compact__step-icon--Width);
  --pf-c-progress-stepper__step-icon--FontSize: var(--pf-c-progress-stepper--m-compact__step-icon--FontSize);
  --pf-c-progress-stepper__step-title--FontSize: var(--pf-c-progress-stepper--m-compact__step-title--FontSize);
  --pf-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-c-progress-stepper--m-compact__step-title--FontWeight);
  --pf-c-progress-stepper__pficon--MarginTop: var(--pf-c-progress-stepper--m-compact__pficon--MarginTop);
  --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop: var(--pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop);
  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft);
  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight);
  display: inline-grid;
  grid-template-columns: var(--pf-c-progress-stepper--m-compact--GridTemplateColumns);
  grid-auto-flow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);
}