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

/* handles system pages and injects some important global variables into extension pages */

@-moz-document regexp("view-source:.*") {
  @media (prefers-color-scheme: dark) {
    ::selection {
      color: var(--content-selection-color) !important;
      background-color: var(--content-selection-bgcolor) !important;
    }

    .highlight :is(.start-tag, .end-tag)::selection {
      color: #801f1f !important;
    }

    .highlight .comment::selection {
      color: #235c23 !important;
    }

    .highlight .cdata::selection {
      color: #77254e !important;
    }

    .highlight :is(.doctype, .markupdeclaration)::selection {
      color: #555 !important;
    }

    .highlight .entity::selection {
      color: #884026 !important;
    }

    .highlight .attribute-value::selection {
      color: #233d6d !important;
    }

    .highlight .pi::selection {
      color: #6b228f !important;
    }

    .highlight .error::selection {
      text-decoration-color: #801f1f !important;
    }
  }
}

@-moz-document regexp("^(about:|chrome:|moz-extension:).*") {
  :root {
    /* --checkbox-border-color: var(--uc-checkbox-border-color);
    --checkbox-checked-border-color: var(--uc-checkbox-checked-border-color);
    --checkbox-unchecked-bgcolor: var(--uc-checkbox-unchecked-bgcolor);
    --checkbox-unchecked-hover-bgcolor: var(--uc-checkbox-unchecked-hover-bgcolor);
    --checkbox-unchecked-active-bgcolor: var(--uc-checkbox-unchecked-active-bgcolor); */
    --checkbox-checked-bgcolor: var(--uc-checkbox-checked-bgcolor);
    --checkbox-checked-color: var(--uc-checkbox-checked-color);
    --checkbox-checked-hover-bgcolor: var(--uc-checkbox-checked-hover-bgcolor);
    --checkbox-checked-active-bgcolor: var(--uc-checkbox-checked-active-bgcolor);
  }

  html:not([role="dialog"]),
  html:not([role="dialog"]) *,
  html:not([role="dialog"]) body.activity-stream,
  window:not([chromehidden]),
  window:not([chromehidden]) > dialog,
  #downloadsListBox richlistitem,
  info-item,
  info-group,
  certificate-section {
    --background-color-canvas: var(--uc-content-page-background) !important;
    --in-content-page-background: var(--uc-content-page-background) !important;
    --in-content-page-color: var(--uc-content-page-color) !important;
    --in-content-text-color: var(--in-content-page-color) !important;
    --text-color: var(--in-content-page-color) !important;
    --in-content-accent-color: var(--purple-35) !important;
    --border-color: var(--in-content-border-color) !important;
    --in-content-border-color: var(--uc-content-border-color) !important;
    --in-content-border-hover: var(--uc-content-border-hover) !important;
    --in-content-border-active: var(--uc-content-border-active) !important;
    --in-content-box-background: var(--uc-content-box-background) !important;
    --in-content-box-background-odd: var(--uc-content-box-background-odd) !important;
    --in-content-box-background-dim: var(--uc-content-box-background-dim) !important;
    --in-content-box-border-color: var(--uc-content-box-border-color) !important;
    --in-content-box-info-background: var(--in-content-button-background-solid) !important;
    --background-color-box: var(--in-content-box-background) !important;
    --in-content-table-background: var(--in-content-box-background) !important;
    --in-content-table-header-background: var(--purple-40-a50) !important;
    --in-content-table-header-color: var(--in-content-primary-button-color) !important;
    --table-row-background-color-alternate: var(--in-content-box-background-odd) !important;
    --in-content-link-color: var(--purple-30) !important;
    --in-content-link-color-hover: var(--purple-25) !important;
    --in-content-link-color-active: var(--purple-20) !important;
    --in-content-link-visited-color: var(--pink-40) !important;
    --in-content-link-visited-color-hover: var(--pink-35) !important;
    --in-content-link-visited-color-active: var(--pink-30) !important;
    --link-color: var(--purple-30) !important;
    --link-color-hover: var(--purple-25) !important;
    --link-color-active: var(--purple-20) !important;
    --link-visited-color: var(--pink-40) !important;
    --link-visited-color-hover: var(--pink-35) !important;
    --link-visited-color-active: var(--pink-30) !important;
    --button-background-color: var(--uc-content-button-background) !important;
    --button-background-color-hover: var(--uc-content-button-background-hover) !important;
    --button-background-color-active: var(--uc-content-button-background-active) !important;
    --button-background-color-solid: var(--uc-content-button-background-solid) !important;
    --in-content-button-background: var(--uc-content-button-background) !important;
    --in-content-button-background-hover: var(--uc-content-button-background-hover) !important;
    --in-content-button-background-active: var(--uc-content-button-background-active) !important;
    --in-content-button-background-solid: var(--uc-content-button-background-solid);
    --in-content-button-text-color-hover: var(--light-on-dark-button-text-color) !important;
    --in-content-button-text-color-active: var(--in-content-button-text-color-hover) !important;
    --button-text-color-hover: var(--light-on-dark-button-text-color) !important;
    --button-text-color-active: var(--in-content-button-text-color-hover) !important;
    --in-content-primary-button-background: var(--purple-40) !important;
    --in-content-primary-button-background-hover: var(--purple-35) !important;
    --in-content-primary-button-background-active: var(--purple-30) !important;
    --in-content-primary-button-text-color: var(--light-on-dark-button-text-color) !important;
    --in-content-primary-button-text-color-hover: var(--light-on-dark-button-text-color) !important;
    --button-background-color-primary: var(--purple-40) !important;
    --button-background-color-primary-hover: var(--purple-35) !important;
    --button-background-color-primary-active: var(--purple-30) !important;
    --button-text-color-primary: var(--light-on-dark-button-text-color) !important;
    --button-text-color-primary-hover: var(--light-on-dark-button-text-color) !important;
    --color-accent-primary: var(--purple-40) !important;
    --color-accent-primary-hover: var(--purple-35) !important;
    --color-accent-primary-active: var(--purple-30) !important;
    --in-content-button-border-radius: var(--general-button-border-radius) !important;
    --in-content-item-selected: var(--purple-40) !important;
    --in-content-item-hover: color-mix(in srgb, var(--purple-30) 45%, transparent) !important;
    --in-content-item-hover-text: var(--in-content-text-color) !important;
    --focus-outline-color: var(--global-focus-outline-color) !important;
    --in-content-focus-outline-color: var(--focus-outline-color) !important;
    --focus-outline-offset: 2px !important;
    --default-focusring: var(--global-focus-outline-width) solid var(--global-focus-outline-color) !important;
    --newtab-background-color: var(--in-content-page-background) !important;
    --newtab-text-primary-color: var(--in-content-page-color) !important;
    --lwt-sidebar-background-color: var(--in-content-box-background) !important;
    --lwt-sidebar-text-color: var(--in-content-page-color) !important;
    --newtab-search-header-background-color: color-mix(in srgb, var(--uc-content-page-background) 70%, transparent) !important;
    --newtab-search-header-background-intermediate: color-mix(in srgb, var(--uc-content-page-background) 80%, transparent) !important;
    --newtab-seperator-line-color: var(--in-content-button-background-hover) !important;
    --newtab-modal-color: var(--in-content-box-background) !important;
    --newtab-focus-outline: var(--purple-40-a50) !important;
    --newtab-focus-border: var(--purple-40) !important;
    --newtab-focus-border-selected: var(--purple-30) !important;
    --newtab-textbox-background-color: var(--in-content-button-background) !important;
    --newtab-textbox-focus-color: var(--purple-40) !important;
    --newtab-primary-action-background: var(--in-content-primary-button-background-hover) !important;
    --newtab-primary-action-background-hover: color-mix(in srgb, var(--purple-30) 60%, var(--newtab-primary-action-background)) !important;
    --newtab-primary-action-background-active: color-mix(in srgb, var(--purple-25) 60%, var(--newtab-primary-action-background)) !important;
    --newtab-primary-element-text-color: var(--ui-text-80) !important;
    --newtab-element-secondary-color: var(--in-content-button-background-hover) !important;
    --newtab-element-secondary-color-hover: color-mix(in srgb, var(--ui-text-40) 50%, var(--in-content-button-background-solid)) !important;
    --newtab-element-secondary-color-active: color-mix(in srgb, var(--ui-text-50) 50%, var(--in-content-button-background-solid)) !important;
    --newtab-button-primary-color: var(--in-content-primary-button-background-hover) !important;
    --newtab-border-primary-color: var(--in-content-button-background-active) !important;
    --newtab-background-color-secondary: var(--in-content-button-background-solid) !important;
    --newtab-card-active-outline-color: var(--in-content-button-background) !important;
    --newtab-link-primary-color: var(--in-content-link-color-active) !important;
    --newtab-link-secondary-color: var(--in-content-link-color) !important;
    --newtab-topsites-background-color: var(--in-content-button-background) !important;
    --customize-menu-background: var(--in-content-box-background) !important;
    --customize-menu-secondary-action-background: var(--in-content-button-background) !important;
    --customize-menu-secondary-action-background-hover: var(--in-content-button-background-hover) !important;
    --customize-menu-secondary-action-background-active: var(--in-content-button-background-active) !important;
    --customize-menu-first-shadow: hsla(250, 3%, 2%, 0.2) !important;
    --customize-menu-second-shadow: hsla(250, 3%, 2%, 0.4) !important;
    --newtab-contextmenu-background-color: var(--in-content-table-background) !important;
    --newtab-contextmenu-button-color: var(--in-content-box-background) !important;
    --newtab-card-background-color: var(--in-content-box-background) !important;
    --newtab-card-placeholder-color: var(--in-content-box-background) !important;
    --newtab-search-text-color: var(--ui-text-70) !important;
    --newtab-search-first-shadow: rgba(21, 20, 26, 0.5);
    --newtab-search-second-shadow: rgba(21, 20, 26, 0.75);
  }

  moz-input-search {
    --input-text-border-color: var(--in-content-box-border-color) !important;
    --input-text-border-color-disabled: var(--border-color-interactive-disabled);
    --input-text-border-radius: 4px !important;
    --input-text-background-color: var(--background-color-box) !important;
    --input-text-color: var(--in-content-page-color) !important;
  }

  .highlighting-group {
    --section-highlight-background-color: color-mix(in srgb, var(--color-accent-primary) 8%, transparent) !important;
  }

  .privacy-detailedoption:not(.selected) {
    background-color: var(--in-content-box-background) !important;
  }

  html:not([role="dialog"]) richlistitem[selected] * {
    --in-content-button-background: var(--purple-50) !important;
    --in-content-button-background-hover: var(--purple-55) !important;
    --in-content-button-background-active: var(--purple-60) !important;
    --in-content-button-text-color: var(--in-content-item-selected-text) !important;
    --in-content-button-text-color-hover: var(--in-content-item-selected-text) !important;
    --in-content-button-text-color-active: var(--in-content-button-text-color-hover) !important;
    --in-content-focus-outline-color: var(--in-content-item-selected-text) !important;
  }

  html:not([role="dialog"]) richlistitem menulist {
    border-radius: 0 !important;
    outline-offset: var(--focus-outline-offset, 2px) !important;
    outline: none !important;
  }

  window:not([chromehidden]) > dialog richlistbox[seltype="multiple"]:focus > richlistitem[current="true"],
  window:not([chromehidden]) > dialog richlistbox.theme-listbox:focus > richlistitem[current="true"] {
    outline: none !important;
  }

  body:not(.inline-onboarding) .fixed-search .search-wrapper {
    /* temporarily disabled due to backdrop-filter being disabled. see https://bugzilla.mozilla.org/show_bug.cgi?id=1741779 */

    /* background-image: linear-gradient(
      180deg,
      var(--in-content-page-background) 0%,
      var(--newtab-search-header-background-intermediate) 50%,
      var(--newtab-search-header-background-color) 100%
    ) !important;
    background-color: transparent !important;
    backdrop-filter: blur(12px); */

    background-image: linear-gradient(180deg, var(--in-content-page-background) 0%, color-mix(in srgb, var(--uc-content-page-background) 80%, var(--in-content-page-background)) 50%, color-mix(in srgb, var(--uc-content-page-background) 70%, var(--in-content-page-background)) 100%) !important;
    background-color: transparent !important;
  }

  body:not(.inline-onboarding) .fixed-search.newtab-experience .search-handoff-button {
    background-color: var(--in-content-button-background-solid) !important;
  }

  .top-site-outer .top-site-icon {
    background-color: transparent !important;
  }

  .topsite-form .form-wrapper input[type="text"]:focus-visible {
    outline: none !important;
    border-color: var(--newtab-focus-border) !important;
  }

  [lwt-newtab-brighttext] .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) {
    background: var(--in-content-box-background) !important;
  }

  [lwt-newtab-brighttext] .ds-card .ds-card-link:hover header {
    color: var(--in-content-link-color-active) !important;
  }

  radio[focused="true"] > .radio-label-box {
    outline: none !important;
  }

  #categories > .category[selected],
  #categories > .category.selected {
    &:hover {
      background-color: color-mix(in srgb, currentColor 8%, transparent) !important;
      color: var(--color-accent-primary-hover) !important;

      &:active {
        background-color: color-mix(in srgb, currentColor 14%, transparent) !important;
        color: var(--color-accent-primary-active) !important;
      }
    }
  }

  #category-experimental > .category-icon {
    list-style-image: url(chrome://userchrome/content/material/test-tube-45-large.svg) !important;
  }

  .top-site-outer {
    border-radius: 6px !important;
  }

  .search-handoff-button,
  .top-site-outer .tile {
    border-radius: 4px !important;
  }

  .showPrivate .search-handoff-button {
    background-color: var(--newtab-textbox-background-color) !important;
    box-shadow: 0 3px 8px var(--newtab-search-first-shadow), 0 0 2px var(--newtab-search-second-shadow) !important;
    border: 1px solid transparent !important;
    color: var(--newtab-search-text-color) !important;
  }

  .showPrivate .search-handoff-button.focused {
    outline: 0;
    border: 1px solid var(--newtab-focus-border) !important;
    box-shadow: 0 0 0 2px var(--newtab-focus-outline) !important;
  }

  .showPrivate .fake-textbox {
    color: inherit !important;
  }

  .showPrivate .fake-caret {
    width: 0.6px !important;
    background: var(--newtab-search-text-color) !important;
  }

  .showPrivate .info {
    background-image: url(chrome://userchrome/content/skin/privateBrowsing.svg) !important;
    -moz-context-properties: fill, fill-opacity;
    fill: hsl(235, 100%, 71%);
  }

  .search-tooltip {
    color: var(--global-selection-color) !important;
    background-color: var(--aboutPrefs-find-tags) !important;
    border-color: color-mix(in srgb, black 18%, var(--aboutPrefs-find-tags)) !important;
  }

  .search-tooltip::before {
    border-top-color: color-mix(in srgb, black 18%, var(--aboutPrefs-find-tags)) !important;
  }

  .search-tooltip::after {
    border-top-color: var(--aboutPrefs-find-tags) !important;
  }

  #errorPageContainer .button-container button {
    border-color: var(--in-content-box-border-color) !important;
  }

  #errorPageContainer .button-container button.primary {
    border-color: var(--uc-checkbox-checked-border-color) !important;
  }

  .certerror #badCertAdvancedPanel {
    border-radius: var(--menupopup-border-radius, 5px);
  }

  .long-hex {
    border-block: 1px solid transparent;
    padding-block: 0 !important;
  }

  @-moz-document regexp("^(about:|chrome:|moz-extension:).*") {
    mark {
      background-color: var(--solid-selection-bgcolor, hsl(340, 73%, 58%)) !important;
      color: white !important;
    }
  }

  message-bar,
  moz-message-bar {
    &:is([type="system"], [type="info"], [type="generic"], :not([type])) {
      --message-bar-background-color: var(--grey-60) !important;
      --message-bar-text-color: var(--text-color) !important;
    }

    &[type="warning"]:not([message-bar-type="infobar"]) {
      --message-bar-background-color: var(--low-warning-background) !important;
      --message-bar-text-color: var(--text-color) !important;
    }

    &[type="error"]:not([message-bar-type="infobar"]) {
      --message-bar-background-color: color-mix(in srgb, transparent 15%, var(--uc-warning-background)) !important;
      --message-bar-text-color: var(--text-color) !important;
    }

    &[type="critical"]:not([message-bar-type="infobar"]) {
      --message-bar-background-color: color-mix(in srgb, hsla(-2, 100%, 60%, 0.5) 45%, var(--uc-warning-background)) !important;
      --message-bar-text-color: var(--text-color) !important;
    }

    &[type="success"]:not([message-bar-type="infobar"]) {
      --message-bar-background-color: color-mix(in srgb, transparent 75%, var(--secure-color)) !important;
      --message-bar-text-color: var(--text-color) !important;
    }
  }

  @-moz-document url-prefix("about:addons") {
    link[rel="stylesheet"] {
      &[href="chrome://global/content/elements/message-bar.css"],
      &[href="chrome://global/content/elements/moz-message-bar.css"] {
        ~ .container {
          padding: 8px !important;
          border-radius: 0 !important;
          flex-grow: 1;

          .content {
            display: flex !important;
            margin-inline: 8px 0 !important;
            gap: 4px 12px !important;
            justify-content: space-between !important;

            + .spacer:last-child {
              display: none;
            }

            .icon-container {
              margin-inline-start: 0 !important;
            }
          }
        }
      }
    }

    message-bar,
    moz-message-bar {
      &:not([hidden]) {
        display: flex !important;
        flex-flow: row nowrap !important;
        margin-top: 15px !important;
        overflow: hidden;
        margin-inline: -15.5px !important;
        border: 0 !important;
      }

      > span {
        white-space: break-spaces !important;
        flex-shrink: 1;
        flex-grow: 1;
        overflow: hidden;
        overflow-wrap: break-word !important;
        text-overflow: ellipsis !important;
      }

      > button {
        display: inline-block !important;
        flex-shrink: 0;
        margin: 0 !important;
        cursor: pointer;
      }
    }

    .addon-badge {
      border: 1px solid transparent !important;
      width: 22px !important;
      height: 22px !important;
      border-radius: 11px !important;
    }

    .addon-badge-private-browsing-allowed {
      background-color: var(--purple-40) !important;
      border-color: var(--purple-30) !important;
      background-position: center !important;
      background-size: 15px !important;
    }

    .addon-badge-recommended {
      background-color: hsl(40, 100%, 43%) !important;
      border-color: hsl(40, 70%, 70%) !important;
    }

    .addon-badge-line {
      background-size: 17px !important;
    }
  }

  .home-section .section .selector {
    background-color: var(--newtab-element-secondary-color) !important;
    border-color: transparent !important;
    background-size: 12px !important;
    padding-inline: 10px 12px !important;
  }

  .home-section .section :is(.sponsored-checkbox, .slider, .selector):is(:hover, :focus-visible) {
    background-color: var(--newtab-element-secondary-color-hover) !important;
  }

  .home-section .section :is(.sponsored-checkbox, .slider, .selector):active {
    background-color: var(--newtab-element-secondary-color-active) !important;
  }

  .home-section .section .sponsored-checkbox:checked:is(:hover, :focus-visible),
  .home-section .section input:checked + .slider:is(:hover, :focus-visible) {
    background-color: var(--newtab-primary-action-background-hover) !important;
  }

  .home-section .section .sponsored-checkbox:checked:active,
  .home-section .section input:checked + .slider:active {
    background-color: var(--newtab-primary-action-background-active) !important;
  }

  .info-box-container > :is(.sync-engines-list, label) {
    padding-inline: 4px;
  }

  listheader {
    padding-bottom: revert !important;
  }

  treechildren::-moz-tree-row(current, focus) {
    outline: revert !important;
    outline-offset: revert !important;
  }

  :is(listheader, treecols) > treecol {
    box-shadow: none !important;
  }

  #engineList treechildren::-moz-tree-image {
    fill: currentColor !important;
  }

  #handlersView {
    word-wrap: anywhere;
  }

  .onboardingContainer.featureCallout .screen[pos="callout"] .section-main .main-content,
  .onboardingContainer.featureCallout.callout-arrow::before {
    background-color: var(--newtab-background-color-secondary) !important;
    border-color: var(--fxview-contrast-border) !important;
  }

  .toggle-button:not([aria-pressed="true"])::before {
    background-color: currentColor !important;
  }

  .toggle-button[aria-pressed="true"]::before {
    background-color: var(--in-content-primary-button-text-color) !important;
    outline-color: var(--in-content-primary-button-text-color) !important;
  }

  @-moz-document regexp("^about:blocked.*") {
    html:root,
    html:root * {
      --in-content-button-background: transparent !important;
      --in-content-button-background-hover: #5a0002 !important;
      --in-content-button-background-active: #3e0200 !important;
      --in-content-button-border-color: white !important;
      --in-content-primary-button-background: var(--ui-text-90) !important;
      --in-content-primary-button-background-hover: var(--ui-text-80) !important;
      --in-content-primary-button-background-active: var(--ui-text-70) !important;
      --in-content-primary-button-text-color: black !important;
      --in-content-link-color: var(--in-content-primary-button-background) !important;
      --in-content-link-color-hover: var(--in-content-primary-button-background-hover) !important;
      --in-content-link-color-active: var(--in-content-primary-button-background-active) !important;
      --in-content-link-visited-color: var(--ui-text-70) !important;
      --in-content-link-visited-color-hover: var(--ui-text-60) !important;
      --in-content-link-visited-color-active: var(--ui-text-50) !important;
      --link-color: var(--in-content-primary-button-background) !important;
      --link-color-hover: var(--in-content-primary-button-background-hover) !important;
      --link-color-active: var(--in-content-primary-button-background-active) !important;
      --link-visited-color: var(--ui-text-70) !important;
      --link-visited-color-hover: var(--ui-text-60) !important;
      --link-visited-color-active: var(--ui-text-50) !important;
    }

    body {
      background: var(--warning-icon-detail) !important;
    }

    #errorPageContainer .title {
      min-height: 1.6em !important;
    }

    #errorPageContainer .title-text {
      padding-block: 0.2em !important;
    }

    #errorPageContainer .button-container button {
      border-color: var(--ui-text-70) !important;
    }

    #errorPageContainer .button-container button:hover {
      border-color: transparent !important;
    }

    #errorPageContainer .button-container button.primary {
      border-color: transparent !important;
    }
  }

  @-moz-document url-prefix("about:pocket") {
    html,
    body {
      background-color: var(--uc-arrowpanel-background) !important;
      font-size: 12px !important;
      color: var(--uc-arrowpanel-color) !important;
      user-select: none !important;
    }

    hr {
      background: none !important;
      height: 0 !important;
      border-top: 1px solid var(--uc-desaturate-dimmed) !important;
    }

    .stp_header .stp_header_logo {
      filter: hue-rotate(-103deg) saturate(150%);
    }

    .stp_button {
      text-decoration: none !important;
      border-radius: var(--general-button-border-radius) !important;
    }

    .stp_button_wide .stp_button {
      margin-block: -2px 0 !important;
      margin-inline: -6px !important;
      border-radius: 4px !important;
    }

    .stp_button.stp_button_primary {
      background-color: var(--uc-parent-primary-button-background) !important;
      color: var(--uc-parent-primary-button-text-color) !important;
      cursor: default !important;
    }

    .stp_button.stp_button_primary:hover {
      background-color: var(--uc-parent-primary-button-background-hover) !important;
    }

    .stp_button.stp_button_primary:hover:active {
      background-color: var(--uc-parent-primary-button-background-active) !important;
    }

    .stp_button.stp_button_secondary {
      background-color: var(--uc-arrowpanel-faint) !important;
      color: var(--in-content-text-color) !important;
      cursor: default !important;
    }

    .stp_button.stp_button_secondary:hover {
      background-color: var(--uc-arrowpanel-dimmed) !important;
    }

    .stp_button.stp_button_secondary:hover:active {
      background-color: var(--uc-arrowpanel-dimmed-further) !important;
    }

    .stp_button:focus-visible {
      outline: none !important;
      box-shadow: 0 0 0 2px var(--global-focus-outline-color) !important;
    }

    a {
      color: var(--in-content-link-color) !important;
      text-decoration: none !important;
    }

    .stp_button.stp_button_text:hover {
      color: var(--in-content-link-color-hover) !important;
    }

    .stp_button.stp_button_text:hover:active {
      color: var(--in-content-link-color-active) !important;
    }

    .stp_button.stp_button_text:focus {
      text-decoration: underline !important;
    }

    .stp_popular_topics .stp_popular_topic .stp_popular_topic_link {
      background-color: var(--uc-arrowpanel-faint) !important;
      color: var(--in-content-text-color) !important;
      border-radius: var(--general-button-border-radius) !important;
      text-decoration: none !important;
    }

    .stp_popular_topics .stp_popular_topic .stp_popular_topic_link:hover {
      background-color: var(--uc-arrowpanel-dimmed) !important;
    }

    .stp_popular_topics .stp_popular_topic .stp_popular_topic_link:hover:active {
      background-color: var(--uc-arrowpanel-dimmed-further) !important;
    }

    .stp_article_list .stp_article_list_link {
      border-radius: 4px !important;
    }

    .stp_article_list .stp_article_list_link:is(:hover, :focus) {
      background-color: var(--uc-arrowpanel-dimmed) !important;
    }

    .stp_article_list .stp_article_list_thumb:not(.stp_article_list_thumb_placeholder) {
      background-color: transparent !important;
      border-radius: 3px !important;
    }

    .stp_article_list .stp_article_list_thumb_placeholder {
      background-color: var(--uc-arrowpanel-dimmed) !important;
    }

    .stp_article_list .stp_article_list_publisher {
      color: var(--uc-panel-description-color) !important;
    }

    .stp_article_list_meta {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      row-gap: 5px;
    }

    .stp_article_list :is(.stp_article_list_saved_article, .stp_article_list_link) {
      flex-flow: row nowrap;
      align-items: center;
    }

    .stp_article_list_meta > * {
      margin-block: 0 !important;
    }

    .stp_tag_picker {
      margin-bottom: 16px !important;
    }

    .stp_tag_picker .stp_tag_picker_tags {
      border: none !important;
      background-color: transparent !important;
      padding: 0 !important;
      color: inherit !important;
    }

    .stp_tag_picker .stp_tag_picker_input_wrapper,
    .stp_tag_picker .stp_tag_picker_input {
      min-width: 0 !important;
    }

    .stp_tag_picker .stp_tag_picker_input_wrapper {
      border: 1px solid var(--uc-desaturate-dimmed) !important;
      border-radius: var(--general-button-border-radius) !important;
      background-color: var(--uc-arrowpanel-very-faint) !important;
      overflow: clip !important;
    }

    .stp_tag_picker .stp_tag_picker_input_wrapper:focus-within {
      box-shadow: 0 0 0 2px var(--global-focus-shadow-color) !important;
      outline: 1px solid var(--global-focus-outline-color) !important;
      border-color: var(--global-focus-outline-color) !important;
    }

    .stp_tag_picker .stp_tag_picker_input,
    .stp_tag_picker .stp_tag_picker_button {
      border: none !important;
      outline: none !important;
      border-radius: 0 !important;
      color: inherit !important;
    }

    .stp_tag_picker .stp_tag_picker_button {
      border-left: 1px solid var(--uc-desaturate-dimmed) !important;
      background-color: var(--uc-arrowpanel-very-faint) !important;
      cursor: default !important;
    }

    .stp_tag_picker .stp_tag_picker_button:disabled {
      color: var(--uc-menu-disabled-color) !important;
    }

    .stp_tag_picker .stp_tag_picker_button:hover:enabled {
      background-color: var(--uc-arrowpanel-dimmed) !important;
    }

    .stp_tag_picker .stp_tag_picker_button:focus:enabled {
      border-color: var(--global-focus-outline-color) !important;
      outline: 1px solid var(--global-focus-outline-color) !important;
      background-color: var(--uc-arrowpanel-dimmed-further) !important;
      color: var(--uc-parent-primary-button-text-color) !important;
    }

    .stp_tag_picker .stp_tag_picker_tag {
      padding-block: 4px !important;
      padding-inline: 6px 4px !important;
      background-color: var(--uc-arrowpanel-faint) !important;
      border-radius: var(--general-button-border-radius) !important;
    }

    .stp_tag_picker .stp_tag_picker_tag_remove {
      width: 14px !important;
      height: 14px !important;
      box-sizing: content-box !important;
      padding: 0 !important;
      margin-inline-start: 4px !important;
      background: url(chrome://userchrome/content/close.svg) center/11px no-repeat !important;
      -moz-context-properties: fill, fill-opacity;
      fill: var(--uc-panel-description-color);
      color: transparent !important;
      cursor: default !important;
      border-radius: 2px !important;
    }

    .stp_tag_picker .stp_tag_picker_tag_remove:hover {
      fill: var(--uc-arrowpanel-color) !important;
      background-color: var(--uc-arrowpanel-dimmed) !important;
    }

    .stp_tag_picker .stp_tag_picker_tag_remove:focus {
      outline-offset: 0 !important;
      box-shadow: 0 0 0 2px var(--global-focus-shadow-color) !important;
      outline: 1px solid var(--global-focus-outline-color) !important;
    }

    /* stylelint-disable-next-line media-query-no-invalid */
    @media -moz-pref("userChrome.css.mac-ui-fonts") {
      body {
        font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important;
        font-kerning: normal !important;
      }

      h3,
      :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {
        font-weight: var(--uc-font-weight-bold, 500);
      }

      .stp_button {
        font-weight: var(--uc-font-weight-bold, 500) !important;
        font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important;
      }

      .stp_article_list .stp_article_list_header {
        font-weight: var(--uc-font-weight-bold, 500) !important;
      }

      .stp_popular_topics .stp_popular_topic .stp_popular_topic_link {
        font-weight: var(--uc-font-weight-thin, 400) !important;
      }

      .stp_tag_picker .stp_tag_picker_tag {
        font-weight: var(--uc-font-weight-thin, 400) !important;
      }
    }
  }
}

