.StepsStep {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--space-xs) 0;
  color: var(--color-control-typo-ghost);
  background-color: transparent;
  border: none;
  font-family: var(--font);
  line-height: var(--line-height-text-s);
  text-align: left;
  cursor: pointer;
  -webkit-transition: color 0.2s, font-weight 0.2s;
  transition: color 0.2s, font-weight 0.2s;
}

  .StepsStep-Icon {
    margin-right: var(--space-2xs);
  }

  .StepsStep::after {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: var(--color-control-bg-ghost);
    border-radius: var(--control-radius);
    -webkit-transition: background-color 0.2s, opacity 0.2s;
    transition: background-color 0.2s, opacity 0.2s;
  }

  .StepsStep:hover {
    color: var(--color-control-typo-ghost-hover);
  }

  .StepsStep:hover::after {
      background-color: var(--color-control-bg-ghost-hover);
    }

  .StepsStep:focus {
    outline: none;
  }

  .StepsStep_size_m {
      font-size: var(--size-text-m);
    }

  .StepsStep_size_l {
      font-size: var(--size-text-l);
    }

  .StepsStep_skipped,
  .StepsStep_completed,
  .StepsStep_active {
    color: var(--color-control-typo-secondary);
  }

  .StepsStep_skipped::after, .StepsStep_completed::after, .StepsStep_active::after {
      background-color: var(--color-control-bg-border-secondary);
      opacity: 0.5;
    }

  .StepsStep_skipped:hover, .StepsStep_completed:hover, .StepsStep_active:hover {
      color: var(--color-control-typo-secondary-hover);
    }

  .StepsStep_skipped:hover::after, .StepsStep_completed:hover::after, .StepsStep_active:hover::after {
        background-color: var(--color-control-bg-border-secondary-hover);
        opacity: 0.5;
      }

  .StepsStep_active {
    font-weight: 600;
  }

  .StepsStep_active::after {
      opacity: 1;
    }

  .StepsStep_active:hover::after {
        opacity: 1;
      }

  .StepsStep_disabled {
    color: var(--color-control-typo-disable);
    cursor: unset;
  }

  .StepsStep_disabled::after {
      background-color: var(--color-control-bg-disable);
    }

  .StepsStep_disabled:hover {
      color: var(--color-control-typo-disable);
    }

  .StepsStep_disabled:hover::after {
        background-color: var(--color-control-bg-disable);
      }