@class-prefix-step: ~'adm-step';
@class-prefix-steps: ~'adm-steps';

.@{class-prefix-step} {
  --line-to-next-color: var(--adm-color-border);
  --icon-color: var(--adm-color-border);
  position: relative;
  // make other brother component are not covered
  z-index: 0;

  .@{class-prefix-step}-indicator {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      z-index: 0;
      background-color: var(--line-to-next-color);
    }
    .@{class-prefix-step}-icon-container {
      position: absolute;
      z-index: 1;
      color: var(--icon-color);
      > .antd-mobile-icon {
        display: block;
      }
    }
  }

  &:last-child {
    .@{class-prefix-step}-indicator::after {
      display: none;
    }
  }
  &-status-finish {
    --line-to-next-color: var(--adm-color-primary);
  }

  &-status-wait {
    --icon-color: var(--adm-color-border);
    .adm-step-title {
      color: var(--adm-color-weak);
    }
  }
  &-status-process {
    --icon-color: var(--adm-color-primary);
    .@{class-prefix-step}-title {
      color: var(--adm-color-primary);
    }
  }
  &-status-finish {
    --icon-color: var(--adm-color-primary);
  }
  &-status-error {
    --icon-color: var(--adm-color-danger);
    .@{class-prefix-step}-title {
      color: var(--adm-color-danger);
    }
  }
}

.@{class-prefix-steps} {
  --title-font-size: var(--adm-font-size-main);
  --description-font-size: var(--adm-font-size-4);
  --indicator-margin-right: 0;
  --icon-size: 18px;

  width: 100%;
  box-sizing: border-box;

  &-horizontal {
    display: flex;
    justify-content: space-around;
    padding: 8px 0;

    .@{class-prefix-step} {
      flex: 1;

      .@{class-prefix-step}-indicator {
        width: 100%;
        height: 24px;
        &::after {
          left: 50%;
          top: 50%;
          height: 1px;
          transform: translateY(-50%);
          width: 100%;
        }
        .@{class-prefix-step}-icon-container {
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    .@{class-prefix-step}-content {
      text-align: center;
      font-size: var(--description-font-size);
      padding: 2px 8px 0;
      .@{class-prefix-step}-title {
        font-size: var(--title-font-size);
      }
      .@{class-prefix-step}-description {
        margin-top: 4px;
        color: var(--adm-color-weak);
      }
    }
  }

  &-vertical {
    padding: 8px 16px;

    .@{class-prefix-step} {
      display: flex;
      align-items: stretch;

      .@{class-prefix-step}-indicator {
        flex: none;
        width: 24px;
        margin-right: var(--indicator-margin-right);

        &::after {
          left: 50%;
          top: calc(var(--title-font-size) * 1.5 / 2);
          width: 1px;
          transform: translateX(-50%);
          height: 100%;
        }
        .@{class-prefix-step}-icon-container {
          top: calc(var(--title-font-size) * 1.5 / 2);
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      &:last-child {
        .@{class-prefix-step}-content {
          padding-bottom: 0;
        }
      }
      .@{class-prefix-step}-content {
        flex: auto;
        padding-bottom: 24px;
        .@{class-prefix-step}-title {
          font-size: var(--title-font-size);
          line-height: 1.5;
        }
        .@{class-prefix-step}-description {
          padding-top: 4px;
          font-size: var(--description-font-size);
          color: var(--adm-color-weak);
        }
      }
    }
  }
}

.@{class-prefix-step}-icon-container {
  font-size: var(--icon-size);
}

.@{class-prefix-step}-icon-dot {
  display: block;
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 4px;
}