@-moz-document url("about:processes") {
  td:nth-child(7) {
    width: 3% !important;
  }
}

@-moz-document url-prefix("about:debugging") {
  @media (prefers-color-scheme: dark) {
    :root {
      --bg-color: var(--uc-content-page-background) !important;
      --bg-color-float: var(--uc-content-box-background);
      --text-color: var(--ui-text-90) !important;
      --secondary-text-color: var(--ui-text-60) !important;
      --text-color-2nd: var(--ui-text-60) !important;
      --text-color-3rd: var(--ui-text-50) !important;
      --border-color: var(--button-bg-active) !important;
      --box-background: var(--in-content-bg-dark) !important;
      --box-border-color: var(--button-bg-active) !important;
      --shadow-var: 0 0 5px hsla(0, 0%, 0%, 0.08), 0 0 8px hsla(0, 0%, 0%, 0.05);
      --button-bg: var(--uc-content-button-background);
      --button-bg-hover: var(--uc-content-button-background-hover);
      --button-bg-active: var(--uc-content-button-background-active);
      --card-separator-color: var(--button-bg-active) !important;
      --category-background-hover: rgba(12, 12, 13, 0.1);
      --category-text: var(--plaintext-color) !important;
      --category-text-selected: var(--link-color-active) !important;
      --link-color: hsl(243, 100%, 66%) !important;
      --link-color-hover: hsl(245, 100%, 62%) !important;
      --link-color-active: hsl(255, 100%, 55%) !important;
      --green-70: var(--green-50) !important;
      --grey-50: var(--text-color-3rd) !important;
      --grey-20: var(--card-separator-color) !important;
      --button-background-color: var(--button-bg) !important;
      --button-color: var(--ui-text-100) !important;
      --button-hover-background-color: var(--button-bg-hover) !important;
      --primary-button-color: var(--ui-text-100) !important;
      --primary-button-background-color: var(--purple-40) !important;
      --primary-button-hover-background-color: var(--purple-35) !important;
      --primary-button-active-background-color: var(--purple-30) !important;
    }

    .card {
      background-color: var(--bg-color-float) !important;
      box-shadow: var(--shadow-var) !important;
      -moz-context-properties: fill, fill-opacity !important;
      fill: currentColor !important;
    }

    .connect-section__header__icon {
      opacity: 0.932 !important;
    }

    .default-button {
      color: var(--button-color) !important;
      background-color: var(--button-bg) !important;
    }

    .default-button:enabled:hover,
    .sidebar-item--selectable:hover {
      background: var(--button-bg-hover) !important;
    }

    .default-button:enabled:hover:active,
    .sidebar-item--selectable:hover:active {
      background: var(--button-bg-active) !important;
    }

    .sidebar__footer {
      -moz-context-properties: fill, fill-opacity !important;
      fill: currentColor !important;
      fill-opacity: 0.932 !important;
    }

    .fieldpair__description {
      color: var(--text-color-2nd) !important;
    }

    .sidebar__footer__support-help {
      column-gap: calc(var(--base-unit) * 1.5) !important;
    }

    .icon-label--info {
      --icon-color: currentColor !important;
    }

    .message__button {
      fill: var(--message-color) !important;
    }

    .message--level-info {
      --message-background-color: var(--grey-20) !important;
      --message-border-color: transparent !important;
      --message-color: var(--text-color) !important;
      --message-icon-color: var(--text-color) !important;
    }

    .message--level-warning {
      --message-background-color: var(--low-warning-background) !important;
      --message-border-color: var(--low-warning-border-color) !important;
      --message-color: var(--text-color) !important;
      --message-icon-color: var(--low-warning-color) !important;
    }

    .message--level-error {
      --message-background-color: color-mix(in srgb, transparent 15%, var(--uc-warning-background)) !important;
      --message-border-color: color-mix(in srgb, transparent 30%, var(--uc-warning-background)) !important;
      --message-color: var(--text-color) !important;
      --message-icon-color: var(--warning-color) !important;
    }
  }
}

