@media (-moz-platform: windows),
(-moz-platform: linux) {

  // move all tabs button to the left
  #TabsToolbar-customization-target {
    display: flex !important;
  }

  #alltabs-button {
    order: 0 !important;
  }

  #tabbrowser-tabs {
    order: 98 !important;
  }

  #new-tab-button {
    order: 99 !important;
  }

  #tabbrowser-arrowscrollbox .tabbrowser-tab:is(:first-child) {
    margin-left: 0px !important;
  }

  // restore drag area
  #alltabs-button {
    margin: 0 !important;
  }

  .titlebar-buttonbox-container {
    --margin-left: 48px;
    margin: 0 0 0 var(--margin-left) !important;
  }

  [dir="rtl"] {
    .titlebar-buttonbox-container {
      margin: 0 var(--margin-left) 0 0 !important;
    }
  }
}

// all tabs button redesign
#alltabs-button {
  // 40px - 3px horizontal margin = 37px
  min-width: 34px !important;
  max-width: 34px !important;
  min-height: 37px !important;
  max-height: 100% !important;

  // move to the top left corner
  justify-content: center !important;
  align-content: center !important;

  .toolbarbutton-badge-stack {
    // make the position pixel perfect, this is the top and left margin
    transform: translate(0px, 1px) !important;

    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;

    display: grid !important;
    align-content: center !important;
    place-content: center !important;
    place-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    border-radius: 11px !important;
  }

  .toolbarbutton-icon {
    width: 16px !important;
    height: 16px !important;

    @media (-moz-platform: macos) {
      width: 18px !important;
      height: 18px !important;
    }
  }
}

[dir="rtl"] {
  #alltabs-button .toolbarbutton-badge-stack {
    // make the position pixel perfect, this is the top and left margin
    transform: translate(0px, 1px) !important;
  }
}

// first tab bar padding
#TabsToolbar-customization-target {
  padding-inline-start: 3px !important;
}

@media (-moz-platform: macos) {
  #alltabs-button {
    margin-inline-end: 3px !important;
  }
}

// fix first tab left decorative corner cropping (`.tab-background::before`)
@media (-moz-platform: windows) or (-moz-platform: linux) {
  .scrollbox-clip[orient="horizontal"]>scrollbox:nth-child(1) {
    padding-inline-start: 11px !important;
    margin-inline-start: -11px !important;
  }

  #alltabs-button {
    z-index: 1 !important;
  }

  #tabs-newtab-button {
    margin-inline-start: 0px !important;
  }
}

// all tabs button transition
#alltabs-button .toolbarbutton-badge-stack {
  transition-property: background-color !important;
  transition-duration: get-var("short-duration") !important;
  transition-timing-function: get-var("fade-in-out") !important;
}

// make new tab button icon smaller
#tabs-newtab-button,
#new-tab-button {
  &> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) {
    width: 30px !important;
    height: 30px !important;
    padding: 8px !important;
  }
}

@include moz-pref-media("not userChrome.theme-default") {
  #alltabs-button {

    // default color
    .toolbarbutton-badge-stack {
      background-color: cm(get-var("background-color-100"),
          get-var("accent-color"),
          0.1333) !important;

      @media (prefers-color-scheme: dark) {
        background-color: get-var("background-color-100") !important;
      }
    }

    // on hover
    &:not(:active, [open="true"]):hover {
      .toolbarbutton-badge-stack {
        background-color: get-var("tab-background-color-hover") !important;
      }
    }

    // when open/active
    &:active:hover,
    &[open="true"] {
      .toolbarbutton-badge-stack {
        background-color: cm(transparent,
            get-var("accent-color-hover"),
            0.6) !important;

        @media (prefers-color-scheme: dark) {
          background-color: get-var(alltabs-background-color-open) !important;
        }
      }
    }
  }

  // when window inactive
  :root:-moz-window-inactive #navigator-toolbox {
    #alltabs-button .toolbarbutton-badge-stack {
      background-color: get-var("background-color-100") !important;
    }
  }
}

@include moz-pref-media("not userChrome.theme-default") {

  #tabs-newtab-button,
  #new-tab-button {
    &:not([disabled]):hover> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) {
      background-color: get-var("tab-background-color-hover") !important;
    }

    fill: get-var("icon-color-secondary") !important;
  }
}

// increase close button padding when visible
.tab-content {
  padding-inline-end: 15px !important;

  #tabbrowser-tabs[closebuttons="activetab"][orient="horizontal"] &:not([selected]) {
    padding-inline-end: 12px !important;
  }
}