.ProgressStepBarItem {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
  height: 100%;
}

  .ProgressStepBarItem_direction_horizontal {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }

  .ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_xs {
        margin-bottom: var(--space-2xs);
      }

  .ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_s,
      .ProgressStepBarItem_direction_horizontal .ProgressStepBarItem-Point_size_m {
        margin-bottom: var(--space-xs);
      }

  .ProgressStepBarItem_direction_vertical {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
    }

  .ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Point {
        margin-right: var(--space-xs);
      }

  .ProgressStepBarItem_direction_vertical .ProgressStepBarItem-Content_size_xs {
          margin-top: -4px;
        }

  .ProgressStepBarItem_size_xs {
      --progress-step-bar-item-point-size: var(--space-xs);
      --progress-step-bar-item-label-margin: var(--space-2xs);
    }

  .ProgressStepBarItem_size_s {
      --progress-step-bar-item-point-size: var(--space-m);
      --progress-step-bar-item-label-margin: var(--space-xs);
    }

  .ProgressStepBarItem_size_m {
      --progress-step-bar-item-point-size: var(--space-xl);
      --progress-step-bar-item-label-margin: var(--space-xs);
    }

  .ProgressStepBarItem_position_start {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }

  .ProgressStepBarItem_position_start.ProgressStepBarItem_direction_horizontal,
      .ProgressStepBarItem_position_start .ProgressStepBarItem-Content {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        text-align: left;
      }

  .ProgressStepBarItem_position_center {
      -webkit-box-flex: 2;
          -ms-flex: 2;
              flex: 2;
    }

  .ProgressStepBarItem_position_center.ProgressStepBarItem_direction_horizontal,
      .ProgressStepBarItem_position_center .ProgressStepBarItemr-Content {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        text-align: center;
      }

  .ProgressStepBarItem_position_end {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }

  .ProgressStepBarItem_position_end.ProgressStepBarItem_direction_horizontal,
      .ProgressStepBarItem_position_end .ProgressStepBarItem-Content {
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
        text-align: right;
      }

  .ProgressStepBarItem_status_system {
      --progress-step-bar-item-point-background: var(--color-bg-system);
      --progress-step-bar-item-point-content-color: var(--color-typo-secondary);
    }

  .ProgressStepBarItem_status_normal {
      --progress-step-bar-item-point-background: var(--color-bg-normal);
      --progress-step-bar-item-point-content-color: var(--color-bg-default);
    }

  .ProgressStepBarItem_status_success {
      --progress-step-bar-item-point-background: var(--color-bg-success);
      --progress-step-bar-item-point-content-color: var(--color-bg-default);
    }

  .ProgressStepBarItem_status_warning {
      --progress-step-bar-item-point-background: var(--color-bg-warning);
      --progress-step-bar-item-point-content-color: var(--color-bg-default);
    }

  .ProgressStepBarItem_status_alert {
      --progress-step-bar-item-point-background: var(--color-bg-alert);
      --progress-step-bar-item-point-content-color: var(--color-bg-default);
    }

  .ProgressStepBarItem .ProgressStepBarItem-PointText,
  .ProgressStepBarItem .Icon {
    color: var(--progress-step-bar-item-point-content-color);
  }

  .ProgressStepBarItem .ProgressSpin {
    stroke: var(--progress-step-bar-item-point-content-color);
  }

  .ProgressStepBarItem-Point {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-width: var(--progress-step-bar-item-point-size);
    min-height: var(--progress-step-bar-item-point-size);
    margin: 0;
    padding: 0;
    color: var(--color-bg-default);
    background-color: var(--progress-step-bar-item-point-background);
    border: none;
    border-radius: calc(var(--progress-step-bar-item-point-size) * 0.5);
    cursor: pointer;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
  }

  .ProgressStepBarItem-PointText {
    color: var(--color-typo-secondary);
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }

  .ProgressStepBarItem-Label {
    margin-bottom: var(--progress-step-bar-item-label-margin);
  }

  .ProgressStepBarItem-Content_bottomOffset {
      margin-bottom: var(--progress-step-bar-item-label-margin);
    }