@-moz-document url-prefix("about:reader") {
  body.dark {
    --main-background: var(--in-content-page-background) !important;
    --tooltip-background: color-mix(in srgb, black 40%, var(--in-content-bg-dark)) !important;
    --active-color: var(--purple-35) !important;
    --selected-background: var(--attention-color) !important;
    --link-foreground: var(--in-content-link-color) !important;
    --visited-link-foreground: #823afc !important;
    --proportional-width: calc(100% - (122.5em - (var(--content-width, 60em) * 2)));
    --final-content-width: max(var(--content-width, 60em), var(--proportional-width, var(--content-width, 60em)));
  }

  .container {
    /* below: left align the text in about:reader */
    /* margin-inline-start: calc(3% + 65px) !important; */
    max-width: var(--final-content-width) !important;
  }

  .toolbar-container {
    top: var(--body-padding) !important;
    margin-inline-start: -15px !important;
  }

  .toolbar {
    margin-inline-start: 0 !important;
    transition-property: border-color, box-shadow, background-color !important;
    transition-timing-function: linear !important;
    transition-duration: 0.2s !important;
  }

  .toolbar {
    box-shadow: 0 0 12px hsla(0, 0%, 0%, 0.4) !important;
  }

  body.dark .toolbar {
    border-color: var(--in-content-box-border-color) !important;
    background-color: var(--in-content-box-background-dim) !important;
  }

  body > .container > .header > .domain {
    border: none !important;
  }

  body.dark hr,
  body.dark > .container > .header > .domain {
    border-color: var(--in-content-button-background-active) !important;
    border-block-width: 0 1px !important;
  }

  .toolbar-container.scrolled .toolbar:not(:hover, :focus-within) {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px transparent !important;
  }

  .toolbar-container.scrolled .toolbar:not(:hover, :focus-within) .button {
    opacity: 0.4 !important;
  }

  input:not([type="file"], [type="image"]):focus-visible,
  select:focus-visible,
  button:focus-visible,
  textarea:focus-visible {
    outline-color: var(--global-focus-outline-color) !important;
    outline-style: solid !important;
    outline-width: 2px !important;
  }

  .moz-reader-content a:link {
    color: var(--in-content-link-color) !important;
  }

  .moz-reader-content a:link:hover {
    color: var(--in-content-link-color-hover) !important;
  }

  .moz-reader-content a:link:hover:active {
    color: var(--in-content-link-color-active) !important;
  }

  .moz-reader-content a:visited {
    color: var(--in-content-link-visited-color) !important;
  }

  .moz-reader-content a:visited:hover {
    color: var(--in-content-link-visited-color-hover) !important;
  }

  .moz-reader-content a:visited:hover:active {
    color: var(--in-content-link-visited-color-active) !important;
  }
}

