#root.root {--tabs-font: 0.92rem sans-serif;}
#root {
  --transition-delay-out: 300ms;
  --transition-delay-in: 600ms;
  --thin-icon-width: 32px;
}

/* Collapse main */
#root:not(:hover) .main-items {
  width: var(--thin-icon-width);
  transition-delay: var(--transition-delay-out) !important;
}

#root:not(:hover) #nav_bar .main-items div[data-active="false"] {
  opacity: 0;
  transition-delay: var(--transition-delay-in) !important;
}

#root:not(:hover) #nav_bar .main-items .nav-item {
  transform: translateX(0) !important;
  transition-delay: var(--transition-delay-in) !important;
}

#root #nav_bar .main-items .nav-item {
  transition-delay: var(--transition-delay-out) !important;
}

/* Collapse new tab btn */
#root .new-tab-btns {
  transition: all 300ms !important;
  transition-delay: var(--transition-delay-out) !important;
}

#root:not(:hover) .new-tab-btns {
  width: var(--thin-icon-width);
  transition: all 300ms !important;
  transition-delay: var(--transition-delay-in) !important;
}

/* Collapse tabs */
#root:not(:hover) {
  --tabs-indent: 0;
}

#root:not(:hover) .Tab {
  width: var(--thin-icon-width) !important;
  transition: all 300ms !important;
  transition-delay: var(--transition-delay-in) !important;
}

#root:hover .Tab {
  transition: all 300ms !important;
  transition-delay: var(--transition-delay-out) !important;
}

#root .Tab > .body > :not(div.fav) {
  transition: all 300ms !important;
  transition-delay: var(--transition-delay-out) !important;
}

/* Collapse pinned */
#root:not(:hover) .PinnedTabsBar {
  max-width: var(--thin-icon-width) !important;
  transition: all 300ms !important;
  transition-delay: var(--transition-delay-in) !important;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

#root:hover .PinnedTabsBar {
  max-width: 600px !important;
  transition: all 300ms !important;
  transition-delay: var(--transition-delay-out) !important;
}