/* ______ _           __             __  __           _   ____  _     _    _ _____  
  |  ____(_)         / _|           |  \/  |         | | |  _ \| |   | |  | |  __ \ 
  | |__   _ _ __ ___| |_ _____  __  | \  / | ___   __| | | |_) | |   | |  | | |__) |
  |  __| | | '__/ _ \  _/ _ \ \/ /  | |\/| |/ _ \ / _` | |  _ <| |   | |  | |  _  / 
  | |    | | | |  __/ || (_) >  <   | |  | | (_) | (_| | | |_) | |___| |__| | | \ \ 
  |_|    |_|_|  \___|_| \___/_/\_\  |_|  |_|\___/ \__,_| |____/|______\____/|_|  \_\
  
                                                                                    
  Github:         github.com/datguypiko/Firefox-Mod-Blur     */

/*===============================================================
===================== E X T R A   M O D S =======================
===============================================================*/

@import url("privacy_change_email_text.css");
@import url("privacy_blur_email_in_main_menu.css");
@import url("privacy_blur_email_in_sync_menu.css");
@import url("firefox_view_icon_change.css");
@import url("no_search_engines_in_url_bar.css");
@import url("spill-style-part1-file.css");
@import url("white_github_icon_in_bookmarks.css");
@import url("only_show_list-all-tabs_when_tabs_overflowing.css");
@import url("thicker_control_buttons.css");
@import url("min-max-close_buttons.css");
@import url("acrylic_micaforeveryone.css");
@import url("privacy_blur_tabs_content.css");
@import url("popout_bookmarks_bar_on_hover.css");
@import url("push_bookmarks_bar_on_hover.css");
@import url("remove_folder_icons_from_bookmarks.css");
@import url("bookmarks_bar_same_color_as_toolbar.css");
@import url("icons_in_main_menu.css");
@import url("ublock-icon-change.css");
@import url("selected_tabs_static_width.css");
@import url("autohide_tab_and_bookmarks_bars.css");
@import url("url_bar_no_border.css");
@import url("search_bar_transparent_background.css");
@import url("transparent_bookmarks_bar.css");
@import url("cleaner_extensions_menu.css");
@import url("colored_soundplaying_tab.css");
@import url("menu_icon_change_to_firefox.css");
@import url("pinned_tabs_no_bg_color.css");
@import url("reversed_tabs_bg_color.css");
@import url("transparent_tabs_bg_color.css");
@import url("tabs_separator.css");
@import url("searchbox_text_align_left.css");
@import url("tabs_take_full_bar_width.css");
@import url("show_searchbar_dots_only_on_hover.css");

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

@media (prefers-color-scheme: dark) {
  :root {
    /* Main dark color, url bar, active tab etc. */
    --firefoxcss-main-bg-color: hsl(240, 2%, 13%);

    /* Main lighter color, toolbar background */
    --firefoxcss-item-bg-color: hsl(240, 2%, 20%);

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

    --firefoxcss-normal-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-main-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-main-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-main-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-main-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 */
    --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(277, 70%, 64%);
    --firefoxcss-private-browsing-drop-shadow: drop-shadow(
      0px 0px 1px #000000d5
    );
    --firefoxcss-statuspanel-bg-color: var(--firefoxcss-main-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, 0%, 60%, 0.25) !important;
    --toolbar-bgcolor: var(--firefoxcss-item-bg-color) !important;
    --arrowpanel-background: var(--firefoxcss-main-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-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-main-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);
  }
}

/*=====================================================================
================= L I G H T   T H E M E   C O L O R S =================
=====================================================================*/