@-moz-document url("about:sync") {
  :root {
    --horizon-red: hsl(346.1, 77%, 62.5%);
    --horizon-orange: hsl(9.4, 78.4%, 72.7%);
    --horizon-yellow: hsl(20.2, 91%, 78.2%);
    --horizon-green: hsl(159, 69.4%, 55.4%);
    --horizon-cyan: hsl(184.8, 67.1%, 44.1%);
    --horizon-purple: hsl(279, 58.1%, 66.3%);
  }

  .collections,
  .topHeader {
    background: var(--in-content-box-background-dim) !important;
    color: var(--in-content-page-color) !important;
  }

  .topHeader > * {
    flex-shrink: 0 !important;
  }

  .topHeader > :first-child {
    flex-grow: 1 !important;
    flex-basis: min-content !important;
  }

  .panelhead {
    background-color: var(--in-content-button-background) !important;
  }

  .panel > button::before, .panel > button::after {
    background: var(--in-content-page-color) !important;
  }

  .collection {
    border-color: var(--in-content-border-color) !important;
  }

  fieldset {
    position: relative !important;
    margin: 10px !important;
    padding-inline: 10px !important;
    padding-top: 2em !important;
    border-radius: 10px !important;
    border: none !important;
    background: var(--in-content-box-background-dim) !important;
  }

  fieldset > legend {
    position: absolute !important;
    top: 0.7em !important;
    font-size: 1.3em !important;
    font-weight: 600 !important;
  }

  .tabs-navigation {
    border-color: var(--in-content-border-hover) !important;
  }

  .tabs-menu-item a {
    border: 1px solid transparent !important;
    border-bottom: 0 !important;
  }

  .tabs-menu-item.is-active a {
    background: var(--in-content-button-background-hover) !important;
    border-color: var(--in-content-border-hover) !important;
    color: inherit !important;
  }

  .tabs-menu-item:not(.is-active) a:hover {
    background: var(--in-content-button-background) !important;
    border-color: var(--in-content-border-color) !important;
    color: var(--in-content-page-color) !important;
  }

  .table-inspector,
  .table-inspector th,
  .table-inspector td {
    border-color: var(--in-content-border-hover) !important;
  }

  .table-inspector tr:nth-of-type(2n+1) {
    background-color: var(--in-content-box-background-odd) !important;
  }

  .table-inspector th .resizer {
    background-color: var(--horizon-cyan) !important;
  }

  .table-inspector th .resizer:not(:hover) {
    opacity: 0.25 !important;
  }

  .table-inspector-string-cell {
    color: var(--horizon-red) !important;
  }

  .table-inspector-number-cell {
    color: var(--horizon-green) !important;
  }

  /*
  | theme properties defined here:
  | https://github.com/storybookjs/react-inspector/blob/master/src/styles/themes/chromeLight.tsx
  */
  [style*="monospace"i] {
    font-family: Fira Code UC, Fira Code, SF Mono, -moz-fixed, monospace !important;
    font-weight: 400 !important;
    font-size: revert !important;
  }

  /* base */
  [style*="color: black"i] {
    color: var(--in-content-page-color) !important;
  }

  /* object/property name */
  span[style*="color: rgb(136, 19, 145)"] {
    color: var(--horizon-red) !important;
  }

  /* regexp/string/symbol */
  span[style*="color: rgb(196, 26, 22)"] {
    color: var(--horizon-yellow) !important;
  }

  /* primitives like boolean, number, null */
  span[style*="color: rgb(128, 128, 128)"],
  span[style*="color: rgb(28, 0, 207)"] {
    color: var(--horizon-orange) !important;
  }

  /* function names */
  span[style*="color: rgb(85, 106, 242)"] {
    color: var(--horizon-cyan) !important;
  }
}

