// centered alltabs icon
#alltabs-button {
  display: flex !important;

  &>stack {
    display: flex !important;
    align-content: center !important;
  }
}

// buttons at center
#tabbrowser-arrowscrollbox-periphery {
  display: flex !important;
  align-items: center !important;
}

// new tab button & all tabs button
#tabs-newtab-button,
#new-tab-button,
#alltabs-button {
  min-width: 40px !important;
  min-height: var(--tab-min-height) !important;
  max-width: 40px !important;
  max-height: var(--tab-min-height) !important;
  margin: 0 !important;
  margin-top: auto !important;

  &> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) {
    padding: 6px !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 4px !important;
  }
}

#tabs-newtab-button {
  margin-inline-start: 6px !important;
  margin-inline-end: 2px !important;
}

// tab close
.tab-close-button,
.messageCloseButton>.toolbarbutton-icon {
  width: auto !important;
  height: 16px !important;
  padding: 2px !important;

  transition-property: background-color !important;
  transition-duration: get-var("short-duration") !important;
  transition-timing-function: get-var("fade-in-out") !important;

  &:hover {
    background: get-var("control-background-color") !important;
    outline: 1px solid transparent !important;
    outline-color: get-var("control-border-color") !important;
  }
}

// all tabs button
@media (-moz-platform: windows) {

  // hide spacer between tabs & window nav
  .titlebar-spacer[type="post-tabs"] {
    display: none !important;
  }

  #alltabs-button {
    max-height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;

    --margin-left: 48px;
    margin: 0 0 0 var(--margin-left) !important;

    &>stack {
      padding: 0 !important;
      margin: 0 !important;
      border-radius: 0 !important;
      max-height: 100% !important;
      min-height: 100% !important;
    }
  }

  #tabbrowser-tab {
    order: 990 !important;
  }

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


  // @media (max-width: 700px) {
  //   #alltabs-button {
  //     --margin-left: 8px !important;
  //   }
  // }

  // @media (max-width: 500px) {
  //   #alltabs-button {
  //     --margin-left: 0px !important;
  //   }
  // }
}

// #scrollbutton-down,
// #scrollbutton-up {
//   --scrollbutton-size: 34px;
//   max-width: var(--scrollbutton-size) !important;
//   min-width: var(--scrollbutton-size) !important;
//   min-height: var(--scrollbutton-size) !important;
//   min-height: var(--scrollbutton-size) !important;
// }

// fixes for macOS
@media (-moz-platform: macos) {

  // macOS fix for new tab button & all tabs button
  #new-tab-button {
    margin-inline-start: 2px !important;
  }

  // macos drag area fix
  #tabs-newtab-button,
  #new-tab-button {
    margin-inline-end: 40px !important;
  }
}

// restore close button visibility for not selected tabs
.tabbrowser-tab:not([pinned]) {
  .tab-close-button {
    display: flex !important;
  }
}

// Firefox view button
#TabsToolbar #firefox-view-button {
  &>.toolbarbutton-icon {
    align-items: center !important;
    box-shadow: none !important;

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

    transition-property: opacity, background-color !important;
    transition-duration: get-var("shortest-duration") !important;
    transition-timing-function: get-var("fade-in-out") !important;
  }

  &[open]>.toolbarbutton-icon {
    fill: get-var("icon-color-primaryy") !important;

    box-shadow: none !important;
    background-color: get-var(background-color-100) !important;
  }

  &[open]:hover>.toolbarbutton-icon {
    box-shadow: none !important;
    background-color: get-var(background-color-100) !important;
  }

  &:hover>.toolbarbutton-icon {
    box-shadow: none !important;
    background-color: get-var(tab-background-color-hover) !important;
  }
}

@include moz-pref-media("not userChrome.ui-chrome-refresh") {
  @media (-moz-platform: windows) {
    #alltabs-button {
      min-width: 46px !important;
      max-width: 46px !important;

      &> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) {
        width: 100% !important;
        border-radius: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
      }

      &:hover {
        .toolbarbutton-badge-stack {
          background-color: light-dark(hsla(0, 0%, 0%, 0.13),
              hsla(0, 0%, 100%, 0.15)) !important;
        }
      }

      &:hover:active,
      &[open] {
        .toolbarbutton-badge-stack {
          background-color: light-dark(hsla(0, 0%, 0%, 0.22),
              hsla(0, 0%, 100%, 0.32)) !important;
        }
      }
    }

    :root:-moz-window-inactive #navigator-toolbox {
      #alltabs-button {
        opacity: 0.5 !important;

        &:hover {
          opacity: 1 !important;
        }
      }
    }
  }
}