@media (prefers-color-scheme: light) {
  :root {
    /* Main dark color, url bar, active tab etc. */
    --firefoxcss-main-bg-color: hsl(200, 5%, 98%);

    /* Main lighter color, toolbar background */
    --firefoxcss-item-bg-color: hsl(200, 5%, 96%);

    /* Tab colors hsl(240, 15%, 90%) */
    --firefoxcss-tab-bg-color: hsl(200, 5%, 92%);
    --firefoxcss-tab-hover-bg-color: hsl(200, 5%, 86%);
    --firefoxcss-tab-active-bg-color: hsl(200, 5%, 85%);
    --firefoxcss-non-active-tabs: hsl(0, 0%, 25%);

    --firefoxcss-normal-tabs-box-shadow: none;
    --firefoxcss-tab-multiselect-outline: hsl(240, 8%, 75%);

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

    /* Context menu colors */
    --firefoxcss-context-menu-top-color: hsl(240, 15%, 95%);

    /* Bookmarks bar colors */
    --firefoxcss-bookmarks-bg-color: var(--firefoxcss-item-bg-color);

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

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

    --firefoxcss-new-tab-button-active: hsl(200, 10%, 90%);
    --firefoxcss-new-tab-button-box-shadow-active: rgba(0, 0, 0, 0.4);

    --firefoxcss-new-tab-button-hover: hsla(200, 5%, 83%, 0.65);
    --firefoxcss-new-tab-button-box-shadow-hover: rgba(0, 0, 0, 0);

    /* Search Bar and breakout (when in focus) colors */
    --firefoxcss-url-breakout-border-top-color: 1px solid transparent;
    --firefoxcss-url-bar-bg-color: hsl(200, 5%, 92%);
    --firefoxcss-url-border-bottom-color: 1px solid hsla(0, 0%, 100%, 1);
    --firefoxcss-url-border-top-color: 1px solid hsla(0, 0%, 0%, 0);
    --firefoxcss-url-breakout-bar-bg-color: hsl(200, 5%, 98%);
    --firefoxcss-url-breakout-border-bottom-color: hsla(0, 0%, 70%, 0.05);
    --firefoxcss-url-box-shadow-color: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
    --firefoxcss-url-autocomplete-highlight: hsl(200, 5%, 90%);
    --firefoxcss-url-breakout-box-shadow: transparent 0 0 0 3px,
      rgba(18, 18, 18, 0.1) 2px 10px 22px;
    --firefoxcss-url-clipboard-button: color-mix(
      in srgb,
      currentColor 10%,
      transparent
    );

    /* Other colors */
    --firefoxcss-urlbar-zoom-button: hsla(200, 5%, 60%, 0.35);
    --firefoxcss-top-bar-border-bottom-color: hsla(0, 0%, 0%, 0.1);
    --firefoxcss-private-browsing-menu-color: hsl(277, 80%, 55%);
    --firefoxcss-private-browsing-drop-shadow: none;
    --firefoxcss-statuspanel-bg-color: hsl(200, 10%, 98%);
    --firefoxcss-contextmenu-hover-text: black;
    --firefoxcss-customize-view-dashed-outline: hsla(0, 0%, 0%, 0.2);
    --firefoxcss-customize-view-flex-space: hsl(34, 50%, 70%);
    --firefoxcss-customize-view-overflow-menu: hsl(200, 5%, 100%);

    /* ============== Firefox Global colors change ==================== */
    --panel-item-hover-bgcolor: hsla(240, 5%, 70%, 0.35) !important;
    --toolbar-bgcolor: var(--firefoxcss-item-bg-color) !important;
    --toolbarbutton-hover-background: hsla(200, 5%, 70%, 0.35) !important;
    --toolbarbutton-active-background: hsla(200, 5%, 50%, 0.35) !important;
    --arrowpanel-background: hsl(200, 10%, 96%) !important;
    --button-hover-bgcolor: hsla(200, 5%, 70%, 0.35) !important;
    --button-active-bgcolor: hsla(200, 5%, 50%, 0.35) !important;
    --button-bgcolor: hsla(0, 0%, 45%, 0.1) !important;
    /* Search Bar */
    --arrowpanel-border-color: hsla(0, 0%, 100%, 0.5) !important;
    --panel-separator-color: hsla(0, 0%, 20%, 0.15) !important;
    --panel-separator-zap-gradient: var(--panel-separator-color) !important;
    --lwt-sidebar-background-color: var(--firefoxcss-main-bg-color) !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(240, 2%, 70%, 0.35);
    --firefoxcss-context-menu-item-bg-color-inactive: hsla(240, 2%, 70%, 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: 100px;
  --firefoxcss-tab-min-width: 110px;
  --firefoxcss-tab-max-width: 150px;

  --firefoxcss-searchbar-height: 30px;
  --firefoxcss-searchbar-container-height: 36px;
  --urlbar-icon-border-radius: calc(
    var(--firefoxcss-border-radius) - 2px
  ) !important;
  @media not -moz-pref("sidebar.verticalTabs") {
    --tab-block-margin: 2px !important;
    /* Default: 4px */

    --tab-min-height: 28px !important;
    /* Default: 36px */

    --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 */
}

/*=====================================================================
====================== 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-main-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-item-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-item-bg-color) !important;
}

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

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

/*=====================================================================
========================= 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/menu.svg) !important;
  }
  :root[privatebrowsingmode="temporary"] #PanelUI-menu-button {
    list-style-image: url(ASSETS/icons/menu-private.svg) !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;
  }
}

@media (prefers-color-scheme: light) {
  #PanelUI-menu-button {
    list-style-image: url(ASSETS/icons/menu-light.svg) !important;
  }

  :root[privatebrowsingmode="temporary"] #PanelUI-menu-button {
    list-style-image: url(ASSETS/icons/menu-private-light.svg) !important;
  }

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

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

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

  #back-button,
  menugroup > #context-back {
    list-style-image: url(ASSETS/icons/left-arrow-lightContext.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 {
  color: color-mix(in srgb, currentColor 80%, transparent) !important;
  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: var(--firefoxcss-normal-tabs-box-shadow) !important;
}

@media -moz-pref("sidebar.verticalTabs") {
  .tabbrowser-tab:not([pinned]) .tab-background:not([selected]) {
    background-color: transparent !important;
    box-shadow: none !important;
  }

  #vertical-pinned-tabs-container-separator {
    margin-inline: calc(5 * var(--space-xsmall)) !important;
    border-bottom: 1px solid light-dark(#00000030, #ffffff2e) !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-normal-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: none !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;
}

@media not -moz-pref("sidebar.verticalTabs") {
  /* Show Tab close button on hover */
  .tabbrowser-tab:not([pinned]) .tab-close-button {
    display: flex !important;
    opacity: 0;
    visibility: collapse !important;
  }
}

#navigator-toolbox .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  opacity: 1;
  visibility: visible !important;
  border-radius: 100% !important;
  transition: opacity 0.15s ease, visibility 0.15s ease,
    background-color 0.15s ease !important;
}

/* Show Tab close button on hover */
#navigator-toolbox .tabbrowser-tab:not([pinned]) .tab-close-button {
  display: flex !important;
  opacity: 0;
  visibility: collapse !important;
}

