/* This Source Code Form is subject to the terms of the Creative Commons
 * Attribution-NonCommercial-ShareAlike International License, v. 4.0.
 * If a copy of the CC BY-NC-SA 4.0 was not distributed with this
 * file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/
 * or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. */

/* this stylesheet is where our basic custom variables are defined, especially colors.
this is required by almost every other stylesheet, both chrome and content.
plaintext documents use just uc-low-globals.css,
but other than that these variables should be available everywhere. */

@import url(chrome://userchrome/content/layout/uc-low-globals.css);

@font-face {
  font-family: "Fira Code UC";
  font-style: normal;
  src: local("Fira Code"), local("Fira Code Light"), url(../fonts/FiraCode-VF.woff);
  /* This enables some alternate glyphs and ligatures */
  font-feature-settings: "cv14", "cv19", "cv30", "ss01", "ss02", "ss05", "ss07", "ss09";
}

:root,
.anonymous-content-host {
  --ui-text-10: hsla(0, 0%, 100%, 0.1);
  --ui-text-20: hsla(0, 0%, 100%, 0.2);
  --ui-text-30: hsla(0, 0%, 100%, 0.3);
  --ui-text-40: hsla(0, 0%, 100%, 0.4);
  --ui-text-50: hsla(0, 0%, 100%, 0.5);
  --ui-text-60: hsla(0, 0%, 100%, 0.6);
  --ui-text-70: hsla(0, 0%, 100%, 0.7);
  --ui-text-80: hsla(0, 0%, 100%, 0.8);
  --ui-text-90: hsla(0, 0%, 100%, 0.9);
  --ui-text-100: #fff;

  --uc-accent-color: hsl(233, 59%, 8%);
  --uc-frame-color: var(--uc-accent-color);
  --uc-toolbar-bgcolor: hsl(233, 42%, 15%);
  --uc-toolbar-color: var(--ui-text-100);
  --uc-toolbar-field-color: hsl(240, 60%, 99%);
  --uc-arrowpanel-background: hsl(233, 36%, 11%);
  --uc-arrowpanel-color: hsl(213, 43%, 89%);
  --uc-arrowpanel-very-faint: hsla(236, 100%, 83%, 0.05);
  --uc-arrowpanel-faint: hsla(236, 100%, 83%, 0.1);
  --uc-arrowpanel-dimmed: hsla(236, 100%, 83%, 0.17);
  --uc-arrowpanel-dimmed-further: hsla(234, 100%, 83%, 0.25);
  --uc-arrowpanel-dimmed-even-further: hsla(232, 100%, 85%, 0.3);
  --uc-desaturate-faint: hsla(236, 60%, 83%, 0.1);
  --uc-desaturate-semi-faint: hsla(236, 60%, 83%, 0.13);
  --uc-desaturate-dimmed: hsla(236, 60%, 83%, 0.17);
  --uc-desaturate-dimmed-further: hsla(234, 60%, 83%, 0.25);
  --uc-desaturate-dimmed-even-further: hsla(232, 60%, 85%, 0.3);
  --uc-content-text-a50: hsla(236, 100%, 85%, 0.5);
  --uc-content-text-a80: hsla(236, 50%, 85%, 0.8);
  --uc-panel-button-solid: hsl(234, 24%, 35%);
  --uc-panel-button-faint-solid: hsl(234, 27%, 23%);
  --uc-panel-box-solid: hsl(233, 29%, 18%);
  --button-solid-hover-background: hsl(232, 29%, 26%);
  --button-solid-active-background: hsl(234, 26%, 30%);
  --button-solid-checked-background: hsl(232, 31%, 23%);
  --uc-toolbarbutton-checked-background: hsla(236, 82%, 83%, 0.13);
  --uc-toolbarbutton-hover-background: hsla(236, 82%, 83%, 0.17);
  --uc-toolbarbutton-active-background: hsla(234, 82%, 83%, 0.22);
  --uc-toolbarbutton-checked-active-background: hsla(232, 82%, 83%, 0.27);
  --uc-toolbarbutton-badge-bgcolor: var(--pink-action);
  --uc-panel-description-color: hsla(235, 48%, 89%, 70%);
  --uc-panel-shortcut-color: hsla(235, 27%, 73%, 70%);
  --uc-panel-shortcut-focus: hsla(235, 32%, 80%, 95%);
  --uc-places-cell-focus-bgcolor: hsl(232, 30%, 19%);
  --uc-places-cell-hover-bgcolor: hsl(232, 30%, 23%);
  --light-on-dark-button-text-color: #fff;

  --menupopup-inner-box-margin: 0px;
  --panel-inner-box-margin: 4px;
  --uc-menupopup-shadow: none;
  --uc-panel-shadow: none;
  --searchbar-popup-border: 1px solid var(--uc-menu-border-color);
  --searchbar-popup-border-radius: 0 0 4px 4px;
  --searchbar-popup-box-shadow: 0 0 10px 3px hsla(0, 0%, 0%, 0.15);
  /* if you increase the blur or spread values in the variable above, increase
  the variable below ⬇ commensurately */
  --searchbar-popup-box-shadow-size: 15px;
  --uc-toolbarbutton-inner-padding: 6px;
  --webextension-panel-border-radius: 5px;
  --menupopup-margin: calc(0px - var(--menupopup-inner-box-margin));
  --menupopup-background: transparent;
  /* the "- 1px" below is to account for 1px menu borders */
  --menupopup-child-margin-block-start: calc(-4px - 1px - var(--menupopup-inner-box-margin));
  --menupopup-child-margin-inline-start: calc(2px - var(--menupopup-inner-box-margin));
  --menupopup-padding: 0px;
  --menupopup-inner-padding-magnitude: 4px;
  --menupopup-inner-padding: var(--menupopup-inner-padding-magnitude) 0;
  --uc-panel-separator-margin-vertical: 4px;
  --uc-panel-separator-margin-horizontal: 4px;
  --uc-panel-separator-margin: var(--uc-panel-separator-margin-vertical) var(--uc-panel-separator-margin-horizontal);
  --uc-arrowpanel-menuitem-margin-block: 0;
  --uc-arrowpanel-menuitem-margin-inline: 4px;
  --uc-arrowpanel-menuitem-padding-block: 6px;
  --uc-arrowpanel-menuitem-padding-inline: 6px;
  --uc-arrowpanel-root-padding: 12px;
  --arrowpanel-subviewbutton-iconic-gap: 8px;
  --context-iconic-margin-start: 5px;
  --context-iconic-margin-end: 6px;
  --context-iconic-margin: var(--context-iconic-margin-start, 5px) var(--context-iconic-margin-end, 6px);
  --context-checkbox-margin-start: calc(1px + var(--context-iconic-margin-start, 5px));
  --context-checkbox-margin-end: calc(1px + var(--context-iconic-margin-end, 6px));
  --context-checkbox-margin: var(--context-checkbox-margin-start, 6px) var(--context-checkbox-margin-end, 7px);
  --context-iconic-composite-width: calc(16px + var(--context-iconic-margin-start) + var(--context-iconic-margin-end));
  --context-padding-inline: var(--context-iconic-composite-width) 0px;
  --panel-menulist-padding: 4px 6px;
  --menulist-dropmarker-margin: 8px 0;
  --menupopup-border-radius: 5px;
  --panel-border-radius-mini: 3px;
  --context-menuitem-border-radius: 2.6px;
  --general-button-border-radius: 2.6px;
  --menu-right-bg: none;
  --menu-right-img: url(chrome://userchrome/content/menu-arrow.svg);
  --menu-right-margin: 4px;
  --menu-right-size: 14px;
  --menu-separator-margin: 4px;

  --chrome-scrollbar-width: thin;
  --chrome-scrollbar-track-color: transparent;
  --chrome-scrollbar-thumb-color: rgba(110, 110, 110, 0.3);

  --uc-font-weight-extrabold: 700;
  --uc-font-weight-bold: 600;
  --uc-font-weight-semibold: 500;
  --uc-font-weight-thin: 400;

  --popup-on-popup-contrast-bg: hsl(233, 33%, 17%);
  --autocomplete-background: var(--popup-on-popup-contrast-bg);
  --ui-secondary-bg: hsl(234, 39%, 10%);
  --ui-tertiary-bg: hsl(233, 39%, 8.5%);
  --ui-quaternary-bg: hsl(233, 34%, 8.5%);
  --global-focus-shadow-color: var(--purple-30-a50);
  --global-focus-outline-color: var(--purple-30);
  --global-focus-outline-width: 2px;
  --global-focus-outline: var(--global-focus-outline-width) solid var(--global-focus-outline-color);
  --global-focus-shadow: 0 0 0 2px var(--global-focus-shadow-color);
  --global-focus-outline-offset: -2px;
  --primary-color-faint: hsl(236, 40%, 56%);

  --acrylic-blur: blur(15px);
  --acrylic-texture: url(chrome://userchrome/content/texture/lightnoise.png);
  --acrylic-blue: hsla(233.3, 39.1%, 9%, 0.58);
  --dialog-bgcolor: hsla(240, 5.9%, 6.7%, 0.85);
  --dialog-box-bgcolor: hsla(232, 100%, 75%, 8%);
  --dialog-box-bgcolor-dim: hsla(240, 100%, 70%, 3%);
  --dialog-box-border-color: hsla(232, 100%, 85%, 0.2);
  --dialog-box-border-hover: hsla(232, 100%, 85%, 0.3);
  --blurred-dialog-border-color: hsla(240, 7%, 20%, 0.8);
  --alertbox-bgcolor: var(--uc-content-box-background-dim);
  --notification-menu-color: var(--uc-parent-page-color);
  --ui-disabled-alpha: 0.5;
  --uc-menu-disabled-color: hsla(213, 43%, 89%, var(--ui-disabled-alpha, 0.5));
  --uc-menu-semi-disabled-color: hsla(213, 43%, 89%, 0.7);
  --primary-button-disabled-background: hsla(240, 83%, 79%, var(--ui-disabled-alpha, 0.5));
  --primary-button-disabled-color: hsla(240, 0%, 100%, var(--ui-disabled-alpha, 0.5));

  /* this url is for the icon that displays in the identity box when entering
  text in the urlbar, and on the new tab page. my script
  searchModeIndicatorIcons.uc.js detects your default engine and looks for a
  matching icon in chrome/resources/engines/ so for example if your default
  engine is Google, it'll find google.svg in that folder (it comes with this
  theme) and dynamically set this variable to the url for google.svg. if you set
  your default engine to something that doesn't have a matching icon included
  with the theme, you can add your own icon to this folder. just make sure the
  file ends in .svg, .png, .jpg, or .jpeg and matches the name of the default
  engine. the name of the engine is whatever appears in the search shortcuts
  list in about:preferences#search. so let's say you download an engine for
  amazon, and the name that appears in the list is "Search with Amazon".
  technically, the script is capable of reducing "Search with Amazon" to
  "amazon" and linking it to the included amazon icon. but if you want to add an
  icon for a search engine that has spaces in its name, write it out in
  lowercase without spaces. so "Search with Amazon" would become
  "searchwithamazon" and "Duck Duck Go" would become "duckduckgo" for example.
  if your search engine is displayed in non-latin characters then use exactly
  those characters when naming the icon file. if the script still doesn't work,
  you can override this directly in custom-chrome.css by adding this rule:
  :root, .anonymous-content-host{
    --default-search-identity-icon: url(chrome://userchrome/content/engines/my-engine-icon.svg) !important;
  }
  */
  --default-search-identity-icon: url(chrome://userchrome/content/search-glass.svg);
  --identity-box-solid-bg: hsl(233, 34%, 22%);
  --identity-box-focus-bg: hsl(234, 34%, 23%);
  --secure-color: hsl(119, 80%, 60%);
  --secure-text-color: hsl(129, 100%, 70%);
  --warning-color: hsl(355, 100%, 66%);
  --uc-warning-background: hsla(2, 100%, 66%, 25%);
  --warning-text-color: hsl(355, 100%, 70%);
  --warning-icon-background: hsl(358, 86%, 63%);
  --warning-icon-detail: hsl(354, 69%, 30%);
  --warning-icon-stroke: hsl(358, 100%, 60%);
  --low-warning-background: hsla(48, 100%, 66%, 0.2);
  --low-warning-color: hsl(40, 100%, 57%);
  --low-warning-text-color: hsl(40, 100%, 70%);
  --low-warning-border-color: hsla(35, 70%, 76%, 0.2);
  --low-warning-icon-background: hsl(44, 95%, 60%);
  --low-warning-icon-detail: hsl(32, 52%, 35%);
  --low-warning-icon-stroke: hsl(40, 93%, 53%);
  --protection-idle-color: hsl(205, 100%, 67%);
  --protection-active-color: hsl(358, 98%, 66%);
  --update-badge-bg: hsl(125, 81%, 57%);
  --update-badge-color: hsl(118, 89%, 24%);
  --update-badge-inactive: hsl(227, 19%, 48%);
  --attention-color: hsl(224, 100%, 71%);
  --eom-warning-bg: hsla(48, 100%, 66%, 0.15);
  --eom-warning-bg-hover: hsla(48, 100%, 75%, 0.23);
  --eom-warning-bg-active: hsla(48, 100%, 80%, 0.27);
  --eom-error-bg: hsla(2, 100%, 66%, 0.15);
  --eom-error-bg-hover: hsla(2, 100%, 76%, 0.23);
  --eom-error-bg-active: hsla(2, 100%, 80%, 0.27);
  --uc-destructive-bgcolor: hsl(350.1, 82%, 56.2%);
  --uc-destructive-hover-bgcolor: hsl(346, 86%, 46.6%);
  --uc-destructive-active-bgcolor: hsl(345.8, 90%, 40%);
  --uc-destructive-color: var(--ui-text-100);

  --global-selection-bgcolor: hsla(245, 100%, 70%, 0.55);
  --global-selection-color: white;
  --global-selection-bgcolor-disabled: hsla(243, 35%, 65%, 0.45);
  --ui-selection-bgcolor: hsla(0, 0%, 100%, 0.9);
  --ui-selection-color: hsl(236, 20%, 16%);
  --ui-selection-bgcolor-disabled: hsla(0, 0%, 100%, 0.7);
  --content-selection-bgcolor: hsla(0, 0%, 100%, 0.8);
  --content-selection-color: hsl(240, 4%, 10%);
  --content-selection-bgcolor-disabled: hsla(0, 0%, 100%, 0.7);
  --pdf-selection-bgcolor: hsla(245, 100%, 46.7%, 0.25);
  --pdf-highlight-bgcolor: hsla(345, 100%, 40%, 0.35);

  /* controls the color of the search highlights in about:preferences */
  --solid-selection-bgcolor: var(--pink-action);
  /* controls the color of the little tooltips that appear on search highlighted
  buttons in about:preferences */
  --aboutPrefs-find-tags: var(--pink-action);

  --uc-tab-background: var(--lwt-accent-color);
  --uc-tab-selected: var(--uc-toolbar-bgcolor);
  --uc-tab-hover: hsl(231, 49%, 11%);
  --uc-tab-multi: hsl(231, 50%, 11%);
  --uc-tab-multi-hover: hsl(231, 47%, 13%);
  --uc-tab-pinned-hover: hsl(231, 49%, 11%);
  --uc-tab-focused-highlight: hsl(231, 36%, 22%);
  --uc-tab-focused-hover: linear-gradient(color-mix(in srgb, var(--uc-tab-focused-highlight) 50%, var(--uc-toolbar-bgcolor)), var(--uc-toolbar-bgcolor));
  --multiselected-color: hsl(241, 50%, 51%);

  /* width of the spacer between the tabs and the window control buttons. this
  is basically the only drag space left, so treat it conservatively. I design
  this theme based on my own use, and I very rarely move browser windows by
  dragging them. so I can afford to make the spacers very small. you might
  prefer a larger spacer width. override this in custom-chrome.css. */
  --titlebar-spacer-width: 32px;
  /* subtle gradient drawn behind the window control buttons. */
  --titlebar-gradient: radial-gradient(circle at 100% 0%, hsl(231, 45%, 13%), var(--uc-accent-color) 140px);
  --titlebar-gradient-left: radial-gradient(circle at 0% 0%, hsl(231, 45%, 13%), var(--uc-accent-color) 140px);
  --titlebar-background: var(--lwt-accent-color) var(--titlebar-gradient);

  --search-box-color: hsl(229, 32%, 23%);
  --search-box-focus: hsl(229, 27%, 27%);
  --search-box-null: hsl(230, 30%, 20%);
  --search-box-focus-outline-color: var(--global-focus-outline-color);
  --textbox-button-hidden: hsla(240, 100%, 89%, 0);
  --confirmation-hint-color: var(--ui-text-100);
  --confirmation-hint-bgcolor: hsl(240, 60%, 59%);
  --confirmation-hint-border-color: hsl(240, 60%, 59%);
  --picture-in-picture-toggle-bgcolor: hsl(244, 100%, 63%);

  --ui-textbox-bgcolor: hsl(233, 24%, 28%);
  --ui-textbox-focus-bgcolor: hsl(232, 22%, 34%);
  --ebp-menulist-background-color: hsl(232, 24%, 32%);
  --ebp-menulist-menuitem-hover-background-color: hsl(232, 21%, 40%);
  --ebp-menulist-separator-color: hsl(232, 21%, 43%);
  --ebp-favicon-background-color: var(--dialog-bgcolor);
  --ebmp-hover-bgcolor: hsl(233, 24%, 33%);
  --ebmp-focus-bgcolor: hsl(233, 24%, 38%);
  --ebmp-double-focus-bgcolor: hsl(233, 22%, 43%);

  --urlbar-base-font-weight: 400;
  --urlbar-result-strong-font-weight: 400;
  --urlbar-results-bgcolor: var(--ui-secondary-bg);
  /* the width of a search one-off button in the urlbar */
  --urlbar-one-offs-engine-width: 28px;
  --loading-throbber-fill: hsl(225, 100%, 75%);
  --busy-throbber-fill: hsl(218, 90%, 85%);
  --sanitize-border-color: hsla(0, 0%, 5%, 0.2);
  --menu-separator-color: hsl(233, 25%, 23%);
  --uc-toolbar-field-bgcolor: hsl(233, 28%, 25%);
  --uc-toolbar-field-bgcolor-brighter: hsl(233, 26%, 27%);
  --uc-toolbar-field-bgcolor-disabled: hsl(233, 30%, 21%);
  --urlbar-input-bgcolor: var(--uc-toolbar-field-bgcolor);
  --urlbar-input-bgcolor-brighter: var(--uc-toolbar-field-bgcolor-brighter);
  --urlbar-input-bgcolor-disabled: var(--uc-toolbar-field-bgcolor-disabled);
  --urlbar-dim-button-bgcolor: hsla(0, 0%, 0%, 0.09);
  --uc-urlbar-container-height: 38px;
  --uc-menubar-searchbar-width: 256px;
  --uc-tab-min-height: 35px;
  --tab-max-width: 100vw;
  --tab-scrollbuttons-display: none;
  /* how round should tab buttons be? e.g. the close button or the sound icon.
  2px yields a rounded square. 50% yields a circle. this affects actual tab
  buttons, as well as buttons in tab-like elements like the all-tabs menu and my
  vertical tabs pane script. personally I've settled on circles for small
  buttons, rounded squares for big buttons. */
  --tab-button-border-radius: 2.6px;
  --tree-row-height: 24px;
  --menuitem-height: 26px;
  --subviewbutton-height: 28px;
  --subview-subheader-padding: 5px 3px;
  --findbar-height: 22px;
  --findbar-min-width: 225px;
  --findbar-max-width: 500px;
  --textbox-outline-transition-duration: 100ms;
  --findbar-textbox-bg-transition-duration: 200ms;
  --findbar-textbox-bg-notfound-transition-duration: 300ms;
  --default-identity-icon: url(chrome://userchrome/content/info-filled.svg);
  /* icon used for screenshot buttons. I prefer the second one, but use the
  first one it if you prefer the vanilla icon */
  /* --screenshot-icon: url(chrome://userchrome/content/skin/screenshot.svg); */
  --screenshot-icon: url(chrome://userchrome/content/devtools/command-screenshot.svg);
  --fxa-ui-img: url(chrome://userchrome/content/fxa/avatar-big.svg);
  --uc-firefox-view-icon: url(chrome://userchrome/content/engines/searchfox.svg);
  --uc-smooth-timing-function: cubic-bezier(0.07, 0.78, 0.21, 0.95);

  --download-button-focus-within-bg: var(--button-bgcolor);
  --download-button-hover-bg: var(--button-hover-bgcolor);
  --download-button-active-bg: var(--button-active-bgcolor);
  /* if you prefer the old downloads panel highlight/hover gradient effect, uncomment this: */
  /* --download-button-hue: 236.86;
  --download-button-hover-bg: linear-gradient(
    to right,
    hsla(var(--download-button-hue), 100%, 81%, 0.15) 7.1%,
    hsla(var(--download-button-hue), 94%, 80%, 0.13) 20.9%,
    hsla(var(--download-button-hue), 94%, 80%, 0.1) 34.1%,
    hsla(var(--download-button-hue), 97%, 78.94%, 0.07) 47.1%,
    hsla(var(--download-button-hue), 96%, 78.94%, 0.04) 60%,
    hsla(var(--download-button-hue), 95%, 76.94%, 0.02) 80%,
    hsla(var(--download-button-hue), 90%, 73.94%, 0.005) 96.3%
  );
  --download-button-active-bg: linear-gradient(
    to right,
    hsla(var(--download-button-hue), 100%, 84%, 0.18) 7.1%,
    hsla(var(--download-button-hue), 94%, 83%, 0.16) 20.9%,
    hsla(var(--download-button-hue), 94%, 83%, 0.13) 34.1%,
    hsla(var(--download-button-hue), 97%, 81.94%, 0.1) 47.1%,
    hsla(var(--download-button-hue), 96%, 81.94%, 0.07) 60%,
    hsla(var(--download-button-hue), 95%, 79.94%, 0.05) 80%,
    hsla(var(--download-button-hue), 90%, 76.94%, 0.01) 96.3%
  ); */

  --ctrlTab-overlay-color: hsla(240, 3%, 4%, 0.5);
  --ctrlTab-panel-disabled-bgcolor: hsla(240, 2%, 9%, 0.8);
  --ctrlTab-panel-disabled-focused-bgcolor: hsla(240, 8%, 3%, 0.9);
  --ctrlTab-panel-bgcolor: hsla(240, 3%, 4%, 0.9);
  --ctrlTab-panel-focused-bgcolor: var(--indigo-45);

  --indigo-30: hsl(230, 87%, 70%);
  --indigo-40: hsl(232, 82%, 60%);
  --indigo-45: hsl(233, 72%, 55%);
  --indigo-50: hsl(234, 62%, 50%);

  --purple-20: hsl(240, 100%, 80%);
  --purple-25: hsl(240, 100%, 75%);
  --purple-30: hsl(239, 100%, 70%);
  --purple-30-a50: hsla(240, 100%, 70%, 0.5);
  --purple-35: hsl(245, 100%, 65%);
  --purple-40: hsl(250, 100%, 60%);
  --purple-40-a10: hsla(250, 100%, 60%, 0.1);
  --purple-40-a30: hsla(250, 100%, 60%, 0.3);
  --purple-40-a50: hsla(250, 100%, 60%, 0.5);
  --purple-45: hsl(250, 87%, 55%);
  --purple-50: hsl(256, 87%, 50%) !important;
  --purple-55: hsl(256, 87%, 45%);
  --purple-50-a30: hsla(256, 87%, 50%, 0.3);
  --purple-60: hsl(258, 95%, 40%) !important;
  --purple-70: hsl(256, 97%, 30%);
  --purple-80: hsl(254, 100%, 20%);

  --pink-40: hsl(340, 73%, 60%);
  --pink-35: hsl(340, 73%, 65%);
  --pink-30: hsl(340, 73%, 70%);
  --pink-action: hsl(340, 73%, 58%);

  --uc-parent-page-color: hsl(212, 43%, 90%);
  --uc-parent-link-color: var(--purple-35);
  --uc-parent-link-color-hover: var(--purple-30);
  --uc-parent-link-color-active: var(--purple-30);
  --uc-parent-primary-button-background: var(--purple-40);
  --uc-parent-primary-button-background-hover: var(--purple-35);
  --uc-parent-primary-button-background-active: var(--purple-30);
  --uc-parent-primary-button-text-color: var(--light-on-dark-button-text-color);

  --uc-content-page-background: var(--in-content-bg-dark);
  --uc-content-page-background-light: hsl(240, 3%, 12%);
  --uc-content-page-color: var(--uc-parent-page-color);
  --uc-content-box-background: hsl(240, 2%, 14%);
  --uc-content-box-background-odd: hsl(260, 3%, 19%);
  --uc-content-box-background-dim: hsl(240, 2%, 12%);
  --uc-content-box-border-color: hsla(240, 7%, 98%, 0.1);
  --uc-content-button-background: hsla(240, 3%, 70%, 0.05);
  --uc-content-button-background-hover: hsla(240, 4%, 70%, 0.1);
  --uc-content-button-background-active: hsla(240, 5%, 70%, 0.15);
  --uc-content-button-background-solid: hsl(240, 3%, 18%);
  --uc-content-border-color: hsla(240, 7%, 98%, 0.1);
  --uc-content-border-hover: hsla(240, 7%, 98%, 0.15);
  --uc-content-border-active: hsla(240, 7%, 98%, 0.2);

  --uc-checkbox-border-color: hsla(232, 100%, 85%, 0.2);
  --uc-checkbox-checked-border-color: transparent;
  --uc-checkbox-unchecked-bgcolor: var(--uc-arrowpanel-faint);
  --uc-checkbox-unchecked-hover-bgcolor: var(--uc-arrowpanel-dimmed);
  --uc-checkbox-unchecked-active-bgcolor: var(--uc-arrowpanel-dimmed-further);
  --uc-checkbox-checked-bgcolor: var(--uc-parent-primary-button-background);
  --uc-checkbox-checked-color: var(--uc-parent-primary-button-text-color);
  --uc-checkbox-checked-hover-bgcolor: var(--uc-parent-primary-button-background-hover);
  --uc-checkbox-checked-active-bgcolor: var(--uc-parent-primary-button-background-active);

  --uc-switch-off-background: hsl(233, 15%, 32%);
  --uc-switch-off-hover-background: hsl(233, 18%, 27%);
  --uc-switch-off-active-background: hsl(233, 19%, 24.5%);
  --uc-switch-off-hover-border: hsl(233, 15%, 32%);

  accent-color: var(--global-focus-outline-color);

  &[fxastatus="not_configured"] {
    --fxa-ui-img: url(chrome://userchrome/content/fxa/avatar-empty-big.svg);
  }

  &[fxastatus="login-failed"],
  &[fxastatus="unverified"] {
    --fxa-ui-img: url(chrome://userchrome/content/fxa/avatar-alert-big.svg);
  }
}

menupopup,
.in-menulist,
#ContentSelectDropdown,
popupnotification,
#customization-container,
#mainPopupSet panel,
toolbar panel,
#customizationui-widget-panel {
  --checkbox-border-color: var(--uc-checkbox-border-color) !important;
  --checkbox-checked-border-color: var(--uc-checkbox-checked-border-color) !important;
  --checkbox-unchecked-bgcolor: var(--uc-checkbox-unchecked-bgcolor) !important;
  --checkbox-unchecked-hover-bgcolor: var(--uc-checkbox-unchecked-hover-bgcolor) !important;
  --checkbox-unchecked-active-bgcolor: var(--uc-checkbox-unchecked-active-bgcolor) !important;
  --checkbox-checked-bgcolor: var(--uc-checkbox-checked-bgcolor) !important;
  --checkbox-checked-color: var(--uc-checkbox-checked-color) !important;
  --checkbox-checked-hover-bgcolor: var(--uc-checkbox-checked-hover-bgcolor) !important;
  --checkbox-checked-active-bgcolor: var(--uc-checkbox-checked-active-bgcolor) !important;
}

/* SF Pro is a bit heavier than Segoe UI so adjust font weights on certain elements */
/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("userChrome.css.mac-ui-fonts") {
  :root,
  .anonymous-content-host {
    --uc-font-weight-extrabold: 600;
    --uc-font-weight-bold: 500;
    --uc-font-weight-semibold: 400;
    --uc-font-weight-thin: 300;
  }
}

/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("userChrome.css.menupopup-shadows") {
  :root,
  .anonymous-content-host {
    --menupopup-inner-box-margin: 4px !important;
    --panel-inner-box-margin: 4px;
    --uc-menupopup-shadow: var(--tooltip-box-shadow) !important;
    --uc-panel-shadow: var(--tooltip-box-shadow) !important;
  }
}

/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("userChrome.tabs.drag-scrolling.enabled") {
  :root,
  .anonymous-content-host {
    --tab-scrollbuttons-display: flex;
  }
}