treestyletab-edge-mimicry.css

/** OVERRIDING PROTON.CSS **/

.overflow-indicator {
  height: 0.6em;
}
.overflow-indicator.start {
  background-position: 0 -0.3em;
  border-top: 0.05em solid rgba(255, 255, 255, 0.2);
}
.overflow-indicator.end {
  background-position: 0 0.3em;
  border-bottom: 0.05em solid rgba(255, 255, 255, 0.2);
}
:root.left .overflow-indicator.start,
:root.left .overflow-indicator.end {
  background-image: radial-gradient(ellipse at right,
                                    rgba(0,0,0,0.1) 0%,
                                    rgba(0,0,0,0.1) 7.6%,
                                    rgba(0,0,0,0) 87.5%);
}
:root.right .overflow-indicator.start,
:root.right .overflow-indicator.end {
  background-image: radial-gradient(ellipse at left,
                                    rgba(0,0,0,0.1) 0%,
                                    rgba(0,0,0,0.1) 7.6%,
                                    rgba(0,0,0,0) 87.5%);
}

#tabbar:not(.scrollbar-autohide) #pinned-tabs-container,
#tabbar:not(.scrollbar-autohide) #normal-tabs-container {
  scrollbar-color: var(--browser-toolbar_text-darker, var(--theme-colors-toolbar_bottom_separator, var(--in-content-button-background-hover-mixed)))
                   var(--theme-colors-toolbar, var(--in-content-box-background));
}


tab-item-substance,
.after-tabs button,
.after-tabs [role="button"],
#subpanel-selector-anchor {
  border: unset;
  border-width: unset;
  position: unset;
}

tab-item,
.after-tabs button,
.after-tabs [role="button"],
#subpanel-container,
#dummy-tab-color-box {
  --tab-surface: unset;
  --tab-text: unset;
  --tab-text-shadow: unset;
}
tab-item-substance,
.after-tabs button,
.after-tabs [role="button"],
#subpanel-container,
#dummy-tab-color-box {
  background: unset;
  color: unset;
  line-height: unset;
  text-shadow: unset;
}

tab-item.active,
tab-item.active:hover,
tab-item.bundled-active,
tab-item.bundled-active:hover,
.mutiple-highlighted > tab-item.highlighted,
.mutiple-highlighted > tab-item.highlighted:hover {
  --tab-surface: unset;
  --tab-surface-bgimage: unset;
  --throbber-color: unset;
  --tab-text: unset;
  --tab-text-inverted: unset;
}

tab-item:not(.active):not(.bundled-active):not(.highlighted):hover,
.after-tabs button:hover,
.after-tabs [role="button"]:hover,
#subpanel-selector-anchor:hover {
  --tab-surface: unset;
  --tab-text: unset;
}

tab-item-substance {
  padding: unset;
  z-index: unset;
}

.after-tabs button,
.after-tabs [role="button"] {
  --tab-like-button-padding: unset !important;
  padding: unset;
  z-index: unset;
}

:root.left tab-item:not(.pinned) tab-item-substance,
:root.left .after-tabs button:not([data-menu-ui]),
:root.left .after-tabs [role="button"]:not([data-menu-ui]) {
  padding-right: unset;
}

:root.right tab-item:not(.pinned) tab-item-substance,
:root.right .after-tabs button:not([data-menu-ui]),
:root.right .after-tabs [role="button"]:not([data-menu-ui]) {
  padding-left: unset;
}


/* tab background */

.after-tabs button::before,
.after-tabs [role="button"]::before,
#subpanel-selector-anchor::before {
  content: unset;
  display: unset;
  position: unset;
}

tab-item .background,
.after-tabs button:hover::before,
.after-tabs [role="button"]:hover::before,
#subpanel-selector-anchor:hover::before {
  background-color: var(--tab-surface);
  background-image: var(--tab-surface-bgimage);
  border-radius: var(--tab-border-radius-size);
}