#navigator-toolbox .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  opacity: 1;
  visibility: visible !important;
  border-radius: 100% !important;
  transition: opacity 0.15s ease, visibility 0.15s ease,
    background-color 0.15s ease !important;
}

#tabbrowser-tabs[expanded][orient="vertical"] {
  & .tabbrowser-tab:not([pinned]):hover .tab-close-button {
    opacity: 1;
    visibility: visible !important;
    border-radius: 100% !important;
    transition: opacity 0.15s ease, visibility 0.15s ease,
      background-color 0.15s ease !important;
  }

  & .tabbrowser-tab:not([pinned]) .tab-close-button {
    display: flex !important;
    opacity: 0;
    visibility: collapse !important;
  }

  & .tabbrowser-tab:not([pinned]):hover .tab-close-button {
    opacity: 1;
    visibility: visible !important;
    border-radius: 100% !important;
    transition: opacity 0.15s ease, visibility 0.15s ease,
      background-color 0.15s ease !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%); 
    }
  }
} */

.tab-audio-button {
  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"])
    &:not([pinned]):not([crashed]) {
    &:is([soundplaying], [muted], [activemedia-blocked]) {
      /*     fill: var(--firefoxcss-tab-speaker-icon-color) !important; */
      color: var(--firefoxcss-tab-speaker-icon-color) !important;
      --button-text-color-ghost: var(
        --firefoxcss-tab-speaker-icon-color
      ) !important;
      border-radius: 20px !important;
      transform: scale(1);
      filter: drop-shadow(-1px 1px 1px light-dark(#0000002e, #00000052));
      border: none !important;
      background-color: transparent !important;
      transition: transform 150ms ease-in-out, fill 100ms ease-in-out,
        background-color 100ms ease-in-out !important;
      --button-border-radius: 20px !important;

      &:hover {
        background-color: var(--firefoxcss-tab-speaker-color) !important;
        color: var(--firefoxcss-tab-speaker-icon-hover-color) !important;
        --button-text-color-ghost-hover: var(
          --firefoxcss-tab-speaker-icon-hover-color
        ) !important;
        /*     fill: var(--firefoxcss-tab-speaker-icon-hover-color) !important; */
        transform: scale(0.8);
        border: none !important;
        transition: transform 150ms ease-in-out, fill 100ms ease-in-out,
          background-color 100ms ease-in-out, filter 100ms ease-in-out !important;
        /*            animation: mod-bounce 250ms ease; */
      }
      &:hover:active {
        color: var(--firefoxcss-tab-speaker-icon-hover-color) !important;
        --button-text-color-ghost-active: var(
          --firefoxcss-tab-speaker-icon-hover-color
        ) !important;
      }
    }
  }
}

/* button > .button-background {
  &[type~="icon"]:not(.labelled) {
    fill: var(--firefoxcss-tab-speaker-icon-color) !important;
    border-radius: 20px !important;
    transform: scale(1);
    filter: drop-shadow(-1px 1px 1px light-dark(#0000002e, #00000052));
    border: none !important;
    transition: transform 150ms ease-in-out, fill 100ms ease-in-out,
      background-color 100ms ease-in-out !important;
  }
}

button:hover > .button-background {
  &[type~="ghost"] {
    background-color: var(--firefoxcss-tab-speaker-color) !important;
    fill: var(--firefoxcss-tab-speaker-icon-hover-color) !important;
    transform: scale(0.8);
    border: none !important;
    transition: transform 150ms ease-in-out, fill 100ms ease-in-out,
      background-color 100ms ease-in-out, filter 100ms ease-in-out !important;
  }
} */

@media -moz-pref("sidebar.verticalTabs") {
  /* More compact vertical tabs */
  #tabbrowser-tabs[orient="vertical"] .tab-background {
    margin-block: 0px !important;
  }

  .tabbrowser-tab .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: #0000002e !important;
      backdrop-filter: blur(6px);
      /*         border: 1px solid #ffffff29 !important; */
      /*      fill:  var(--firefoxcss-tab-speaker-icon-hover-color) !important; */
      fill: var(--firefoxcss-tab-speaker-icon-color) !important;
      /*       border: 1px solid #ffffff29 !important; */

      transition: transform 100ms ease-in-out, fill 100ms ease-in-out,
        background-color 100ms ease-in-out;

      &:hover {
        fill: var(--firefoxcss-tab-speaker-icon-color) !important;
        background-color: transparent !important;
        /*         background-color: #ffffff24 !important; */
        border: 1px solid #ffffff29 !important;
        background-color: #ffffff14 !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.2) translate(-8%, 14%);
        transform-origin: center !important;
      }
    }
  }

  .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: #0000002e !important;
      backdrop-filter: blur(6px);
      /*         border: 1px solid #ffffff29 !important; */
      /*      fill:  var(--firefoxcss-tab-speaker-icon-hover-color) !important; */
      fill: var(--firefoxcss-tab-speaker-icon-color) !important;
      /*       border: 1px solid #ffffff29 !important; */
      transition: transform 100ms ease-in-out, fill 100ms ease-in-out,
        background-color 100ms ease-in-out;

      &:hover {
        fill: var(--firefoxcss-tab-speaker-icon-color) !important;
        background-color: transparent !important;
        /*         background-color: #ffffff24 !important; */
        border: 1px solid #ffffff29 !important;
        background-color: #ffffff14 !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.2) translate(-8%, 14%);
        transform-origin: center !important;
      }
    }
  }
}

