// Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_bookmarks_toolbar.css
#PersonalToolbar:not([customizing]) {
  margin-bottom: var(--uc-bm-hide-height);
  opacity: 0;
  will-change: margin-bottom, opacity;

  @include Option("userChrome.autohide.toolbar_overlap") {
    @include NotOption("userChrome.autohide.toolbar_overlap.allow_layout_shift") {
      @include NotHas {
        &[collapsed="true"] {
          visibility: visible !important;
          max-height: unset !important;
        }
      }
    }
  }
}

#navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) {
  margin-bottom: 0;
  opacity: 1;
}

@include Animate {
  #PersonalToolbar:not([customizing]) {
    //  --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67);
    transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
                opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
                min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important;
  }
  #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) {
    transition-delay: 0s !important;
  }
}
