div[class^="sidebar-"]:has(> nav[class^="container-"]) > [class^="panels-"] {
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 53px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  z-index: 10;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
  > [class^="panels-"]:hover {
  height: unset;
  flex-direction: column;
}

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

div[class^="sidebar-"]:has(> nav[class^="container-"])
  > nav[class^="container-"]
  > [class^="scroller-"] {
  width: 56px;
  margin-top: 48px;
  margin-bottom: 53px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
  > nav[class^="container-"]
  > [class^="scroller-"] {
  width: 240px;
}

div[class^="sidebar-"]:has(> nav[class^="container-"])
  > nav[class^="container-"]
  > [class^="container-"][class*="clickable-"] {
  position: fixed;
  top: 0;
  width: 240px;
  z-index: 101;
  background: var(--background-secondary);
}

div[class^="sidebar-"]:has(> nav[class^="container-"])
  > nav[class^="container-"]
  > [class^="container-"][class*="clickable-"]
  > [class^="animatedContainer-"] {
  height: 48px;
}

div[class^="sidebar-"]:has(> nav[class^="container-"])
  > nav[class^="container-"]
  > [class^="container-"][class*="clickable-"]
  > [class^="animatedContainer-"]
  > [class^="bannerImage-"] {
  height: 48px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
  > 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%
  );
}

div[class^="sidebar-"]:has(> nav[class^="container-"])
  > nav[class^="container-"]
  > [class^="container-"][class*="clickable-"]
  > [class^="animatedContainer-"]
  [class^="bannerImg-"] {
  top: -67px;
  position: relative;
}

div[class^="sidebar-"]:has(> nav[class^="container-"])
  > nav[class^="container-"]
  > [class^="scroller-"]
  > ul
  > div[style="height: 84px;"] {
  height: 0 !important;
}

div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
  ~ [class^="chat-"]
  [class^="chatContent-"]
  > form
  > [class^="channelTextArea"] {
  width: calc(100% - 184px);
  margin-left: 184px;
}

div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
  ~ [class^="chat-"]
  [class^="chatContent-"]
  > form
  > [class^="channelTextArea"] {
  margin-left: 0;
}

div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
  ~ [class^="chat-"]
  [class^="title-"] {
  margin-left: 184px;
  width: calc(100% - 184px);
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
  ~ [class^="chat-"]
  [class^="title-"] {
  margin-left: 0;
}

div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
  [class^="channelInfo-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
  [class^="containerDefault-"][class*="selected-"]
  [class^="iconVisibility-"]
  > [class^="content-"]
  > [class^="children-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
  [class^="containerDefault-"]
  [class^="iconVisibility-"]:not([class*="typeThread-"])
  > [class^="content-"]
  > [class^="mainContent-"]
  > [class^="name-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
  [class^="containerDefault-"]
  > [class^="iconVisibility-"][class*="clickable-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
  [class^="containerDefault-"]
  [class^="voiceUser-"]
  > [class^="content-"]
  > [class^="icons-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
  [class^="containerDefault-"]
  [class^="voiceUser-"]
  > [class^="content-"]
  > [class*="username-"] {
  display: none;
}

div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
  [class^="containerDefault-"]
  [class^="iconVisibility-"][class*="typeThread-"]
  > [class^="content-"]
  > [class^="mainContent-"]
  > [class^="name-"] {
  margin-left: 20px;
}

div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
  ~ [class^="chat-"]
  [class^="autocomplete-"] {
  left: -184px;
}