tab-item.faviconized .background {
  --tab-dropshadow-padding: unset;
}

#subpanel-selector-anchor:hover::before {
  bottom: unset;
  left: unset;
  right: unset;
  top: unset;
}

tab-item.active .background:not(.base),
tab-item.active tab-item-substance:hover .background:not(.base),
tab-item.bundled-active .background:not(.base),
tab-item.bundled-active tab-item-substance:hover .background:not(.base),
:root.mutiple-highlighted tab-item.highlighted .background:not(.base),
:root.mutiple-highlighted tab-item.highlighted tab-item-substance:hover .background:not(.base) {
  box-shadow: unset;
  outline: unset;
  outline-offset: unset;
}
.sticky-tabs-container tab-item:not(.active):not(.bundled-active) .background.base {
  box-shadow: 0 0 var(--tab-dropshadow-blur) rgba(0, 0, 0, 0.2);
}

tab-item:not(.active):not(.bundled-active):not(.highlighted) tab-item-substance:hover .background,
.after-tabs button:hover::before,
.after-tabs [role="button"]:hover::before,
#subpanel-selector-anchor:hover::before {
  opacity: unset;
}
:root.mutiple-highlighted tab-item.highlighted .background:not(.base),
:root.mutiple-highlighted tab-item.highlighted tab-item-substance:hover .background:not(.base) {
  outline: unset;
  outline-offset: unset;
}
:root.mutiple-highlighted tab-item.highlighted.active .background:not(.base),
:root.mutiple-highlighted tab-item.highlighted.active tab-item-substance:hover .background:not(.base) {
  outline-width: unset;
  outline-offset: unset;
}

.sticky-tabs-container tab-item:not(.active):not(.bundled-active) .background.base {
  background-color: var(--browser-background, var(--tabbar-bg, var(--bg-color, ButtonFace)));
  background-image: var(--browser-bg-images, none);
  background-position: var(--browser-bg-position, left);
  background-size: var(--browser-bg-size, auto);
  background-repeat: var(--browser-bg-repeat, none);
  opacity: 1;
}

tab-item * {
  color: unset;
}

tab-item tab-label {
  margin-left: unset;
  padding: unset;
}

tab-item tab-favicon {
  margin-bottom: unset;
  margin-top: unset;
}

tab-item tab-closebox {
  background: unset;
  border: unset;
  margin: unset;
  padding: unset;
}

tab-item tab-closebox::before,
tab-item:not(.faviconized) tab-sound-button::before {
  border-radius: unset;
  content: unset;
  display: unset;
  height: unset;
  margin-left: unset;
  margin-top: unset;
  width: unset;
  position: unset;
}

tab-item tab-closebox:hover::before,
tab-item:not(.faviconized) tab-sound-button:hover::before {
  background: unset;
  box-shadow: unset;
  opacity: unset;
}

tab-item tab-closebox:active::before,
tab-item:not(.faviconized) tab-sound-button:active::before {
  opacity: unset;
}

tab-item.active tab-closebox:hover::before,
tab-item:not(.faviconized).active tab-sound-button:hover::before {
  background: unset;
}

tab-item tab-closebox::after {
  position: unset;
}

tab-item .burster {
  --throbber-color: var(--tab-loading-fill);
}

.highlighter::before,
tab-item:not(.faviconized).subtree-collapsed.some-descendants-highlighted .highlighter::after,
tab-item:not(.faviconized).subtree-collapsed.all-descendants-highlighted .highlighter::after {
  display: unset;
}

:root.left tab-item:not(.faviconized) .contextual-identity-marker {
  right: unset;
}

:root.right tab-item:not(.faviconized) .contextual-identity-marker {
  left: unset;
}

tab-item.faviconized .contextual-identity-marker {
  bottom: unset;
  top: unset;
}

.after-tabs button.newtab-action-selector-anchor::after,
.after-tabs button.contextual-identities-selector-anchor::after {
    margin-top: unset;
}

/** END **/











/** Main body layout **/

