// bookmark folder style
#PlacesToolbarItems>.bookmark-item {
  --toolbarbutton-border-radius: 100px !important;
  padding: var(--bookmark-block-padding) 6px !important;
}

// bookmarks bar haight
:root,
#PersonalToolbar {
  --bookmarks-toolbar-overlapping-browser-heigh: max(36px, 2em) !important;
}

:root[BookmarksToolbarOverlapsBrowser] #PersonalToolbar {
  height: var(--bookmarks-toolbar-overlapping-browser-heigh) !important;
}

// bookmarks item haight
#PersonalToolbar toolbarbutton {
  height: 28px !important;
  max-height: 28px !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  align-items: center !important;
}

#PersonalToolbar {
  align-items: center !important;
}

// centered bookmark item content
#PlacesToolbar,
#PlacesToolbarItems {
  align-items: center !important;
  height: 34px !important;
  margin-bottom: 2px !important;
}

#PlacesToolbarItems>.bookmark-item {
  display: flex !important;
  align-items: center !important;

  // remove top & btton padding to fix centered label position
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;

  &>image {
    margin: auto 0;
  }

  &>label {
    margin-inline-start: 6px !important;
    margin-block: 0 !important;
    margin-inline: 0 !important;
    margin: auto 0;

    display: flex !important;
    align-items: center !important;

    height: 100% !important;
  }
}

// bookmarks bar left/right padding
#PersonalToolbar {
  padding-inline: 4px !important;
}

// bookmart item max width (not in folder)
toolbarbutton.bookmark-item:not(.subviewbutton) {
  max-width: 12em !important; // default: 13em
}

//fix margin for bookmark item in menu
.toolbar-menupopup :is(menu, menuitem).bookmark-item {
  margin: 0 !important;
}

[dir="ltr"] {
  .toolbar-menupopup :is(menu, menuitem).bookmark-item {
    padding-left: 16px !important;
  }
}

[dir="rtl"] {
  .toolbar-menupopup :is(menu, menuitem).bookmark-item {
    padding-right: 16px !important;
  }
}

// bookmarks label font bolder
.bookmark-item {
  label {
    @media (-moz-platform: windows) {
      font-weight: 500 !important;
    }

    @media (-moz-platform: macos) {
      font-size: 1.05rem !important;
    }
  }
}

// recolor like in chrome
@include moz-pref-media("not userChrome.theme-default") {
  .bookmark-item {
    fill: get-var(text-secondary) !important;

    label {
      color: get-var("tab-label-color-inactive") !important;
    }
  }

  #PlacesChevron:not([collapsed]) .toolbarbutton-icon {
    fill: get-var(icon-color-secondary) !important;
  }
}

// make folder icon size bigger like in chrome
#PlacesToolbarItems>.bookmark-item[container="true"]>image {
  transform: scale(1.15) !important;
  margin-inline-end: 8px !important;
}

// smaller "Show more bookmarks" icon
#PlacesChevron:not([collapsed]) .toolbarbutton-icon {
  width: calc(2 * var(--toolbarbutton-inner-padding) + 12px) !important;
}