pxvmc/src/private_channels.scss

@use "colors";
@use "images";

[class*="baseLayer_"]
  > [class^="container_"]
  [class^="base_"]
  > [class^="content_"]
  [class^="sidebar_"]
  > [class^="privateChannels_"] {
  & > [class^="scroller_"] {
    & > [class^="content_"] {
      & > [class^="channel_"] {
        margin-left: 0;
        max-width: unset;

        & > [class^="interactive_"] {
          background-color: transparent;
          border-radius: 0;
          padding: 0;

          &[class*="linkButton_"] {
            [class^="link_"] {
              & > [class*="layout_"] {
                height: 16px;
                padding: 0;

                & > [class*="avatar_"] {
                  width: 16px;
                  height: 16px;
                  margin-right: 4px;

                  & > [class*="linkButtonIcon_"] {
                    width: 16px;
                    height: 16px;
                    color: var(--channel-icon);
                  }
                }
              }
            }
          }

          [class^="link_"] {
            border-radius: 0;
            padding: 2px 4px;
            --channel-icon: #{colors.$highlight};

            & > [class*="layout_"] {
              height: 32px;
              padding: 0;

              [class^="avatar_"] {
                margin-right: 6px;
              }
            }

            [class^="name_"] {
              font-size: 12px;
              color: colors.$highlight;
              line-height: 16px;
              font-weight: normal;
            }

            &[href="/store"] > [class^="badgeContainer_"] {
              display: none;
            }
          }

          &[class*="selected_"] {
            background-color: colors.$accent;
            [class^="link_"] {
              --channel-icon: white;

              [class^="name_"] {
                color: white;
              }
            }
          }
          &:hover:not([class*="selected_"]) {
            [class^="link_"] {
              background-color: transparent;
              --channel-icon: #{colors.$c7};
              [class^="name_"] {
                color: colors.$c7;
              }
            }
          }
        }
      }

      & > [class*="privateChannelsHeaderContainer_"] {
        padding: 0;
        height: 22px;
        flex-direction: row-reverse;
        background: linear-gradient(
          to right,
          colors.$highlight,
          transparent 75%
        );
        align-items: center;

        [class^="headerText_"] {
          line-height: 21px;
          font-weight: normal;
          font-size: 12px;
          color: colors.$c7;
          text-shadow: 0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0,
            0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0;
          margin-left: 5px;
        }

        &[aria-expanded] > div {
          position: relative;
          left: 3px;
          top: 0px;
          width: 16px;
          height: 16px;
          transition: none;
          transform: none !important;
          background-image: images.$CategoryArrow;
          background-position: 0px 16px;

          & > svg {
            display: none;
          }
        }
        &[aria-expanded="false"] > div {
          background-position-y: 0px;
        }
        &[aria-expanded]:hover > div {
          background-position-x: 16px;
        }

        & > [class^="privateChannelRecipientsInviteButtonIcon_"] {
          position: relative;
          left: 3px;
          top: 0px;
          width: 16px;
          height: 16px;
          transition: none;
          transform: none !important;
          background-image: images.$ButtonAdd;
          margin-right: 0;

          &:hover {
            background-position-x: 16px;
          }

          & > svg > polygon {
            display: none;
          }
        }
      }
    }
  }
}