@media not -moz-pref("sidebar.verticalTabs") {
  .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: #0000002e !important;
      backdrop-filter: blur(6px);
      border: 1px solid #ffffff29 !important;
      /*      fill:  var(--firefoxcss-tab-speaker-icon-hover-color) !important; */
      fill: var(--firefoxcss-tab-speaker-icon-color) !important;
      /*       border: 1px solid #ffffff29 !important; */
      transition: transform 100ms ease-in-out, fill 100ms ease-in-out,
        background-color 100ms ease-in-out;

      &:hover {
        fill: var(--firefoxcss-tab-speaker-icon-color) !important;
        background-color: transparent !important;
        /*         background-color: #ffffff24 !important; */
        border: 1px solid #ffffff29 !important;
        background-color: #ffffff14 !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.2) translate(-8%, 14%);
        transform-origin: center !important;
      }
    }
  }

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

  #tabbrowser-tabs {
    margin-left: 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]) {
    max-width: var(--firefoxcss-tab-max-width) !important;
    min-width: var(--firefoxcss-tab-min-width) !important;
  }

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

  /* Selected tabs width when overflowing */
  #tabbrowser-tabs[overflow] .tabbrowser-tab[selected][fadein]:not([pinned]) {
    min-width: 150px !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: 2px !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-block: 2px !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 ==============
