:root {

  --black:                  #1e2326;
  --red:                    #4c3743;
  --green:                  #3c4841;
  --yellow:                 #45443c;
  --blue:                   #384b55;
  --purple:                 #5f4598;
  --cyan:                   #148588;
  --white:                  #9da9a0;

  --black-light:            #414b50;
  --red-light:              #e67e80;
  --green-light:            #a7c080;
  --yellow-light:           #dbbc7f;
  --blue-light:             #7fbbb3;
  --purple-light:           #d699b6;
  --cyan-light:             #83c092;
  --white-light:            #ffffff;

  --bg:                     #4f5b58;
  --fg:                     #d3c6aa;
  --bold:                   #eeeeee;
  --cursor:                 var(--green-light);
  --cursor-txt:             var(--black);
  --sel:                    #493b40;
  --sel-txt:                var(--black);

  --accent-color:           var(--green-light);
  --tab-color:              var(--bg);
  --tab-text-color:         var(--fg);
  --secondary-accent-color: var(--green);
  --secondary-tab-color:    var(--red-light);
  --secondary-tab-text-color: var(--fg);
  --url-bg:                 var(--bg);
  --url-fg:                 var(--fg);

  /* override colors */

  --tab-hover-outline-color: #495156 !important;
  /*--tab-hover-background-color: #495157 !important;*/
  --tab-selected-bgcolor: var(--accent-color) !important;
  --tab-selected-outline-color: var(--accent-color) !important;
  --tab-selected-shadow: none !important;

  --toolbar-field-background-color: #495156 !important;
  --toolbar-field-color: var(--fg) !important;
  --toolbar-field-focus-background-color: var(--black) !important;
  --toolbar-field-focus-color: var(--fg) !important;
  --toolbar-bgcolor: var(--bg) !important;
  --toolbar-color: var(--fg) !important;
  --toolbarbutton-outer-padding: 0 0 !important;

  --toolbox-bgcolor: var(--bg) !important;
  --toolbox-bgcolor-inactive: var(--bg) !important;

  --inactive-titlebar-opacity: 0.5 !important;

  --toolbar-start-end-padding: 2pt !important;

}

#nav-bar-customization-target {
  gap: var(--toolbar-start-end-padding);
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
  margin-inline-start: unset !important;
}}

/* hide tabs when not in focus */
#nav-bar {
  :root[tabsintitlebar] &, :root[tabsintitlebar] & #urlbar:popover-open {
    &:-moz-window-inactive {
      display: none;
    }
  }
}

#urlbar-container {
  margin-inline: 0px !important;;
}

/*
.browser-toolbar {
  background-color: var(--black);
}
#urlbar-background {
  background-color: var(--bg);
}
*/

/* nav bar */
#back-button,
#forward-button,
#unified-extensions-button,
/* tabs */
.tab-close-button,
#tabbrowser-arrowscrollbox-periphery,
.titlebar-spacer,
.titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"],
.titlebar-buttonbox-container {
  display: none !important;
}

#tabbrowser-tabs[orient="vertical"] {
  & .tab-background {
    margin-inline: unset !important;
  }
}

#tabbrowser-tabs[orient="vertical"] {
  &:not([expanded]) {
    & .tab-background {
      width: unset !important;
    }
  }
}

#tabbrowser-tabs[orient="vertical"] {
  & .tabbrowser-tab {
    padding-block: 0px 2px !important;
  }
}

.tab-background {
  margin-block: unset;
  border-radius: 0px !important;
  box-shadow: none;
  outline-color: unset;
}