/* Move Scrollbar to other side */

:root.left #tabbar {
  direction: ltr;
}
:root.right #tabbar {
  direction: rtl;
}


:root{
  --tab-margin-bottom: 0.2em;
  --tab-margin-left: 0.5em;
  --separator-pinned-overflow-tabs: calc(100% - 2*var(--tab-margin-left));
  --separator-pinned-overflow-tabs-shift: calc(100% - calc(2*var(--tab-margin-left) + var(--shift-tabs-for-scrollbar-distance)));
  --sound-button-size: 20px;
  --subpanel-header-height: 28px;
  --subpanel-toggler-font-size: 8px;
  --subpanel-toggler-width: 20px;
  --tab-sound-button-icon-size: 85%;
  --tab-dropmarker-size: 2px;
}
.flexible {
  position: relative;
}
.overflow-indicator {
  display: none;
}
.tabs.pinned {
  padding: unset;
}
:root.have-pinned-tabs #tabbar::before {
  background: var(--tab-text);
  content: "";
  left: var(--tab-margin-left);
  top: calc(var(--pinned-tabs-area-size) + var(--tab-margin-top)/2);
  width: var(--separator-pinned-overflow-tabs);
  height: 1px;
  position: absolute;
}
:root.have-pinned-tabs #tabbar:has(div.overflow)::before {
  width: var(--separator-pinned-overflow-tabs-shift);
}
:root.have-pinned-tabs #normal-tabs-container {
  margin-top: calc(var(--pinned-tabs-area-size) + var(--tab-margin-top));
}
:root.have-pinned-tabs #normal-tabs-container.scrolled {
  margin-top: calc(var(--pinned-tabs-area-size) + 2*var(--tab-margin-top));
}
#normal-tabs-container.overflow:not(.fully-scrolled), 
#normal-tabs-container.scrolled:not(.fully-scrolled) {
  margin-bottom: 0.4em;
}


/** Tab Items **/

:root {
  --tab-margin-top: 0.3em;
  --tab-size: 32px;
}

#dummy-sizer-tab {
}
tab-item {
  --tab-border-radius-size: 0.75em;
  --faviconized-tab-size: 32px;
  --tab-dropshadow-padding: 0em;
  margin-top: var(--tab-margin-top);
  padding-right: var(--tab-margin-left);
  padding-left: calc(var(--tab-indent) + var(--tab-margin-left));
}
tab-item.faviconized {
  --faviconized-tab-padding: unset;
}
tab-item-substance {
  margin: 0;
  min-height: var(--tab-size);
  max-height: var(--tab-size);
  position: relative;
}
.overflow tab-item {
  padding-right: calc(var(--tab-margin-left) + var(--shift-tabs-for-scrollbar-distance));
}
tab-item-substance,
tab-item-substance .background,
tab-item-substance .contextual-identity-marker {
  border-radius: var(--tab-border-radius-size);
}

