@media not (-moz-bool-pref: "mod.extension.viewgrid") {
  /* Hide header, description, extension captions */
  #unified-extensions-view box.panel-header,
  #unified-extensions-view > :nth-child(2),
  #unified-extensions-description,
  #unified-extensions-messages-container,
  .unified-extensions-item-message-deck {
    display: none !important;
  }
  /* Reduce the panel size and padding */
  #unified-extensions-view {
    width: var(--menu-panel-width) !important;
  }
  panelview .unified-extensions-item-action-button {
    padding-inline: 10px !important;
    padding-block: 0px !important;
  }
  #unified-extensions-manage-extensions {
    margin-inline: 4px !important;
    padding: 8px 10px !important;
    margin-block-end: 4px !important;
  }
  #unified-extensions-panel .unified-extensions-item {
    margin-block: 2px !important;
  }
  #unified-extensions-view .unified-extensions-item-action-button:hover {
    background-color: color-mix(in srgb, currentColor 3%, transparent) !important;
  }
  #unified-extensions-view .unified-extensions-item-menu-button.subviewbutton,
  .unified-extensions-item-row-wrapper {
    padding: 0 !important;
  }
  #unified-extensions-view .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon {
    opacity: 0 !important;
    transition: 0.2s ease !important;
  }
  #unified-extensions-panel .unified-extensions-item:hover {
    .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon {
      opacity: 0.85 !important;
    }
    background-color: transparent !important;
  }
  #unified-extensions-view .unified-extensions-item-action-button .panel-no-padding .webextension-browser-action {
    padding: 0 !important;
  }
  #unified-extensions-view .toolbar-menupopup :is(menu, menuitem), .subview-subheader, panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1 {
    max-height: 3em !important;
  }
  #unified-extensions-view .subviewbutton-iconic {
    & > .toolbarbutton-icon {
      width: 1.2em !important;
      height: 1.2em !important;
      padding: 0.7em !important;
    }
  }
}

@media (-moz-bool-pref: "mod.extension.viewgrid") {
  /* Set width of Unified Extension View */
  #unified-extensions-view {
    width: calc(var(--menu-panel-width) - 75px) !important;
  }

  /* Hide the header as well as texts and settings icon for each extension, so only icons are visible */
  #unified-extensions-description,
  #unified-extensions-view .panel-header,
  #unified-extensions-view > :nth-child(2),
  .unified-extensions-item-name,
  .unified-extensions-item-message,
  .unified-extensions-item-message-hover,
  .unified-extensions-item-message-hover-menu-button,
  .unified-extensions-item-menu-button {
    display: none !important;
  }

  /* Arrange extensions in a properly centered 4-column grid */
  #overflowed-extensions-list, #unified-extensions-area, .unified-extensions-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 columns */
    justify-content: left !important;
    align-items: center !important;
    margin-inline: 7px !important;
    width: 0px !important;
    gap: 7px 0px;
  }

  #unified-extensions-area {
    padding-block: 7px !important;
  }

  /* Ensure the extensions are fully centered with squircle hover shape, and reduce unneeded margins/paddings  */
  .unified-extensions-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-block: 4px !important;
    border-radius: 12px !important;
  }
  .unified-extensions-item-icon, .unified-extensions-item .webextension-browser-action.subviewbutton > .toolbarbutton-badge-stack {
    margin: 0px !important;
  }
  panelview .unified-extensions-item-action-button {
    padding: 5px 10px !important;
  }
  
  /* Set proper padding for the Manage Extensions button */
  #unified-extensions-manage-extensions {
    padding: 8px 16px !important;
    margin-block-end: 4px !important;
  }
  
  /* Set lighter opacity for passive extension buttons */
  .unified-extensions-item-icon {
    opacity: 0.3;
  }
  .unified-extensions-item-action-button:hover {
    background-color: color-mix(in srgb, currentColor 3%, transparent) !important;
  }

  #unified-extensions-view toolbarseparator {
    margin-top: 8px !important;
  }
}

@media (-moz-bool-pref: "mod.extension.hide") {
  :root:not([customizing]){
    #unified-extensions-button {
      opacity: 0 !important;
      transition: opacity 0.2s ease;
    }

    #unified-extensions-button:hover {
      opacity: 1 !important;
    }
  }
}

@media (-moz-bool-pref: "mod.extension.remove") {
  :root:not([customizing]){
    #unified-extensions-button {
      display: none !important;
    }
  }
}