/*** THIS GOES IN SIDEBERY ***/
/*****************************/

:root, .root, #root {
  background: #1b1c20 !important;
  --frame-bg: #1b1c20 !important;
  --tabs-margin: 1.5px !important;
  --tabs-pinned-height: 30px !important;
  --tabs-pinned-width: 30px !important;
  --tabs-height: 30px !important;
  --nav-btn-width: 30px !important;
  --nav-btn-height: 28px !important;
}

/* large pinned tabs */
.PinnedTabsBar {
  display: grid !important;
  grid-gap: calc(3 * 1.5px) !important;
  grid-template-rows: 3rem;
  grid-auto-rows: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 3rem), 1fr));
}
.Tab[data-pin="true"] {
  width: 100% !important;
  height: 100% !important;
  &:not([data-active="true"]) .body {
    background-color: color-mix(in oklab, var(--tabs-activated-bg) 25%, transparent) !important;
  }
}

/* add space between pins and regular tabs */
.ScrollBox {
  margin-top: 15px;
}

/* indent nested tabs */
#root.root {--tabs-indent: 15px;}

/* tab colors */
#root.root                     { --tabs-normal-bg: #1b1c20; }
.Tab[data-active="true"] .body { background-color: #35444acc !important; }

/* tab font */
.Tab .title { font-size: 12px; }

/* tab shape */
.Tab .body { height: 100%; margin-top: 0px; }
#root.root { --tabs-border-radius: 5px;}

/* hide container indicator */
.Tab .ctx { display: none !important; }

/* prevent pinned tabs from wrapping when bar is collapsed */
.PinnedTabsBar { flex-wrap: nowrap !important; }



/*** THIS GOES IN userChrome.css ***/
/***********************************/

/* remove native sidebar */
#sidebar-main { display: none !important; }

/* remove sidebery border */
#sidebar {
  box-shadow: none !important;
  border: none !important;
}

/* make sidebery resizable to small widths */
#sidebar-box, #sidebar { min-width: 0px !important; }