// no src icon
.tab-icon-image {

  &:not([src]),
  &:-moz-broken {
    content: get-var("no-src-icon") !important;
    // fill: get-var("grey-600") !important;
    fill: get-var("icon-color-secondary") !important;
  }
}

.bookmark-item {
  list-style-image: get-var("no-src-icon") !important;
  // fill: get-var("grey-600") !important;
}

.unified-nav-forward,
.unified-nav-back {
  &:not([_moz-menuactive])[uri*="about:"] {
    list-style-image: get-var("no-src-icon") !important;
    // fill: get-var("grey-600") !important;
    fill: get-var("icon-color-secondary") !important;
  }
}

// set no src icon for url result list
#urlbar-results {
  .urlbarView-favicon[src="chrome://global/skin/icons/defaultFavicon.svg"] {
    fill: transparent !important;
    background: get-var("no-src-icon") !important;
  }
}

// set no src icon for "List all tabs"
.all-tabs-button:not([src]) {
  list-style-image: get-var("no-src-icon") !important;
  // fill: get-var("grey-600") !important;
  fill: get-var("icon-color-secondary") !important;
}

// tabbar icons
.tab-close-button,
.close-icon {
  list-style-image: get-var("close-tab-icon") !important;
}

#tabs-newtab-button,
#new-tab-button {
  list-style-image: get-var("plus-icon") !important;
}

// arrow back
.toolbarbutton-1:is(#back-button, #forward-button),
.subviewbutton-back,
.identity-popup-expander {
  list-style-image: get-var("arrow-back-icon") !important;
}

// forward icon
.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
.unidied-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
  list-style-image: get-var("arrow-forward-icon") !important;
}

// back icon
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
.unidied-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
  list-style-image: get-var("arrow-back-icon") !important;
}

.toolbarbutton-1#forward-button .toolbarbutton-icon,
#context-forward .menu-iconic-icon {
  transform: scaleX(-1) !important;
}

// refresh icon
#reload-button {
  list-style-image: get-var("refresh-icon") !important;
  -moz-box-align: center !important; // fix refresh icon cropping
  align-items: center !important;
}

// stop icon
#stop-button {
  list-style-image: get-var("close-icon") !important;
}

// nav bar icon size
#nav-bar {

  #reload-button .toolbarbutton-icon,
  #stop-button .toolbarbutton-icon {
    padding: 4px !important;
  }
}

// home icon
#home-button {
  list-style-image: get-var("home-icon") !important;
}

// nav bar icon size
#nav-bar #home-button .toolbarbutton-icon {
  padding: 4px !important;
}

// when not chrome-refresh or when old-icons enabled
@include moz-pref-media("not userChrome.ui-chrome-refresh") {
  @include moz-pref-media("userChrome.ui-force-old-icons") {
    #nav-bar #home-button .toolbarbutton-icon {
      padding: 6px !important;
    }
  }
}

// lock (secure)
#identity-box[pageproxystate="valid"] {
  &:is(.verifiedDomain, .mixedActiveBlocked) #identity-icon {
    list-style-image: get-var("lock-icon") !important;
  }

  &:is(.notSecure,
    .mixedActiveContent,
    .httpsOnlyErrorPage,
    .weakCipher,
    .mixedDisplayContent,
    .mixedDisplayContentLoadedActiveBlocked,
    .certUserOverridden,
    &.certErrorPage) #identity-icon {
    list-style-image: get-var("warning-icon") !important;
  }
}

#identity-popup {
  &[connection^="secure"] .identity-popup-security-connection .identity-popup-security-connection-icon {
    list-style-image: get-var("lock-icon") !important;
  }

  &:is([connection="secure-cert-user-overridden"],
    [connection="cert-error-page"],
    [connection^="not-secure"]) .identity-popup-security-connection .identity-popup-security-connection-icon {
    list-style-image: get-var("warning-icon") !important;
    // fill: get-var("error-text-color) !important;
  }
}

