userChrome_sub.css

/* This file is a partial file, contains most of the content of `userChrome.css` without
 * importing extra mods. This file and the extra mods will be instead imported in
 * `userChrome_main.css`. `userChrome_main.css` and `userChrome_sub.css` will be copied to
 * the `chrome` folder instead of `userChrome.css`. There, `userChrome_main.css` will be
 * renamed to `userChrome.css`.
 * The purpose of this is to allow the content of `userChrome.css` to be imported,
 * thus allowing its contents to be overidden with extra mods/files without having
 * to directly change the content of `userChrome.css`. That way we can both customize
 * and also keep `userChrome.css` up to date with upstream. This kind of usage  and the
 * the content of this file will be maintained and kept up-to-date until the original
 * repo restructures its files to be more customizable. */


/*=====================================================================
================= D A R K   T H E M E   C O L O R S ===================
=====================================================================*/

@media (prefers-color-scheme: dark) {
  :root {
    /* Main color for background */
    --firefoxcss-main-bg-color: hsl(240, 2%, 20%);

    /* Secondary color for url bar, active tab etc. */
    --firefoxcss-secondary-bg-color: hsl(240, 2%, 13%);

    /* Tab colors */
    --firefoxcss-tab-bg-color: hsl(240, 2%, 13%);
    --firefoxcss-tab-hover-bg-color: hsl(240, 2%, 32%);
    --firefoxcss-tab-active-bg-color: hsl(240, 2%, 32%);
    --firefoxcss-non-active-tabs: hsla(0, 0%, 100%, 0.65);

    --firefoxcss-select-tabs-box-shadow: 1px 1px 1px -1px rgba(0, 0, 0, 0.4);
    --firefoxcss-tab-multiselect-outline: rgba(255, 255, 255, 0.1);

    /* Tab playing audio speaker icon colors */
    --firefoxcss-tab-speaker-color: hsla(0, 0%, 80%);
    --firefoxcss-tab-speaker-icon-color: hsl(0, 0%, 100%);
    --firefoxcss-tab-speaker-icon-hover-color: hsl(0, 0%, 10%);
    --firefoxcss-tab-speaker-icon-small-background: hsla(0, 0%, 80%);

    /* Context menu colors */
    --firefoxcss-context-menu-top-color: #131313cf;
    /* Bookmarks bar colors */
    --firefoxcss-bookmarks-bg-color: hsl(240, 2%, 13%);

    /* Change background color when loading a page */
    --firefoxcss-bright-flash-color: var(--firefoxcss-secondary-bg-color);

    /* Toolbar buttons */
    --firefoxcss-toolbar-button-box-shadow: rgba(0, 0, 0, 0.3);
    --firefoxcss-toolbar-button-active-box-shadow: rgba(0, 0, 0, 0.3);

    --firefoxcss-new-tab-button-active: hsl(240, 2%, 18%);
    --firefoxcss-new-tab-button-box-shadow-active: rgba(0, 0, 0, 0.6);

    --firefoxcss-new-tab-button-hover: hsla(0, 0%, 30%, 0.85);
    --firefoxcss-new-tab-button-box-shadow-hover: rgba(0, 0, 0, 0.5);

    /* Search Bar and breakout (when in focus) colors */
    --firefoxcss-url-dark-border: color-mix(
      in srgb,
      var(--firefoxcss-secondary-bg-color) 35%,
      black
    );
    --firefoxcss-url-breakout-border-bottom-color: 1px solid
      color-mix(in srgb, var(--firefoxcss-url-dark-border) 25%, transparent);

    --firefoxcss-url-breakout-border-top-color: 1px solid transparent;
    --firefoxcss-url-bar-bg-color: var(--firefoxcss-secondary-bg-color);
    --firefoxcss-url-border-bottom-color: 1px solid hsla(0, 0%, 100%, 0.2);
    --firefoxcss-url-border-top-color: 1px solid hsla(0, 0%, 0%, 0.15);
    --firefoxcss-url-breakout-bar-bg-color: var(--firefoxcss-secondary-bg-color);
    --firefoxcss-url-box-shadow-color: 0px 1px 0 0px hsla(0, 0%, 100%, 0.1),
      inset 1px 1px 2px 1px rgba(0, 0, 0, 0.25) !important;
    --firefoxcss-url-autocomplete-highlight: hsl(240, 2%, 26%);
    --firefoxcss-url-breakout-box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px,
      rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
      rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px,
      0px -1px 0 0px hsla(0, 0%, 20%, 0.1);
    --firefoxcss-url-clipboard-button: color-mix(
      in srgb,
      currentColor 10%,
      transparent
    );

    /* Other colors */
    --toolbar-field-color: hsla(0, 0%, 80%, 0.80) !important; /* Internal Firefox value to set color for the urlbar text */
    --firefoxcss-urlbar-zoom-button: hsla(0, 0%, 60%, 0.35);
    --firefoxcss-top-bar-border-bottom-color: hsla(0, 0%, 6%, 0.2);
    --firefoxcss-private-browsing-menu-color: hsl(276, 100%, 42%);
    --firefoxcss-private-browsing-drop-shadow: drop-shadow(
      0px 0px 1px #000000d5
    );
    --firefoxcss-statuspanel-bg-color: var(--firefoxcss-secondary-bg-color);
    --firefoxcss-contextmenu-hover-text: white;
    --firefoxcss-customize-view-dashed-outline: hsla(0, 0%, 100%, 0.25);
    --firefoxcss-customize-view-flex-space: #d0ba9e;
    --firefoxcss-customize-view-overflow-menu: hsl(240, 2%, 10%);

    /* ============== Firefox Global colors change ==================== */
    /* Hamburger menu button hover color */
    --panel-item-hover-bgcolor: hsla(0, 57%, 40%, 0.25) !important;
    --toolbar-bgcolor: var(--firefoxcss-main-bg-color) !important;
    --arrowpanel-background: var(--firefoxcss-secondary-bg-color) !important;
    --toolbarbutton-hover-background: hsla(0, 0%, 60%, 0.35)!important;
    --toolbarbutton-active-background: hsla(0, 0%, 80%, 0.35) !important;
    --button-hover-bgcolor: hsla(0, 0%, 60%, 0.35) !important;
    --button-active-bgcolor: hsla(0, 0%, 45%, 0.35) !important;
    --button-bgcolor: hsla(0, 0%, 45%, 0.9) !important;
    --arrowpanel-border-color: hsla(0, 0%, 50%, 0.25) !important;
    --dark-menu-background-color: #222121 !important;
    --dark-menu-border-color: rgb(55, 55, 55) !important;
    --dark-menuitem-hover-background-color: rgba(
      159,
      159,
      159,
      0.35
    ) !important;
    --panel-separator-color: var(--arrowpanel-border-color) !important;
    --panel-separator-zap-gradient: var(--panel-separator-color) !important;
    --lwt-sidebar-background-color: var(--firefoxcss-secondary-bg-color) !important;
    --urlbarView-highlight-background: hsl(240, 2%, 20%) !important;
    --urlbarView-hover-background: color-mix(
      in srgb,
      currentColor 8%,
      transparent
    ) !important;
    /* Color for add bookmarks menu when adding through tabs */
    --in-content-page-background: var(--arrowpanel-background) !important;
    --firefoxcss-context-menu-item-bg-color: hsla(0, 0%, 60%, 0.3);
    --firefoxcss-context-menu-item-bg-color-inactive: hsla(0, 0%, 60%, 0.15);
  }
}

