/*
 * ZWorld Classic Lab
 * Phase 16 — avatars des messages de salons publics.
 *
 * Toutes les règles sont inactives lorsque le réglage est désactivé.
 */

html[data-classic-channel-avatars="1"]
.feed
> .message.classic-channel-avatar-message {
  grid-template-columns:
    36px
    auto
    minmax(0, 1fr) !important;

  grid-template-rows:
    auto
    auto;

  column-gap: 9px !important;
  row-gap: 2px !important;

  align-items: start !important;
}

html[data-classic-channel-avatars="1"]
.feed
> .message.classic-channel-avatar-message
> .classic-channel-avatar {
  grid-column: 1;
  grid-row: 1 / span 2;

  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, .12);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, .075);

  color: #f4f4f5;

  font-size: 13px;
  font-weight: 800;
  line-height: 1;

  user-select: none;
}

html[data-classic-channel-avatars="1"]
.feed
> .message.classic-channel-avatar-message
> .classic-channel-avatar
> img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

html[data-classic-channel-avatars="1"]
.feed
> .message.classic-channel-avatar-message
> .classic-channel-avatar
> .classic-channel-avatar-initial {
  display: block;

  line-height: 1;
}

html[data-classic-channel-avatars="1"]
.feed
> .message.classic-channel-avatar-message
> .message-name {
  grid-column: 2;
  grid-row: 1;

  max-width: min(240px, 40vw);

  align-self: baseline;
}

html[data-classic-channel-avatars="1"]
.feed
> .message.classic-channel-avatar-message
> .message-time {
  grid-column: 3;
  grid-row: 1;

  justify-self: start;
  align-self: baseline;
}

html[data-classic-channel-avatars="1"]
.feed
> .message.classic-channel-avatar-message
> .message-text {
  grid-column: 2 / 4;
  grid-row: 2;

  min-width: 0;
}

html[data-classic-channel-avatars="1"]
.feed
> .message.classic-channel-avatar-message
> :not(.classic-channel-avatar)
  :not(.message-time)
  :not(.message-name)
  :not(.message-text) {
  grid-column: 2 / 4;
}

html[data-classic-channel-avatars="1"]
[data-classic-show-times="0"]
.feed
> .message.classic-channel-avatar-message
> .message-time {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 720px) {
  html[data-classic-channel-avatars="1"]
  .feed
  > .message.classic-channel-avatar-message {
    grid-template-columns:
      32px
      auto
      minmax(0, 1fr) !important;

    column-gap: 8px !important;
  }

  html[data-classic-channel-avatars="1"]
  .feed
  > .message.classic-channel-avatar-message
  > .classic-channel-avatar {
    width: 30px;
    height: 30px;

    font-size: 12px;
  }

  html[data-classic-channel-avatars="1"]
  .feed
  > .message.classic-channel-avatar-message
  > .message-name {
    max-width: min(180px, 42vw);
  }
}

/* ZWORLD_CLASSIC_MEMBER_AVATARS_V1 */
html[data-classic-channel-avatars="1"]
#member-list
> .member
> .member-letter.classic-member-avatar {
  overflow: hidden;
}

html[data-classic-channel-avatars="1"]
#member-list
> .member
> .member-letter.classic-member-avatar
> img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}