// 按钮组件
.press-card-button {
  position: relative;

  /*提示气泡*/
  &__tips {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    padding: 0 .25rem;

    top: -.48rem;
    left: 50%;
    transform: translateX(-50%) skewX(-15deg);

    min-width: 2rem;
    max-width: 6.5rem;
    white-space: nowrap;
    height: .36rem;
    line-height: .36rem;

    color: #fff;
    font-size: .2rem;
    line-height: .36rem;
    background: #2a333c;
    text-align: center;

    &:before {
      content: '';
      position: absolute;
      bottom: -.1rem;
      left: 50%;
      margin-left: -.1rem;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: .1rem .1rem 0 .1rem;
      border-color: rgba(0, 0, 0, .6) transparent transparent transparent;
    }
  }

  &__avatar-tips {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;

    top: -.72rem;
    left: 50%;
    min-width: 3.7rem;
    max-width: 6.5rem;
    width: 100%;
    white-space: nowrap;
    height: .6rem;
    line-height: .6rem;
    color: #fff;
    font-size: .2rem;
    line-height: .36rem;
    background: #2a333c;
    text-align: center;

    padding: 0 .15rem;
    transform: translateX(-50%);
    box-sizing: content-box;

    &:before {
      content: '';
      position: absolute;
      bottom: -.1rem;
      left: 50%;
      margin-left: -.1rem;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: .1rem .1rem 0 .1rem;
      border-color: rgba(0, 0, 0, .6) transparent transparent transparent;
    }
  }

  &__avatars {
    margin-left: .08rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  &__avatar-wrap {
    position: relative;
    width: .4rem;
    height: .4rem;
    margin-right: .08rem;

    &--green {
      &::after {
        content: '';
        width: .08rem;
        height: .08rem;
        background-color: #48c284;
        border-radius: 50%;
        position: absolute;
        right: -.01rem;
        bottom: 0;
        fill: #48c284;
      }
    }

    &--yellow {
      &::after {
        content: '';
        width: .08rem;
        height: .08rem;
        background-color: #ffbf00;
        border-radius: 50%;
        position: absolute;
        right: -.01rem;
        bottom: 0;
        fill: #ffbf00;
      }
    }

    &:last-child {
      margin-right: 0;
    }
  }

  &__avatar {
    width: .4rem;
    height: .4rem;
  }

  &__main {
    position: relative;
    width: 4rem;
    height: .72rem;
    line-height: .72rem;
    padding: 0 .2rem;
    box-sizing: border-box;
    margin-top: .032rem;

    color: #2a333c;
    font-size: .32rem;
    text-align: center;
    font-family: 'PEACE';
    font-weight: 700;
    background: linear-gradient(90deg, #33e2d1 22.22%, #98eb8e 88.89%);
    clip-path: polygon(50% 0%, 100% 0, 100% 76%, 96% 100%, 0 100%, 0% 60%, 0 0);

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    &--green {
      color: #2a333c;
      background: linear-gradient(90deg, #33e2d1 22.22%, #98eb8e 88.89%);

      .press-count-down {
        color: #323233;
      }
    }

    &--gray {
      color: #eaeff2;
      background: #8e95a0;

      .press-count-down {
        color: #fff;
      }
    }


    .press-count-down {
      display: inline-block;
      font-family: 'PEACE';
      font-size: .24rem;
      font-style: normal;
      font-weight: 700;
      margin-right: -.9rem;
      margin-left: .1rem;
      min-width: 1rem;
    }
  }
}