// properties permitions icon
#permissions-granted-icon {
  list-style-image: get-var("properties-icon") !important;
}

// star & tracking protection icons
#tracking-protection-icon {
  list-style-image: get-var("tracking-protection-icon") !important;
}

#star-button,
#pageAction-panel-bookmark,
#urlbar-engine-one-off-item-bookmarks {
  list-style-image: get-var("star-icon") !important;
  fill-opacity: 0 !important;
}

#urlbar-engine-one-off-item-bookmarks {
  fill-opacity: 1 !important;
}

#star-button[starred],
#tracking-protection-icon-box[active] {
  fill: var(--color-accent-primary) !important;
}

@include moz-pref-media("not userChrome.theme-default") {

  #star-button[starred],
  #tracking-protection-icon-box[active] {
    fill: get-var("accent-color") !important;
  }
}

#tracking-protection-icon-box {
  // increase icon size as 20px but keep button size
  transform: scale(1.25) !important;
  border-radius: 50% !important;
}

#star-button,
#context-bookmarkpage {
  &[starred] {
    fill-opacity: 1 !important;
  }
}

// chevron icon
#PlacesChevron,
#nav-bar-overflow-button {
  list-style-image: get-var("chevron-icon") !important;
}

// extension icon
#unified-extensions-button,
#identity-box[pageproxystate="valid"].extensionPage #identity-icon,
#identity-popup[connection="extension"] .identity-popup-security-connection {
  list-style-image: get-var("extension-icon") !important;
}

// when not old-icons and chrome-refresh enabled
@include moz-pref-media("userChrome.ui-chrome-refresh") {
  @include moz-pref-media("not userChrome.ui-force-old-icons") {
    #unified-extensions-button>image {
      transform: scale(1.25) !important;
    }
  }
}

// when not chrome-refresh and old-icons enabled
@include moz-pref-media("not userChrome.ui-chrome-refresh") {
  @include moz-pref-media("userChrome.ui-force-old-icons") {
    #unified-extensions-button>image {
      padding: 4.5px !important;
    }
  }
}

.tabbrowser-tab[image="chrome://mozapps/skin/extensions/extension.svg"] .tab-icon-image {
  content: get-var("extension-old-icon") !important;
}

.install-icon {
  list-style-image: get-var("extension-icon") !important;
}

.install-icon.blocked-permission-icon {
  list-style-image: get-var("extension-blocked-icon") !important;
}

// menu icon
#pageActionButton,
#PanelUI-menu-button {
  list-style-image: get-var("menu-icon") !important;
}

#PanelUI-menu-button[badge-status|="update"],
.panel-banner-item[notificationid^="update"] {
  list-style-image: get-var("menu-update-icon") !important;
}

.panel-banner-item[notificationid^="update"] {
  -moz-context-properties: fill, fill-opacity !important;
  fill: currentColor !important;
}

// custom bookmarks folder icon
.bookmark-item[container],
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, open) {
  list-style-image: get-var("folder-icon") !important;
}

.downloadIconShow .button-icon,
.folder-icon {
  list-style-image: get-var("folder-icon") !important;
}

// checked icon
@media (-moz-platform: windows) {
  menuitem[checked="true"]>.menu-iconic-left {
    list-style-image: get-var("check-icon") !important;
  }
}

// edit bookmark menu checkbox icon
.checkbox-check[checked] {
  background-image: get-var("check-icon") !important;
}

// sound icons for tab and all tabs view
:is(.all-tabs-secondary-button, .tab-icon-overlay)[soundplaying],
.tab-icon-sound {
  -moz-context-properties: fill, fill-opacity !important;
  list-style-image: get-var("audio-icon") !important;
  fill: get-var("tab-icon-color") !important;
}

.all-tabs-secondary-button,
.tab-icon-overlay,
.tab-icon-sound {
  &[muted] {
    -moz-context-properties: fill, fill-opacity !important;
    list-style-image: get-var("audio-muted-icon") !important;
    fill: get-var("tab-icon-color") !important;
  }
}

