@import 'press-ui/common/style/smoba/layout.scss';
@import 'press-ui/common/style/smoba/mixin.scss';


.press-message-list {
  flex: 1;
  overflow: hidden;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.press-message-item {
  background: rgba(255, 255, 255, .85);
  height: 1.52rem;
  display: flex;
  padding: 0 .32rem;
  align-items: center;

  &__avatar-wrap {
    width: .88rem;
    height: .88rem;
    margin-right: .16rem;
    position: relative;
  }

  &__red-dot {
    position: relative;

    // &::after {
    // content: '';
    position: absolute;
    top: 0;
    right: .06rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: .2rem;
    height: .2rem;
    border-radius: 50%;
    background: $color-red;
    transform: rotate(45deg);
    // }

  }

  &__unread-icon {
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: .22rem;
    height: .22rem;
    transform: rotate(45deg);
    z-index: 1;
    border-radius: .03rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .16rem;
    color: $color-white;
    background: $color-red;
  }

  &__unread-count {
    transform: rotate(-45deg);
  }

  &__avatar {
    border-radius: 50%;
    width: .88rem;
    height: .88rem;
    position: relative;
    z-index: 0;
  }

  &__box {
    height: .84rem;
    flex: 1;
  }

  &__nick {
    height: .48rem;
    line-height: .48rem;
    font-size: $font-l;
    color: $color-black;
  }

  &__content,
  &__time {
    height: .36rem;
    line-height: .36rem;
    color: $color-gray;
    font-size: $font-xxs;
  }

  &__nick,
  &__content {
    width: 4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__delete {
    background: $color-red;
    color: $color-white;
    font-size: $font-l;
    text-align: center;
    height: 1.52rem;
    line-height: 1.52rem;
    width: 100px; // 因为这里滑动距离始终是100px 故不用rem单位
  }
}