/* <link rel="stylesheet" href="chrome://browser/content/screenshots/overlay/overlay.css"> */
link[rel="stylesheet"][href="chrome://browser/content/screenshots/overlay/overlay.css"] + #screenshots-component {
  --background-color-canvas: var(--uc-content-page-background) !important;
  --in-content-page-background: var(--uc-content-page-background) !important;
  --in-content-page-color: var(--uc-content-page-color) !important;
  --in-content-text-color: var(--in-content-page-color) !important;
  --in-content-accent-color: var(--purple-35) !important;
  --in-content-border-color: var(--uc-content-border-color) !important;
  --in-content-border-hover: var(--uc-content-border-hover) !important;
  --in-content-border-active: var(--uc-content-border-active) !important;
  --in-content-box-background: var(--uc-content-box-background) !important;
  --in-content-box-background-odd: var(--uc-content-box-background-odd) !important;
  --in-content-box-background-dim: var(--uc-content-box-background-dim) !important;
  --in-content-box-border-color: var(--uc-content-box-border-color) !important;
  --in-content-box-info-background: var(--in-content-button-background-solid) !important;
  --background-color-box: var(--in-content-box-background) !important;
  --in-content-table-background: var(--in-content-box-background) !important;
  --in-content-table-header-background: var(--purple-40-a50) !important;
  --in-content-link-color: var(--purple-30) !important;
  --in-content-link-color-hover: var(--purple-25) !important;
  --in-content-link-color-active: var(--purple-20) !important;
  --in-content-link-visited-color: var(--pink-40) !important;
  --in-content-link-visited-color-hover: var(--pink-35) !important;
  --in-content-link-visited-color-active: var(--pink-30) !important;
  --link-color: var(--purple-30) !important;
  --link-color-hover: var(--purple-25) !important;
  --link-color-active: var(--purple-20) !important;
  --link-visited-color: var(--pink-40) !important;
  --link-visited-color-hover: var(--pink-35) !important;
  --link-visited-color-active: var(--pink-30) !important;
  --button-background: var(--uc-content-button-background) !important;
  --button-background-hover: var(--uc-content-button-background-hover) !important;
  --button-background-active: var(--uc-content-button-background-active) !important;
  --button-background-solid: var(--uc-content-button-background-solid);
  --in-content-button-background: var(--uc-content-button-background) !important;
  --in-content-button-background-hover: var(--uc-content-button-background-hover) !important;
  --in-content-button-background-active: var(--uc-content-button-background-active) !important;
  --in-content-button-background-solid: var(--uc-content-button-background-solid);
  --in-content-button-text-color-hover: var(--light-on-dark-button-text-color) !important;
  --in-content-button-text-color-active: var(--in-content-button-text-color-hover) !important;
  --in-content-primary-button-background: var(--purple-40) !important;
  --in-content-primary-button-background-hover: var(--purple-35) !important;
  --in-content-primary-button-background-active: var(--purple-30) !important;
  --in-content-primary-button-text-color: var(--light-on-dark-button-text-color) !important;
  --in-content-primary-button-text-color-hover: var(--light-on-dark-button-text-color) !important;
  --color-accent-primary: var(--purple-40) !important;
  --color-accent-primary-hover: var(--purple-35) !important;
  --color-accent-primary-active: var(--purple-30) !important;
  --in-content-button-border-radius: var(--general-button-border-radius) !important;
  --in-content-item-selected: var(--purple-40) !important;
  --in-content-item-hover: color-mix(in srgb, var(--purple-30) 45%, transparent) !important;
  --in-content-item-hover-text: var(--in-content-text-color) !important;
  --focus-outline-color: var(--global-focus-outline-color) !important;
  --in-content-focus-outline-color: var(--focus-outline-color) !important;
  --focus-outline-offset: 2px !important;
  --default-focusring: var(--global-focus-outline-width) solid var(--global-focus-outline-color) !important;

  button {
    cursor: default !important;
  }
  
  #screenshots-cancel-button {
    margin-top: 10px !important;
  }

  #selection-size {
    border-radius: 3px !important;
  }

  #buttons-container {
    padding: 4px !important;
    box-shadow: 0 0 0 1px rgba(12, 12, 13, 0.1), 0 0 8px rgba(12, 12, 13, 0.1) !important;

    .screenshots-button {
      margin: 0 !important;
      border: 3px solid transparent !important;
      background-clip: padding-box !important;
      border-radius: 5px !important;
      padding: .6em 1em !important;
      outline-offset: -4px !important;

      &#cancel {
        padding: .6em !important;
      }

      &:not(#cancel) > img {
        margin-inline-start: -.2em !important;
      }
    }
  }

  @media -moz-pref("userChrome.css.mac-ui-fonts") {
    font-family: "SF Pro Display", "SF Arabic", "Segoe UI", "sans-serif" !important;

    button {
      font-weight: var(--uc-font-weight-semibold) !important;
    }
  }
}

