@import './common/variable.scss';
@import './common/color.scss';

.jd-progress {
  ul {
    display: flex;
    li {
      flex: 1;
      display: flex;
      align-items: center;
      padding-right: 20px;
      &:last-child {
        flex: initial;
      }
      .content {
        &.active {
          .name, .time {
            color: $black-shallow;
          }
          .iconok {
            color: $green;
            font-size: 54px;
          }
        }
        .icon {
          width: 54px;
          height: 54px;
          background: $gray-15;
          color: $white;
          border-radius: 50%;
          overflow: hidden;
          text-align: center;
          line-height: 54px;
          font-size: 34px;
          font-weight: 400;
          margin: 0 auto;
          margin-bottom: 16px;
        }
        .name, .time {
          color: $gray;
          font-size: 12px;
          text-align: center;
        }
      }
      .line {
        flex: 1;
        background-color: $gray-15;
        height: 2px;
        transform: translateY(-22px);
        &.active {
          background-color: $green;
        }
      }
    }
  }
}