@import '../../styles/common.scss';
$icon-size: 30px;
$icon-color: #e5e5e5;
$line-to-next-color: #e5e5e5;

.step {
  .step-indicator {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      z-index: 0;
      background-color: #e5e5e5;
    }
    .step-icon-container {
      position: absolute;
      z-index: 1;
      background: white;
    }
  }

  &:last-child {
    .step-indicator::after {
      display: none;
    }
  }
  &-status-finish {
    .step-indicator::after {
      background-color: $color_main;
    }
  }

  &-status-wait {
    .step-icon-container {
      color: #e5e5e5;
    }
    .step-title {
      color: #999;
    }
  }
  &-status-process {
    .step-icon-container {
      color: $color_main;
    }
    .step-title {
      color: $color_main;
    }
  }
  &-status-finish {
    .step-icon-container {
      color: $color_main;
    }
  }
  &-status-error {
    .step-icon-container {
      color: $color_danger;
    }
    .step-title {
      color: $color_danger;
    }
  }
}

.steps {
  $title-font-size: 28px;
  $description-font-size: 24px;
  $indicator-margin-right: 0;

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

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

    .step {
      flex: 1;

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

    .step-content {
      text-align: center;
      font-size: $description-font-size;
      padding: 4px 16px 0;
      .step-title {
        font-size: $title-font-size;
      }
      .step-description {
        margin-top: 8px;
        color: #999;
      }
    }
  }

  &-vertical {
    padding: 16px 32px;

    .step {
      display: flex;
      align-items: stretch;

      .step-indicator {
        flex: none;
        width: 48px;
        margin-right: $indicator-margin-right;

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

      &:last-child {
        .step-content {
          padding-bottom: 0;
        }
      }
      .step-content {
        flex: auto;
        padding-bottom: 48px;
        .step-title {
          font-size: $title-font-size;
          line-height: 1.5;
        }
        .step-description {
          padding-top: 8px;
          font-size: $description-font-size;
          color: #999;
        }
      }
    }
  }
}

.step-icon-container {
  font-size: $icon-size;
}

.step-icon-dot {
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  border-radius: 8px;
}