/*=====================================================================
=================== G L O B A L   V A R I A B L E S ===================
=====================================================================*/

:root {
  --firefoxcss-top-bar-border-bottom-size: 1px;
  --firefoxcss-border-radius: 10px;
  --firefoxcss-control-buttons-margin: 0px;
  --firefoxcss-tab-min-width: 45px;
  --firefoxcss-tab-max-width: 180px;
  --firefoxcss-selected-tab-min-width: 180px;
  --firefoxcss-selected-tab-max-width: 240px;

  --firefoxcss-searchbar-height: 28px;
  --firefoxcss-searchbar-container-height: 40px;
  --urlbar-icon-border-radius: calc(
    var(--firefoxcss-border-radius) - 2px
  ) !important;
  @media not -moz-pref("sidebar.verticalTabs") {
    --tab-block-margin: 12px !important; /* Default: 4px */
    --tab-min-height: 28px !important; /* Default: 36px */
    /* --tab-margin-top: 4px;
    --tab-margin-bottom: 6px; */
    --tabstrip-min-height: 28px !important;
  }

  /* Toolbar Buttons */
  --toolbarbutton-outer-padding: 2px !important; /* Default: 2px */
  --toolbarbutton-inner-padding: 6px !important; /* Default: 8px */

  /* Menu items */
  --arrowpanel-menuitem-padding-block: 4px !important; /* Default: 8px */
  --arrowpanel-menuitem-padding-inline: 4px !important; /* Default: 8px */

  /* Bookmark bar */
  --uc-bm-height: 24px;
  --uc-bm-padding: 6px;
  --uc-bm-margin-bottom: 4px;
  --uc-bm-popout-adjust: 0px;

  /* Fonts: Use custom font family, fallback to a generic monospace font if fail */
  --custom-font: CommitMono Nerd Font, CommitMono Nerd Font Mono, -moz-fixed, monospace;
}

/*=====================================================================
====================== T O O L B A R   O R D E R ======================
=======================================================================
Order of Toolbars
  * 0 - top
  * 1 - second from top
  * 2 - bottom */

/* SEARCH BAR TOOLBAR */
#navigator-toolbox #nav-bar {
  order: 1 !important;
}

/* TABS TOOLBAR */
#TabsToolbar {
  order: 2 !important;
}

/* BOOKMARKS TOOLBAR*/
#PersonalToolbar {
  order: 3 !important;
}

/* Extra titlebar menu (above or below tabs, opens with alt) */
#toolbar-menubar {
  order: 0 !important;
}

/*=====================================================================
========================= S E T   C O L O R S =========================
=====================================================================*/

/* Sidebar background color change */
#browser #sidebar-box {
  --sidebar-background-color: var(--firefoxcss-secondary-bg-color) !important;
}

/* Bookmarks bar background color */
#PersonalToolbar {
/*   background-color: var(--firefoxcss-bookmarks-bg-color) !important; */
/*   backdrop-filter: blur(10px) !important; */
  background-color: var(--firefoxcss-secondary-bg-color) !important;
}

@media not -moz-pref("sidebar.revamp") {
  /* Remove line between website content and top bar */
  #navigator-toolbox {
    border-bottom: var(--firefoxcss-top-bar-border-bottom-size) solid
      var(--firefoxcss-top-bar-border-bottom-color) !important;
  }
}

@media -moz-pref("sidebar.revamp") {
  @media not -moz-pref("sidebar.verticaltabs") {
    #navigator-toolbox {
      border-bottom: none !important;
    }
  }
}

/* Set navigation toolbar to transparent */
#navigator-toolbox #nav-bar {
  background-color: transparent !important;
}

/* Whole Main Toolbar */
#navigator-toolbox {
  background-color: var(--firefoxcss-main-bg-color) !important;
}

/* Fix some custom firefox themes that break */
#navigator-toolbox {
  :root[lwtheme-image] & {
    background-image: var(--lwt-additional-images) !important;
  }
}

/* Fix purple background color when switching tabs in private 
window for this specific moz preference. */
:root {
  &[privatebrowsingmode="temporary"] {
    @media -moz-pref("browser.privatebrowsing.felt-privacy-v1") {
        --tabpanel-background-color: var(--firefoxcss-main-bg-color) !important;
    }
  }
}

/* Avoids bright flash */
#tabbrowser-tabpanels {
  background-color: var(
    --uc-light-bkgnd-color,
    var(--firefoxcss-bright-flash-color)
  ) !important;
}

/* CTRL+F Search Bar color changes  */
.browserContainer > findbar {
  background-image: none !important;
  background-color: var(--firefoxcss-main-bg-color);
}

.browserContainer > findbar .findbar-textbox {
  background-color: var(--firefoxcss-secondary-bg-color);
}

/*=====================================================================
========================= H I D E   E L E M E N T S ===================
=====================================================================*/

/* Remove empty space from tabs bar */
#TabsToolbar .titlebar-spacer[type="pre-tabs"],
#TabsToolbar .titlebar-spacer[type="post-tabs"],
#TabsToolbar .titlebar-spacer,
#nav-bar .titlebar-spacer[type="pre-tabs"],
#nav-bar .titlebar-spacer[type="post-tabs"],
/* Remove Line above search engine selection in search bar */
#urlbar .search-one-offs .search-panel-one-offs-header-label,
/* Remove lefover window buttons from extra menu bar (when pressing alt)*/
#toolbar-menubar .titlebar-buttonbox-container,
/* Private browser icons remove and change main menu to purple */
.private-browsing-indicator-with-label,
.private-browsing-indicator,
/* Hide tracking protection icon from Search Bar */
/* #tracking-protection-icon-container, */
/* Hide permission icons, see it when pressing permission button */
#blocked-permissions-container {
  display: none !important;
}

/* Remove line between website content and top bar */
#navigator-toolbox {
  /*   border-bottom: var(--firefoxcss-top-bar-border-bottom-size) solid
    var(--firefoxcss-top-bar-border-bottom-color) !important; */
}

/*=====================================================================
======================= H E I G H T   F I X E S =======================
=====================================================================*/

/* Menu Bar height */
#toolbar-menubar {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  line-height: 22px !important;
  max-height: 22px !important;
}

/*=====================================================================
=============================== I C O N S =============================
=====================================================================*/

/* #stop-reload-button .toolbarbutton-animatable-image{
  animation-duration: 0s !important; #b263e3; #a230e8
} */

/* Set icon colors with context-fill without forcing them in svg files
about:config -> svg.context-properties.content.enabled -> true*/
@media (prefers-color-scheme: dark) {
  #PanelUI-menu-button {
    list-style-image: url(ASSETS/icons/night_owl.svg) !important;
    fill: white !important;
    opacity: 1 !important;
  }

  #find-button {
    list-style-image: url(ASSETS/icons/search.svg) !important;
  }

  #privatebrowsing-button {
    list-style-image: url(ASSETS/icons/private.svg) !important;
  }

  #forward-button,
  menugroup > #context-forward,
  #search-container #searchbar .search-go-button,
  #urlbar-go-button {
    list-style-image: url(ASSETS/icons/right-arrowContext.svg) !important;
  }

  #back-button,
  menugroup > #context-back {
    list-style-image: url(ASSETS/icons/left-arrowContext.svg) !important;
  }
}

