@media (-moz-proton) {
  /* Darkmode - Color lighter */
  :root[style*="--lwt-accent-color:rgb(12, 12, 13); --lwt-text-color:rgba(249, 249, 250);"] {
    --toolbar-bgcolor: rgba(43, 42, 51, 5) !important;
  }

  /* Tab - Max Size */
  .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"])
  {
    max-width: 240px !important;
  }

  /* Tab - Connect to window */
  .tab-background {
    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
    margin-bottom: 0px !important;
  }

  .tab-content {
    margin-top: var(--proton-tab-block-margin);
  }

  .tab-stack {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

  /* neighbouring tabs should "pinch" together */
  .tabbrowser-tab {
    padding-inline: 1px !important;
  }

  .tabbrowser-tab:not([last-visible-tab])
  {
    margin-inline-end: -.5px !important;
  }

  /* Selected Tab - Color like toolbar */
  .tab-background[selected="true"] {
    background: var(--toolbar-bgcolor) !important;
  }

  #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected="true"]:-moz-lwtheme, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme {
    background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
  }

  /* Selected Tab - Box Shadow */
  #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme {
    box-shadow: 0 0 1px var(--toolbar-color) !important;
  }

  /* Selected Tab - Bottom Rounded Corner */
  tab {
    --tab-corner-rounding: 8px;
    --animation-speed: 0.15s;
  }

  /* Bottom corner rounding for tabs, Remove this section if your tab bottom corners look bad */
  tab[visuallyselected] .tab-background::before,
  tab[visuallyselected] .tab-background::after {
    content: "" !important;
    display: inline !important;
    position: absolute !important;
    width: var(--tab-corner-rounding) !important;
    height: var(--tab-corner-rounding) !important;
    bottom: -1px !important;
    pointer-events: none !important;
    background-color: transparent !important;
    transition: var(--animation-speed) !important;
  }

  tab[visuallyselected] .tab-background::before {
    border-bottom-right-radius: var(--tab-corner-rounding) !important;
    transform: translateX(calc(-1 * var(--tab-corner-rounding))) !important;
    box-shadow: 0 1px 1px -1px var(--toolbar-color), /* <- Selected Box Shadow */
                4px 4px 0px 4px var(--toolbar-bgcolor) !important;
    transition: var(--animation-speed) !important;
  }

  tab[visuallyselected] .tab-background::after {
    border-bottom-left-radius: var(--tab-corner-rounding) !important;
    right: 0px !important;
    transform: translateX(calc(var(--tab-corner-rounding) + 1px)) !important;
    box-shadow: -1px 0 0 -1px var(--toolbar-color), /* <- Selected Box Shadow */
                -4px 4px 0px 4px var(--toolbar-bgcolor) !important;
    transition: var(--animation-speed) !important;
  }

  /* Unselected Tab - Divide line */
  .tab-content::before,
  .tab-content::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    background-color: var(--lwt-selected-tab-background-color) !important;
    width: 1px !important;
    height: 20px !important;
    transform: translateY(-10px) !important;
    opacity: 0 !important;
    transition: opacity .2s var(--ease-basic) !important;
  }

  .tab-content::before {
    left: 0 !important;
  }

  .tab-content::after {
    right: 0 !important;
  }

  .tabbrowser-tab[visuallyselected][style*=transform] + .tabbrowser-tab[style*=transform] .tab-content::after,
  .tabbrowser-tab[style*=transform]:not([visuallyselected]) .tab-content::before,
  .tabbrowser-tab[style*=transform] + .tabbrowser-tab:not([visuallyselected]) .tab-content::before,
  .tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected]) + .tabbrowser-tab:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::before,
  #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not(:hover):not([multiselected]) .tab-content::after
  {
    opacity: var(--tab-separator-opacity) !important;
  }

  /* Clipped tabs - Letters cleary */
  #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned])
  {
    padding-inline-start: 8px !important;
  }

  #tabbrowser-tabs[closebuttons=activetab] .tabbrowser-tab:not([visuallyselected]) .tab-close-button
  {
    visibility: collapse !important;
  }

  #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]),
  #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned])
  {
    mask-image: linear-gradient(to right, black 70%, transparent) !important;
  }

  #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]),
  #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned])
  {
    mask-image: linear-gradient(to left, black 70%, transparent) !important;
  }

  /* Sound Tab - Show with Favicons */
  /* Makes the favicons always visible (also on hover) */
  #tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay), #toolbar-menubar:not(:hover) + #TabsToolbar:not(:hover) #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-icon-image[src] ~ .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]), :is(#toolbar-menubar:hover + #TabsToolbar, #TabsToolbar:hover) .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) > :not(.tab-icon-overlay) {
    opacity: 1 !important;
  }

  /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
  .tab-icon-overlay:not([crashed]) {
    top: -4.5px !important;
    inset-inline-end: -9px !important;
    z-index: 1 !important;
    background: transparent !important;
  }
  .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
    opacity: 1 !important;
    margin-right: 10px !important;
  }

  /* Menu - Padding narrower */
  menupopup > menuitem, menupopup > menu {
    padding-block: 0.15em !important;
  }
}