.StatisticsRecentMessage {
  position: relative;
  cursor: pointer;
  padding: 0.5rem 0.75rem;

  &:hover, &:active {
    background-color: var(--color-chat-hover);
  }

  &--with-image {
    padding-left: 3.5rem;
  }

  &__summary {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 0.75rem;

    .media-preview__image {
      width: 2.5rem;
      height: 2.5rem;
      position: absolute;
      left: 0.5rem;
      top: 0.5rem;
      object-fit: cover;
      border-radius: 0.25rem;
      margin-inline-end: 0.25rem;

      &.round {
        border-radius: 0.625rem;
      }
    }

    .icon-play {
      position: relative;
      display: inline-block;
      font-size: 0.75rem;
      color: #fff;
      margin-inline-start: -1.25rem;
      margin-inline-end: 0.5rem;
      bottom: 0.0625rem;
    }
  }

  &__title {
    display: flex;
    align-items: center;
    line-height: 1.25rem;
  }

  &__info {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--color-text-meta);
  }

  &__meta {
    font-size: 0.75rem;
  }

  &__date {
    flex: 1;
    font-size: 0.8125rem;
  }
}
