@import "../common/index.less";

.ph-subtitle {
  display: flex;
  font-size: 12px;
  border-radius: 10000px;

  &.is-pad {
    font-size: @r * 12px;

    .main-container {
      height: @r * 40px;
      margin-left: @r * 6px;

      .scroll-box {
        margin-right: @r * 10px;

        &.transiting {
          transform: translateY(@r * -40px);
        }

        .subtitle-column {
          height: @r * 40px;
          line-height: @r * 40px;

          .ph-avatar {
            width: @r * 30px;
            height: @r * 30px;
            margin-top: @r * 5px;
            margin-right: @r * 10px;
          }
        }
      }
    }

    .right-container {
      margin-right: @r * 20px;
      line-height: @r * 40px;
    }
  }

  .main-container {
    flex: 1;
    overflow: hidden;
    height: 40px;
    margin-left: 6px;

    .scroll-box {
      margin-right: 10px;
      transform: translateY(0);
      will-change: transform;

      &.transiting {
        transform: translateY(-40px);
        transition: transform 1s;
      }

      .subtitle-column {
        display: inline-flex;
        max-width: 100%;
        height: 40px;
        color: #fff;
        line-height: 40px;

        .ph-avatar {
          width: 30px;
          height: 30px;
          margin-top: 5px;
          margin-right: 10px;
        }

        .subtitle-name {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .subtitle-text {
          display: inline-block;
        }
      }
    }
  }

  .right-container {
    display: inline-block;
    margin-right: 20px;
    line-height: 40px;

    .right-num {
      color: #ffbb0b;
    }

    .right-text {
      color: #fff;
    }
  }
}