/*=====================================================================
------------------- S E A R C H   B A R -------------------------------
=====================================================================*/
/* Default Searchbox font size */
#urlbar,
#searchbar {
  font-size: 1.1rem !important;
}

/* Styling Search Containers 
    .urlbar-background - main search container
    #searchbar - secondary/extra search container */
.urlbar-background,
#searchbar {
  border: 0 !important;
  border-radius: var(--firefoxcss-border-radius) !important;
  background-color: var(--firefoxcss-url-bar-bg-color) !important;
  box-shadow: var(--firefoxcss-url-box-shadow-color) !important;

  /*   border-bottom: var(--mod-url-border-bottom-color) !important;  */
  /*   border-top: var(--mod-url-border-top-color) !important;  */
  /*   box-shadow: var(--mod-url-box-shadow-color) !important; */
  /*   inset 0px 0px 0px 1px rgba(0, 0, 0, 0.05); */
  /*   color-mix(in oklab,var(--gray-a6),var(--gray-6) 30%) */
  /*   box-shadow: inset var(--shadow-4); */
  /*   --shadow-4: 0 0 0 1px color-mix(in oklab,black,white 30%),0 8px 40px var(--black-a3),0 12px 32px -16px var(--black-a5); */
}

/* Search box border radius  */
.urlbar-background,
#urlbar .urlbar-input-container,
#searchbar {
  border-radius: var(--firefoxcss-border-radius) !important;
}

/* Center search box text  */
#urlbar .urlbar-input-box {
  text-align: center;
}

/* Search outline disabled by default  */
@media not -moz-pref("mod.searchBox.focus.outline.enable") {
  /* Disable Focus outline */
  #urlbar[focused]:not([suppress-focus-border]) > .urlbar-background,
  #searchbar:focus-within {
    outline: none !important;
  }
}

/* When searchbar focused text opacity changed */
#urlbar[focused] .urlbar-input::placeholder {
  opacity: 0.4 !important;
}

/* Placeholder text - add shadow and spacing  */
#urlbar .urlbar-input::placeholder,
#urlbar .searchbar-textbox::placeholder {
  opacity: 0.8 !important;
}

/* Remove border line between searche results and input  */
/* Remove line over search engines in popout search  */
#urlbar .urlbarView-body-inner,
#urlbar .urlbarView:not([noresults]) > .search-one-offs:not([hidden]) {
  border-top: none !important;
}

/* Dropdown search box colors */
#urlbar[breakout][breakout-extend][open] .urlbar-background {
  border-bottom: var(--firefoxcss-url-breakout-border-bottom-color) !important;
  border-top: var(--firefoxcss-url-breakout-border-top-color) !important;
  box-shadow: var(--firefoxcss-url-breakout-box-shadow) !important;
}

/* Secondary search box drowndow colors */
#PopupSearchAutoComplete {
  --panel-background: var(--firefoxcss-url-breakout-bar-bg-color) !important;
}

/* Disable weird animation */
#urlbar[breakout][breakout-extend][breakout-extend-animate]
  > .urlbar-background {
  animation: none !important;
}

/* HEIGHT FIXES */
:root {
  --urlbar-min-height: var(--firefoxcss-searchbar-height) !important;
}

#urlbar[breakout] {
  --urlbar-height: var(--firefoxcss-searchbar-height) !important;
}

#urlbar-container {
  --urlbar-container-height: var(
    --firefoxcss-searchbar-container-height
  ) !important;
}

/* #search-container {
  padding-block: 0px !important;
}

#urlbar .urlbar-input-container {
  padding: 0 !important;
} */

#urlbar[breakout][breakout-extend] {
  & > .urlbar-input-container {
    height: var(--urlbar-height) !important;
    padding-block: 1px !important;
    padding-inline: 1px !important;
    transition: none !important;
  }
}

#urlbar[breakout][breakout-extend] {
  width: var(--urlbar-width) !important;
  margin-inline-start: 0px !important;
  margin-block-start: calc(
    (var(--urlbar-container-height) - var(--urlbar-height)) / 2
  ) !important;
}

/*=====================================================================
============================= T A B S =================================
=====================================================================*/

/* Non active tabs have darker text */
.tabbrowser-tab:not([selected]):not([multiselected]):not(:hover)
  .tab-label-container
  .tab-label {
  color: var(--firefoxcss-non-active-tabs) !important;
}

/* Remove empty space after pinned tabs */
#pinned-tabs-container[orient="horizontal"] {
  margin-inline-end: 0px !important;
}

.tabbrowser-tab .tab-label-container .tab-label {
  transition: color 100ms ease !important;
}

/* Main BAR */
#navigator-toolbox {
  --tabs-border-color: none !important;
  --tabs-navbar-shadow-size: 0px !important;
}

#tabbrowser-tabs {
  --tab-loading-fill: transparent !important;
}

.tabbrowser-tab:not([selected]):not([multiselected]):not(:hover)
  .tab-icon-image {
  opacity: 0.8 !important;
  transition: opacity 100ms ease !important;
}

/* Normal tabs design */
.tabbrowser-tab .tab-background:not([selected]) {
  border: 0 !important;
  border-radius: var(--firefoxcss-border-radius) !important;
  background-image: none !important;
  background-color: var(--firefoxcss-tab-bg-color) !important;
  transition: background-color 100ms ease !important;
  box-shadow: none !important;
}

/* Normal tabs design on hover */
#tabbrowser-tabs
  .tabbrowser-tab:hover
  > .tab-stack
  > .tab-background:not([selected]) {
  border: 0 !important;
  border-radius: var(--firefoxcss-border-radius) !important;
  background-image: none !important;
  background-color: var(--firefoxcss-tab-hover-bg-color) !important;
  box-shadow: var(--firefoxcss-select-tabs-box-shadow) !important;
}

/* Selected tabs design */
#tabbrowser-tabs .tabbrowser-tab .tab-background[selected] {
  border: 0 !important;
  border-radius: var(--firefoxcss-border-radius) !important;
  background-image: none !important;
  background-color: var(--firefoxcss-tab-active-bg-color) !important;
  box-shadow: var(--firefoxcss-select-tabs-box-shadow) !important;
  outline: none !important;
}

/* Multiselect tabs */
#tabbrowser-tabs .tabbrowser-tab .tab-background[multiselected] {
  border: 0 !important;
  border-radius: var(--firefoxcss-border-radius) !important;
  background-image: none !important;
  outline: none !important;
  background-color: var(--firefoxcss-tab-active-bg-color) !important;
  box-shadow: none !important;
}

#tabbrowser-tabs
  .tabbrowser-tab
  .tab-background:is([selected]):is([multiselected]) {
  outline: 1px solid var(--firefoxcss-tab-multiselect-outline) !important;
  outline-offset: 0px !important;
  outline-width: 1px !important;
}

/* Remove close button on tabs */
#navigator-toolbox .tab-close-button.close-icon {
    display: none !important;
}

#tabbrowser-tabs[movingtab]
  > #tabbrowser-arrowscrollbox
  > .tabbrowser-tab:is([selected], [multiselected])
  .tab-background {
  background-color: color-mix(
    in srgb,
    var(--firefoxcss-tab-active-bg-color) 50%,
    transparent
  ) !important;
  backdrop-filter: blur(12px);
}

