@import '../styles/theme.scss';

.step {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  .header {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    width: 128px;
    max-width: 128px;
    min-width: 128px;
    padding: #{$spacingUnit}px #{$spacingUnit * 2}px #{$spacingUnit}px #{$spacingUnit}px;
    .title {
    }
    .time {
    }
  }

  .body {
    flex: 1;
    .box {
      display: flex;
      min-height: 128px;
      .avatar {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        // &::after {
        //   content: '';
        //   height: 100%;
        //   border-left: 4px solid #{$paletteGrey300};
        // }

        .tail {
          height: 100%;
          border-left-width: 4px;
          border-left-style: solid;
          border-left-color: #{$paletteGrey300};

          &.failure {
            border-left-color: $paletteErrorMain;
          }
          &.success {
            border-left-color: $paletteSuccessMain;
          }
          &.progress {
            border-left-color: $paletteProgressMain;
            border-left-style: dashed;
          }
        }
        .status {
          .result {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: absolute;

            // right: 28px;
            // top: 96px;
            // width: 24px;
            // height: 24px;
            // min-height: 24px;
            // border-radius: 50%;
            // font-size: 16px;
            // line-height: 16px;
            // background: $paletteTextPrimary2;

            right: 24px;
            top: 96px;
            font-size: 32px;
            line-height: 32px;
            color: $paletteTextPrimary2;

            &.failure {
              // background: $paletteErrorMain;
              color: $paletteErrorMain;
            }
            &.success {
              // background: $paletteSuccessMain;
              color: $paletteSuccessMain;
            }
            &.progress {
              // background: $paletteProgressMain;
              color: $paletteProgressMain;
            }
          }
        }
      }
      .content {
        padding: #{$spacingUnit}px #{$spacingUnit}px #{$spacingUnit}px #{$spacingUnit * 2}px;
        flex: 1;
        .subtitle {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .status {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .progress {
            padding-right: #{$spacingUnit * 2}px;
          }
        }
      }
    }
  }
}