/* firefox screenshots addon overlay */
@-moz-document regexp("^moz-extension://.*/blank.html.*") {
  :root[uc-extension-id="screenshots@mozilla.org"] .all-buttons-container {
    background-color: var(--uc-content-box-background) !important;
    height: 88px !important;
    box-shadow: 0 0 0 1px rgba(12, 12, 13, 0.1), 0 0 8px rgba(12, 12, 13, 0.1) !important;
  }

  :root[uc-extension-id="screenshots@mozilla.org"] .all-buttons-container button {
    color: var(--uc-content-page-color) !important;
    background-color: transparent !important;
    border-radius: var(--general-button-border-radius) !important;
    padding: 54px 5px 5px !important;
    stroke: hsl(236, 40%, 56%) !important;
    fill: hsl(0, 0%, 93%) !important;
    appearance: none !important;
    -moz-context-properties: fill, stroke !important;
  }

  :root[uc-extension-id="screenshots@mozilla.org"] .all-buttons-container button:hover {
    background-color: var(--uc-content-button-background) !important;
    border: 1px solid var(--uc-content-button-background) !important;
  }

  :root[uc-extension-id="screenshots@mozilla.org"] .pixel-dimensions {
    margin-block-start: -5px;
    margin-inline-start: -5px;
    color: #fff !important;
    text-shadow: 0.5px 0.5px 0.5px black, 0 0 1px black, 0 0 1px black !important;
  }

  /* stylelint-disable-next-line media-query-no-invalid */
  @media -moz-pref("userChrome.css.mac-ui-fonts") {
    :root[uc-extension-id="screenshots@mozilla.org"] .pixel-dimensions {
      font-weight: var(--uc-font-weight-bold) !important;
      font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important;
      font-size: normal !important;
    }
  }
}

@-moz-document regexp("^(about:|chrome:\/\/).*") {
  /* stylelint-disable-next-line media-query-no-invalid */
  @media -moz-pref("userChrome.css.hide-promotion") {
    .promo,
    .vpn-banner {
      display: none !important;
    }
  }
}