=====================================================================*/
/* :root[sizemode="fullscreen"] #navigator-toolbox { position: relative; } */

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

@media (-moz-platform: windows) {
  /* Keep showing the buttons when alt menu visible */
  .titlebar-buttonbox-container {
    #toolbar-menubar[autohide="true"]:not([inactive]) + #TabsToolbar > & {
      visibility: visible !important;
    }
  }

  @media -moz-pref("sidebar.verticalTabs") {
    #toolbar-menubar[autohide]:not([inactive])
      ~ :is(#TabsToolbar, #nav-bar)
      > .titlebar-buttonbox-container {
      visibility: unset !important;
    }
  }

  #TabsToolbar .titlebar-buttonbox-container,
  #nav-bar .titlebar-buttonbox-container {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-right: 3px !important;
    padding-left: 3px !important;
  }

  .titlebar-buttonbox-container .titlebar-button > .toolbarbutton-icon {
    height: 12px !important;
    min-height: 12px !important;
    width: 12px !important;
    min-width: 12px !important;
  }

  .titlebar-buttonbox-container .titlebar-button {
    border-radius: var(--toolbarbutton-border-radius);
    padding: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  @media not -moz-pref("firefoxcss.tabs.on.top.enable") {
    #toolbar-menubar .titlebar-button {
      padding-block: 0px !important;
    }

    #nav-bar-customization-target
      > :is(toolbarbutton, toolbaritem):first-child {
      padding-inline-start: 2px !important;
    }

    :root[sizemode="maximized"] .titlebar-buttonbox-container {
      padding-top: 0px !important;
    }

    #navigator-toolbox[inFullscreen] #nav-bar {
      padding-right: initial !important;
    }

    @media not -moz-pref("sidebar.verticalTabs") {
      #nav-bar {
        padding-right: var(--firefoxcss-control-buttons-margin) !important;
      }

      #navigator-toolbox:not([inFullscreen])
        #TabsToolbar
        .titlebar-buttonbox-container {
        visibility: visible !important;
        display: flex !important;
        position: absolute !important;
        top: 1px;
        right: 0;
      }

      .titlebar-buttonbox-container .titlebar-min {
        order: 0 !important;
      }

      .titlebar-buttonbox-container .titlebar-max,
      .titlebar-restore {
        order: 1 !important;
      }

      .titlebar-buttonbox-container .titlebar-close {
        order: 2 !important;
      }

      @media only screen and (max-width: 670px) {
        #navigator-toolbox:not([inFullscreen])
          #TabsToolbar
          .titlebar-buttonbox-container {
          visibility: visible !important;
          display: flex !important;
          position: relative !important;
          order: 1 !important;
          padding-top: 1px !important;
          padding-bottom: 1px !important;
        }

        #navigator-toolbox:not([inFullscreen]) #nav-bar {
          padding-right: initial !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-main-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 {
  padding-block: 6px !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-main-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-item-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-item-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-item-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-main-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;
}

.browserContainer > findbar .findbar-textbox {
  background-color: var(--firefoxcss-item-bg-color) !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;
  }
}

