fenix-fox/chrome/combined_favicon_and_tab_close_button.css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/combined_favicon_and_tab_close_button.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show tab close button when cursor is over the tab icon */

.tab-close-button{
  -moz-box-ordinal-group: 0;
  display: -moz-box !important;
  position: relative;
  width: calc(16px + var(--inline-tab-padding)) !important;
  margin-inline: 0 calc(-16px - var(--inline-tab-padding) / 2) !important;
  padding-inline: 0px !important;
  z-index: -1;
  visibility: hidden;
}
.tabbrowser-tab[pinned] .tab-close-button{ display: none !important; }
.tab-close-button:hover{ background-color: var(--lwt-selected-tab-background-color) !important; }

.tabbrowser-tab[selected] .tab-close-button:hover{ background-color: var(--lwt-selected-tab-background-color, var(--toolbar-bgcolor)); }

/**** ONLY USE ONE OF THE FOLLOWING ****/
/**** These select the behavior of a scenario where the page has no favicon ****/

/*** Option 1 - no favicon - no close-button ***/

/*
.tab-icon-stack:hover ~ .tab-close-button, .tab-close-button:hover{ visibility: visible; z-index: 1 }
*/

/*** Option 2 - No icon - always show close-button ***/

/*
.tab-icon-stack:hover ~ .tab-close-button,
.tab-close-button:hover,
.tabbrowser-tab:not([image]) .tab-close-button{ visibility: visible; z-index: 1 }
.tabbrowser-tab:not([image]) .tab-close-button{ margin-right:0px !important; }
*/

/*** Option 3 - No icon - show close-button when cursor is over the tab text ***/

.tab-icon-stack:hover ~ .tab-close-button,
.tab-close-button:hover,
.tabbrowser-tab:not([image]) .tab-label-container:hover ~ .tab-close-button{ visibility: visible; z-index: 1;  }
.tabbrowser-tab:not([image]) .tab-label-container:hover ~ .tab-close-button,
.tabbrowser-tab:not([image]) .tab-close-button:hover { margin-inline-end: 0 !important; }