/* .tab-icon-overlay {
  &:not([indicator-replaces-favicon]) {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
      top: unset !important;
      inset-inline-end: unset !important;
      transform: translate(50%,-50%);
    }
  }
} */

@media not -moz-pref("sidebar.verticalTabs") {
  /* Speaker on tabs color fixes */
  .tabbrowser-tab:not([pinned]) .tab-icon-overlay:not([crashed]) {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
      fill: var(--firefoxcss-tab-speaker-icon-color) !important;
      background-color: transparent !important;
      border: none !important;
      transform: scale(1.4);
      transition: transform 200ms ease-in-out, fill 100ms ease-in-out,
        background-color 100ms ease-in-out !important;
      filter: drop-shadow(-1px 1px 1px light-dark(#0000002e, #00000052));
      &:hover {
        background-color: var(--firefoxcss-tab-speaker-color) !important;
        fill: var(--firefoxcss-tab-speaker-icon-hover-color) !important;
        /*       border: 1px solid #ffffff29 !important; */
        border: none !important;
        transform: scale(1.4);
        transition: transform 200ms ease-in-out, fill 100ms ease-in-out,
          background-color 100ms ease-in-out, filter 100ms ease-in-out !important;
        /*        transform: scale(1.2); */
        /*     background-color: #ffffff26 !important; */
        /*     backdrop-filter: blur(4px) !important; */

        /*      background-color: transparent !important; */
        /*       filter: drop-shadow(0px 0px 1px #0000009e); */
      }
      &:hover:active {
        color: var(--firefoxcss-tab-speaker-icon-hover-color) !important;
        --button-text-color-ghost-active: var(
          --firefoxcss-tab-speaker-icon-hover-color
        ) !important;
      }
    }
  }

  /* .tab-icon-overlay {
  &:not([indicator-replaces-favicon]) {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
      top: unset !important;
      inset-inline-end: unset !important;
      transform: translate(50%,-50%);
    }
  }
} */

  .tabbrowser-tab[pinned] .tab-icon-overlay:not([crashed]) {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
      background-image: none !important;
      background-color: var(--firefoxcss-tab-speaker-color) !important;
      /*     background-color: #ffffff26 !important;  */
      background-color: #00000000 !important;
      /* backdrop-filter: blur(6px); */
      /*      fill:  var(--firefoxcss-tab-speaker-icon-hover-color) !important; */
      fill: var(--firefoxcss-tab-speaker-icon-color) !important;
      border: none !important;
      transform: scale(1.3) !important;
      transition: transform 100ms ease-in-out, fill 100ms ease-in-out,
        background-color 100ms ease-in-out;

      &:hover {
        background-color: var(--firefoxcss-tab-speaker-color) !important;
        fill: var(--firefoxcss-tab-speaker-icon-hover-color) !important;
        border: 1px solid #ffffff29 !important;
        transition: transform 100ms ease-in-out, fill 100ms ease-in-out,
          background-color 100ms ease-in-out !important;
        /*     transform: scale(1.4) translate(-0.35rem, 0.48rem); */
        transform: scale(1.4) translate(-8%, 14%);
        transform-origin: center !important;
      }
    }
  }

  /* Pinned tabs padding  */
  :root:not([uidensity="compact"]) .tab-content[pinned] {
    padding: 0 8px !important;
  }

  #TabsToolbar
    #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])
    > #tabbrowser-arrowscrollbox
    > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-inline-start: 0px !important;
  }

  #tabbrowser-tabs {
    margin-left: 2px !important;
    margin-right: 2px !important;
  }

  #alltabs-button {
    margin-right: 2px !important;
  }

  /* Width of the tabs. Important to have Fadein or it breaks fonctionality */
  /* not([style^="max-width"] :not([overflow])*/
  #tabbrowser-tabs .tabbrowser-tab[fadein]:not([pinned]) {
    min-width: var(--firefoxcss-tab-min-width) !important;
    max-width: var(--firefoxcss-tab-max-width) !important;
  }

  /* Selected tabs width increase */
  #tabbrowser-tabs:not([overflow]) .tabbrowser-tab[selected][fadein]:not([pinned]) {
    min-width: var(--firefoxcss-selected-tab-min-width) !important;
    max-width: var(--firefoxcss-selected-tab-max-width) !important;
  }

  /* Selected tabs width when overflowing */
  #tabbrowser-tabs[overflow] .tabbrowser-tab[selected][fadein]:not([pinned]) {
    min-width: var(--firefoxcss-selected-tab-min-width) !important;
  }

  /*
 * Fix the height of the tab because if you
 * change --tab-min-height it doesnt work for fullcreen
 */
  #TabsToolbar {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  /* Remove the line between the tabs / seperators */
  #tabbrowser-tabs .tabbrowser-tab::before,
  #tabbrowser-tabs .tabbrowser-tab::after {
    border: 0 !important;
  }

  /* #TabsToolbar #tabbrowser-tabs .tabbrowser-tab .tab-background {
    margin-top: var(--tab-margin-top) !important;
    margin-bottom: var(--tab-margin-bottom) !important;
  } */

  /* Remove right and left side tab overflow border line */
  #scrollbutton-up ~ spacer {
    border-color: transparent !important;
  }
}

/* Make tab group works correctly */
tab-group[collapsed] > .tabbrowser-tab {
  visibility: collapse !important;
}

/*=====================================================================
============ W I N D O W   C O N T R O L   B U T T O N S ==============
=====================================================================*/
/* Keep showing the buttons when alt menu visible */
.titlebar-buttonbox-container {
  #toolbar-menubar[autohide="true"]:not([inactive]) + #TabsToolbar > & {
    visibility: visible !important;
  }
}

/* :root[sizemode="fullscreen"] #navigator-toolbox { position: relative; } */

/* Hide window control buttons */
.titlebar-buttonbox-container {
  display: none !important;
}

/* Add spacing for left most button */
#nav-bar {
  padding-left: 2px !important;
}

/* Pad the Main Menu (hamburger) button */
#nav-bar #PanelUI-button #PanelUI-menu-button {
  padding-right: 4px !important;
}

/* Fix for web apps */
:root[taskbartab] #navigator-toolbox:not([tabs-hidden]) {
	#nav-bar .titlebar-buttonbox-container {
      display: none !important;
	}
}

/*=====================================================================
====================== C O N T E X T   M E N U ========================
=====================================================================*/

/*  affects normal stuff FIX IT */
menupopup :-moz-any(menu, menuitem) {
  /*   padding-top: 4px !important;
  padding-bottom: 4px !important; */
}

/*  Context menu padding */
:not(#ContentSelectDropdown) > menupopup {
  @media (-moz-platform: windows) {
    & > menu,
    & > menuitem {
      padding-block: 0.3em !important;
      margin-inline: 4px !important;
      margin-block: 2px !important;
    }
  }
}

/* Some website and menu dropdown colors  */
#ContentSelectDropdownPopup {
  --content-select-background-image: none !important;
}

/* ----- Menu Separator #context-sep-selectall ----- */
menuseparator {
  border-color: var(--arrowpanel-border-color) !important;
  /* border-top: 1px solid ThreeDShadow; */
  padding-block: 1px !important;
}