.all-tabs-secondary-button,
.tab-icon-overlay,
.tab-icon-sound {
  &[activemedia-blocked] {
    -moz-context-properties: fill, fill-opacity !important;
    list-style-image: get-var("audio-muted-icon") !important;
    fill: get-var("tab-icon-color") !important;
    fill-opacity: 1 !important;
  }
}

// url bar suggestions star icon badge
.urlbarView-row[type="bookmark"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-type-icon {
  background-image: get-var("star-icon") !important;
  fill: var(--color-accent-primary) !important;
}

@include moz-pref-media("not userChrome.theme-default") {

  // url bar suggestions star icon badge
  .urlbarView-row[type="bookmark"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-type-icon {
    fill: get-var("accent-color") !important;
  }
}

// download icon
// #downloads-button {
//   display: flex !important;
// }
#downloads-button,
#downloads-indicator-anchor {
  list-style-image: get-var("download-icon") !important;
}

// info icon
#identity-box.unknownIdentity #identity-icon,
#identity-popup[connection="net-error-page"] .identity-popup-security-connection,
.panel-info-button>image {
  list-style-image: get-var("info-icon") !important;
}

// wrench icon for firefox dev
#developer-button {
  list-style-image: get-var("dev-icon") !important;

  &>image {
    padding: 4px !important;
  }
}

// side panel icon
#sidebar-button {
  list-style-image: get-var("side-panel-icon") !important;

  &>image {
    padding: 4px !important;
  }
}

[dir="rtl"] {
  #sidebar-button {
    transform: scale(-1);
  }
}

// menu popup arrow right icon
#protections-popup-mainView .subviewbutton-nav:not(.notFound)::after,
.widget-overflow-list .subviewbutton-nav::after,
.PanelUI-subView .subviewbutton-nav::after {
  content: get-var("arrow-right-icon") !important;
  // fill: get-var("icon-color-secondary") !important;
}

[dir="rtl"] {

  #protections-popup-mainView .subviewbutton-nav:not(.notFound)::after,
  .widget-overflow-list .subviewbutton-nav::after,
  .PanelUI-subView .subviewbutton-nav::after {
    transform: scaleX(-1);
  }

  .menu-right {
    transform: scaleX(-1);
  }
}

// context menu drop down arrow right icon
.menu-right {
  list-style-image: get-var("arrow-right-icon") !important;
  fill: get-var("icon-color-secondary") !important;
}

@media (-moz-platform: windows) {
  .menu-right {
    margin-inline-end: 0px !important;
  }
}

// nav bar account avatar icon
#fxa-avatar-image {
  // icon should be 20px, but we don't want to affect button size
  transform: scale(1.25) !important;
  border-radius: 50% !important;
}

:root:not([fxastatus="signedin"]) #fxa-avatar-image {
  list-style-image: get-var("account-icon") !important;
}

:root[fxastatus="signedin"]:not([style*="--avatar-image-url"]) #fxa-avatar-image {
  list-style-image: get-var("account-icon") !important;
}

// Firefox view icon
#firefox-view-button {
  list-style-image: url("chrome://branding/content/icon32.png") !important;
}

@include moz-pref-media("userChrome.ui-chrome-refresh") {
  #alltabs-button {
    list-style-image: get-var("keyboard-arrow-down-icon") !important;
  }
}

@media (-moz-platform: macos) {
  #alltabs-button {
    list-style-image: get-var("keyboard-arrow-down-icon") !important;
  }
}

#fullscreen-button,
#appMenu-fullscreen-button2 {
  list-style-image: get-var("open-in-full-icon") !important;
}

#email-link-button {
  list-style-image: get-var("mail-icon") !important;
}

#screenshot-button {
  list-style-image: get-var("screenshot-icon") !important;
}

// Repair text encoding
#characterencoding-button {
  list-style-image: get-var("glyphs-icon") !important;
}

#open-file-button {
  list-style-image: get-var("file-open-icon") !important;
}