.steps-wrapper {
  --size: 32px;
  --line: 4px;
  ol {
    display: flex;
    // gap: 48px;
    &.is-column {
      flex-direction: column;
      li {
        --line: 2px;
        flex-direction: row;
        gap: 8px;
        text-align: left;
        align-items: flex-start;
        padding-bottom: 24px;
        .step-header {
          margin: 0;
        }

        &:not(&:last-child) {
          &::before {
            position: absolute;
            content: "";
            height: var(--line);
            top: 0;
            left: calc(var(--size) / 2 - var(--line) / 2);
            order: -1;
            background-color: #e2e8f0;
            height: 100%;
            width: 2px;
            z-index: -1;
          }
        }
        &:last-child {
          &::before {
            display: none;
          }
        }
        &.is-complete {
          &::before {
            background-color: $ac-primary !important;
          }
        }
      }
    }
    &.is-row {
      li {
        &.is-active {
          &:not(&:first-child) {
            &::before {
              background-color: $ac-primary;
            }
          }
        }
      }
    }
    li {
      display: flex;
      flex: 1 1 0%;
      align-items: center;
      flex-direction: column;
      position: relative;
      text-align: center;
      cursor: pointer;
      z-index: 1;
      opacity: 0.7;
      &.is-active {
        opacity: 1;
        .step-header {
          background-color: $ac-primary;
          color: #fff;
        }
      }
      &.is-complete {
        opacity: 1;
        &:not(&:first-child) {
          &::before {
            background-color: $ac-primary;
          }
        }
        p {
          opacity: 1;
        }
      }
      &:not(&:first-child) {
        &::before {
          position: absolute;
          content: "";
          height: var(--line);
          left: calc(-50% + 16px);
          top: calc(var(--size) / 2 - var(--line) / 2);
          order: -1;
          background-color: #e2e8f0;
          width: calc(100% - var(--size));
          z-index: -1;
        }
      }

      .step-header {
        background-color: #e2e8f0;
        align-items: center;
        display: flex;
        flex-shrink: 0;
        height: var(--size);
        justify-content: center;
        // margin: auto auto 8px;
        margin-bottom: 8px;
        position: relative;
        width: var(--size);
        border-radius: 50%;
      }
      p {
        margin: 0;
        padding: 0;
      }
    }
  }
}