menuseparator#context-sep-navigation {
  border-color: var(--arrowpanel-border-color) !important;
}

/* ----- Menu Colors ----- */
menupopup,
panel {
/*   #ContentSelectDropdown used to remove websites native dropdown modifications */
/*   #ctrlTab-panel used to fix Ctr+Tab */
  :not(#ContentSelectDropdown) > &:not(#ctrlTab-panel, #autoscroller) {
/*     --panel-border-color: var(--arrowpanel-border-color) !important; */
    --panel-padding: 1px 0px !important;
    --panel-border-radius: 8px !important;
    --panel-padding-block: 4px !important;
    --panel-background: var(--firefoxcss-secondary-bg-color) !important;
  }
}

/* Right click */
#context-navigation:not([hidden]) {
  background-color: var(--firefoxcss-context-menu-top-color) !important;
  padding: 4px !important;
  border-top-left-radius: var(--panel-border-radius) !important;
  border-top-right-radius: var(--panel-border-radius) !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* Top of context menu  */
menupopup#contentAreaContextMenu {
  --panel-padding: unset !important;
  --panel-padding: 0 0 2px !important;
}

/* Menu when right clicking links  */
menupopup
  menuitem:is(#context-openlinkintab, #context-undo, #context-viewimage) {
  margin-top: 3px !important;
}

#context-sep-navigation {
  padding-block: 0px !important;
}

#context-navigation
  #context-back[disabled="true"]
  .menu-iconic-left
  .menu-iconic-icon {
  opacity: 0.5 !important;
}

#context-navigation
  #context-forward[disabled="true"]
  .menu-iconic-left
  .menu-iconic-icon {
  opacity: 0.5 !important;
}

menu,
menuitem {
  &:where([disabled="true"]) {
  }

  &:where([_moz-menuactive]:not([disabled="true"])) {
    color: -moz-menuhovertext;
    background-color: var(--firefoxcss-context-menu-item-bg-color) !important;
  }

  &:where([_moz-menuactive="true"][disabled="true"]) {
    background-color: var(
      --firefoxcss-context-menu-item-bg-color-inactive
    ) !important;
  }
}

@media (-moz-platform: linux) {
  :not(#ContentSelectDropdown) > menupopup {
    & > menu,
    & > menuitem {
      padding: 4px 4px !important;
      margin-inline: 2px !important;
      margin-block: 2px !important;
    }
  }

  #context-navigation > .menuitem-iconic .menu-iconic-icon {
    padding: 4px !important;
  }

  #context-navigation:not([hidden]) {
    padding: 3px 3px !important;
  }
}
/*=====================================================================
===================== B O O K M A R K S   B A R =======================
=====================================================================*/

/* Set bookmarks bar items padding */
#PlacesToolbarItems > .bookmark-item {
  margin-bottom: var(--uc-bm-margin-bottom) !important; /* Adjust the spacing between the bookmark button background on hover and the bottom */
  padding-block: var(--uc-bm-padding) !important;
  padding-left:  6px !important;
  padding-right: 6px !important;
}

/*=====================================================================
=========================== B U T T O N S =============================
=====================================================================*/

/* Go Back button */
#back-button > .toolbarbutton-icon {
  border-radius: var(--toolbarbutton-border-radius) !important;
}

#back-button > .toolbarbutton-icon {
  border: none !important;
  background: none !important;
  width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  padding: var(--toolbarbutton-inner-padding) !important;
}

/* Main Menu Button */
#PanelUI-button {
  margin-inline-start: 0 !important;
  padding-inline-start: 0 !important;
  border: none !important;
  border-inline-start: none !important;
}

toolbar
  .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover
  > .toolbarbutton-icon,
toolbar
  .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover
  > .toolbarbutton-text,
toolbar
  .toolbarbutton-1:not([disabled="true"], [checked], [open], :active):hover
  > .toolbarbutton-badge-stack {
  box-shadow: 0 0 4px var(--firefoxcss-toolbar-button-box-shadow) !important;
}

toolbar
  .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active)
  > .toolbarbutton-icon,
toolbar
  .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active)
  > .toolbarbutton-text,
toolbar
  .toolbarbutton-1:not([disabled="true"]):is([open], [checked], :hover:active)
  > .toolbarbutton-badge-stack {
  box-shadow: 0 0 4px var(--firefoxcss-toolbar-button-active-box-shadow) !important;
}

/* ----- New tab icon size (16-default). Not change the rest of calc --- */
@media not -moz-pref("sidebar.verticalTabs") {
  #tabs-newtab-button .toolbarbutton-icon,
  #new-tab-button .toolbarbutton-icon {
    width: calc(2 * var(--toolbarbutton-inner-padding) + 12px) !important;
    height: calc(2 * var(--toolbarbutton-inner-padding) + 12px) !important;
  }
}

/* Design of the plus/newtab button - active/press */
toolbar
  #tabs-newtab-button:not([disabled="true"]):-moz-any(
    [open],
    [checked],
    :hover:active
  )
  > .toolbarbutton-icon,
toolbar
  #new-tab-button:not([disabled="true"]):-moz-any(
    [open],
    [checked],
    :hover:active
  )
  > .toolbarbutton-icon {
  border: 0 !important;
  border-radius: 100% !important;
  background-image: none !important;
  background-color: var(--firefoxcss-new-tab-button-active) !important;
  box-shadow: inset 2px 2px 2px 0px
    var(--firefoxcss-new-tab-button-box-shadow-active) !important;
}

/* Design of the plus/newtab button - hover */
toolbar
  #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(
    :active
  ):hover
  > .toolbarbutton-icon,
toolbar
  #new-tab-button:not([disabled="true"]):not([checked]):not([open]):not(
    :active
  ):hover
  > .toolbarbutton-icon {
  border: 0 !important;
  border-radius: 100% !important;
  background-image: none !important;
  background-color: var(--firefoxcss-new-tab-button-hover) !important;
  box-shadow: 1px 1px 4px -1px var(--firefoxcss-new-tab-button-box-shadow-hover) !important;
}

/* Back button hover/active color */
#back-button:not([disabled]):not([open]):hover > .toolbarbutton-icon {
  background-color: var(--toolbarbutton-hover-background) !important;
}

#back-button:not([disabled="true"]):is([open], [checked], :hover:active)
  > .toolbarbutton-icon {
  background-color: var(--toolbarbutton-active-background) !important;
}

/* Firefox view button */
#TabsToolbar #firefox-view-button {
  margin-left: 2px !important;
}

#TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon {
  background-image: none !important;
  box-shadow: none !important;
  border-radius: var(--firefoxcss-border-radius) !important;
  background-color: var(--firefoxcss-tab-hover-bg-color) !important;
}

#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon {
  background-image: none !important;
  background-color: var(--firefoxcss-secondary-bg-color) !important;
  border-radius: var(--firefoxcss-border-radius) !important;
  box-shadow: none !important;
}

/* Remove line on the right side of the Firefox view button and fix margins */
:root:not([privatebrowsingmode], [firefoxviewhidden])
  :is(toolbarbutton, toolbarpaletteitem)
  + #tabbrowser-tabs,
