pxvmc/src/avatars.scss

@use "colors";

[class*="avatar_"],
[class*="avatar_"] [class*="image_"],
[class*="callAvatar_"],
[class*="callAvatar_"] [class*="speaking_"],
[class*="avatarDefault_"],
[class*="avatarSpeaking_"],
[class*="avatar_"] [class*="inner_"],
[class*="callAvatarVoice_"],
[class*="callAvatarWrapper_"] [class*="speaking_"],
[class^="messagesWrapper_"]
  [class^="scrollerInner_"]
  [class^="message_"]
  [class*="header_"]
  [class*="avatar_"]
  [class*="large_"],
[class^="messagesWrapper_"]
  [class^="scrollerInner_"]
  [class^="message_"]
  [class*="header_"]
  [class*="avatar_"]
  [class*="wrapper_"],
[class^="messagesWrapper_"]
  [class^="scrollerInner_"]
  [class^="message_"]
  [class*="contents_"]
  [class*="avatar_"],
[class^="messagesWrapper_"]
  [class^="scrollerInner_"]
  [class^="wrapper_"]
  [class*="contents_"]
  [class*="avatar_"],
[class^="messageGroupCozy_"] [class*="contents_"] [class*="avatar_"],
[class*="autocomplete_"]
  [class*="autocompleteInner_"]
  [class*="autocompleteRow_"]
  [class*="content_"]
  [class*="wrapper_"],
[class*="guildsWrapper_"]
  [class*="guilds_"]
  [class*="guild_"]
  [class*="guildInner_"],
div[class^="listItem_"] foreignObject img,
div[class^="listItem_"] foreignObject a[class^="button_"],
div[class^="listItem_"] foreignObject [class^="childWrapper_"],
div[class^="listItem_"] foreignObject [class^="folder_"],
div[class^="listItem_"] div[class^="wrapperSimple_"],
[class^="circleIconButton_"],
[class^="folderIconWrapper_"],
[class^="avatarContainer_"],
[class^="executedCommandAvatar_"],
[class^="folderIconWrapper_"]
  > [class^="closedFolderIconWrapper_"]
  > [class^="icon_"],
[class^="embedAuthorIcon_"] {
  border-radius: 0% !important;
}

[class*="avatarMasked_"],
[class*="maskProfile_"],
[class*="mask_"],
[class*="avatar_"] svg[class*="mask_"] > foreignObject,
[class*="avatarWrapper_"] svg[class*="mask_"] > foreignObject,
[class*="avatarHint_"] > foreignObject,
[class*="wrapper_"] svg[class*="mask_"] > foreignObject,
[class*="callAvatarWrapper_"] svg[class*="callAvatarMask_"] > foreignObject,
div[class^="listItem_"] [class^="wrapper_"] > svg > foreignObject,
[class^="bannerSVGWrapper_"] > foreignObject,
[class^="avatarDecoration_"] > foreignObject,
[class^="avatarDecorationHint_"] > foreignObject,
[class^="viewers_"] > [class*="viewer_"] {
  mask: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

[class*="avatarHint_"],
[class*="avatarNormal_"],
[class*="avatarWrapper_"] [class*="wrapper_"],
[class*="avatarWrapper_"] [class*="image_"],
[class*="replyAvatar_"] {
  border: none;
  border-radius: 0 !important;
}

[class^="userPopout_"] [class*="avatarWrapper_"] > [class^="avatarHint_"] {
  display: none;
}

[class^="userPopout_"]
  [class*="avatarWrapper_"]
  > [class^="avatar_"]
  > svg
  > foreignObject {
  x: 8px;
}

[class^="userPopout_"]
  [class*="avatarWrapper_"]
  > [class^="avatar_"]
  > svg
  > rect {
  x: 0;
  y: 0;
  width: 8px;
  height: 100%;
  mask: none !important;
}

[class^="accountProfileCard_"] [class^="avatar_"] {
  border: 0;
  background-color: transparent;
}

[class^="avatar_"] > [class^="wrapper_"],
[class^="avatarHoverTarget_"] > [class^="wrapper_"],
[class^="wrapper_"][class*="avatar_"],
[class^="wrapper"][class*="Avatar_"] {
  --status-color: #{colors.$c0};

  &:not(:has([mask="url(#svg-mask-avatar-default)"]))::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0% !important;

    box-shadow: inset 0 0 0 1px var(--status-color),
      inset 0 0 0 2px #{colors.$tertiary}, inset 0 0 2px 3px #{colors.$primary};
  }
  & > svg {
    border-radius: 0% !important;

    & > rect,
    & > circle,
    & > svg[class^="cursorDefault_"] {
      display: none;
    }

    &[class^="avatarDecoration_"] {
      z-index: 10;
      border-radius: 0 !important;

      [class^="avatar_"] {
        border-radius: 0 !important;
      }
    }
  }

  &:has(rect[fill="#23a55a"]) {
    --status-color: #{colors.$c2};
  }
  &:has(rect[fill="#f0b232"]) {
    --status-color: #{colors.$c3};
  }
  &:has(rect[fill="#f23f43"]) {
    --status-color: #{colors.$c5};
  }
  &:has(rect[fill="#593695"]) {
    --status-color: #{colors.$c4};
  }
}

.platform-icons-wrapper > svg path {
  &[fill="var(--green-360, var(--status-green-600))"] {
    fill: #{colors.$c2} !important;
  }
  &[fill="var(--yellow-300, var(--status-yellow-500))"] {
    fill: #{colors.$c3} !important;
  }
  &[fill="var(--red-400, var(--status-red-500))"] {
    fill: #{colors.$c5} !important;
  }
}