/* 
	Title: Edge-Like (Better) Tree Style Tabs
	Description: This is a recreation (and better) version of my pseudo-popular Vivaldi vertical tab integration, for tree style tabs in firefox. This is probably the best Tree Style Tabs interface out there.
	Author: @Drannex42 (https://github.com/drannex42/linux-utils - https://macleodsawyer.com)
	Notes: This works best with my custom userChrome.css file in the /firefox/ folder - Lots of very cool features built in.
  	Version: 12021.06.09 :: Fixed the new tab button after the latest TST bugged the layout.
	
*/

/* Hide .twisty and adjust margins so favicons have 7px on left. */
.tab .twisty {
	visibility: hidden;
	margin-left: -8px;
  display: none;
}

/* Push tab labels slightly to the right so they're completely hidden in collapsed state */
.tab .label {
	font-size: 13px;
  	padding-left: 7.5px;
}

.tab:not(:hover) > .closebox {
  display: none;
}

tab-item:hover {
  background:    var(--in-content-box-background-hover) !important;
  opacity: 1;
}

.closebox:hover {
  font-weight: 900;
}

.tab, .tabs, body, #background {
   /* #F5F6F7; */
  background: transparent;
}


.favicon {
  --favicon-size: 17px !important;
  margin: 0;
  padding: 0 !important;
  --svg-small-icon-size: var(--favicon-size);
  /*! text-align: center; */
  margin-left: .5px;
  display: inline;
  vertical-align: middle;
}
tab-item {
  border: 1px solid transparent !important;
  height: auto !important;
  position: relative !important;
  font-size: 13px;
  background: none !important;
  box-shadow: none !important;
  border-radius: 5px;
  padding: 5px !important;
  margin: 7.5px 10px !Important;
  transition: 0 !Important;
  text-align: left !important;
  transition: width 0.1s !Important;
}

#tabbar-container{
  /*! width: 50px; */
  /*! margin: 2px; */
  transition: none;
}


tab-item:not(.faviconized) .contextual-identity-marker {
  --contextual-identity-marker-margin: min(calc((var(--tab-current-size) - var(--favicon-size)) / 2), calc(var(--tab-current-size) * 0));
  left: -11px !important;
  --contextual-identity-marker-width: 3.5px;
  z-index: 9999;
}

#all-tabs {
}

:root.left #tabbar {
  box-shadow: none !important;
  border: none !important;
  margin-top: -5px !important;
}


#tabbar tab-item {
  text-align: center;
  /*! width: 100%; */
  overflow: hidden !Important;
}
tab-item:not(:hover) {
}
tab-item .label, tab-item .highlighter, tab-item .contextual-identity-marker, tab-item .extra-items-container, tab-item .counter {
  /*! display: none; */
  /*! margin: 0px !Important; */
}
tab-item.active {
  background-color: var(--in-content-box-background) !important;
  box-shadow: 0px 5px 10px var(--in-content-box-background-active) !important;
}

tab-item:not(.pinned).collapsed.collapsed-completely {
    visibility: collapse;
    display: none !important;
}

:root .tab .highlighter::before {
    display: none;
}

.after-tabs button {
  border: none;
  box-shadow: none;
  padding: 5px;
  margin: 11px;
  text-align: left;
  background: none;
}

.after-tabs button:hover {
    background: var(--in-content-box-background-hover) !important;
    opacity: 1;
    border-radius: 5px;
}

  #tabbar [data-level] {
}

#tabbar [data-level="1"] {
    margin-left: 20px !important;
}

#tabbar [data-level="2"] {
    margin-left: 30px !important;
}

#tabbar [data-level="3"] {
    margin-left: 40px !important;
}

#tabbar [data-level="4"] {
    margin-left: 50px !important;
}

#tabbar [data-level="5"] {
    margin-left: 60px !important;
}

#tabbar [data-level="6"] {
    margin-left: 70px !important;
}

#tabbar [data-level="7"] {
    margin-left: 80px !important;
}

#tabbar [data-level="8"] {
    margin-left: 90px !important;
}

#tabbar::before {
  content: " ";
  height: 24px;
  width: 100%;
  background:   url('data:image/png;base64,[encoded data, 6584 characters]');
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 16px;
  margin-bottom: 3px;
  text-align: right;
  margin-right: -12.5px !important;
  opacity: 0.65;
  width: 100%;
  display: none;
}



.newtab-button {
  /*! text-align: left; */
  /*! margin: 8px !important; */
}

.newtab-button::after {
  content: "New Tab";
  font-size: 13px;
  padding-left: 12px;
  margin-top: -2px;
  position: absolute;
  opacity: 0.85;
  display: none;
}

.after-tabs {
  border-top: 1px solid var(--in-content-border-color);
  margin-top: 6px;
}

#tabbar-container .newtab-button::after {
  display: inline-block;
}


#tabbar-container {
  background: var(--theme-colors-toolbar);
}

.newtab-button::before {
    padding-left: 1.5px;
}


tab-item.pinned {
  --pinned-position-top: 0px !important;
  --pinned-position-bottom: none !Important;
  top: auto !Important;
  bottom: auto !Important;
  margin: none !Important;
  left: initial !important;
  right: initial !Important;
}


@media screen and (max-width: 51px) {
  tab-item {
    max-width: 30px !important;
  }
  

  #tabbar [data-level] {
      margin-left: auto !important;
  }
  
  #tabbar {
    max-width: 100%;
  }
  
 .tab > .closebox {
  display: none;
}
  
  #tabbar-container .newtab-button::after {
  display: none;
}
  
}