:root[privatebrowsingmode]:not([firefoxviewhidden])
  :is(
    toolbarbutton:not(#firefox-view-button),
    toolbarpaletteitem:not(#wrapper-firefox-view-button)
  )
  + #tabbrowser-tabs {
  border-inline-start: 0 !important;
  margin-inline-start: 0px !important;
}

#firefox-view-button {
  padding-right: 0px !important;
}

:root[privatebrowsingmode="temporary"] {
  & #PanelUI-menu-button {
    fill: var(--firefoxcss-private-browsing-menu-color) !important;
  }
}

:root[privatebrowsingmode="temporary"]
  #PanelUI-menu-button
  .toolbarbutton-badge-stack
  .toolbarbutton-icon {
  filter: var(--firefoxcss-private-browsing-drop-shadow) !important;
}

/*=====================================================================
============== U R L   A U T O   H I D E   B U T T O N S ==============
=====================================================================*/

@media not -moz-pref("mod.search.info.buttons.show.always") {
  /* - [persistsearchterms] - 
     Used when "Show search terms instead of URL on 
     default search engine results page" enabled.
     When you search a globe icon shows up to show full url */

  /*
  #urlbar:not([persistsearchterms]) #identity-icon-box,
  #urlbar:not([persistsearchterms]) #identity-permission-box {
    opacity: 0 !important;
    margin-inline-start: calc(-16px - 2 * var(--urlbar-icon-padding));
    transition: margin-inline-start 100ms linear, opacity 200ms linear;
  }

  #identity-box:hover #identity-icon-box,
  #identity-box:hover #identity-permission-box,
  #identity-box #identity-permission-box[open="true"],
  #identity-box #identity-icon-box[open="true"] {
    opacity: 1 !important;
    margin-inline-start: initial !important;
  }
   */

  .urlbar-page-action,
  .urlbar-revert-button,
  .urlbar-go-button,
  .search-go-button {
    &:not([disabled]):hover {
      background-color: var(--toolbarbutton-hover-background) !important;
    }
  }

  .identity-box-button,
  #tracking-protection-icon-container {
    &:hover:not([open="true"]) {
      background-color: var(--toolbarbutton-hover-background) !important;
    }
  }

  #urlbar-label-box,
  #urlbar-zoom-button {
    background-color: var(--firefoxcss-main-bg-color) !important;
  }

  #urlbar-zoom-button:hover {
    background-color: var(--firefoxcss-urlbar-zoom-button) !important;
  }

  /* Let you hide location permission icons to fix padding     */
  @media -moz-pref("mod.hide.location.permissions.icon") {
    #identity-permission-box box image.sharing-icon {
      opacity: 0 !important;
      visibility: collapse !important;
      transition: opacity 100ms ease-in-out, visibility 100ms ease-in-out;
      transition-delay: 100ms;
    }

    #identity-permission-box[open="true"] box image.sharing-icon {
      opacity: 1 !important;
      visibility: visible !important;
      transition: opacity 100ms ease, visibility 100ms ease;
      transition-delay: 100ms;
    }
  }

  #identity-box.extensionPage
    #identity-icon-box:not([open])
    #identity-icon-label {
    opacity: 0;
    visibility: collapse;
  }

  #identity-box.extensionPage #identity-icon-box #identity-icon-label {
    transition: opacity 0.3s ease;
  }

  @media -moz-pref("mod.hide.extension.url.icon") {
    #identity-box.extensionPage #identity-icon-box {
      display: none !important;
    }
  }

  #tracking-protection-icon-container,
  #identity-icon-box,
  #identity-permission-box {
    /* Initial hidden state for the elements */
    /* persistsearchterms - is when you see globe in search */
    #urlbar & {
      opacity: 0 !important;
      margin-inline-start: calc(-16px - 2 * var(--urlbar-icon-padding));
      transition: margin-inline-start 150ms ease-in-out,
        opacity 100ms ease-in-out;
      transition-delay: 100ms;
    }

    /* Specific rules to keep the elements shown when hovering */
    #urlbar:has(#identity-box:hover) &,
    #urlbar:has(#tracking-protection-icon-container:hover) & {
      opacity: 1 !important;
      margin-inline-start: initial !important;
      transition: margin-inline-start 100ms ease, opacity 100ms ease;
      transition-delay: 100ms;
    }

    #urlbar &:hover:active,
    #urlbar &[open="true"] {
      opacity: 1 !important;
      margin-inline-start: initial !important;
    }
  }

  /*   When location permission granted show permission box */
  @media not -moz-pref("mod.hide.location.permissions.icon") {
    #urlbar #identity-permission-box:has(image.sharing-icon[sharing]) {
      opacity: 1 !important;
      margin-inline-start: initial !important;
      transition: margin-inline-start 100ms ease, opacity 100ms ease;
      transition-delay: 100ms;
    }
  }

  #urlbar #identity-box[pageproxystate="valid"] {
    &.weakCipher,
    &.mixedDisplayContent,
    &.mixedDisplayContentLoadedActiveBlocked,
    &.certUserOverridden,
    &.certErrorPage,
    &.notSecureText {
      & #identity-icon-box {
        margin-inline-start: initial !important;
        opacity: 1 !important;
        color: #e36f6f !important;
        background-color: var(--firefoxcss-main-bg-color) !important;

        &:hover:not([open]) {
          background-color: var(--firefoxcss-urlbar-zoom-button) !important;
        }

        &:is(:hover:active, [open]) {
          background-color: var(--firefoxcss-urlbar-zoom-button) !important;
        }
      }
    }

    &.notSecure,
    &.mixedActiveContent,
    &.httpsOnlyErrorPage {
      & #identity-icon-box {
        margin-inline-start: initial !important;
        opacity: 1 !important;
      }
    }
  }

  #urlbar
    #identity-box[pageproxystate="valid"]:is(.chromeUI, .extensionPage)
    > #identity-icon-box {
    margin-inline-start: initial !important;
    opacity: 1 !important;
    background-color: var(--firefoxcss-main-bg-color) !important;

    &:hover:not([open]) {
      background-color: var(--firefoxcss-urlbar-zoom-button) !important;
    }

    &:is(:hover:active, [open]) {
      background-color: var(--firefoxcss-urlbar-zoom-button) !important;
    }
  }

  /* #identity-box.chromeUI::after,
  #identity-box.chromeUI:hover::after {
    opacity: 0 !important;
  } */

  #urlbar:not([persistsearchterms]) .urlbar-input-container .urlbar-input-box {
    padding-inline-start: 3px !important;
  }

  #identity-box:hover ~ .urlbar-input-box > #urlbar-input {
    mask-image: linear-gradient(to right, transparent, black 3ch),
      linear-gradient(to left, transparent, black 3ch) !important;
    mask-composite: intersect;
  }

  #tracking-protection-icon-container:hover
    ~ .urlbar-input-box
    > #urlbar-input {
    mask-image: linear-gradient(to right, transparent, black 3ch),
      linear-gradient(to left, transparent, black 3ch) !important;
    mask-composite: intersect;
  }

  #urlbar:is(:not([usertyping]), :not([focused])):not([persistsearchterms])
    #page-action-buttons {
    padding-inline-start: 6px;
  }

  #urlbar:not(.searchButton)
    > .urlbar-input-container
    > #identity-box[pageproxystate="invalid"]
    > .identity-box-button {
    padding-inline: var(--urlbar-icon-padding) !important;
  }

  #page-action-buttons .urlbar-page-action {
    margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)) !important;
    opacity: 0 !important;
    transition: margin-inline-end 150ms ease-in-out, opacity 100ms ease-in-out;
  }

  #page-action-buttons:not(:hover)
    #translations-button[translationsactive="true"]:not([open]) {
    /*     visibility: collapse !important; */
  }

  #translations-button-locale {
    color: white !important;
  }

  #page-action-buttons #translations-button[translationsactive="true"] {
    margin-inline-end: initial !important;
    opacity: 1 !important;
  }

  #page-action-buttons #reader-mode-button[readeractive] {
    margin-inline-end: initial !important;
    opacity: 1 !important;
  }

  #page-action-buttons:hover > .urlbar-page-action,
  #page-action-buttons .urlbar-page-action[open],
  #page-action-buttons .urlbar-page-action[open] ~ .urlbar-page-action {
    opacity: 1 !important;
    margin-inline-end: initial !important;
    transition: margin-inline-end 100ms ease, opacity 100ms ease;
  }

  /* Create visual dots on both sides */
  /* left side identity-box dots modification dark color %23FFFFFF*/
  #urlbar:is(:not([usertyping]), :not([focused])):not([persistsearchterms])
    #identity-box::after,
  #urlbar:is(:not([usertyping]), :not([focused])):not([persistsearchterms])
    #page-action-buttons::before {
    position: relative;
    content: "•••";
    content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg fill="context-fill" width="13px" height="12px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M20.25 16c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25zM20.25 27c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25zM20.25 5c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25z"></path></svg>');
    pointer-events: none;
    -moz-context-properties: fill, fill-opacity;
    fill: var(--toolbarbutton-icon-fill) !important;
    transition: opacity 100ms ease;
    align-self: center;
    font-size: 1.25rem;

    /*    background-image: url('ASSETS/svg/dots-three-outline-vertical-fill-svgrepo-com.svg');
   background-size: 14px 14px;
    background-repeat: no-repeat;

      */ /*! width:14px; */ /*
      height: 14px;
      content:""; */

    /*   -moz-context-properties: fill, fill-opacity;
    fill: currentColor; */
  }

  #identity-box::after,
  #page-action-buttons::before {
    opacity: 0.2;
  }

  #identity-box::after {
    /*   transform: rotate(90deg); */
    left: 2px;
  }

  #page-action-buttons::before {
    /*   transform: rotate(-90deg); */
    right: 2px;
  }

  #identity-box:hover::after,
  #page-action-buttons:hover::before {
    opacity: 0.2 !important;
    transition: opacity 50ms ease;
    pointer-events: none;
  }

  #identity-box[pageproxystate="invalid"]::after,
  .urlbar-input-container[pageproxystate="invalid"]
    > #page-action-buttons::before {
    opacity: 0 !important;
    transition: opacity 50ms ease;
  }

  /* Linux changes for visual dots */
  @media (-moz-platform: linux) {
    #identity-box::after,
    #page-action-buttons::before {
      content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg fill="context-fill" width="13px" height="12px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M20.25 16c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25zM20.25 27c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25zM20.25 5c0 2.347-1.903 4.25-4.25 4.25s-4.25-1.903-4.25-4.25c0-2.347 1.903-4.25 4.25-4.25s4.25 1.903 4.25 4.25z"></path></svg>') !important;
      transform: none !important;
      font-size: unset !important;
    }

    #page-action-buttons::before {
      right: 2px;
    }

    #identity-box::after {
      left: 2px;
    }
  }

  /* Search button show on hover in URL bar. */
  /* #urlbar-container:not(:hover) #urlbar:not(.searchButton):not([focused])
    > .urlbar-input-container >
    #identity-box[pageproxystate="invalid"] #identity-icon {
      opacity: 0 !important;
    }

    #urlbar-container #urlbar:not(.searchButton)
    > .urlbar-input-container >
    #identity-box[pageproxystate="invalid"] #identity-icon {
      opacity: 1 !important;
      visibility: visible !important;
      transition: opacity 0.2s ease;
    } */
}
/*=====================================================================
==================== L I N U X   S U P P O R T ========================
=======================================================================
@media (-moz-gtk-csd-available)
@media (-moz-gtk-csd-reversed-placement) */