tab-item.active tab-item-substance,
tab-item.in-visible-area.active tab-item-substance {
  box-shadow: 
    0 0.2em 0.5em var(--browser-tab-highlighter, var(--tab-active-border-near, var(--in-content-category-background-selected-active))),
    0 0 0.1em var(--browser-tab-highlighter, var(--tab-active-border-far, var(--in-content-category-background-selected-active)));
  outline: 1px solid var(--theme-colors-tab_line);
}
.group-tab.active > tab-item-substance {
  outline: 2px solid var(--theme-colors-tab_line);
}
.bundled-active tab-item-substance,
.bundled-active.in-visible-area tab-item-substance {
  box-shadow: 
    0 0.2em 0.5em var(--browser-tab-highlighter, var(--tab-active-border-near, var(--in-content-category-background-selected-active))),
    0 0 0.1em var(--browser-tab-highlighter, var(--tab-active-border-far, var(--in-content-category-background-selected-active)));
}
tab-item:not(.group-tab).active tab-item-substance,
tab-item:not(.group-tab).active tab-item-substance:hover,
tab-item:not(.group-tab).bundled-active tab-item-substance,
tab-item:not(.group-tab).bundled-active tab-item-substance:hover,
.mutiple-highlighted > tab-item:not(.group-tab).highlighted tab-item-substance,
.mutiple-highlighted > tab-item:not(.group-tab).highlighted tab-item-substance:hover {
  --tab-surface: var(--tab-surface-active);
  --tab-surface-bgimage: var(--tab-surface-active-bgimage);
  --tab-text: var(--tab-text-active);
  --tab-text-inverted: var(--tab-text-active-inverted);
}
tab-item:not(.active):not(.bundled-active):not(.highlighted) tab-item-substance:hover,
tab-item:not(.active):not(.bundled-active):not(.highlighted) tab-item-substance:focus{
  --tab-surface: var(--tab-text-regular);
  --tab-text: var(--tab-text-regular);
}
tab-item:not(.active):not(.bundled-active):not(.highlighted):not(.group-tab) tab-item-substance .background {
  opacity: 0;
}
tab-item:not(.active):not(.bundled-active):not(.highlighted) tab-item-substance:hover .background {
  opacity: 0.15;
  transition: opacity 0.3s;
}
tab-item.dragging {
  opacity: 1.0 !important;
}

tab-item[data-drop-position="self"] tab-item-substance {
  outline: unset !important;
}
tab-item[data-drop-position="self"]:not(.faviconized),
tab-item[data-drop-position="self"].faviconized tab-item-substance {
  outline: var(--tab-dropmarker-size) solid var(--tab-dropmarker) !important;
}
tab-item-substance::before {
  display: none !important;
}
tab-item[data-drop-position]:not([data-drop-position="self"])::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
tab-item[data-drop-position="before"]:not(.faviconized)::before {
  border-top: var(--tab-dropmarker-size) solid var(--tab-dropmarker);
}
tab-item[data-drop-position="after"]:not(.faviconized)::before {
  border-bottom: var(--tab-dropmarker-size) solid var(--tab-dropmarker);
}

.discarded {
  opacity: 0.4;
}
.discarded:hover {
  opacity: 0.8;
}
/** We don't need indention on this element **/
.extra-items-container.indent {
  --shift-tabs-for-scrollbar-distance: 0em;
}




/** Tab Grouping **/


.group-tab {
  --tab-size: 24px;
  --tab-margin-top: 0.6em;
  --tab-margin-bottom: 0.6em;
  --tab-border-radius-size: 0.35em;
  overflow: visible;
  max-width: calc(100% - calc(var(--tab-margin-left) + var(--tab-indent)));
  display: block;
  margin-left: calc(4px + var(--tab-indent)) !important;
  margin-bottom: var(--tab-margin-bottom);
}
.group-tab.collapsed {
  margin: unset !important;
  height: 0;
}
.group-tab tab-item-substance {
  display: flex !important;
  height: 100%;
}
.group-tab tab-item-substance * {
  color: var(--tab-text-active-inverted) !important;
}
.group-tab .background,
.group-tab .contextual-identity-marker {
  background: var(--tab-text) !important;
  opacity: 0.9;
}
.group-tab .twisty {
  --favicon-size: none;
  position: absolute !important;
  width: 100%;
  height: 100%;
}
.group-tab .twisty::before {
  --favicon-size: 9px !important;
  --svg-small-icon-size: 9px !important;
  position: absolute;
  margin: 0 !important;
  translate: 85% -30%;
  transform: rotateZ(0deg) scale(1.0) !important;
  transform-origin: 100% 100%;
  border-radius: 2px;
  background: linear-gradient(315deg, var(--tab-text-active-inverted, black) 50%, transparent 0) !important;
  mask: none !important;
  transition: transform 0.05s ease-in !important;
}
.group-tab.subtree-collapsed tab-twisty::before {
  transform: rotateZ(-45deg) translateY(-30%) translateX(30%) scale(0.95) !important;
  transition: transform 0.05s ease-in !important;
}
.group-tab .favicon,
.group-tab .extra-items-container:not(.indent),
.group-tab[data-child-ids]:not(.subtree-collapsed) .closebox {
  display: none !important;
}
.group-tab[data-child-ids] .ui {
  margin-left: calc(var(--tab-size)/2);
}




