src/components/from-navigator/hover-sidebar/bottom.css
#navigator-toolbox {
  --btn-size: 32px;
}

#alltabs-button {
  display: none;
}

#firefox-view-button,
#new-tab-button,
#save-to-pocket-button,
#unified-extensions-button,
#fxa-toolbar-menu-button {
  position: fixed;
  bottom: var(--sidebar-padding);
  display: block !important;
}

#firefox-view-button {
  left: var(--sidebar-padding);
}

#new-tab-button {
  right: var(--sidebar-padding);
}

#save-to-pocket-button,
#unified-extensions-button,
#fxa-toolbar-menu-button {
  bottom: calc(var(--sidebar-padding) + 36px / 2);
  width: var(--btn-size) !important;
  height: var(--btn-size) !important;
  transform: translate(-50%, +50%);
}

#save-to-pocket-button {
  left: calc(50% - var(--sidebar-padding) - var(--btn-size));
}

#unified-extensions-button {
  left: calc(50% + var(--sidebar-padding) + var(--btn-size));
}

#fxa-toolbar-menu-button {
  left: 50%;

  .toolbarbutton-badge-stack {
    width: var(--btn-size) !important;
    height: var(--btn-size) !important;
    border-radius: var(--md) !important;
    transition: background-color var(--transition);
  }

  &:hover .toolbarbutton-badge-stack {
    background-color: var(--base-100) !important;
  }

  &[open] .toolbarbutton-badge-stack {
    background-color: var(--neutral) !important;
  }
}