@media (-moz-platform: linux) {
  /*   Smaller tab text and height. Broken on fedora? */
  #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
    height: 2.4em !important;
    font-size: 0.85em;
  }

  @media -moz-pref("sidebar.verticalTabs") {
    #nav-bar {
      padding-bottom: 1px !important;
      border-top: none !important;
    }
  }
}

/*=====================================================================
=============== C U S T O M I Z A T I O N   M E N U ===================
=====================================================================*/
/* Customize toolbar background color */
#customization-container {
  background-image: none !important;
  background-color: var(--firefoxcss-secondary-bg-color) !important;
}

#PersonalToolbar[customizing]
  toolbarpaletteitem[place="toolbar"]
  > toolbarspring,
#nav-bar[customizing] toolbarpaletteitem[place="toolbar"] > toolbarspring,
#customization-container toolbarpaletteitem[place="palette"] > toolbarspring {
  outline: 1px solid var(--firefoxcss-customize-view-flex-space) !important;
  outline-offset: -3px !important;
  border-radius: 6px !important;
}

@media not (-moz-platform: macos) {
  #customization-panelWrapper > .panel-arrowcontent {
    border-radius: 10px !important;
    background-color: var(--firefoxcss-customize-view-overflow-menu) !important;
  }
}

#PersonalToolbar[customizing] {
  outline: 1px dashed var(--firefoxcss-customize-view-dashed-outline) !important;
}

#customization-container #customization-footer {
  border-top: none !important;
}

@media (-moz-platform: macos),
  (-moz-platform: windows),
  not (prefers-contrast) {
  #customization-container #customization-footer .customizationmode-button {
    border-radius: 4px !important;
  }
}

/*=====================================================================
============================= O T H E R ===============================
=====================================================================*/
@media -moz-pref("firefoxcss.disable.tab.preview.panel.fully") {
  #tab-preview-panel,
  #tabbrowser-tab-tooltip {
    display: none !important;
  }
}

/* Status URL change (bottom left when hovering a link)  */
#statuspanel-label {
  background-color: var(--firefoxcss-statuspanel-bg-color) !important;
  border-radius: 4px !important;
  border-color: transparent !important;
  color: currentColor !important;
  margin: 0 0 3px 3px !important;
  padding: 4px !important;
}

/* Make forward and back buttons smaller  */
#back-button .toolbarbutton-icon,
#forward-button .toolbarbutton-icon {
  padding: calc(var(--toolbarbutton-inner-padding) + 1px) !important;
}

/* Container extension code */
#TabsToolbar
  #tabbrowser-tabs
  .tabbrowser-tab[usercontextid]
  .tab-background:not([selected]) {
  background: var(--identity-tab-color) !important;
  opacity: 0.3 !important;
}

/* Container extension code */
#tabbrowser-tabs .tab-context-line {
  display: none !important;
}

.urlbarView-button {
  .urlbarView-row:is([row-selectable]:hover, [selected])
    > &:not(:hover, [open]) {
    background-color: transparent !important;
    opacity: 0.8 !important;
  }
}