/** Tab Background **/

.background {
  background-color: var(--tab-surface);
  background-image: var(--tab-surface-bgimage);
}

/* YES ITS "MUTiple not MULTiple*/
.mutiple-highlighted > .highlighted .background,
.mutiple-highlighted > .highlighted .contextual-identity-marker {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: -2px;
}
.highlighted.active .background {
  outline-width: 4px;
  outline-offset: -4px;
}
tab-item {
  color: var(--tab-text);
}
tab-item.removing, tab-item:not(.pinned).collapsed, tab-item.duplicating {
  margin-top: calc(0px - var(--tab-current-size) - var(--tab-margin-bottom));
  pointer-events: none;
  z-index: var(--invisible-z-index);
}

.highlighter {
  width: 2px;
  height: 32px !important;
}
.highlighter::before {
  display: none !important;
}
tab-item:not(.collapsed):not([data-level="0"]):not(.pinned) .highlighter {
  position: absolute;
  translate: calc(0em - var(--tab-margin-left)) -1.5px;
  background: var(--tab-text);
}
tab-item.active:not(.collapsed):not([data-level="0"]):not(.pinned) .highlighter {
  background: var(--tab-highlighter);
}
tab-item.group-tab:not(.collapsed) .highlighter {
  height: 32px !important;
  translate: calc(0em - calc(var(--tab-margin-left) + 4px));
}

/* Twisty (Collapse) Button */

tab-item:not(.group-tab) .twisty {
  --favicon-size: var(--tab-size);
  display: flex;
  position: absolute;
}
tab-item:not(.group-tab) .twisty:hover ~ .ui {
  margin-left: 1.5em;
  max-width: calc(100% - 1.5em);
  transition: margin-left 0.2s ease, max-width 0.2s ease;
}
tab-item:not(.group-tab) .twisty::before {
  mask-position: left;
  margin: 0;
  transition: mask-position 0.2s ease, transform 0.2s ease-out, opacity 0.15s ease-out !important;
}
tab-item:not(.group-tab) .twisty:hover::before {
  mask-position: right;
  transform: rotatez(0deg) scale(1.5) !important;
  transition: mask-position 0.2s ease, transform 0.2s ease-out, opacity 0.15s ease-out !important;
}
tab-item:not(.collapsed).subtree-collapsed:not(.group-tab) tab-twisty::before {
  mask-position: top;
  transform: rotatez(-90deg) scale(1.0) !important;
}
tab-item:not(.collapsed).subtree-collapsed:not(.group-tab) tab-twisty:hover::before {
  mask-position: bottom;
  transform: rotatez(-90deg) scale(1.5) !important;
}

.counter {
  font-size: 1px;
  line-height: 1.25;
  border: 1px solid;
  border-radius: 99px;
  padding: 0 0.5em;
  margin-left: 1em;
  z-index: 10;
}
.counter::before,
.counter::after {
  display: none;
}
tab-label {
  flex: 1 1 auto;
  margin-left: calc(var(--favicon-size)/2) !important;
  margin-bottom: 0.15em;
  line-height: var(--tab-size);
}
tab-item.sound-playing tab-label {
  margin-left: unset !important;
}
.favicon {
  --favicon-size: var(--tab-item-substance-height);
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: calc(var(--tab-size)/4);
}
.favicon > * {
  --favicon-size: 16px;
}
.favicon-builtin.favicon-default {
  height: var(--favicon-size);
}
.favicon-builtin::before {
  display: flex;
}
.throbber::before {
  background: var(--tab-text) !important;
}