/*===================== A L T  M E N U  BAR =========================*/
#toolbar-menubar {
  &[autohide="true"] {
    :root[tabsintitlebar] #navigator-toolbox:not([tabs-hidden]) > & {
      min-height: 0 !important;
    }
  }
}

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

/*===================== VERTICAL =========================*/

@media -moz-pref("sidebar.verticalTabs") and -moz-pref("sidebar.revamp") {
  :root {
    --firefoxcss-top-bar-border-bottom-size: 0px;
  }

  #nav-bar .titlebar-spacer[type="post-tabs"] {
    width: 20px !important;
    display: initial !important;
  }

  #tabbrowser-arrowscrollbox {
    --toolbox-bgcolor: var(--firefoxcss-item-bg-color) !important;
  }

  @media -moz-pref("mod.disable.scrollbar.in.vertical.tabs") {
    spacer[part="overflow-start-indicator"]
      + scrollbox[orient="vertical"][part="scrollbox"] {
      scrollbar-width: none !important;
    }
  }
}

@media -moz-pref("sidebar.revamp") {
  #sidebar-main,
  #sidebar-box {
    background-color: var(--firefoxcss-item-bg-color) !important;
    background-image: none !important;
  }

  @media -moz-pref("mod.custom.firefox.theme.color.fix") {
    #sidebar-main,
    #sidebar-box {
      background-color: var(--lwt-accent-color) !important;
    }

    #tabbrowser-arrowscrollbox {
      --toolbox-bgcolor: var(--lwt-accent-color) !important;
    }
  }

  /* Remove the white line around the content window */
  #tabbrowser-tabbox {
/*     outline: 1px solid light-dark(#0000000a, #00000026) !important; */
    outline: none !important;
    box-shadow: -0px 0px 2px 0 light-dark(rgba(0,0,0,.2), rgba(255,255,255,.06)) !important;
    /*! box-shadow: none !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) {
  @media -moz-pref("sidebar.verticalTabs") {
    #nav-bar .titlebar-spacer[type="post-tabs"] {
      display: none !important;
    }
  }

  /* 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;
      }
    }
  }

  /* Enable Window Control buttons in Vertical Tabs state */
  @media -moz-pref("sidebar.verticalTabs") {
    #nav-bar:not([tabs-hidden]) > .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("sidebar.verticalTabs") {
  @media -moz-pref("mod.vertical-tabs.frame.no.borders") {
      #browser #tabbrowser-tabbox {
          outline: none !important;
          box-shadow: none !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;
    }
  }
}