@media not -moz-pref("svg.context-properties.content.enabled") {
  #navigator-toolbox::before {
    width: 100%;
    content: ">>>> To fix buttons enable 'svg.context-properties.content.enabled' in about:config (type about:config in search) <<<<";
    color: #ffc6a4;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    background-color: #000;
    font-size: 1.1rem;
  }
}

#toolbar-menubar {
  &[autohide="true"] {
    :root[tabsintitlebar] #navigator-toolbox[tabs-hidden] > & {
      min-height: 0 !important;
    }
  }
}

/*===================== TABS TOP =========================*/

/* Tabs On Top */
@media -moz-pref("firefoxcss.tabs.on.top.enable") {
  @media not -moz-pref("sidebar.verticalTabs") {
    /* SEARCH BAR TOOLBAR */
    #nav-bar {
      order: 2 !important;
    }

    /* TABS TOOLBAR */
    #TabsToolbar {
      order: 1 !important;
    }

    /* BOOKMARKS TOOLBAR*/
    #PersonalToolbar {
      order: 3 !important;
    }

    /* Extra titlebar menu (above or below tabs, opens with alt) */
    #toolbar-menubar {
      order: 0 !important;
    }

    /* Tab bar top and bottom padding */
    #TabsToolbar {
      padding-top: 2px !important;
      padding-bottom: 0px !important;
    }

    #nav-bar {
      padding-bottom: 1px !important;
    }

    :root {
      --firefoxcss-searchbar-container-height: 36px !important;
    }

    #PanelUI-menu-button {
      padding-inline-end: 3px !important;
    }

    #TabsToolbar .titlebar-buttonbox-container {
      order: 1 !important;
      padding: 0px !important;
    }
  }
}

@media -moz-pref("mod.centered.tabs") {
  @media not -moz-pref("sidebar.verticalTabs") {
    #tabbrowser-arrowscrollbox:not([overflowing]) {
      --uc-justify-content: center;
    }

    scrollbox[orient="horizontal"] > slot {
      justify-content: var(--uc-justify-content, initial);
    }
  }
}

/* Linux window control stuff */

@media (-moz-platform: linux) {
  /* Keep showing the buttons when alt menu visible */
  #toolbar-menubar[autohide]:not([inactive])
    ~ :is(#TabsToolbar, #nav-bar)
    > :is(.titlebar-buttonbox-container) {
    visibility: visible !important;
  }

  /* Hide window control buttons by default until manually enabled when needed */
  /* Remove extra alt menu window buttons because we use main buttons */
  .titlebar-buttonbox-container {
    #TabsToolbar > &,
    #nav-bar > &,
    #toolbar-menubar & {
      display: none !important;
    }
  }

  /* Hide all spacers to show manually when needed*/
  #TabsToolbar > .titlebar-spacer,
  #nav-bar > .titlebar-spacer {
    display: none !important;
  }

  /* Enable Window control buttons */
  @media not -moz-pref("sidebar.verticalTabs") {
    @media not -moz-pref("firefoxcss.tabs.on.top.enable") {
      #nav-bar > .titlebar-buttonbox-container {
        display: flex !important;
      }
    }

    @media -moz-pref("firefoxcss.tabs.on.top.enable") {
      #TabsToolbar > .titlebar-buttonbox-container {
        display: flex !important;
      }
    }
  }

  /* Window control buttons on left side  */
  @media -moz-pref("mod.force.window.control.buttons.left.side"),
    (-moz-gtk-csd-reversed-placement),
    -moz-pref("mod.macos") {
    @media not -moz-pref("mod.force.window.control.buttons.right.side") {
      #navigator-toolbox .titlebar-buttonbox-container {
        order: -1 !important;
      }

      /* Reverse direction only for Windows OS */
      @media (-moz-platform: windows) {
        #navigator-toolbox .titlebar-buttonbox-container {
          & .titlebar-min {
            order: 3 !important;
          }

          & .titlebar-max,
          & .titlebar-restore {
            order: 2 !important;
          }

          & .titlebar-close {
            order: 1 !important;
          }
        }
      }
    }
  }

  /* Window control buttons right side  */
  @media not (-moz-pref("mod.force.window.control.buttons.left.side")
       or (-moz-gtk-csd-reversed-placement) 
       or -moz-pref("mod.macos")),
       -moz-pref("mod.force.window.control.buttons.right.side") {
    /* Reverse button direction*/
    #navigator-toolbox .titlebar-buttonbox-container {
      & .titlebar-min {
        order: 1 !important;
        @media (-moz-platform: macos) {
          order: 2 !important;
        }
      }

      & .titlebar-max,
      & .titlebar-restore {
        order: 2 !important;
        @media (-moz-platform: macos) {
          order: 1 !important;
        }
      }

      & .titlebar-close {
        order: 3 !important;
        @media (-moz-platform: macos) {
          order: 3 !important;
        }
      }
    }
  }

  /* When screen is small and cant fit window 
     control buttons in nav-bar move them down to tab-bar */
  @media not -moz-pref("sidebar.verticalTabs") {
    @media not -moz-pref("firefoxcss.tabs.on.top.enable") {
      @media (max-width: 600px) {
        #navigator-toolbox #nav-bar > .titlebar-buttonbox-container {
          display: none !important;
        }

        #navigator-toolbox #TabsToolbar > .titlebar-buttonbox-container {
          display: flex !important;
        }
      }
    }
  }
}

@media -moz-pref("browser.tabs.fadeOutUnloadedTabs") {
  .tabbrowser-tab[pending] .tab-icon-stack,
  .tabbrowser-tab[pending] .tab-text.tab-label {
    opacity: 0.65 !important;
  }
}


/*=====================================================================
----------------- S E A R C H   M O D E   S W I T C H E R -------------
=====================================================================*/
@media -moz-pref("browser.urlbar.searchModeSwitcher.featureGate") or 
  -moz-pref("browser.urlbar.scotchBonnet.enableOverride") {
  /* Disable searchmode switcher arrow */
  #urlbar[searchmode] #urlbar-searchmode-switcher,
  #urlbar[searchmode] .searchmode-switcher-chicklet {
    background-color: var(--firefoxcss-item-bg-color) !important;
  }
    
    
  #urlbar[searchmode] .searchmode-switcher-chicklet {
    border-end-end-radius: var(--urlbar-icon-border-radius) !important;
    border-start-end-radius: var(--urlbar-icon-border-radius) !important;
  }

  #urlbar:not([searchmode]) #urlbar-searchmode-switcher {
    background-color: transparent !important;
  }

  #urlbar:not([searchmode]) #urlbar-searchmode-switcher {
    &:hover,
    &:hover:active,
    &[open] {
      background-color: var(--firefoxcss-item-bg-color) !important;
    }
  }

  #searchmode-switcher-dropmarker {
    fill: color-mix(in srgb, currentColor 60%, transparent) !important;
  }

  #searchmode-switcher-dropmarker {
    #urlbar-searchmode-switcher[open] & {
      transform: rotate(180deg);
      transition: transform 150ms ease;
    }

    #urlbar-searchmode-switcher & {
      transition: transform 150ms ease;
    }

    #urlbar-searchmode-switcher:hover & {
      fill: color-mix(in srgb, currentColor 90%, transparent) !important;
    }
  }
}

/* Set fonts */
* {
	font-family: var(--custom-font);
}