#tab-notification-deck:not([customizing]) > .notificationbox-stack {
  $infobarFixedHeight: 13px + ((1px + 5px) * 2); // button height + (button border + [button.small-button padding]) * 2
  // fixedHeight + (button margin * 2) + messagebar margin
  --infobar-height: calc(#{ $infobarFixedHeight } + (var(--infobar-button-vertical-margin, 4px) * 2) + var(--infobar-message-vertical-margin, 8px));
}
#tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
  --infobar-message-margin: 0 4px calc(-1 * var(--infobar-height));
  opacity: 0;
  will-change: margin-bottom, opacity;
}

#navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
  --infobar-message-margin: 0 4px var(--infobar-message-vertical-margin, 8px);
  opacity: 1;
}

@include Option("userChrome.autohide.toolbar_overlap") {
  #tab-notification-deck:not([customizing]) {
    height: 0;
  }
}

@include Animate {
  #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
    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),
                var(--ext-theme-background-transition) !important;
  }
  #navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message {
    transition-delay: 0s !important;
  }
}