tab-item:not(.faviconized) .sound-button {
  margin-right: 0.1em;
}
tab-item:not(.group-tab) .ui {
  max-width: 100%;
  transition: margin-left 0.2s ease, max-width 0.2s ease;
}
.closebox {
  flex: 0 0 18px;
  height: 18px;
  width: 18px;
  margin-right: 0.5em;
}
.closebox::before,
.closebox::after {
  position: absolute;
  border-radius: 15%;
  content: "";
}
.closebox::before {
  height: inherit;
  width: inherit;
}
.closebox::after {
  height: 14px;
  width: 14px;
  transform-origin: 0% 0%;
  transform: translate(12.5%, 12.5%);
}
.sound-button {
  border-radius: 100% !important;
}
tab-item .sound-button::before,
tab-item .sound-button::after {
  content: "" !important;
  position: absolute !important;
  height: inherit !important;
  width: inherit !important;
  border-radius: 100% !important;
}
tab-item:not(.faviconized) .sound-button::after {
  mask-size: var(--tab-sound-button-icon-size) !important;
  mask-position: 35% 50% !important;
}
tab-item:not(.faviconized) .sound-button::after,
tab-tem:not(.faviconized) .closebox::after {
  background: currentcolor;
}
.closebox:hover::before,
.sound-button:hover::before {
  background: currentcolor !important;
  opacity: 0.15 !important;
}
.closebox:active::before,
.sound-button:active::before {
  opacity: 0.4 !important;
}

/**Order of Tab Contents**/

.favicon {
  order: 0;
}
.sound-button {
  order: 1;
}
tab-item .label {
  order: 2;
}
.counter {
  order: 3;
}

/** Contextual identity marker in tab-item **/

.contextual-identity-marker {
  z-index: 10;
  top: 0 !important;
  bottom: 0 !important;
  min-width: 100% !important;
  opacity: 0.3;
}
.active .contextual-identity-marker {
  opacity: 0.7;
}
.pinned .contextual-identity-marker {
  opacity: 0.5;
}
.discarded .contextual-identity-marker {    
  opacity: 0.2;
}
.group-tab .contextual-identity-marker {
  opacity: 1.0;
}


/** Icon-Only Pinned Tabs **/
:root.faviconize-pinned-tabs #pinned-tabs-container {
  padding: var(--tab-margin-top) var(--tab-margin-left) 0 var(--tab-margin-left);
  max-height: calc(var(--pinned-tabs-area-size) + var(--tab-margin-top));
}
:root.faviconize-pinned-tabs #normal-tabs-container {
  margin-top: calc(var(--pinned-tabs-area-size) + 3*var(--tab-margin-top));
}
:root.faviconize-pinned-tabs #normal-tabs-container.scrolled {
  margin-top: calc(var(--pinned-tabs-area-size) + 4*var(--tab-margin-top));
}
:root.faviconize-pinned-tabs #tabbar::before {
  top: calc(var(--pinned-tabs-area-size) + 2*var(--tab-margin-top));
}
tab-item.faviconized {
  margin: 0 0 var(--tab-margin-top) 0;
  padding: 0;
}
.faviconized[data-drop-position]:not([data-drop-position="self"]) tab-item-substance::before {
  display: block;
  width: 100%;
  position: absolute;
  content: "";
  z-index: 1000 !important;
}
.faviconized[data-drop-position="before"]::before {
  border-left: var(--tab-dropmarker-size) solid var(--tab-dropmarker);
}
.faviconized[data-drop-position="after"]::before {
  border-right: var(--tab-dropmarker-size) solid var(--tab-dropmarker);
}


/** New tab button area **/


:root 
#tabbar:not(.overflow) .tabs.normal {
  margin-bottom: 0.5em;
}
:root {
  --after-tabs-area-size: calc(var(--tab-size) + 3*var(--tab-margin-top)) !important;
  --tab-border-radius-size: 0.25em;
}
#tabbar ~ .after-tabs {
  position: absolute;
  bottom: 0;
}

