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};
  }
}

.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;
  }
}