/* ROOT */

#root {
  /* Tab and PinnedTab height adjustment */
  --tabs-height: 33px;
  --tabs-pinned-height: var(--tabs-height);
  /* Dark Theme base settings */
  --bg: #1f2430 !important;
  --tabs-fg: #d4d4d4 !important;
  --tabs-bg-hover: #3b3948 !important;
  --tabs-activated-bg: #5b5b66 !important;
  --nav-btn-activated-bg: #1f222f !important;
}

#root .Tab {
 --tabs-indent: 7px;
}

/* TABS */

.Tab .lvl-wrapper:after {
  display: none;
}

.Tab {
margin: auto;
  width: 94%;
  border-radius: 3px;
}

.Tab .close > svg:hover {
  /* Styling the tab close button */
  border-radius: 3px;
  background: #492121 !important;
  opacity: 100%;
}

.Tab .title {
  overflow: hidden !important;
}


/* PINNED TABS */

.PinnedDock {
  background-color: var(--bg) !important;
}

.PinnedTab {
  margin: 5px 0px 4px 6px;
  border-radius: 3px;
}


/* NAV BAR */

.NavigationBar {
  height: 41px !important;
  padding: 4.5px 0px 0px 4.5px !important;
  background-color: #2B2A33 !important;
  margin-bottom: 5px;
}

.NavigationBar .panel-btn:hover {
  border-radius: 3px !important;
  background-color: var(--tabs-bg-hover) !important;
}

.NavigationBar .panel-btn[data-active="true"] {
  border-radius: 3px !important;
  background-color: var(--bg) !important;
}

.NavigationBar .panel-btn[data-active="true"]:hover {
  border-radius: 3px !important;
  background-color: var(--tabs-bg-hover) !important;
}

.NavigationBar .panel-btn > svg,
.NavigationBar .panel-btn > img {
  fill: #f2f2f2 !important;
}


/* SIDEBAR HACK PATCHES */

@media (max-width: 50px) {
  /* Fix to tab tree identation when minimised */
  #root:not(:hover) .Tab {
    --tabs-indent: 0px;
  }

  .Tab[data-lvl] > div.lvl-wrapper {
    right: -2px;
  }
  
  .Tab {
    max-width: 34px;
  }

  .Tab .fav {
    z-index: 1;
  }

  .Tab .audio {
    z-index: 1;
    margin-left: -12px;
    height: 26px;
  }

  .Tab .title {
    display: none;
  }

  .PinnedTab {
    margin-left: 5px;
  }

  .NavigationBar .settings-btn {
    display: none;
  }
}


/* OPTIONS */

/* Disable these two snippets below to make pinned tabs wrap when minimised */
.PinnedDock {
  flex-wrap: nowrap! important;
}

.PinnedTab {
  overflow: hidden !important; 
  min-width: var(--tabs-pinned-width) !important;
}