.after-tabs {
  position: relative;
  height: var(--after-tabs-area-size);
  justify-content: center;
}
.after-tabs [role="button"] {
  color: var(--tab-text);
}

/* Contextutal and New Tab Selector Buttons */

.after-tabs button {
  --size: calc(var(--tab-size)/2);
  max-height: var(--size) !important;
  max-width: var(--size) !important;
  min-height: var(--size) !important;
  min-width: var(--size) !important;
  align-self: end;
  border: unset;
  z-index: 1 !important;
  position: relative !important;
}

/* Important to override proton.css */

.after-tabs button:hover::before, 
.after-tabs [role="button"]:hover::before {
  border: unset !important;
  bottom: unset !important;
  top: unset !important;
  left: unset !important;
  right: unset !important;
}

.after-tabs button:hover::before,
.after-tabs [role="button"]:hover::before,
#subpanel-selector-anchor:hover::before {
  background-color: var(--tab-text) !important;
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0.2;
}

/* Border between tabbar and new tab area */

.after-tabs::before {
  content: '';
  position: absolute;
  display: block;
  width: var(--separator-pinned-overflow-tabs);
  height: 1px;
  top: 0;
  left: var(--tab-margin-left);
  background: var(--tab-text);
}

#tabbar.overflow ~ .after-tabs::before,
#tabbar ~ .after-tabs .newtab-button-box {
  width: var(--separator-pinned-overflow-tabs-shift);
}
.newtab-button-box {
  flex-flow: column wrap !important;
  align-items: center;
  width: calc(100% - 2*var(--tab-margin-left));
  min-height: var(--tab-size);
  left: var(--tab-margin-left);
}
.newtab-button {
  display: flex;
  position: absolute !important;
  width: 100%;
  align-items: center;
}
.newtab-button::after {
  height: var(--tab-size);
  width: var(--tab-size);
  background: currentColor;
  clip-path: polygon(15px 8px, 16px 8px, 16px 15px, 23px 15px, 23px 16px, 16px 16px, 16px 24px, 15px 24px, 15px 16px, 8px 16px, 8px 15px, 15px 15px);
}
.newtab-button .extra-items-container {
  left: unset !important;
  right: unset !important;
  padding-right: calc(var(--tab-size)/2);
  flex-grow: 1;
  position: relative;
  order: 1;
  justify-content: space-between;
}
#tabbar.overflow ~ .after-tabs .extra-items-container {
  padding-right: calc(var(--tab-size)/2 + var(--shift-tabs-for-scrollbar-distance));
}
.newtab-button .extra-items-container::before {
  content: "New tab";
}
.newtab-button .extra-items-container::after {
  opacity: 0.75;
  content: "Ctrl+T";
}

/** Bottom Tab Bar Area **/




@media screen and (min-width: 0px) and (max-width: 10em) {
  
  /** Main body layout **/
  
  :root {
    --separator-pinned-overflow-tabs: calc(48px - calc(var(--tab-margin-left) * 2));
    --separator-pinned-overflow-tabs-shift: var(--separator-pinned-overflow-tabs);
    --sound-button-size: 32px;
    --tab-sound-button-icon-size: 70%;
    --collapse-animation: 0s;
    --tab-indent-animation: unset;
  }
  #tabbar-container,
  #tabbar,
  #pinned-tabs-container {
    min-width: 258px !important; /*for layout purpose!*/
    width: 258px !important;
  }
  #all-tabs,
  .tabs {
    width: 48px !important;
    max-width: 48px !important;
  }
  
  /** Tab items **/
  
  tab-item {
    --tab-indent: 0em;
  }
  
  /** Tab Contents **/
  
  .counter,
  tab-item:not(.group-tab) .twisty,
  .closebox,
  tab-label {
    display: none;
  }
  
  /** New Tab Button **/
  
  .newtab-button .extra-items-container,
  .newtab-action-selector-anchor,
  .contextual-identities-selector-anchor {
    display: none !important;
  }
}