/**
 * @name Slim Server Sidebar
 * @author MaxTomahawk
 * @description A modular CSS-addon for Discord that transforms the server list into a slinky, collapsible list with names.
 * @version 2.0.0
 * @website https://github.com/MaxTomahawk/Slim-Server-Sidebar
 * @source https://raw.githubusercontent.com/MaxTomahawk/Slim-Server-Sidebar/deploy/SlimServerSidebar.css
 */
/* ==============================
   CSS VARIABLES
   ============================== */
:root {
  --slim-collapsed: 48px;
  --slim-expanded: 240px;
  --slim-speed: 0.3s ease-in-out;
  --slim-row-h: 32px;
  --slim-icon: 32px;
}

/* ==============================
   MAIN SIDEBAR CONTAINER
   The outermost nav wrapper that contains the entire guild list.
   We target both the nav wrapper and the guilds container.
   ============================== */
nav.guilds__5e434 {
  width: var(--slim-collapsed) !important;
  transition: width var(--slim-speed) !important;
  overflow: visible !important;
  z-index: 2;
}

nav.guilds__5e434:hover,
nav.guilds__5e434:focus-within {
  width: var(--slim-expanded) !important;
}

/* ==============================
   TREE & SCROLLER
   The internal tree and scroller containers need to
   fill the width and allow horizontal overflow for the
   expanding transition.
   ============================== */
nav.guilds__5e434 .tree_ef3116 {
  width: 100% !important;
  overflow: visible !important;
}

nav.guilds__5e434 .scroller_ef3116 {
  width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-right: 0 !important;
}

/* ==============================
   LIST ITEMS
   Each server/folder row in the sidebar.
   ============================== */
nav.guilds__5e434 .listItem__650eb {
  height: var(--slim-row-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==============================
   ICON WRAPPERS
   Scale the server icons down to fit the slim sidebar.
   Using transform: scale() preserves the internal SVG
   rendering while reducing visual size.
   ============================== */
nav.guilds__5e434 .wrapper_cc5dd2 {
  width: var(--slim-icon) !important;
  height: var(--slim-icon) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

nav.guilds__5e434 .wrapper_cc5dd2 svg {
  width: var(--slim-icon) !important;
  height: var(--slim-icon) !important;
}

nav.guilds__5e434 .wrapper_cc5dd2 foreignObject {
  width: var(--slim-icon) !important;
  height: var(--slim-icon) !important;
  mask: none !important;
}

nav.guilds__5e434 .wrapper_cc5dd2 foreignObject img,
nav.guilds__5e434 .wrapper_cc5dd2 foreignObject [class*=icon] {
  width: var(--slim-icon) !important;
  height: var(--slim-icon) !important;
  border-radius: 50% !important;
}

/* ==============================
   PILL INDICATORS
   The colored bar on the left that indicates unread/active.
   ============================== */
nav.guilds__5e434 [class*=pill] {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ==============================
   SERVER/FOLDER NAMES
   Use the data-dnd-name attribute to display names
   alongside icons when the sidebar is expanded.
   ============================== */
nav.guilds__5e434 [data-dnd-name] {
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  position: relative !important;
  flex-wrap: nowrap !important;
}

nav.guilds__5e434 [data-dnd-name]::after {
  content: attr(data-dnd-name);
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
  opacity: 0;
  margin-left: 8px;
  color: var(--header-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: var(--slim-row-h);
  transition: opacity 0.2s ease, max-width 0.3s ease;
  pointer-events: none;
}

nav.guilds__5e434:hover [data-dnd-name]::after,
nav.guilds__5e434:focus-within [data-dnd-name]::after {
  opacity: 1;
  max-width: 180px;
}

/* ==============================
   FOLDER STYLING
   ============================== */
nav.guilds__5e434 [class*=folderHeader] {
  height: var(--slim-row-h) !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

nav.guilds__5e434 [class*=expandedFolderBackground] {
  width: 100% !important;
  border-radius: 0 !important;
  left: 0 !important;
}

/* Hide the 2x2 mini-icon grid in closed folders */
nav.guilds__5e434 [class*=folderPreview] {
  display: none !important;
}

nav.guilds__5e434 [class*=folderButton] {
  width: var(--slim-icon) !important;
  height: var(--slim-icon) !important;
  flex-shrink: 0 !important;
}

/* ==============================
   SEPARATORS
   ============================== */
nav.guilds__5e434 [class*=guildSeparator] {
  width: calc(var(--slim-icon) - 8px);
  margin: 4px auto;
}

/* ==============================
   HOME / DM BUTTON
   ============================== */
nav.guilds__5e434 .tutorialContainer__1f388 {
  overflow: visible !important;
}

nav.guilds__5e434 .tutorialContainer__1f388 .childWrapper__6e9f8 {
  width: var(--slim-icon) !important;
  height: var(--slim-icon) !important;
}

nav.guilds__5e434 .tutorialContainer__1f388 .childWrapper__6e9f8 svg {
  width: 20px !important;
  height: 20px !important;
}

/* Hide any visually-hidden text that could take up space */
nav.guilds__5e434 .hiddenVisually_b18fe2 {
  display: none !important;
}

/* ==============================
   UNREAD INDICATOR BAR
   ============================== */
nav.guilds__5e434 .unreadMentionsIndicatorTop_ef3116,
nav.guilds__5e434 .unreadMentionsIndicatorBottom_ef3116 {
  width: 100% !important;
}

/* ==============================
   TOOLTIP ADJUSTMENTS
   Tooltips should still work when hovering icons in collapsed mode.
   ============================== */
nav.guilds__5e434:hover [class*=tooltip],
nav.guilds__5e434:focus-within [class*=tooltip] {
  display: none !important;
}