.press-card-steps {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  box-sizing: border-box;

  width: 6.94rem;
  height: 1.08rem;
  background-color: #e5f7f5;

  &--center {
    justify-content: center;
  }

  &__item {
    display: flex;
    align-items: center;
    justify-content: center;

    &:last-child {
      .press-card-steps__line {
        display: none;
      }
    }
  }

  &__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    flex-shrink: 0;
  }

  &__line {
    width: .58rem;
    height: .04rem;
    flex-shrink: 0;
    border-radius: .05rem;
    background: rgba(87, 94, 106, .2);
    box-shadow: 0px 2px 2px 0px rgba(255, 255, 255, .25) inset;
  }

  &__name {
    font-size: .24rem;
    color: rgba(33, 33, 36, .55);

    &--active {
      color: #f115c7;
    }
  }

  &__time {
    font-size: .2rem;
    color: rgba(33, 33, 36, .55);

    &--active {
      color: #f115c7;
    }

    &--playing {
      padding-right: .2rem;
      padding-left: .1rem;
      background: #f4f450;
      opacity: .8999999761581421;
      transform: scale(.8);
      clip-path: polygon(0 4%, 91% 0, 100% 100%, 0% 100%);
      color: #2a333c;
      text-align: center;
      font-family: PingFang SC;
      font-size: .2rem;
    }
  }
}