@use "colors";

[data-list-id="chat-messages"] > [class*="groupStart_"] {
  &:has(+ [class*="groupStart_"]),
  &:has(+ [class^="divider_"]),
  &:has(+ [class^="messageListItem_"] > [class*="groupStart_"]) {
    & > [class^="messageListItem_"] > [class*="message_"] {
      padding-bottom: 3px;
    }
  }
}

[class^="messageListItem_"]:has(> [class*="message_"][class*="cozy_"]) {
  & ~ [class^="divider_"] {
    top: 0;
    margin-left: 0;
    margin-right: 0;

    &[class*="hasContent_"] {
      margin-top: 0.25rem;
    }
  }

  & ~ [class^="scrollerSpacer_"] {
    height: 0 !important;
  }

  & ~ [class*="groupStart_"] {
    margin: 0;
  }

  &:has(+ [class*="groupStart_"]),
  &:has(+ [class^="divider_"]),
  &:has(+ [class^="messageListItem_"] > [class*="groupStart_"]) {
    & > [class*="message_"] {
      margin-bottom: 3px !important;

      &[class*="groupStart_"] {
        margin-bottom: 0 !important;
        padding-bottom: 3px !important;
      }
    }
  }

  [class*="message_"][class*="cozy_"] {
    padding: 0;
    padding-left: 32px;
    min-height: unset;

    &[class*="hasThread_"]::after {
      display: none;
    }

    &[class*="groupStart_"] {
      border-top: 1px solid colors.$c0;
      margin: 0;
      padding-top: 3px;
      padding-right: 0 !important;
      & > [class^="buttonContainer_"] {
        top: 16px;
      }
    }

    & > [class^="buttonContainer_"] {
      top: 0;

      & > [class^="buttons_"] {
        padding: 0;
        top: 0;

        & > [class^="buttonsInner_"] {
          height: 13px;
          border-radius: 0;

          & > [class^="button_"] {
            padding: 0;
            height: 13px;
            min-width: 13px;
          }
        }
      }
    }

    & > [class^="contents_"] {
      & > [class*="messageContent_"]:has(> [class^="attachment_"]) {
        margin: 0;
      }

      & > [class^="avatar_"] {
        left: 3px;
        width: 26px;
        height: 26px;
        margin-top: 0;
      }

      & > [class^="avatarDecoration_"] {
        left: 1px;
        width: 30px;
        height: 30px;
        margin-top: -2px;
      }

      & > [class^="header_"] {
        font-size: 12px;
        line-height: 13px;
        min-height: unset;
        height: 13px;

        [id^="message-username-"] {
          height: 13px;
          display: inline-block;

          & > * {
            top: 0;
          }

          [class^="username_"] {
            display: inline-block;
            font-size: 12px;
            line-height: 13px;
            font-weight: bold;

            .emoji {
              width: 13px;
              height: 13px;
              min-height: 13px;
            }
          }

          [class^="roleIcon_"] {
            width: 13px;
            height: 13px;
            top: 0;
          }

          .platform-icons-username {
            margin-left: 2px;
          }

          :is(
              .platform-icons-wrapper,
              .roleTags-wrapper,
              [class^="newMemberBadge_"]
            )
            > svg {
            width: 13px;
            height: 13px;
            margin: 0 !important;
          }
        }

        [class^="timestamp_"] {
          position: absolute;
          right: 0;
        }
      }

      [class*="timestamp_"] {
        font-size: 12px;
        line-height: 13px;
        height: unset;
      }

      & > [class^="markup_"] {
        font-size: 12px;
        line-height: 13px;

        & > :not(:is(h1, h2, h3)) {
          .emoji {
            width: 13px;
            height: 13px;
            min-height: 13px;
          }

          .emoji.jumboable {
            width: 20px;
            height: 20px;
            min-height: 20px;
          }
        }

        h1 {
          margin: 0;
        }

        blockquote {
          padding: 0;
          padding-left: 5px;
        }

        code.inline {
          font-size: 12px;
        }

        [class^="blockquoteDivider_"] {
          border-radius: 0;
        }
      }

      [class*="timestampVisibleOnHover_"] {
        opacity: 1;
        margin: 0;
        left: unset;
        right: 0;
      }
    }

    & > [id^="message-accessories-"] {
      & > [class^="reactions_"] {
        padding: 0;
        margin: 0;

        [class^="reaction_"] {
          margin-bottom: 0;
          border: none;
          border-radius: 4px;
          height: 13px;

          & > [class^="reactionInner_"] {
            padding: 0;

            div:has(> .emoji) {
              height: 13px;
            }

            .emoji {
              margin: 0;
              width: 13px;
              height: 13px;
              min-height: 13px;
              display: block;
            }

            & > [class^="reactionCount_"] {
              font-size: 12px;
              padding: 0 4px;
              margin: 0;
              font-weight: normal;
            }
          }
        }

        [class^="reactionBtn_"] {
          width: 13px;
          height: 13px;
          margin: 0;

          & > svg {
            width: 13px;
            height: 13px;
          }
        }
      }

      [class^="embedWrapper_"] {
        border-radius: 0;
        padding: 5px;

        [class^="grid_"] {
          padding: 0;

          .emoji {
            width: 13px;
            height: 13px;
            min-height: 13px;
          }

          .emoji.jumboable {
            width: 20px;
            height: 20px;
            min-height: 20px;
          }

          h1 {
            margin: 0;
          }

          blockquote {
            padding: 0;
            padding-left: 5px;
          }

          code.inline {
            font-size: 12px;
          }

          [class^="blockquoteDivider_"] {
            border-radius: 0;
          }

          & > [class^="embedAuthor_"] {
            margin: 0;
            line-height: 13px;

            & > [class^="embedAuthorIcon_"] {
              width: 13px;
              height: 13px;
              margin-right: 4px;
            }

            & > [class*="embedAuthorName_"] {
              font-size: 12px;
            }

            & + [class^="embedTitle_"] {
              margin-top: 5px;
            }
          }

          & > [class^="embedTitle_"] {
            margin: 0;
            line-height: 13px;
            font-size: 12px;

            & > [class*="embedTitleLink_"] {
              font-size: 12px;
              line-height: 13px;
            }
          }

          & > [class^="embedDescription_"] {
            margin-top: 5px;
            line-height: 13px;
            font-size: 12px;
          }

          & > [class^="embedFields_"] {
            margin-top: 5px;
            line-height: 13px;

            & > [class^="embedField_"] {
              & > :is([class^="embedFieldName_"], [class^="embedFieldValue_"]) {
                line-height: 13px;
                font-size: 12px;
              }
            }
          }

          & > [class^="embedFooter_"] {
            margin-top: 5px;
            line-height: 13px;

            & > [class^="embedFooterIcon_"] {
              width: 13px;
              height: 13px;
              margin-right: 4px;
            }

            & > [class*="embedFooterText_"] {
              font-size: 12px;
              line-height: 13px;
            }
          }

          & > [class*="embedProvider_"] {
            margin: 0;
            line-height: 13px;
            font-size: 12px;

            & + [class^="embedAuthor_"] {
              margin-top: 5px;
            }
          }

          & > [class*="embedThumbnail_"] {
            margin: 0;
            margin-left: 5px;

            [class^="imageWrapper_"] {
              width: 64px !important;
              height: 64px !important;

              img {
                width: 64px !important;
                height: 64px !important;
              }
            }
          }

          & > [class*="embedImage_"] {
            margin-top: 5px;
          }

          & > :is([class^="embedVideo_"], [class^="embedMedia_"]) {
            margin-top: 5px;
          }
        }
      }

      [class^="mediaAttachmentsContainer_"] {
        border-radius: 0;

        & > div {
          border-radius: 0;
        }

        [class^="messageAttachment_"] {
          border-radius: 0;
        }
      }

      [class^="imageWrapper_"] {
        border-radius: 0;

        img {
          border-radius: 0;
        }
      }

      [class^="altText_"] {
        margin: 3px 0;
      }
    }

    [class^="repliedMessage_"] {
      font-size: 12px;
      line-height: 13px;
      margin: 0;
      position: absolute;
      top: 16px;
      color: var(--text-normal);
      opacity: 0.64;
      height: 13px !important;

      &::before {
        margin: 0;
        position: unset;
        top: unset;
        left: unset;
        right: unset;
        bottom: unset;
        border: none;
        content: "> ";
        font-size: 12px;
        line-height: 13px;
        font-weight: bold;
      }

      & + [class^="contents_"] > [class^="header_"] {
        margin-bottom: 13px;
      }

      & > :is([class^="replyAvatar_"], [class^="executedCommandAvatar_"]) {
        display: none;
      }

      & > [class^="username_"] {
        display: inline-block;
        font-size: 12px;
        line-height: 13px;
        font-weight: bold;
        opacity: 1;

        .emoji {
          width: 13px;
          height: 13px;
          min-height: 13px;
        }
      }

      :is(.platform-icons-wrapper, .roleTags-wrapper) {
        margin-left: 0 !important;

        & > svg {
          width: 13px;
          height: 13px;
          margin: 0 !important;
          margin: 0 !important;
        }
      }

      &[class*="executedCommand_"] {
        .platform-icons-username {
          top: 0 !important;
          margin-right: 0 !important;
          margin-left: 2px !important;
        }
      }

      & > [class^="repliedTextPreview_"] {
        margin: 0;

        .emoji {
          width: 13px;
          height: 13px;
          min-height: 13px;
        }
      }
      & > [class^="repliedTextContentIcon_"] {
        margin-left: 2px;
        width: 13px;
        height: 13px;
      }

      [class*="timestamp_"] {
        font-size: 12px;
        line-height: 13px;
        height: unset;
      }
    }
  }

  [class*="botTag_"] {
    background-color: transparent;
    font-size: 12px !important;
    height: 13px;
    top: 0 !important;
    margin-top: 0 !important;
    margin-left: 4px !important;

    [class*="botText_"] {
      display: inline-flex;
      font-size: 12px !important;
      line-height: 13px !important;
      font-weight: bold;
      color: var(--text-muted);
    }

    &::after {
      display: none !important;
    }

    svg[class^="botTagVerified_"] {
      height: 13px !important;
      width: 13px !important;
      background-image: none;

      & > path {
        display: inline-flex;
      }
    }
  }
}

[class^="chat_"]
  [class^="messagesWrapper_"]
  [class^="scroller_"]
  [class^="scrollerContent_"] {
  padding: 0 !important;
  padding-bottom: 3px !important;
}