#menubar-items {
  @include Box(true);
  @include BoxPack("center", true);
}
@include Option("userChromeJS.Sidra.Menubar.AccessKey.Disabled") {
  /*屏蔽Alt切换菜单 */
  #toolbar-menubar[autohide="true"] {
    display: none !important;
  }
}

@include Option("userChromeJS.Sidra.MenuPopup.Compact") {
  /* Edge-Frfox - popup.css */

  :root {
    --panel-subview-body-padding: 2px 0 !important;
    --arrowpanel-border-radius: 8px !important;
    --arrowpanel-menuitem-border-radius: 4px !important;
    --arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block)
      var(--uc-arrowpanel-menuitem-margin-inline) !important;
    --arrowpanel-menuitem-padding-block: 6px !important;
    --arrowpanel-menuitem-padding-inline: 10px !important;
    --uc-arrowpanel-menuicon-margin-inline: 14px;
    --uc-arrowpanel-menuitem-margin-inline: 4px;
    --uc-arrowpanel-menuitem-margin-block: 2px;
    --panel-separator-margin-vertical: 2px !important;
    --panel-separator-margin-horizontal: 0 !important;

    --uc-panel-zoom-button-padding: 8px;
    --uc-panel-zoom-button-inline-padding: 9px;
    --uc-panel-zoom-padding-block: calc(
      var(--panel-separator-margin-vertical) +
        var(--uc-arrowpanel-menuitem-margin-block)
    );

    --uc-autocomplete-panel-menuitem-margin: 4px;
    --uc-autocomplete-panel-menuicon-padding-inline: 14px;
    --uc-autocomplete-panel-separator-margin-vertical: 4px;

    --uc-permission-itemcontainer-padding-block: 8px;
    --uc-permission-item-margin-block: 4px;
    --uc-permission-item-padding-inline: 16px;

    --uc-contextmenu-border-radius: 8px;
    --uc-contextmenu-padding: calc(
        4px - var(--uc-contextmenu-menuitem-border-width)
      )
      0;
    --uc-contextmenu-menuitem-border-radius: calc(
      4px + var(--uc-contextmenu-menuitem-border-width)
    );
    --uc-contextmenu-menuitem-padding-block: 6px;
    --uc-contextmenu-menuitem-padding-inline: 10px;
    --uc-contextmenu-menuitem-border-width: 2px;
    --uc-contextmenu-menuicon-margin-inline: 12px;
    --uc-contextmenu-menuitem-margin-inline: calc(
      4px - var(--uc-contextmenu-menuitem-border-width)
    );
    --uc-contextmenu-menuitem-margin-block: 0px;
    --uc-contextmenu-menuitem-margin: var(
        --uc-contextmenu-menuitem-margin-block
      )
      var(--uc-contextmenu-menuitem-margin-inline);
    --uc-contextmenu-separator-vertical: calc(
      4px - var(--uc-contextmenu-menuitem-border-width)
    );
    --uc-contextmenu-separator-horizontal: 0;
  }

  :root[uidensity="compact"] {
    --uc-arrowpanel-menuicon-margin-inline: 8px;
    --arrowpanel-menuitem-padding-block: 4px !important;
    --arrowpanel-menuitem-padding-inline: 6px !important;
    --uc-contextmenu-menuitem-padding-block: 4px;
    --uc-contextmenu-menuitem-padding-inline: 6px;
    --uc-contextmenu-menuicon-margin-inline: 6px;

    --uc-panel-zoom-button-padding: 4px;
    --uc-panel-zoom-button-inline-padding: 6px;

    --uc-autocomplete-panel-menuicon-padding-inline: 8px;

    --uc-permission-item-padding-inline: 8px;
  }

  /* app menu */
  .addon-banner-item,
  .panel-banner-item {
    margin: 2px 4px 2px !important;
    padding-inline: 4px 12px !important;
    padding-block: var(--arrowpanel-menuitem-padding-block) !important;
    border-radius: var(--arrowpanel-menuitem-border-radius) !important;
  }

  #appMenu-fxa-label2 label,
  #PanelUI-fxa-menu-syncnow-button label {
    margin-block: 0 !important;
  }

  // 修正部分按钮图标与文字的间距
  .widget-overflow-list
    .toolbarbutton-1:not(.toolbarbutton-combined)
    > .toolbarbutton-text,
  .subviewbutton:not(#appMenu-zoom-controls > .subviewbutton)
    > .toolbarbutton-icon
    + .toolbarbutton-text,
  #appMenu-fxa-label2 > vbox {
    padding-inline-start: var(
      --uc-arrowpanel-menuicon-margin-inline
    ) !important;
  }

  // 没有图标结构的按钮增加图标
  #PanelUI-remotetabs-view-managedevices,
  #appMenu-zoom-controls {
    &:before {
      content: "";
      @include Box(true);
      width: 16px;
      height: 16px;
      margin-inline-end: var(--uc-arrowpanel-menuicon-margin-inline);
      background-image: var(--menu-image);
    }
  }

  @include NotOption("userChromeJS.Sidra.Icons.Compact") {
    #fxa-manage-account-button > vbox,
    #PanelUI-fxa-menu-syncnow-button > hbox {
      padding-inline-start: calc(
        16px + var(--uc-arrowpanel-menuicon-margin-inline)
      ) !important;
    }
  }

  .subviewbutton > .toolbarbutton-icon {
    width: 16px !important;
  }

  /* firefox profile avatar in appmenu */
  #appMenu-fxa-label2::before {
    content: "";
    display: flex;
    height: 16px;
    width: 16px;
    background: var(--avatar-image-url) 0/16px;
    scale: 1.25;
    border-radius: 99px;
  }

  /* disable proton account separator */
  #appMenu-fxa-separator {
    border-image: none !important;
  }

  #appMenu-fxa-status2:not([fxastatus]) {
    padding-block: 0 !important;
  }

  #appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 {
    margin-inline-end: calc(
      var(--arrowpanel-menuitem-padding-inline) * -1
    ) !important;
  }

  /* zoom controls */
  #appMenu-zoom-controls {
    border-top: 1px solid var(--panel-separator-color) !important;
    padding-inline: calc(
        var(--arrowpanel-menuitem-padding-inline) +
          var(--uc-arrowpanel-menuitem-margin-inline)
      )
      var(--uc-arrowpanel-menuitem-margin-inline) !important;
    padding-block: var(--uc-panel-zoom-padding-block) !important;
    margin: var(--panel-separator-margin-vertical) 0
      calc(var(--panel-separator-margin-vertical) * -1) !important;
  }

  #appMenu-zoom-controls > .subviewbutton {
    padding: var(--uc-panel-zoom-button-padding)
      var(--uc-panel-zoom-button-inline-padding) !important;
    margin: 0 !important;
  }

  #appMenu-zoom-controls > #appMenu-zoomReset-button2 {
    padding: var(--uc-panel-zoom-button-padding)
      calc(var(--uc-panel-zoom-button-padding) / 2) !important;
  }

  /* #appMenu-zoomReduce-button2, */
  #appMenu-zoom-controls > #appMenu-fullscreen-button2 {
    margin-left: calc(
      (
          var(--panel-separator-margin-vertical) +
            var(--uc-arrowpanel-menuitem-margin-block)
        ) *
        2 + 1px
    ) !important;
  }

  #appMenu-zoom-controls > #appMenu-fullscreen-button2::before {
    content: "";
    border-inline-start: 1px solid var(--panel-separator-color);
    display: block;
    position: relative;
    height: 32px;
    margin-block: calc(var(--uc-panel-zoom-button-padding) * -1);
    transform: translateX(
      calc(
        var(--uc-panel-zoom-button-inline-padding) * -1 -
          (
            var(--panel-separator-margin-vertical) +
              var(--uc-arrowpanel-menuitem-margin-block)
          ) -
          1px
      )
    );
  }

  #appMenu-zoomReset-button2 {
    height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important;
    min-height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important;
  }

  #appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover),
  #appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover),
  #appMenu-fullscreen-button2:not([disabled], [open], :active):is(:hover),
  #appMenu-zoomReset-button2:not([disabled], [open], :active):is(:hover) {
    background-color: var(--panel-item-hover-bgcolor) !important;
  }

  #appMenu-zoomReduce-button2:not([disabled]):is([open], :hover:active),
  #appMenu-zoomEnlarge-button2:not([disabled]):is([open], :hover:active),
  #appMenu-fullscreen-button2:not([disabled]):is([open], :hover:active),
  #appMenu-zoomReset-button2:not([disabled]):is([open], :hover:active) {
    background-color: var(--panel-item-active-bgcolor) !important;
  }

  #appMenu-zoomReduce-button2 > .toolbarbutton-icon,
  #appMenu-zoomEnlarge-button2 > .toolbarbutton-icon {
    fill: currentColor !important;
    stroke: none !important;
  }

  #appMenu-zoomReset-button2 > .toolbarbutton-text,
  #appMenu-fullscreen-button2 > .toolbarbutton-icon {
    background-color: transparent !important;
    padding: 0 !important;
  }

  #appMenu-zoomReduce-button2 {
    list-style-image: url("./images/icons/zoom-out.svg") !important;
  }

  #appMenu-zoomEnlarge-button2 {
    list-style-image: url("./images/icons/plus.svg") !important;
  }

  .subviewbutton[shortcut]::after {
    opacity: 0.7 !important;
  }

  #widget-overflow-mainView .panel-subview-body {
    padding-bottom: 0 !important;
  }

  .PanelUI-subView > .panel-header + toolbarseparator {
    margin-bottom: 0 !important;
  }

  .PanelUI-subView > .panel-header + toolbarseparator + .panel-subview-body {
    padding-top: var(--panel-separator-margin-vertical) !important;
  }

  #identity-popup-security-button {
    margin-bottom: var(--panel-separator-margin-vertical) !important;
  }

  #permission-popup-mainView-panel-header,
  #identity-popup-mainView-panel-header,
  #protections-popup-mainView-panel-header,
  .panel-header {
    min-height: calc(
      (var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px
    ) !important;
  }

  /* URL bar popup */
  .panel-footer > button {
    border-radius: 2px !important;
  }

  .identity-popup-security-connection > hbox > description {
    margin-inline-start: 0 !important;
  }

  .identity-popup-security-connection.identity-button {
    margin-inline-end: calc(
      -1 * (var(--arrowpanel-menuitem-padding-inline) - 10px)
    ) !important;
  }

  #identity-popup-mainView-panel-header-span,
  #permission-popup-mainView-panel-header-span,
  #identity-popup-mainView-panel-header label,
  #permission-popup-mainView-panel-header label,
  #protections-popup-mainView-panel-header-span {
    margin-block: 0 !important;
  }

  .permission-popup-section {
    padding-block: var(--uc-permission-itemcontainer-padding-block) !important;
  }

  #permission-popup-permissions-content {
    padding-inline: var(--uc-permission-item-padding-inline) !important;
  }

  .permission-popup-permission-item,
  #permission-popup-storage-access-permission-list-header {
    margin-block: var(--uc-permission-item-margin-block) !important;
  }

  .permission-popup-permission-label,
  .permission-popup-permission-header-label {
    margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
  }

  #editBookmarkPanel > #editBookmarkHeaderSeparator,
  #editBookmarkPanel > .panel-subview-body > #editBookmarkSeparator {
    margin-inline: 0 !important;
  }

  /* subview */
  .panel-header {
    padding: 4px !important;
    padding-top: 4px !important;
  }

  .panel-header + toolbarseparator,
  #identity-popup-mainView-panel-header + toolbarseparator,
  #permission-popup-mainView-panel-header + toolbarseparator,
  #protections-popup-mainView-panel-header-section + toolbarseparator {
    margin-block-start: 0 !important;
  }

  .panel-header > .subviewbutton-back {
    margin: 0 !important;
    padding: var(--arrowpanel-menuitem-padding-block) !important;
  }

  .panel-subview-footer-button {
    margin-bottom: 4px !important;
  }

  .webextension-popup-browser,
  .webextension-popup-stack {
    margin-block-start: calc(
      var(--panel-separator-margin-vertical) * -0.5
    ) !important;
  }

  #PlacesToolbar menuitem,
  #PlacesToolbar menu,
  panelview .toolbarbutton-1,
  .subviewbutton,
  .widget-overflow-list .toolbarbutton-1 {
    min-height: calc(
      16px + var(--uc-contextmenu-menuitem-padding-block) * 2
    ) !important;
  }

  /*
  MARK: Downloads
  */
  .downloadTypeIcon {
    height: 16px !important;
    width: 16px !important;
  }

  .downloadButton {
    min-width: calc(
      16px + var(--uc-toolbarbutton-inner-inline-padding) * 2
    ) !important;
    height: calc(16px + var(--toolbarbutton-inner-padding) * 2) !important;
    border-radius: var(--toolbarbutton-border-radius) !important;
  }

  .downloadProgress::-moz-progress-bar,
  .downloadProgress > div {
    background-color: var(--toolbarbutton-icon-fill-attention) !important;
  }

  .downloadMainArea {
    padding-block: 4px !important;
    padding-inline: 12px !important;
    border-radius: 0 !important;
  }

  #downloadsListBox > richlistitem {
    padding-inline-end: 8px !important;
    border-radius: var(--arrowpanel-menuitem-border-radius) !important;
  }

  #downloadsListBox,
  .downloadsPanelFooterButton {
    margin: var(--arrowpanel-menuitem-margin) !important;
    width: auto !important;
    min-width: auto !important;
  }

  #downloadsPanel-blockedSubview,
  #downloadsPanel-mainView {
    padding: var(--panel-separator-margin-vertical) 0 !important;
  }

  #emptyDownloads {
    padding: 1.5em 16px 1.7em !important;
  }

  #downloadsHistory .button-text {
    margin-block: 0 !important;
    margin-inline: 0 !important;
  }

  .PanelUI-subView .subviewbutton-nav::after,
  #PlacesToolbar menu > .menu-right,
  .subviewbutton > .menu-right {
    fill-opacity: 1 !important;
  }

  @include Option("userChromeJS.Sidra.Menupopup.Compact.Extensions.Menu") {
    :root {
      --uei-icon-size: 16px !important;
    }

    /*
    MARK: Extensions
    */
    /* #region */
    panelview#unified-extensions-view .toolbaritem-combined-buttons {
      margin-inline-start: var(--arrowpanel-menuitem-margin-inline) !important;

      & .toolbaritem-combined-buttons:is(
          :not([cui-areatype="toolbar"]),
          [overflowedItem="true"]
        )
        > toolbarbutton:not(.toolbarbutton-1)[disabled] {
        opacity: 1 !important;
        color: var(--panel-disabled-color) !important;
      }
    }

    /* Removes space above extensions items. */
    #unified-extensions-messages-container {
      margin-block: 0 !important;
    }

    /* Hide site access permissions label. */
    .unified-extensions-item-message-deck {
      display: none !important;
    }

    /* Use smaller toolbar extension icon if available. */
    toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"])
      > .webextension-browser-action {
      list-style-image: var(
        --webextension-toolbar-image,
        var(--webextension-menupanel-image, inherit)
      ) !important;
    }
  }
  /* Use smaller font-size in extensions menu on Windows. */
  @media (-moz-platform: windows) {
    #unified-extensions-panel .toolbarbutton-text {
      font: menu !important;
      font-family: inherit !important;
    }
  }

  /* Prevent extension labels from using >1 line, adding ellipsis if necessary. */
  .unified-extensions-item-contents {
    flex: 1 !important;

    & > .unified-extensions-item-name,
    &
      > .unified-extensions-item-message-deck
      > .unified-extensions-item-message {
      max-width: calc(100% - 4px) !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
  }

  /* Extension item menu button. */
  .unified-extensions-item-row-wrapper > [class^="unified-extensions-item"] {
    padding: 0 !important;

    & > .toolbarbutton-icon {
      border: none !important;
      padding-inline: var(--arrowpanel-menuitem-padding-inline) !important;
      padding-block: var(--arrowpanel-menuitem-padding-block) !important;
      margin-inline-start: var(
        --uc-arrowpanel-menuitem-margin-inline
      ) !important;
    }
  }

  /* Add grayscale filter to extensions with no access to current site. */
  .unified-extensions-list
    .unified-extensions-item-action-button:has(
      .unified-extensions-item-message[data-l10n-id="origin-controls-state-no-access"]
    )
    .unified-extensions-item-icon {
    filter: grayscale(1) !important;
  }

  /* Adjust spacing between the extension item's icon and label. */
  .unified-extensions-item-name,
  .unified-extensions-item-message {
    padding-inline-start: var(
      --uc-arrowpanel-menuicon-margin-inline
    ) !important;
  }

  .unified-extensions-item-icon,
  .unified-extensions-item
    .webextension-browser-action
    > .toolbarbutton-badge-stack {
    margin-inline-end: 0 !important;
  }
  /* #endregion */

  /*
  MARK: Autocomplete
  */
  panel[type="autocomplete-richlistbox"] {
    --panel-shadow: none !important;
    --panel-background: var(--arrowpanel-background) !important;
    --panel-color: var(--arrowpanel-color) !important;
    --panel-padding: var(--uc-contextmenu-padding) !important;
    --panel-border-radius: var(--uc-contextmenu-border-radius) !important;
    --panel-border-color: var(--arrowpanel-border-color) !important;

    > .autocomplete-richlistbox {
      background: transparent !important;
      color: inherit !important;
    }

    .autocomplete-richlistitem {
      &[originaltype="loginsFooter"] {
        justify-content: start !important;
        color: inherit !important;
        background-color: transparent !important;
        padding-inline-start: var(
          --uc-contextmenu-menuitem-padding-inline
        ) !important;
        position: relative !important;
        overflow: visible !important;
        margin-top: calc(
          var(--uc-contextmenu-separator-vertical) * 2 + 1px
        ) !important;

        /* Separator */
        &::before {
          content: "";
          position: absolute;
          width: calc(100% + var(--uc-contextmenu-menuitem-margin-inline) * 2);
          border-top: 1px solid var(--panel-separator-color);
          top: calc(
            (
                var(--uc-contextmenu-separator-vertical) +
                  var(--uc-contextmenu-menuitem-border-width)
              ) *
              -1 - 1px
          );
          left: calc(var(--uc-contextmenu-menuitem-margin-inline) * -1);
        }
      }

      &:hover {
        background-color: var(--panel-item-hover-bgcolor) !important;
      }

      &[selected] {
        background-color: var(--panel-item-active-bgcolor) !important;
        color: inherit !important;
      }
    }

    .ac-site-icon {
      fill: currentColor !important;
      margin-block: auto !important;
      margin-inline: 0 var(--uc-autocomplete-panel-menuicon-padding-inline) !important;
    }

    .ac-title {
      margin-inline-start: 0 !important;
    }

    .two-line-wrapper {
      padding: 0 !important;
      gap: 0 !important;

      > .labels-wrapper > .line2-label:empty {
        /* Remove padding on empty element. */
        padding-top: 0 !important;
      }
    }
  }

  #PopupAutoComplete {
    .ac-site-icon {
      display: flex !important;
    }
  }

  /*
  MARK: Search bar suggestions
*/
  #PopupSearchAutoComplete {
    & .search-panel-header {
      padding-block: 2px !important;
      padding-inline: var(--uc-contextmenu-menuitem-padding-inline) !important;
      margin: 0 var(--uc-arrowpanel-menuitem-margin-inline) !important;
      border-radius: var(--arrowpanel-menuitem-border-radius) !important;
    }

    & .autocomplete-richlistitem > .ac-type-icon {
      margin-inline-start: 0 !important;
    }

    /* Search engine selector. */
    & .search-one-offs {
      padding-block: 0 5px !important;

      & #searchbar-one-offs-header-label {
        margin-inline-start: 0 !important;
      }

      & .search-panel-one-offs-container {
        margin-inline: 1px 7px !important;
      }
    }
  }

  /* Context Menu */
  menupopup:not(.PanelUI-subView),
  menupopup:not(.PanelUI-subView) menuitem,
  menupopup:not(.PanelUI-subView) menu,
  menupopup:not(.PanelUI-subView) menuseparator,
  panel:not([type="autocomplete-richlistbox"]) {
    appearance: none !important;
  }

  menupopup:not(.PanelUI-subView),
  menulist > menupopup:not(.PanelUI-subView) > menucaption {
    -moz-window-shadow: none !important;
    background: 0 !important;
    border: 0 !important;
    color: var(--arrowpanel-color) !important;
  }

  .popup-internal-box,
  .menupopup-arrowscrollbox {
    background: var(--arrowpanel-background) !important;
    border: 1px solid var(--arrowpanel-border-color) !important;
  }

  /* make room for menu shadow */
  menupopup:not(.PanelUI-subView) {
    padding: 4px 12px 20px !important;
    margin: -6px -12px -16px !important;
  }

  /* cut off shadow so it doesn't get in the way of the menubar items */
  menubar menupopup {
    padding: 1px 8px 20px !important;
    margin: -1px -4px -16px !important;
  }

  menupopup,
  panel {
    --uc-margin: 0 !important;
    --uc-outline-color: #0001;
    --uc-box-shadow: 0 8px 12px #0003, 0 4px 5px #0002, 0 2px 4px #0002;
  }

  @media (prefers-color-scheme: dark) {
    menupopup,
    panel {
      --uc-outline-color: #0002;
      --uc-box-shadow: 0 8px 12px #0003, 0 4px 5px #0003, 0 2px 4px #0002;
    }
  }

  /* use default shadow for subview menupopup (eg. bookmarks) */
  menupopup.PanelUI-subView {
    --uc-box-shadow: 0 0 0 1px var(--panel-border-color);
    --uc-margin: 1px !important;
    margin-top: -5px !important;
  }

  @include Option("widget.windows.mica.popups") {
    panel {
      padding: 12px 8px;
      --panel-shadow: var(--uc-box-shadow) !important;
    }
  }

  .menupopup-arrowscrollbox {
    box-shadow: var(--uc-box-shadow) !important;
    outline: 0.5px solid var(--uc-outline-color) !important;
  }

  .popup-internal-box {
    margin: 0 !important;
  }

  .popup-internal-box,
  .menupopup-arrowscrollbox {
    padding: var(--uc-contextmenu-padding) !important;
    border-radius: var(--uc-contextmenu-border-radius) !important;
    color: inherit !important;
  }

  menupopup menu[disabled="true"],
  menupopup menuitem[disabled="true"] {
    color: var(--panel-disabled-color) !important;
    // background: none !important;
  }

  menupopup menu:hover:not([disabled="true"]),
  menupopup menuitem:hover:not([disabled="true"]),
  menupopup menu[_moz-menuactive]:not([disabled="true"]),
  menupopup menuitem[_moz-menuactive]:not([disabled="true"]) {
    background-color: var(--panel-item-hover-bgcolor) !important;
    color: inherit !important;
  }

  menupopup menuitem:hover:active:not([disabled="true"]),
  menupopup menu:hover:active:not([disabled="true"]) {
    background-color: var(--panel-item-active-bgcolor) !important;
    color: inherit !important;
  }

  menupopup menuseparator,
  panel menuseparator {
    margin: var(--uc-contextmenu-separator-vertical) 0 !important;
    padding: 0 !important;
    background: none !important;
    border-top: 1px solid var(--panel-separator-color) !important;

    &::before {
      content: unset !important;
    }
  }

  #PlacesToolbar menupopup[placespopup="true"] menuseparator::before {
    display: none !important;
  }

  menupopup menu,
  menupopup menuitem,
  menupopup menucaption,
  panel[type="autocomplete-richlistbox"] richlistitem {
    padding: var(--uc-contextmenu-menuitem-padding-block)
      var(--uc-contextmenu-menuitem-padding-inline) !important;
    margin: var(--uc-contextmenu-menuitem-margin) !important;
    border-radius: var(--uc-contextmenu-menuitem-border-radius) !important;
    border: var(--uc-contextmenu-menuitem-border-width) solid transparent !important;
    background-clip: padding-box !important;
    min-height: calc(
      16px +
        (
          var(--uc-contextmenu-menuitem-padding-block) +
            var(--uc-contextmenu-menuitem-border-width)
        ) *
        2
    ) !important;
  }

  :not(:not(menubar) > menu, #ContentSelectDropdown)
    > menupopup
    > menuitem:not(
      .menuitem-iconic,
      [type="checkbox"],
      [type="radio"],
      .in-menulist,
      .in-menulist menuitem,
      .unified-nav-current
    ),
  :not(:not(menubar) > menu, #ContentSelectDropdown)
    > menupopup
    > menu:not(
      .menu-iconic,
      [type="checkbox"],
      [type="radio"],
      .in-menulist,
      .in-menulist menu,
      .unified-nav-current
    ),
  :not(:not(menubar) > menu, #ContentSelectDropdown) > menupopup > menucaption {
    padding-inline-start: calc(
      var(--uc-contextmenu-menuitem-padding-inline) + 16px +
        var(--uc-contextmenu-menuicon-margin-inline)
    ) !important;
  }

  .menu-iconic-icon {
    margin-block: 0 !important;
    margin-inline-end: 0 !important;
    margin-inline-start: 0 !important;
  }

  menu > .menu-iconic-text,
  menuitem > .menu-iconic-text,
  /* Used for vertical context navigation tweak. */
  #context-navigation > .menuitem-iconic::after {
    padding-inline-start: var(
      --uc-contextmenu-menuicon-margin-inline
    ) !important;
  }

  .menu-text,
  .menu-iconic-text {
    margin-inline-start: 0 !important;
    padding-block: 0 !important;
  }

  .menu-accel,
  .menu-iconic-accel {
    margin-inline-end: 0 !important;
    padding-block: 0 !important;
    opacity: 0.7 !important;
  }

  .menu-iconic > .menu-iconic-left,
  .menuitem-iconic > .menu-iconic-left {
    padding-inline-end: 0 !important;
    padding-block: 0 !important;
  }

  menuitem:is(
      .menuitem-iconic:not([data-usercontextid]),
      [type="checkbox"],
      [type="radio"],
      [checked],
      [selected]
    )
    .menu-iconic-icon {
    -moz-context-properties: fill !important;
    fill: currentColor !important;
  }

  .menu-right,
  .menu-accel-container {
    appearance: none !important;
    margin-inline-end: 0 !important;
    -moz-context-properties: fill;
    fill: currentColor !important;
  }

  menupopup menuitem:is([type="checkbox"], [type="radio"]) .menu-iconic-icon,
  menulist > menupopup > menuitem .menu-iconic-icon,
  menu .menu-right {
    height: 16px !important;
    width: 16px !important;
  }

  menulist
    > menupopup
    > menuitem:is([checked="true"], [selected="true"])::before,
  menupopup > menuitem::before,
  menupopup > menu::before,
  menupopup > menuitem::after {
    display: none !important;
  }

  menuitem:is([type="checkbox"], [checked="true"], [type="radio"])
    > .menu-iconic-left
    > .menu-iconic-icon {
    display: flex !important;
  }

  menuitem[checked="true"] > .menu-iconic-left,
  menu > .menu-iconic-left,
  menuitem > .menu-iconic-left {
    margin: 0 !important;
    padding: 0 !important;
  }

  #context-navigation:not([hidden]) {
    padding: 0 !important;
    --menuitem-min-width: calc(
      16px + var(--uc-contextmenu-menuitem-padding-inline) * 2
    ) !important;
    min-width: calc(4 * var(--menuitem-min-width));
  }

  #context-navigation
    > .menuitem-iconic
    > .menu-iconic-left
    > .menu-iconic-icon {
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
  }

  #context-navigation {
    margin-inline: var(--uc-contextmenu-menuitem-margin-inline) !important;
  }

  #context-navigation > .menuitem-iconic {
    justify-content: center !important;
  }

  #context-navigation > .menuitem-iconic {
    margin: 0 !important;
  }

  #context-navigation > .menuitem-iconic {
    flex-grow: 1 !important;
    width: unset !important;
  }

  #context-navigation
    > .menuitem-iconic[_moz-menuactive="true"]
    > .menu-iconic-left
    > .menu-iconic-icon {
    background-color: transparent !important;
  }

  #context-bookmarkpage[starred] .menu-iconic-icon {
    fill: var(
      --lwt-toolbarbutton-icon-fill-attention,
      var(--toolbarbutton-icon-fill-attention, currentColor)
    ) !important;
  }

  @include Option("userChromeJS.Sidra.MenuPopup.SubMenuPopup.Compact") {
    menupopup
      menupopup
      > :is(menu, menuitem):not(
        .menu-iconic,
        .menuitem-iconic,
        [type="checkbox"],
        [type="radio"],
        [data-l10n-id="places-empty-bookmarks-folder"] /* 书签菜单 （空） */
      ) {
      padding-inline-start: calc(
        var(--uc-contextmenu-menuitem-padding-inline) + 16px +
          var(--uc-contextmenu-menuicon-margin-inline)
      ) !important;
      background-image: var(--menu-image);
      background-position: var(--uc-contextmenu-menuitem-padding-inline) center;
      background-size: 16px;
      background-repeat: no-repeat;
    }

    // 移除 TamperMonkey 菜单文字图标
    #firefox_tampermonkey_net-menuitem-_root :is(menu, menuitem) {
      > .menu-text {
        transform: translateX(-18px);
        clip-path: inset(0px 0px 0px 18px);
      }
    }
  }

  // 修正所有标签弹出的缩进
  #allTabsMenu-allTabsView-tabs {
    > .all-tabs-item {
      margin: var(--arrowpanel-menuitem-margin) !important;
    }
  }

  #context-navigation:not([hidden]) {
    padding: 0 !important;
    --menuitem-min-width: calc(
      16px + var(--uc-contextmenu-menuitem-padding-inline) * 2
    ) !important;
    min-width: calc(4 * var(--menuitem-min-width));
  }

  #context-navigation
    > .menuitem-iconic
    > .menu-iconic-left
    > .menu-iconic-icon {
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
  }

  #context-navigation {
    margin-inline: var(--uc-contextmenu-menuitem-margin-inline) !important;
  }

  #context-navigation > .menuitem-iconic {
    justify-content: center !important;
  }

  #context-navigation > .menuitem-iconic {
    margin: 0 !important;
  }

  #context-navigation > .menuitem-iconic {
    flex-grow: 1 !important;
    width: unset !important;
  }

  #context-navigation
    > .menuitem-iconic[_moz-menuactive="true"]
    > .menu-iconic-left
    > .menu-iconic-icon {
    background-color: transparent !important;
  }

  #context-bookmarkpage[starred] .menu-iconic-icon {
    fill: var(
      --lwt-toolbarbutton-icon-fill-attention,
      var(--toolbarbutton-icon-fill-attention, currentColor)
    ) !important;
  }

  @include NotOption("userChromeJS.Sidra.Menupopup.Use.Smaller.Text") {
    @include OS($win) {
      .menu-text,
      .menu-iconic-text,
      panel .toolbarbutton-text,
      panel[type="autocomplete-richlistbox"] .ac-title,
      /* Used for vertical context navigation tweak. */
      #context-navigation > .menuitem-iconic::after {
        margin-inline-start: 0 !important;
        margin-block: -3px -1px !important;
        padding-block: 0 !important;
      }

      .menu-text,
      .menu-iconic-text,
      panel .toolbarbutton-text,
      #appMenu-fxa-status2,
      .panel-header,
      panel[type="autocomplete-richlistbox"],
      /* Used for vertical context navigation tweak. */
      #context-navigation > .menuitem-iconic::after {
        font-size: 13.6px !important;
      }
    }
  }

  /* ::::: Dialog theme ::::: */

  /* Dialog shadow and outline adjustments. */
  .dialogBox:not(.spotlightBox) {
    border-radius: 8px !important;
    outline: 0.5px solid var(--panel-separator-color) !important;
    box-shadow:
      0 20px 38px rgb(0 0 0 / 0.23),
      0 5px 9px rgb(0 0 0 / 0.22) !important;
  }

  dialog {
    /* Dialog title. */
    & #titleContainer {
      /* Add larger gap between icon and title text. */
      & .titleIcon {
        padding-inline-end: 8px !important;
      }

      /* Match font style in Edge. */
      & #titleText {
        font-size: 1.18em !important;
        font-weight: 700 !important;
      }

      /* Adjust vertical alignment of title text. */
      @media (-moz-platform: macOS) {
        &:not([noicon]) > #titleCropper {
          translate: 0 calc(-1px - max(0.55 * var(--icon-size) - 0.6em, 0px)) !important;
        }
      }
    }

    /* Input focus style. */
    &
      input:where(
        [type="email"],
        [type="tel"],
        [type="text"],
        [type="password"],
        [type="url"],
        [type="number"]
      ):focus {
      outline: 2px solid var(--in-content-box-border-color) !important;
      outline-offset: -2px !important;
    }
  }

  /** 菜单右侧二级菜单指示小箭头 */
  #protections-popup-mainView .subviewbutton-nav:not(.notFound)::after,
  #identity-popup-mainView .subviewbutton-nav::after,
  .widget-overflow-list .subviewbutton-nav::after,
  .PanelUI-subView .subviewbutton-nav::after,
  .menu-right {
    content: url("./images/icons/arrow-filled-right.svg") !important;
    opacity: 0.6 !important;
    scale: 0.75 !important;
  }

  #contentAreaContextMenu
    > #context-media-eme-separator
    ~ [image*="moz-extension"]:is(menu, menuitem) {
    max-width: 320px !important;
  }

  @include Option("userChromeJS.Sidra.ContextMenu.Navigation.Disabled") {
    #context-navigation,
    #context-sep-navigation {
      display: none;
    }
  }

  /* FF123+ tab preview pop-up.
 * CSS reference: https://searchfox.org/mozilla-central/source/browser/components/tabpreview/tabpreview.css
 * Requires `browser.tabs.cardPreview.enabled` set to `true` */
  .tab-preview-container {
    background-color: var(--arrowpanel-background) !important;
    color: var(--arrowpanel-color) !important;
    border: 0.5px solid var(--panel-separator-color) !important;
    border-radius: 8.5px !important;

    /* Place thumbnail at the top of the tooltip. */
    display: flex !important;
    flex-direction: column-reverse !important;

    & .tab-preview-uri {
      color: var(--panel-description-color) !important;
    }
  }
}
