div[class^="sidebar_"]:not(:has(> [class^="side_"])) > nav {
  width: unset;
  z-index: 9;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"])) {
  width: 56px;
}
div[class^="sidebar_"]:not(:has(> [class^="side_"])):hover {
  width: 240px;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  > [class^="panels_"]
  > *:not(:last-child),
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  > [class^="panels_"]
  > [class^="container_"]:last-child
  > [class^="avatarWrapper_"]
  > [class^="nameTag_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  > [class^="panels_"]
  > [class^="container_"]:last-child
  > div:last-child {
  display: none;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > [class^="panels_"]
  > [class^="container_"]:last-child {
  width: 224px;
  position: relative;
  bottom: 0;
}
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  > [class^="panels_"]
  > [class^="container_"]:last-child {
  width: 40px;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > nav
  > [class^="scroller_"] {
  margin-top: 48px;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > nav[class^="container_"]
  > [class^="container_"][class*="clickable_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > nav[class^="privateChannels_"]
  > [class^="searchBar_"] {
  position: fixed;
  top: 0;
  width: 240px;
  z-index: 101;
  background: var(--background-secondary);
  padding: 0;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > nav[class^="container_"]
  > [class^="container_"][class*="clickable_"]
  > [class^="animatedContainer_"] {
  height: 48px;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > nav[class^="container_"]
  > [class^="container_"][class*="clickable_"]
  > [class^="animatedContainer_"]
  > [class^="bannerImage_"] {
  height: 48px;
}
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > nav[class^="container_"]
  > [class^="container_"][class*="clickable_"]
  > [class^="animatedContainer_"]
  > [class^="bannerImage_"]:after {
  content: "";
  height: 48px;
  width: 240px;
  top: 0;
  left: 0;
  position: absolute;
  background: linear-gradient(
    0deg,
    var(--background-secondary) 5%,
    transparent 100%
  );
}

[class^="animatedBannerHoverLayer_"] {
  top: -48px !important;
  height: 48px !important;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > nav[class^="container_"]
  > [class^="container_"][class*="clickable_"]
  > [class^="animatedContainer_"]
  [class^="bannerImg_"] {
  top: -67px;
  position: relative;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > nav[class^="container_"]
  > [class^="scroller_"]
  > ul
  > div[style="height: 84px;"] {
  height: 0 !important;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"])):hover
  ~ [class^="chat_"]
  [class^="chatContent_"]
  > form
  > [class^="channelTextArea"] {
  margin-left: 0;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  ~ [class^="chat_"]
  [class^="title_"] {
  margin-left: 184px;
  width: calc(100% - 184px);
}
div[class^="sidebar_"]:not(:has(> [class^="side_"])):hover
  ~ [class^="chat_"]
  [class^="title_"] {
  margin-left: 0;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  [class^="channelInfo_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  [class^="containerDefault_"][class*="selected_"]
  [class^="iconVisibility_"]
  [class^="linkTop_"]
  > [class^="children_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  [class^="containerDefault_"]
  [class^="iconVisibility_"][class*="modeSelected_"]
  [class^="linkTop_"]
  > [class^="children_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  [class^="iconVisibility_"]:not([class*="typeThread_"])
  [class^="linkTop_"]
  > [class^="name_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  [class^="containerDefault_"]
  > [class^="iconVisibility_"][class*="clickable_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  [class^="containerDefault_"]
  [class^="voiceUser_"]
  [class^="linkTop_"]
  > [class^="icons_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  [class^="containerDefault_"]
  [class^="voiceUser_"]
  [class^="linkTop_"]
  > [class*="username_"] {
  display: none;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  [class^="containerDefault_"]
  [class^="iconVisibility_"][class*="typeThread_"]
  [class^="linkTop_"]
  > [class^="name_"] {
  margin-left: 20px;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  > [class^="privateChannels_"]
  ul[class^="content_"]
  > [class*="privateChannelsHeaderContainer_"] {
  height: 0;
}
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  > [class^="privateChannels_"]
  ul[class^="content_"]
  > [class*="privateChannelsHeaderContainer_"]
  > * {
  display: none;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  .channel-typing-indicator,
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  [class^="devBanner_"] {
  display: none;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  > nav[class^="container_"]
  > [class^="scroller_"]
  > ul
  > [class*="containerWithMargin_"] {
  display: none;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  > nav[class^="container_"]
  > [class^="container_"][class*="bottom_"]
  > [class^="containerPadding_"]
  > [class^="bar_"] {
  width: 32px !important;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  > nav[class^="container_"]
  > [class^="container_"][class*="bottom_"]
  > [class^="containerPadding_"]
  > [class^="bar_"]
  > svg {
  display: none;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  [class*="unreadBar_"]
  > span,
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  > nav[class^="container_"]
  > [class^="container_"][class*="bottom_"]
  > [class^="containerPadding_"]
  > [class^="bar_"]
  > [class*="barText_"] {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  margin-left: 8px;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
  [class^="voiceChannelsButton_"] {
  display: none;
}