/* rules that only work in a chrome:// path.
I don't register userChrome.au.css that way because
it would mean I can't live-edit and save the stylesheet
from the style editor in the browser toolbox. */

@-moz-document regexp("^((chrome|resource|file)://|about:).*$")
{
  menupopup:not([is="places-popup-arrow"]) {
    -moz-window-input-region-margin: var(--menupopup-inner-box-margin, 4px) !important;
  }

  :is(panel, menupopup)[type="arrow"]:where(:not(.tooltip-xul-wrapper)) {
    -moz-window-input-region-margin: var(--panel-inner-box-margin, 4px) !important;
  }

  panel:where(:not(.tooltip-xul-wrapper)),
  menupopup,
  :is(menupopup, panel)[type="arrow"]:where(:not(.tooltip-xul-wrapper)) {
    -moz-window-shadow: none;
  }

  @-moz-document url(chrome://browser/content/browser.xhtml)
  {
    :is(panel, menupopup)::part(arrow) {
      display: -moz-inline-box;
    }
  }

  #customization-container:-moz-lwtheme {
    background-color: var(--in-content-bg-dark);
    background-image: none;
  }

  #back-button,
  .unified-nav-back[_moz-menuactive="true"]:-moz-locale-dir(ltr),
  .unified-nav-forward[_moz-menuactive="true"]:-moz-locale-dir(rtl) {
    list-style-image: url(chrome://userchrome/content/skin/back.svg);
  }

  #forward-button,
  .urlbar-go-button,
  .search-go-button,
  .unified-nav-forward[_moz-menuactive="true"]:-moz-locale-dir(ltr),
  .unified-nav-back[_moz-menuactive="true"]:-moz-locale-dir(rtl) {
    list-style-image: url(chrome://userchrome/content/skin/forward.svg);
  }

  #sidebar-button {
    list-style-image: url(chrome://userchrome/content/skin/sidebars-right.svg);
  }

  #sidebar-button:-moz-locale-dir(ltr):not([sidebar-positionend]),
  #sidebar-button:-moz-locale-dir(rtl)[sidebar-positionend] {
    list-style-image: url(chrome://userchrome/content/skin/sidebars.svg);
  }

  #library-animatable-box {
    display: none;
  }

  #library-animatable-box[animate] {
    display: block;
  }

  #library-button {
    list-style-image: url(chrome://userchrome/content/skin/library.svg);

    &[scaling] {
      list-style-image: url(chrome://userchrome/content/skin/library-scaling-fix.svg);
    }
  }

  @keyframes library-bookmark-animation {
    from {
      transform: translateX(0);
      fill: inherit;
    }
    25% {
      fill: inherit;
    }
    50% {
      fill: var(--toolbarbutton-icon-fill-attention);
      fill-opacity: 1;
    }
    to {
      transform: translateX(-1056px);
      fill: var(--toolbarbutton-icon-fill-attention);
      fill-opacity: 1;
    }
  }

  @keyframes library-bookmark-animation-rtl {
    from {
      transform: translateX(1056px);
      fill: inherit;
    }
    25% {
      fill: inherit;
    }
    50% {
      fill: var(--toolbarbutton-icon-fill-attention);
      fill-opacity: 1;
    }
    to {
      transform: translateX(0);
      fill: var(--toolbarbutton-icon-fill-attention);
      fill-opacity: 1;
    }
  }

  @keyframes library-bookmark-fade {
    from {
      fill: var(--toolbarbutton-icon-fill-attention);
      fill-opacity: 1;
    }
    to {
      fill: inherit;
    }
  }

  #library-button[animate] > .toolbarbutton-icon {
    fill: transparent;
  }

  #library-animatable-box {
    &[animate] {
      /* Position the sprite at the y-position of the library-button, then adjust
      based on the size difference between half of the button height and half of
      the sprite height. */
      top: calc(var(--library-button-height) / 2 - 27px);
      /* Set a margin relative to the difference in widths of the
      .toolbarbutton-icon and the .toolbar-animatable-box. This is correct even in
      RTL because the item is positioned using `left`. */
      left: calc(var(--library-icon-x) + (16px + 2 * var(--toolbarbutton-inner-padding) - 22px) / 2);
      width: 22px; /* Width of each frame within the SVG sprite */
      height: 54px; /* Height of each frame within the SVG sprite */

      > .toolbarbutton-animatable-image {
        min-height: 54px; /* Minimum height must be equal to the height of the SVG sprite */
        width: 1078px;
        animation-duration: 800ms;
        animation-timing-function: steps(48);
      }

      &[fade] > .toolbarbutton-animatable-image {
        animation-duration: 2s;
        animation-timing-function: ease-out;
      }
    }

    &[animate="bookmark"] {
      > .toolbarbutton-animatable-image {
        background-image: url(chrome://userchrome/content/skin/library-bookmark-animation.svg);
        animation-name: library-bookmark-animation;
        -moz-context-properties: fill, fill-opacity, stroke;
        stroke: var(--toolbarbutton-icon-fill-attention);
      }

      &:-moz-locale-dir(rtl) > .toolbarbutton-animatable-image {
        animation-name: library-bookmark-animation-rtl;
      }

      &[fade] > .toolbarbutton-animatable-image {
        animation-name: library-bookmark-fade;
      }
    }
  }

  @keyframes bookmark-animation {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-627px);
    }
  }

  #star-button-box {
    position: relative;
    padding: 0;
  }

  #star-button {
    width: calc(var(--urlbar-min-height) - 2px - 2 * var(--urlbar-container-padding));
    height: calc(var(--urlbar-min-height) - 2px - 2 * var(--urlbar-container-padding));
    padding: var(--urlbar-icon-padding);

    /* Preload the bookmark animations to prevent a flicker during the first
    playing of the animations. */
    &[preloadanimations] + #star-button-animatable-box > #star-button-animatable-image {
      background-image: url(chrome://userchrome/content/skin/bookmark-animation.svg), url(chrome://userchrome/content/skin/library-bookmark-animation.svg);
      background-size: 0, 0;
    }

    &[starred][animate] {
      fill: transparent;
      position: relative;

      & + #star-button-animatable-box {
        display: block;
        position: absolute;
        overflow: hidden;
        top: calc(50% - 16.5px); /* 16.5px is half the height of the sprite */
        /* .urlbar-icon has width 28px. Each frame is 33px wide. Set
        margin-inline-start to be half the difference, -2.5px. */
        margin-inline-start: -2.5px;
        width: 33px; /* Width of each frame within the SVG sprite */
        height: 33px; /* Height of each frame within the SVG sprite */

        > #star-button-animatable-image {
          background-image: url(chrome://userchrome/content/skin/bookmark-animation.svg);
          background-size: auto;
          list-style-image: none;
          min-height: 33px; /* Minimum height must be equal to the height of the SVG sprite */
          animation-name: bookmark-animation;
          animation-fill-mode: forwards;
          animation-iteration-count: 1;
          animation-timing-function: steps(19);
          animation-duration: 317ms;
          width: 660px;
          -moz-context-properties: fill, stroke;
          fill: currentColor;
          stroke: var(--toolbarbutton-icon-fill-attention);
          color: inherit;
        }
      }

      &:-moz-locale-dir(rtl) + #star-button-animatable-box > #star-button-animatable-image {
        scale: -1 1;
      }
    }
  }

  :root[uidensity="compact"] #star-button[starred][animate] + #star-button-animatable-box {
    /* .urlbar-icon has width 24px in this case */
    margin-inline-start: -4.5px;
  }

  :root[uidensity="touch"] #star-button[starred][animate] + #star-button-animatable-box {
    /* .urlbar-icon has width 30px in this case */
    margin-inline-start: -1.5px;
  }

  .open-protocol-handler-icon {
    list-style-image: url(chrome://userchrome/content/open-in-new.svg);
  }

  .open-protocol-handler-icon:-moz-locale-dir(rtl) {
    transform: scaleX(-1);
  }

  .popup-icon {
    list-style-image: url(chrome://userchrome/content/notifications/popup.svg);
  }

  .popup-subitem {
    list-style-image: url(chrome://userchrome/content/notifications/popup-subitem.svg);
    margin-inline-start: 42px;
    width: 16px;
    height: 16px;
    -moz-context-properties: fill, fill-opacity;
    fill: currentColor;
    fill-opacity: 0.6;
  }

  .popup-subitem:-moz-locale-dir(rtl) {
    transform: scaleX(-1);
  }

  /* confirmation hint */
  @keyframes confirmation-hint-checkmark-animation {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-252px);
    }
  }

  @keyframes confirmation-hint-checkmark-animation-rtl {
    from {
      transform: translateX(252px);
    }
    to {
      transform: translateX(0);
    }
  }

  #confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image {
    -moz-context-properties: fill;
    background-image: url(chrome://userchrome/content/skin/success-animation.svg);
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    min-width: 266px;
    max-width: 266px;
    min-height: 14px;
    max-height: 14px;
    animation-name: confirmation-hint-checkmark-animation;
    animation-fill-mode: forwards;
    animation-timing-function: steps(18);

    &:-moz-locale-dir(rtl) {
      animation-name: confirmation-hint-checkmark-animation-rtl;
      transform: translateX(252px);
    }
  }

  #confirmation-hint-message {
    margin-inline: 7px 0;
  }

  #confirmation-hint.with-description #confirmation-hint-message {
    font-size: 1.2em;
    font-weight: 600;
  }

  @media (prefers-reduced-motion: no-preference) {
    #confirmation-hint-checkmark-animation-container[animate] {
      > #confirmation-hint-checkmark-image {
        animation-duration: 300ms;
        animation-delay: 0ms;
      }

      & + #confirmation-hint-message-container {
        transform: scale(1);
        opacity: 1;
      }
    }

    #confirmation-hint-message-container {
      transform: scale(0.8);
      opacity: 0;
      transition: transform 120ms cubic-bezier(0.25, 1.27, 0.35, 1.18), opacity 60ms linear;
    }
  }

  #handlersView .actionIcon[src="chrome://browser/skin/preferences/application.png"],
  #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::before
  {
    display: -moz-inline-box;
  }

  /* style checkboxes */
  input[type="checkbox"] {
    appearance: none;
    color: var(--checkbox-border-color, ThreeDShadow);
    background-color: var(--checkbox-unchecked-bgcolor, Field);
    border: 1px solid currentColor;
    border-radius: 2px;
    margin-inline-end: 6px;
    width: 16px;
    height: 16px;
    -moz-context-properties: fill;

    &:focus-visible {
      outline: var(--focus-outline);
    }

    &:checked {
      border-color: var(--checkbox-checked-border-color, transparent);
      background-color: var(--checkbox-checked-bgcolor, AccentColor);
      background-image: url("chrome://global/skin/icons/check.svg");
      background-position: center;
      background-repeat: no-repeat;
      -moz-context-properties: fill;
      fill: currentColor;
      color: var(--checkbox-checked-color, AccentColorText);
      /* Style the button also when printing with "Print Backgrounds" unchecked */
      color-adjust: exact;
    }

    &:not([disabled="true"]):hover {
      background-color: var(--checkbox-unchecked-hover-bgcolor, color-mix(in srgb, AccentColor 4%, Field));

      @media (prefers-contrast) {
        /* color will set the border-color on the check due to how HCM works for in-content pages. */
        color: var(--checkbox-checked-border-color, color-mix(in srgb, AccentColor 4%, Field));
      }

      &:checked {
        background-color: var(--checkbox-checked-hover-bgcolor, color-mix(in srgb, currentColor 12.5%, AccentColor));

        @media (prefers-contrast) {
          color: var(--checkbox-checked-border-color, AccentColorText);
          fill: var(--checkbox-checked-color, AccentColorText);
          background-color: var(--checkbox-checked-bgcolor, AccentColor);
        }
      }

      &:active {
        background-color: var(--checkbox-unchecked-active-bgcolor, color-mix(in srgb, AccentColor 8%, Field));

        &:checked {
          background-color: var(--checkbox-checked-active-bgcolor, color-mix(in srgb, currentColor 25%, AccentColor));

          @media (prefers-contrast) {
            color: var(--checkbox-checked-border-color, AccentColorText);
            fill: var(--checkbox-checked-color, AccentColorText);
            background-color: var(--checkbox-checked-bgcolor, AccentColor);
          }
        }
      }
    }

    .toggle-container-with-text > & {
      margin-inline-end: var(--context-checkbox-margin-end);
    }
  }
}

@-moz-document url-prefix("about:preferences") {
  menulist[image]::part(icon) {
    width: 16px !important;
  }
}

/* temporarily moved from userChrome.au.css due to an issue preventing the use
of moz-document in stylesheets with file:// urls */
@-moz-document regexp("^((chrome|resource|file)://|about:).*$")
{
  :root {
    --avatar-image-url: url(chrome://userchrome/content/fxa/avatar-big.svg);

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

  :is(#mainPopupSet, #browser, #navigator-toolbox, .sidebar-panel) {
    ::selection {
      background-color: var(--ui-selection-bgcolor);
      color: var(--ui-selection-color);
    }
  }

  ::selection {
    background-color: var(--global-selection-bgcolor);
    color: var(--global-selection-color);
  }

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

  panel:where(:not(.tooltip-xul-wrapper)),
  menupopup,
  :is(menupopup, panel)[type="arrow"]:where(:not(.tooltip-xul-wrapper)) {
    --panel-background: var(--arrowpanel-background);
    --panel-color: var(--arrowpanel-color);
    --panel-border-color: var(--arrowpanel-border-color);
    --panel-border-radius: var(--arrowpanel-border-radius);
    --panel-padding: var(--arrowpanel-padding);
  }

  panel[type="arrow"]:where(:not(.tooltip-xul-wrapper)) {
    margin: -7px;
  }

  panel[type="autocomplete-richlistbox"] {
    --panel-padding: var(--menupopup-inner-padding);
    --panel-background: var(--arrowpanel-background);
    --panel-color: var(--menu-color);
    --panel-border-radius: var(--menupopup-border-radius);
    border: none;
    background: none;

    &::part(content) {
      padding: var(--panel-padding);
      box-shadow: var(--uc-panel-shadow);
      margin: var(--menupopup-inner-box-margin);
    }
  }

  panel[type="autocomplete-richlistbox"][anchored-on-panel],
  panel popupset panel[type="autocomplete-richlistbox"] {
    --panel-background: var(--autocomplete-background);
  }

  #editBookmarkPanel menulist menupopup::part(content) {
    border: none;
    overflow: clip;
  }

  #bookmarkpropertiesdialog::part(content-box) {
    margin-bottom: 8px;
  }

  :is(panel, menupopup):where(:not(.tooltip-xul-wrapper))::part(content),
  panel#feature-callout::part(content) {
    padding: var(--panel-padding);
    color: var(--panel-color);
    background: var(--panel-background, Menu);
    border-radius: var(--panel-border-radius);
    width: var(--panel-width);
  }

  :is(panel, menupopup)[type="arrow"]:where(:not(.tooltip-xul-wrapper))::part(content),
  panel#feature-callout::part(content) {
    box-shadow: var(--uc-panel-shadow);
    margin: var(--panel-inner-box-margin, 4px);
    max-height: calc(100% - 2 * var(--panel-inner-box-margin));
    max-width: calc(100% - 2 * var(--panel-inner-box-margin));
    overflow: hidden;
  }

  menupopup::part(content) {
    background-color: var(--menu-background-color) !important;
    color: var(--menu-color) !important;
    border-radius: var(--menupopup-border-radius) !important;
    box-shadow: var(--uc-menupopup-shadow) !important;
  }

  panel:where(:not(.tooltip-xul-wrapper)),
  menupopup {
    &::part(arrow) {
      -moz-context-properties: fill, stroke;
      fill: var(--arrowpanel-background);
      stroke: var(--arrowpanel-border-color);
    }

    &[side="top"],
    &[side="bottom"] {
      &::part(arrow) {
        list-style-image: url("chrome://userchrome/content/panelarrow-vertical.svg");
        position: relative;
        margin-inline: calc(6px + var(--panel-inner-box-margin, 4px));
      }
    }

    &[side="top"]::part(arrow) {
      margin-bottom: calc(-1px - var(--panel-inner-box-margin, 4px));
    }

    &[side="bottom"]::part(arrow) {
      transform: scaleY(-1);
      margin-top: calc(-1px - var(--panel-inner-box-margin, 4px));
    }

    &[side="left"],
    &[side="right"] {
      &::part(arrow) {
        list-style-image: url("chrome://userchrome/content/panelarrow-horizontal.svg");
        position: relative;
        margin-block: calc(6px + var(--panel-inner-box-margin, 4px));
      }
    }

    &[side="left"]::part(arrow) {
      margin-right: calc(-1px - var(--panel-inner-box-margin, 4px));
    }

    &[side="right"]::part(arrow) {
      transform: scaleX(-1);
      margin-left: calc(-1px - var(--panel-inner-box-margin, 4px));
    }
  }

  #confirmation-hint[hidearrow]::part(arrowbox) {
    /* Don't display the arrow but keep the popup at the same vertical offset as
    other arrow panels. */
    visibility: hidden;
  }

  #identity-popup-multiView {
    padding: var(--menupopup-inner-padding);
    padding-top: 0;
  }

  :not(.panel-subview-body) {
    > toolbarseparator,
    > .subview-subheader {
      + .panel-subview-body {
        padding-bottom: var(--panel-subview-body-padding-magnitude);
      }
    }
  }

  .subviewbutton {
    min-height: var(--subviewbutton-height);
  }

  .panel-subview-footer-button {
    margin-bottom: var(--menupopup-inner-padding-magnitude);
  }

  #identity-popup .panel-subview-footer-button {
    margin-bottom: revert;
  }

  #BMB_bookmarksPopup {
    &::part(content),
    menupopup::part(content),
    menupopup[placespopup="true"]::part(content) {
      padding: var(--menupopup-inner-padding);
    }

    &::part(arrowcontent) {
      padding-block: 0;
    }

    menupopup[placespopup="true"] {
      &::part(innerbox) {
        margin-top: 0;
        border: none;
      }

      &::part(content) {
        box-shadow: var(--uc-panel-shadow);
        margin: var(--menupopup-inner-box-margin);
      }
    }

    .panel-subview-footer-button {
      margin-bottom: unset;
    }
  }

  #PopupSearchAutoComplete::part(content) {
    border: var(--searchbar-popup-border);
    border-top-width: 0;
    border-radius: var(--searchbar-popup-border-radius);
    box-shadow: var(--searchbar-popup-box-shadow);
    width: calc(var(--panel-width) + 10px);
    margin: revert;
    max-height: revert !important;
    max-width: revert !important;
  }

  #managed-bookmarks > .toolbarbutton-icon,
  #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
  #PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]),
  #OtherBookmarks.bookmark-item[container] > .toolbarbutton-icon {
    margin-inline-end: var(--context-iconic-margin-end);
  }

  /* panel width */
  #customizationui-widget-multiview panelview:not([extension]) {
    width: unset;
    min-width: 27em;
    max-width: 42em;
  }

  /* focused buttons to look like hovered buttons */
  panelview :is(.toolbarbutton-1, toolbarbutton.subviewbutton, .navigable.subviewbutton):not([disabled], [open]):focus-visible,
  .widget-overflow-list .toolbarbutton-1:not([disabled], [open]):focus-visible,
  .toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton:not([disabled], [open]):focus-visible {
    background-color: var(--panel-item-hover-bgcolor);
  }

  .panel-footer > button {
    &:not([disabled]) {
      &:hover,
      &:focus-visible {
        background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent));
      }

      &:hover:active {
        background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent));
      }

      &[default],
      &.primary {
        color: var(--button-primary-color);
        background-color: var(--button-primary-bgcolor);

        &:hover,
        &:focus-visible {
          background-color: var(--button-primary-hover-bgcolor);
        }

        &:hover:active {
          background-color: var(--button-primary-active-bgcolor);
        }
      }
    }
  }

  menupopup {
    &::part(drop-indicator-bar) {
      margin-block: -14px;
      margin-inline: -5px 5px;
    }

    &::part(drop-indicator) {
      pointer-events: none;
      background: none;
      list-style-image: url(chrome://userchrome/content/menu-drop-indicator.svg) !important;
      -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
      fill: var(--lwt-toolbarbutton-icon-fill, currentColor);
      height: 28px;
      max-width: 28px;
      padding-block: 3px;
      padding-inline: 0 6px;
    }
  }

  #protections-popup-mainView .subviewbutton-nav:not(.notFound),
  #identity-popup-mainView .subviewbutton-nav,
  .widget-overflow-list .subviewbutton-nav,
  .PanelUI-subView .subviewbutton-nav {
    &::after {
      -moz-context-properties: fill;
      fill: var(--panel-disabled-color);
    }

    &[disabled="true"]::after {
      -moz-context-properties: fill, fill-opacity;
      fill: var(--panel-disabled-color);
      fill-opacity: 0.5;
    }
  }

  #identity-popup-mainView .subviewbutton-nav[disabled="true"]::after {
    display: none;
  }

  /* padding and margins for context menus */
  menupopup,
  #ContentSelectDropdown > menupopup,
  #PlacesToolbar menupopup {
    &::part(content) {
      padding: var(--menupopup-inner-padding);
      margin: var(--menupopup-inner-box-margin);
    }
  }

  #BMB_bookmarksPopup::part(content),
  #BMB_bookmarksPopup menupopup[placespopup="true"]::part(content) {
    padding-inline: 0 !important;
  }

  #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
    height: revert;
  }

  .tab-label {
    line-height: revert;
  }

  .tab-throbber,
  .tab-icon-pending,
  .tab-icon-image,
  .tab-sharing-icon-overlay,
  .tab-icon-overlay {
    height: 16px;
    width: 16px;

    &:not([pinned]) {
      margin-inline-end: 0;
    }

    #tabbrowser-tabs:is(:not([orient="vertical"]), [orient="vertical"][expanded]) &:not([pinned]) {
      margin-inline-end: 0;
    }
  }

  .tab-icon-stack {
    margin-inline-end: 6px;
  }

  .tab-sharing-icon-overlay {
    fill: var(--warning-color);
  }

  @media (prefers-reduced-motion: no-preference) {
    .tab-icon-image[sharing]:not([selected]),
    .tab-sharing-icon-overlay {
      animation: 3s linear uc-tab-sharing-icon-pulse infinite;
    }
  }

  /* without this, when hovering a tab, the sharing icon and tab icon will just
  instantly disappear without transition. this is because opacity is animated by
  the built-in sharing pulse animation, but it's also the property animated for
  the transition from hover to no-hover, used to hide the icon/image to reveal
  the close button, and vice versa. you can't animate and transit the same
  property at the same time. by using filter: opacity() instead of the property
  opacity, we can continue using opacity as the transition property. */
  @keyframes uc-tab-sharing-icon-pulse {
    0%,
    16.66%,
    83.33%,
    100% {
      filter: opacity(0);
    }
    33.33%,
    66.66% {
      filter: opacity(1);
    }
  }

  .tab-icon-image[sharing]:not([selected]) {
    animation-delay: -1.5s;
  }

  /* panel icon margin */
  #BMB_bookmarksPopup .subviewbutton > .menu-iconic-text,
  #PlacesToolbar menu > .menu-iconic-text,
  #PlacesToolbar menuitem > .menu-iconic-text,
  .subviewbutton-iconic > .toolbarbutton-text,
  .subviewbutton[image] > .toolbarbutton-text,
  .subviewbutton[targetURI] > .toolbarbutton-text,
  .subviewbutton.bookmark-item > .toolbarbutton-text,
  .subviewbutton[checked="true"] > .toolbarbutton-text {
    padding-inline-start: var(--arrowpanel-subviewbutton-iconic-gap, 8px);
  }

  /* hide tab bar's arrow buttons and spacers */
  #tabbrowser-arrowscrollbox::part(overflow-start-indicator),
  #tabbrowser-arrowscrollbox::part(overflow-end-indicator),
  #tabbrowser-tabs:not([movingtab]) #tabbrowser-arrowscrollbox::part(scrollbutton-up),
  #tabbrowser-tabs:not([movingtab]) #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
    visibility: collapse;
  }

  #tabbrowser-arrowscrollbox::part(scrollbutton-up),
  #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
    border: none;
    border-radius: 0;
    z-index: 23;
    /* visibility of scrollbuttons is tied to
    userChrome.tabs.drag-scrolling.enabled */
    display: var(--tab-scrollbuttons-display, none);
    -moz-context-properties: fill, fill-opacity;
    padding-inline: 2px;
    width: 16px;
    background: var(--lwt-accent-color);
    list-style-image: url(chrome://userchrome/content/menu-arrow-left-big.svg);
  }

  #tabbrowser-arrowscrollbox::part(scrollbutton-up) {
    margin-inline: 0 -16px;
  }

  #tabbrowser-arrowscrollbox::part(scrollbutton-down) {
    margin-inline: -16px 0;
  }

  #tabbrowser-arrowscrollbox[scrolledtostart="true"]::part(scrollbutton-up),
  #tabbrowser-arrowscrollbox[scrolledtoend="true"]::part(scrollbutton-down) {
    opacity: 1;
  }

  .tabbrowser-tab {
    overflow: revert;
    justify-items: center;
  }

  #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]):not([orient="vertical"]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-inline-start: revert;
  }

  .tabbrowser-tab[pinned] .tab-content {
    min-width: revert;
  }

  /* devtools highlighter */
  :root > iframe.devtools-highlighter-renderer {
    z-index: 2147483647;
  }

  /* undo window inactive tab text opacity */
  :root[tabsintitlebar] {
    .tab-label-container:-moz-window-inactive {
      opacity: revert;
    }

    #navigator-toolbox:-moz-lwtheme:-moz-window-inactive {
      color: inherit;
    }
  }

  /* dim unloaded/discarded tabs */
  .tabbrowser-tab[pending] .tab-content :is(.tab-icon-image, .tab-label, .tab-sharing-icon-overlay) {
    opacity: 0.7;
  }

  .tabbrowser-tab[pending]:is(:hover, .keyboard-focused-tab, [open]) .tab-content :is(.tab-icon-image, .tab-label, .tab-sharing-icon-overlay) {
    opacity: 0.8;
  }

  /* protections popup panel's arrow style */
  #protections-popup[mainviewshowing][side="top"]::part(arrow) {
    fill: var(--arrowpanel-background);
    stroke: var(--panel-border-color);
  }

  @-moz-document regexp("^chrome:(?!\/\/(devtools|mozapps|browser\/content\/(sanitize|places\/places.xhtml)|global\/content\/commonDialog)).*") {
    .panel-footer > button,
    .footer-button {
      font-weight: var(--uc-font-weight-bold, 600);
    }
  }

  #PanelUI-whatsNew .whatsNew-message-title,
  #protections-popup-message .whatsNew-message-title,
  #contextual-feature-recommendation-notification[data-notification-category="icon_and_message"] .popup-notification-description,
  menulist:not([native])::part(label-box),
  #cfr-notification-header-label,
  panel:is([type="autocomplete-richlistbox"], #PopupAutoComplete) > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title .ac-emphasize-text-title {
    font-weight: var(--uc-font-weight-bold, 600);
  }

  #customizationui-widget-panel[viewId^="PanelUI-webext-"]::part(content),
  #customizationui-widget-panel[viewId^="PanelUI-webext-"]::part(arrowcontent) {
    border-radius: var(--webextension-panel-border-radius, 5px) !important;
    border: var(--customized-webextension-panel-border, 0) !important;
  }

  #customizationui-widget-panel[viewId^="PanelUI-webext-"]::part(arrow) {
    stroke: var(--customized-webextension-panel-stroke, var(--arrowpanel-background));
  }

  #customizationui-widget-panel[viewId^="PanelUI-webext-"][side="top"]::part(arrow) {
    margin-bottom: var(--customized-webextension-panel-margin-bottom, calc(-1px - var(--panel-inner-box-margin, 4px)));
  }

  #customizationui-widget-panel[viewId^="PanelUI-webext-"][side="bottom"]::part(arrow) {
    margin-top: var(--customized-webextension-panel-margin-top, calc(-1px - var(--panel-inner-box-margin, 4px)));
  }

  #customization-panelWrapper {
    margin-top: -12px;
    min-width: 29em;
  }

  #customization-container,
  #customization-container :is(menupopup, panel)::part(content),
  #customizationPaletteItemContextMenu,
  #customizationPaletteItemContextMenu::part(content),
  #customizationPanelItemContextMenu[backdrop-color="gray"],
  #customizationPanelItemContextMenu[backdrop-color="gray"]::part(content),
  #sidebarMenu-popup[backdrop-color="gray"],
  #sidebarMenu-popup[backdrop-color="gray"]::part(content),
  window#alertNotification #alertSettings :is(menupopup, panel)::part(content),
  :is(menupopup[menu-api], menupopup[menu-api] menupopup)::part(content) {
    --arrowpanel-dimmed: color-mix(in srgb, var(--uc-toolbar-color) 7%, transparent);
    --arrowpanel-dimmed-further: color-mix(in srgb, var(--uc-toolbar-color) 12%, transparent);
    --arrowpanel-dimmed-even-further: color-mix(in srgb, var(--uc-toolbar-color) 15%, transparent);
    --arrowpanel-background: var(--in-content-bg-darker, rgb(21, 21, 23));
    --panel-background: var(--arrowpanel-background);
    --button-bgcolor: var(--arrowpanel-dimmed);
    --button-hover-bgcolor: var(--arrowpanel-dimmed-further);
    --button-active-bgcolor: var(--arrowpanel-dimmed-even-further);
    --button-background-color: var(--arrowpanel-dimmed);
    --button-background-color-hover: var(--arrowpanel-dimmed-further);
    --button-background-color-active: var(--arrowpanel-dimmed-even-further);
    --panel-item-hover-bgcolor: var(--arrowpanel-dimmed);
    --panel-item-active-bgcolor: var(--arrowpanel-dimmed-further);
    --menu-background-color: var(--arrowpanel-background);
    --menuitem-hover-background-color: var(--button-hover-bgcolor);
    --menu-disabled-color: var(--ui-text-40);
    --panel-shortcut-color: var(--ui-text-40);
    --panel-description-color: var(--ui-text-40);
    --uc-panel-description-color: var(--ui-text-40);
    --arrowpanel-border-color: color-mix(in srgb, currentColor 12%, var(--in-content-bg-darker, rgb(21, 21, 23))) !important;
    --panel-border-color: var(--arrowpanel-border-color) !important;
    --menu-separator-color: var(--arrowpanel-border-color) !important;
    --uc-checkbox-unchecked-bgcolor: color-mix(in srgb, var(--toolbar-color) 7%, transparent);
    --uc-checkbox-unchecked-hover-bgcolor: color-mix(in srgb, var(--toolbar-color) 12%, transparent);
    --uc-checkbox-unchecked-active-bgcolor: color-mix(in srgb, var(--toolbar-color) 15%, transparent);
    --urlbar-input-bgcolor: color-mix(in srgb, currentColor 4%, var(--in-content-button-highlight-dark));
  }

  #customization-container {
    background-image: revert;
    background-color: -moz-Dialog;

    :root[lwtheme] & {
      background-image: revert;
      background-color: -moz-Dialog;
    }
  }

  /* dark gray context menus/menulists in system pages with gray theme */
  @-moz-document url-prefix("chrome://browser/content/places/places.xhtml"),
    url("chrome://mozapps/content/downloads/unknownContentType.xhtml"),
    regexp("^about:.*$"),
    url-prefix("chrome://devtools/content/")
  {
    :is(menupopup)::part(content) {
      --arrowpanel-dimmed: color-mix(in srgb, var(--uc-toolbar-color) 7%, transparent);
      --arrowpanel-dimmed-further: color-mix(in srgb, var(--uc-toolbar-color) 12%, transparent);
      --arrowpanel-dimmed-even-further: color-mix(in srgb, var(--uc-toolbar-color) 15%, transparent);
      --arrowpanel-background: var(--in-content-bg-darker, rgb(21, 21, 23));
      --button-bgcolor: var(--arrowpanel-dimmed);
      --button-hover-bgcolor: var(--arrowpanel-dimmed-further);
      --button-active-bgcolor: var(--arrowpanel-dimmed-even-further);
      --button-background-color: var(--arrowpanel-dimmed);
      --button-background-color-hover: var(--arrowpanel-dimmed-further);
      --button-background-color-active: var(--arrowpanel-dimmed-even-further);
      --search-box-focus: var(--button-active-bgcolor);
      --panel-item-hover-bgcolor: var(--arrowpanel-dimmed);
      --panel-item-active-bgcolor: var(--arrowpanel-dimmed-further);
      --menu-background-color: var(--arrowpanel-background);
      --menuitem-hover-background-color: var(--button-hover-bgcolor);
      --menu-disabled-color: var(--ui-text-40);
      --panel-shortcut-color: var(--ui-text-40);
      --uc-panel-shortcut-color: var(--ui-text-40);
      --panel-description-color: var(--ui-text-40);
      --uc-panel-description-color: var(--ui-text-40);
      --arrowpanel-border-color: color-mix(in srgb, currentColor 12%, var(--in-content-bg-darker, rgb(21, 21, 23))) !important;
      --panel-border-color: var(--arrowpanel-border-color) !important;
      --menu-separator-color: var(--arrowpanel-border-color) !important;
      --uc-checkbox-unchecked-bgcolor: color-mix(in srgb, var(--toolbar-color) 7%, transparent);
      --uc-checkbox-unchecked-hover-bgcolor: color-mix(in srgb, var(--toolbar-color) 12%, transparent);
      --uc-checkbox-unchecked-active-bgcolor: color-mix(in srgb, var(--toolbar-color) 15%, transparent);
    }
  }

  #customization-container :is(menupopup, panel)::part(content),
  #customization-panelWrapper > .panel-arrowcontent {
    border-radius: var(--arrowpanel-border-radius, 0);
    box-shadow: var(--uc-panel-shadow);
  }

  #customization-panelWrapper > .panel-arrowcontent {
    position: absolute;
    margin-top: 12px;
    z-index: 250;
  }

  #customization-panelWrapper > .panel-arrowbox {
    z-index: 251 !important;
    position: absolute;
  }

  #customization-uidensity-touch-spacer {
    margin-inline: calc(-1 * var(--arrowpanel-padding) / 2) !important;
  }

  #customization-footer {
    border: none;
    background-color: var(--in-content-box-bg-dark);
  }

  .customizationmode-button {
    border: 1px solid var(--in-content-border-color-dim);
    border-radius: var(--in-content-button-border-radius);
    background-color: var(--button-hover-bgcolor);
    appearance: none;
  }

  .customizationmode-button:is(:active, :focus-visible, :hover):not([disabled]),
  .customizationmode-button[open],
  .customizationmode-button[checked] {
    background-color: var(--button-active-bgcolor);
  }

  .customizationmode-checkbox:not([disabled]),
  .customizationmode-button {
    color: var(--toolbar-color);
  }

  #customization-toolbar-visibility-button,
  #customization-uidensity-button {
    padding-inline-start: 8px;
  }

  #customization-done-button {
    font-weight: 500;
    border-color: transparent;
    background-color: var(--in-content-primary-button-background);
  }

  #customization-done-button:is(:active, :focus-visible, :hover):not([disabled]) {
    background-color: var(--in-content-primary-button-background-hover);
  }

  .customization-lwtheme-menu-footeritem {
    font-weight: 500;
  }

  @-moz-document url(chrome://browser/content/browser.xhtml)
  {
    :is(#customization-lwtheme-menu, #customization-uidensity-menu):is([side="bottom"], [side="right"])::part(arrowbox) {
      order: 2;
    }

    :is(#customization-lwtheme-menu, #customization-uidensity-menu)::part(arrow) {
      transform: scaleY(-1);
      margin-bottom: revert;
      position: relative;
      margin-inline: 10px;
    }

    :is(#customization-lwtheme-menu, #customization-uidensity-menu)[side="top"]::part(arrow) {
      margin-top: -5px;
    }

    #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
      margin-top: 3px;
    }
  }

  #identity-icon {
    list-style-image: var(--default-identity-icon);
  }

  .identity-popup-security-connection {
    -moz-context-properties: fill, stroke;
    stroke: var(--warning-icon-stroke);
  }

  /* dropmarkers and other select/menulist stuff */
  @-moz-document url(chrome://browser/content/browser.xhtml), url(chrome://mozapps/content/downloads/unknownContentType.xhtml), url(chrome://mozapps/content/handling/permissionDialog.xhtml), url(chrome://mozapps/content/handling/appChooser.xhtml), url-prefix(chrome://global/content/print.html), url(chrome://browser/content/places/bookmarkProperties.xhtml), url(chrome://browser/content/places/bookmarkProperties2.xhtml)
  {
    menulist:not([native]) {
      padding-inline: 6px;
    }

    :root[dialogroot] select:not([size], [multiple]) {
      background-position: right 6px center;
      padding-inline-start: 8px;
      font-weight: revert;
    }

    :root[dialogroot] select:not([size], [multiple])[iconic] {
      padding-inline-start: calc(8px + 16px + 4px);
      background-size: auto 12px, 16px;
      background-position: right 19px center, left 8px center;
    }

    #printer-picker {
      background-position: right 6px center, left 8px center;
    }

    :is(panel, dialog) menulist {
      --menulist-dropmarker-opacity: 0.6;
      padding: var(--panel-menulist-padding, 4px 6px);
    }

    :is(panel, dialog) menulist:where(:hover) {
      --menulist-dropmarker-opacity: 0.8;
    }

    :is(panel, dialog) menulist:is(:focus-visible, :hover:active, [open="true"]) {
      --menulist-dropmarker-opacity: 1;
    }

    #permission-popup-menulist,
    #permission-popup-menulist > menupopup,
    .permission-popup-permission-remove-button {
      min-width: 77px;
    }

    :is(panel, dialog) menulist::part(icon) {
      -moz-context-properties: fill, fill-opacity;
    }

    :is(panel, dialog) menulist[image]::part(icon) {
      margin-inline-end: var(--context-iconic-margin-end, 6px);
    }

    menulist::part(label) {
      appearance: none;
      margin-block: 0;
    }

    :is(panel, dialog) menulist::part(label) {
      font-weight: normal;
      margin: 1px 0;
    }

    :is([message-bar-type="infobar"]:first-of-type) {
      margin-top: revert;
    }

    menulist::part(dropmarker) {
      display: flex;
      appearance: none;
      width: 14px;
      flex: revert;
      margin-inline: var(--menulist-dropmarker-margin, 8px 0);
      margin-block: 0;
      padding: 0;
      border: 0;
      content: url(chrome://userchrome/content/arrow-dropdown-16.svg);
      fill: currentColor;
      fill-opacity: var(--menulist-dropmarker-opacity, 1);
      -moz-context-properties: fill, fill-opacity;
    }

    #editBMPanel_folderMenuList::part(icon) {
      margin-inline: 1px 6px;
    }

    #editBookmarkPanel menulist::part(dropmarker) {
      content: url(chrome://userchrome/content/menu-arrow-down-big.svg);
      width: 12px;
    }
  }

  .popup-notification-learnmore-link {
    margin-block: 2px;
  }

  /* proton stuff */
  .subviewbutton > menupopup::part(innerbox) {
    border-radius: 5px;
  }

  .menu-text,
  .menu-iconic-text {
    padding-block: 0;
  }

  panel:where(:not(.tooltip-xul-wrapper)) button {
    border: revert;
  }

  #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child,
  #nav-bar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
    padding: 0 var(--toolbarbutton-outer-padding);
  }

  /* prevent hiding the close button when audio is playing.
  undoes an irritating rule in the proton update */
  :root[uidensity="compact"] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay),
  #tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay),
  :root:not([uidensity="compact"]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay[indicator-replaces-favicon],
  :root:not([uidensity="compact"]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) {
    opacity: revert;
  }

  /* revert proton changes */
  .browserContainer > findbar {
    padding: 0;
  }

  .findbar-container {
    padding-block: 0;
    padding-inline: 8px;
    margin-inline: 0;
    height: 20px;
  }

  .findbar-find-previous,
  .findbar-find-next {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid ThreeDShadow;
    border-inline-start: none;
    border-radius: 0;
  }

  .findbar-find-previous > .toolbarbutton-icon,
  .findbar-find-next > .toolbarbutton-icon {
    padding: 0;
  }

  .findbar-find-previous {
    margin-inline-start: 0;
  }

  .findbar-find-next {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    margin-inline-end: 0;
  }

  panelview .toolbarbutton-1:not([disabled]):is([open], :hover:active),
  toolbarbutton.subviewbutton:not([disabled]):is([open], :hover:active),
  .navigable.subviewbutton:not([disabled]):is([open], :hover:active),
  menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
  #PlacesToolbar menuitem:not([disabled])[_moz-menuactive]:active,
  #PlacesToolbar menu:not([disabled])[_moz-menuactive]:active,
  menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
  .widget-overflow-list .toolbarbutton-1:not([disabled]):is([open], :hover:active),
  .toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton:not([disabled]):is([open], :hover:active) {
    box-shadow: revert;
  }

  #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer {
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    width: 20px;
    height: 20px;
    border-radius: 0;
    border: none;
    background-image: url(chrome://userchrome/content/downloads/progress-circle.svg);
    background-position: center;
    background-size: 20px;
  }

  #downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box {
    z-index: initial;
  }

  .customization-target :is(#reload-button, #stop-button) > .toolbarbutton-icon {
    padding: var(--toolbarbutton-inner-padding) !important;
  }

  :is(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
    translate: revert;
  }

  #stop-reload-button > :is(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
    display: block;
  }

  #stop-reload-button[animate] > #reload-button > .toolbarbutton-icon,
  #stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-icon {
    fill: transparent;
  }

  @keyframes reload-to-stop {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-450px);
    }
  }

  @keyframes stop-to-reload {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-450px);
    }
  }

  #stop-reload-button {
    position: relative;
  }

  #reload-button > .toolbarbutton-animatable-box,
  #stop-button > .toolbarbutton-animatable-box {
    /* Vertically center the 20px tall animatable image */
    top: calc(50% - 10px);
    /* Width of each frame within the SVG sprite */
    width: 18px;
    /* Height of each frame within the SVG sprite */
    height: 20px;
  }

  #stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    background-image: url(chrome://userchrome/content/skin/reload-to-stop.svg);
    width: 468px;
  }

  #stop-reload-button[animate] > #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    animation-name: reload-to-stop;
  }

  #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    animation-timing-function: steps(25);
    animation-duration: 200ms;
  }

  #stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    background-image: url(chrome://userchrome/content/skin/stop-to-reload.svg);
    width: 468px;
  }

  #stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    animation-name: stop-to-reload;
  }

  #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    animation-timing-function: steps(25);
    animation-duration: 200ms;
  }

  #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
  #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    transform: translateX(-450px);
  }

  #reload-button {
    list-style-image: url(chrome://userchrome/content/skin/reload.svg);
  }

  #picture-in-picture-button > .urlbar-icon {
    list-style-image: url("chrome://userchrome/content/pictureinpicture.svg");
  }

  #picture-in-picture-button[pipactive] > .urlbar-icon {
    list-style-image: url("chrome://userchrome/content/pictureinpicture-closed.svg");
  }

  #stop-button {
    list-style-image: url(chrome://userchrome/content/skin/stop.svg);
  }

  #home-button {
    list-style-image: url(chrome://userchrome/content/skin/home.svg);
  }

  #bookmarks-toolbar-button,
  #bookmarks-toolbar-placeholder {
    list-style-image: url(chrome://userchrome/content/skin/bookmarks-toolbar.svg);
  }

  #bookmarks-menu-button {
    list-style-image: url(chrome://userchrome/content/skin/bookmark-star-on-tray.svg);
  }

  #history-panelmenu,
  #sidebar-switcher-history > .toolbarbutton-icon,
  #sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
    list-style-image: url(chrome://userchrome/content/skin/history.svg);
  }

  #downloads-button {
    list-style-image: url(chrome://userchrome/content/skin/downloads/download-icons.svg#arrow-with-bar);
  }

  #open-file-button {
    list-style-image: url(chrome://userchrome/content/skin/open.svg);
  }

  #screenshot-button {
    list-style-image: var(--screenshot-icon, url(chrome://browser/skin/screenshot.svg));
  }

  #import-button {
    list-style-image: url(chrome://userchrome/content/skin/import.svg);
  }

  #save-page-button {
    list-style-image: url(chrome://userchrome/content/skin/save.svg);
  }

  #sync-button,
  #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
    list-style-image: url(chrome://userchrome/content/skin/synced-tabs.svg);
  }

  #characterencoding-button {
    list-style-image: url(chrome://userchrome/content/skin/characterEncoding.svg);
  }

  #new-window-button {
    list-style-image: url(chrome://userchrome/content/skin/new-window.svg);
  }

  #new-tab-button {
    list-style-image: url(chrome://userchrome/content/skin/new-tab.svg);
  }

  #tabs-newtab-button,
  #TabsToolbar #new-tab-button {
    list-style-image: url(chrome://userchrome/content/add.svg);
  }

  #alltabs-button {
    list-style-image: url(chrome://userchrome/content/arrow-dropdown-16.svg);

    #TabsToolbar & {
      list-style-image: url(chrome://userchrome/content/arrow-dropdown-16.svg);
    }
  }

  #privatebrowsing-button {
    list-style-image: url(chrome://userchrome/content/skin/new-private.svg);
  }

  #find-button {
    list-style-image: url(chrome://userchrome/content/search-glass.svg);
  }

  #print-button {
    list-style-image: url(chrome://global/skin/icons/print.svg);
  }

  #fullscreen-button {
    list-style-image: url(chrome://userchrome/content/skin/fullscreen.svg);
  }

  #developer-button {
    list-style-image: url(chrome://userchrome/content/skin/developer.svg);
  }

  #profiler-button-button > .toolbarbutton-icon {
    list-style-image: url(chrome://userchrome/content/devtools/tool-profiler.svg);
  }

  #profiler-button-button:not(.profiler-active) > image {
    transform: scaleX(-1);
  }

  #profiler-button-button.profiler-active > image {
    fill: #0060df;
    fill-opacity: 1;
    background-color: #0060df33;
  }

  #profiler-button-button.profiler-active:hover > image {
    background-color: #0060df22;
  }

  #profiler-button-button.profiler-paused > image {
    opacity: 0.4;
  }

  #preferences-button {
    list-style-image: url(chrome://userchrome/content/settings.svg);
  }

  #PanelUI-menu-button {
    list-style-image: url(chrome://userchrome/content/skin/menu.svg);
  }

  #PanelUI-menu-button[badge-status="update-available"],
  #PanelUI-menu-button[badge-status="update-downloading"],
  #PanelUI-menu-button[badge-status="update-manual"],
  #PanelUI-menu-button[badge-status="update-other-instance"],
  #PanelUI-menu-button[badge-status="update-restart"] {
    list-style-image: url(chrome://userchrome/content/skin/menu-badged.svg);
  }

  #cut-button {
    list-style-image: url(chrome://userchrome/content/skin/edit-cut.svg);
  }

  #copy-button {
    list-style-image: url(chrome://userchrome/content/skin/edit-copy.svg);
  }

  #paste-button {
    list-style-image: url(chrome://userchrome/content/skin/edit-paste.svg);
  }

  #zoom-out-button {
    list-style-image: url(chrome://userchrome/content/skin/zoom-out.svg);
  }

  #zoom-in-button {
    list-style-image: url(chrome://userchrome/content/skin/zoom-in.svg);
  }

  #PlacesChevron,
  #nav-bar-overflow-button {
    list-style-image: url(chrome://userchrome/content/chevron.svg);
  }

  #nav-bar-overflow-button[animate] > .toolbarbutton-icon {
    fill: transparent;
  }

  @keyframes overflow-animation {
    from {
      transform: translateX(0);
    }
    50% {
      fill: var(--toolbarbutton-icon-fill-attention);
      fill-opacity: 1;
    }
    to {
      transform: translateX(-1260px);
      fill: var(--toolbarbutton-icon-fill-attention);
      fill-opacity: 1;
    }
  }

  /* The animation is supposed to show the blue fill color for 520ms, then the
  fade to the toolbarbutton-fill color for the remaining 210ms. Thus with an
  animation-duration of 730ms, 71% is the point where we start the fade out. */
  @keyframes overflow-fade {
    from {
      fill: var(--toolbarbutton-icon-fill-attention);
      fill-opacity: 1;
    }
    71% {
      fill: var(--toolbarbutton-icon-fill-attention);
      fill-opacity: 1;
    }
    to {
      fill: inherit;
    }
  }

  #nav-bar-overflow-button > .toolbarbutton-animatable-box {
    /* Vertically center the 36px tall animatable image */
    top: calc(50% - 18px);
    /* Since .toolbarbutton-icon uses a different width than the animatable box,
    we need to set a padding relative to the difference in widths. */
    margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 18px) / 2);
    /* Width of each frame within the SVG sprite */
    width: 18px;
    /* Height of each frame within the SVG sprite */
    height: 36px;
  }

  #nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    /* Minimum height must be equal to the height of the SVG sprite */
    min-height: 36px;
  }

  #nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    animation-name: overflow-animation;
    animation-timing-function: steps(70);
    animation-duration: 1167ms;
    background-image: url(chrome://userchrome/content/skin/chevron-animation.svg);
    width: 1278px;
  }

  #nav-bar-overflow-button[animate][fade] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
    animation-name: overflow-fade;
    animation-timing-function: ease-out;
    animation-duration: 730ms;
  }

  #email-link-button {
    list-style-image: url(chrome://userchrome/content/skin/mail.svg);
  }

  #panic-button {
    list-style-image: url(chrome://userchrome/content/skin/forget.svg);
  }

  #panic-button[open] {
    fill: rgb(213, 32, 20);
  }

  toolbar[brighttext] #panic-button[open] {
    fill: #ff848b;
  }

  #navigator-toolbox {
    position: relative;
  }

  #save-to-pocket-button {
    list-style-image: url(chrome://userchrome/content/skin/pocket-outline.svg);
    fill: var(--lwt-toolbarbutton-icon-fill, currentColor);
    fill-opacity: var(--toolbarbutton-icon-fill-opacity);
  }

  #save-to-pocket-button[open="true"],
  #save-to-pocket-button[pocketed="true"] {
    list-style-image: url(chrome://userchrome/content/skin/pocket.svg);
    fill: #ef4056;
  }

  .subviewbutton-back {
    margin: var(--arrowpanel-menuitem-margin);
  }

  .panel-header > .subviewbutton-back {
    list-style-image: url(chrome://userchrome/content/menu-arrow-left.svg);
    padding: var(--toolbarbutton-inner-padding, 8px);
  }

  .panel-header > .subviewbutton-back + h1 {
    margin-inline: 4px 40px;
  }

  .notification-anchor-icon {
    list-style-image: url(chrome://userchrome/content/info-filled.svg);
    padding: 0;
  }

  #permissions-granted-icon {
    list-style-image: url(chrome://userchrome/content/formfill.svg);
    margin-top: 1px;
    margin-inline: 6px 0;
  }

  #urlbar #identity-box :is(.sharing-icon, .notification-anchor-icon, .blocked-permission-icon) {
    margin-inline-start: 6px;
  }

  #notification-popup-box {
    margin: 0;
    padding: 0;
  }

  /* webrtc notifications */
  #webRTC-selectCamera-icon {
    list-style-image: url(chrome://userchrome/content/notifications/camera.svg);
  }

  #webRTC-selectMicrophone-icon {
    list-style-image: url(chrome://userchrome/content/notifications/microphone.svg);
  }

  .tab-sharing-icon-overlay[sharing="camera"] {
    list-style-image: url(chrome://userchrome/content/notifications/camera.svg);
  }

  .tab-sharing-icon-overlay[sharing="microphone"] {
    list-style-image: url(chrome://userchrome/content/notifications/microphone.svg);
  }

  .tab-sharing-icon-overlay[sharing="screen"] {
    list-style-image: url(chrome://userchrome/content/notifications/screen.svg);
  }

  /* INDIVIDUAL NOTIFICATIONS */

  .notification-anchor-icon#default-notification-icon {
    list-style-image: url(chrome://userchrome/content/material/notification.svg);
  }

  .focus-tab-by-prompt-icon {
    list-style-image: url(chrome://userchrome/content/skin/tab.svg);
  }

  .popup-notification-icon[popupid="storage-access"],
  .storage-access-icon,
  .cookie-icon {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/3rdpartycookies.svg);
  }

  .storage-access-icon.blocked-permission-icon,
  .cookie-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/3rdpartycookies-disabled.svg);
  }

  .popup-notification-icon[popupid="persistent-storage"],
  .persistent-storage-icon {
    list-style-image: url(chrome://userchrome/content/notifications/persistent-storage.svg);
  }

  .persistent-storage-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/notifications/persistent-storage-blocked.svg);
  }

  .popup-notification-icon[popupid="web-notifications"],
  .desktop-notification-icon {
    list-style-image: url(chrome://userchrome/content/notifications/desktop-notification.svg);
  }

  .desktop-notification-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/notifications/desktop-notification-blocked.svg);
  }

  .geo-icon {
    list-style-image: url(chrome://userchrome/content/notifications/geo.svg);
  }

  .geo-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/notifications/geo-blocked.svg);
  }

  .popup-notification-icon[popupid="geolocation"] {
    list-style-image: url(chrome://userchrome/content/notifications/geo-detailed.svg);
  }

  .open-protocol-handler-icon {
    list-style-image: url(chrome://userchrome/content/material/open-in-new.svg);
  }

  .open-protocol-handler-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/material/open-in-new-blocked.svg);
  }

  .shortcuts-icon {
    list-style-image: url(chrome://userchrome/content/material/keyboard-command.svg);
  }

  .shortcuts-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/material/keyboard-command-blocked.svg);
  }

  .xr-icon {
    list-style-image: url(chrome://userchrome/content/notifications/xr.svg);
  }

  .xr-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/notifications/xr-blocked.svg);
  }

  .popup-notification-icon[popupid="xr"] {
    list-style-image: url(chrome://userchrome/content/notifications/xr.svg);
  }

  .popup-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/notifications/popup.svg);
  }

  .autoplay-media-icon,
  .autoplay-icon {
    list-style-image: url(chrome://userchrome/content/notifications/autoplay-media.svg);
  }

  .popup-notification-icon[popupid="autoplay-media"] {
    list-style-image: url(chrome://userchrome/content/notifications/autoplay-media-detailed.svg);
  }

  .autoplay-media-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/notifications/autoplay-media-blocked.svg);
  }

  .storage-access-notification-content {
    color: var(--panel-disabled-color);
    font-style: italic;
    margin-top: 15px;
  }

  .storage-access-notification-content .text-link {
    color: -moz-nativehyperlinktext;
  }

  .storage-access-notification-content .text-link:hover {
    text-decoration: underline;
  }

  #storage-access-notification .popup-notification-body-container {
    padding: 20px;
  }

  .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
  .indexedDB-icon {
    list-style-image: url(chrome://userchrome/content/notifications/indexedDB.svg);
  }

  .popup-notification-icon[popupid="password"],
  .login-icon {
    list-style-image: url(chrome://userchrome/content/skin/login.svg);
  }

  .login-icon[extraAttr="attention"] {
    fill: var(--toolbarbutton-icon-fill-attention);
    fill-opacity: 1;
  }

  .camera-icon {
    list-style-image: url(chrome://userchrome/content/notifications/camera.svg);
  }

  .camera-icon.in-use {
    list-style-image: url(chrome://userchrome/content/notifications/camera.svg);
  }

  .camera-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/notifications/camera-blocked.svg);
  }

  .microphone-icon {
    list-style-image: url(chrome://userchrome/content/notifications/microphone.svg);
  }

  .microphone-icon.in-use {
    list-style-image: url(chrome://userchrome/content/notifications/microphone.svg);
  }

  .microphone-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/notifications/microphone-blocked.svg);
  }

  .popup-notification-icon.microphone-icon {
    list-style-image: url(chrome://userchrome/content/notifications/microphone-detailed.svg);
  }

  .screen-icon {
    list-style-image: url(chrome://userchrome/content/notifications/screen.svg);
  }

  .screen-icon.in-use {
    list-style-image: url(chrome://userchrome/content/notifications/screen.svg);
  }

  .screen-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/notifications/screen-blocked.svg);
  }

  .speaker-icon {
    list-style-image: url(chrome://userchrome/content/audioUnmutedButton.svg);
  }

  .midi-icon,
  .popup-notification-icon[popupid="midi"] {
    list-style-image: url(chrome://userchrome/content/notifications/midi.svg);
  }

  .midi-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/notifications/midi-blocked.svg);
  }

  .midi-sysex-icon,
  .popup-notification-icon[popupid="midi-sysex"] {
    list-style-image: url(chrome://userchrome/content/material/midi-port.svg);
  }

  .midi-sysex-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/material/midi-port-blocked.svg);
  }

  #canvas-notification-icon,
  .popup-notification-icon[popupid="canvas-permissions-prompt"],
  .canvas-icon {
    list-style-image: url(chrome://userchrome/content/notifications/canvas.svg);
  }

  .canvas-icon.blocked-permission-icon {
    list-style-image: url(chrome://userchrome/content/notifications/canvas-blocked.svg);
  }

  #webauthn-notification-icon,
  .popup-notification-icon[popupid^="webauthn-prompt-"] {
    list-style-image: url(chrome://userchrome/content/notifications/webauthn.svg);
  }

  /* EME */

  .popup-notification-icon[popupid="drmContentPlaying"],
  .drm-icon {
    list-style-image: url(chrome://userchrome/content/skin/drm-icon.svg);
  }

  .notification-anchor-icon[animate="true"],
  #eme-notification-icon[firstplay="true"] {
    animation: emeTeachingMoment 0.2s linear 0s 5 normal;
  }

  @keyframes emeTeachingMoment {
    0% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(3px);
    }
    75% {
      transform: translateX(-3px);
    }
    100% {
      transform: translateX(0);
    }
  }

  /* INSTALL ADDONS */

  .install-icon {
    list-style-image: url(chrome://userchrome/content/material/extension.svg);
  }

  .install-icon.blocked-permission-icon,
  .popup-notification-icon[popupid="xpinstall-disabled"],
  .popup-notification-icon[popupid="addon-install-blocked"],
  .popup-notification-icon[popupid="addon-install-origin-blocked"] {
    list-style-image: url(chrome://userchrome/content/skin/addons/addon-install-blocked.svg);
  }

  .popup-notification-icon[popupid="addon-progress"] {
    list-style-image: url(chrome://userchrome/content/skin/addons/addon-install-downloading.svg);
  }

  .popup-notification-icon[popupid="addon-install-failed"] {
    list-style-image: url(chrome://userchrome/content/skin/addons/addon-install-error.svg);
  }

  .popup-notification-icon[popupid="addon-install-confirmation"] {
    list-style-image: url(chrome://userchrome/content/material/extension.svg);
  }

  #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
    list-style-image: url(chrome://userchrome/content/skin/addons/addon-install-warning.svg);
  }

  .popup-notification-icon[popupid="addon-install-complete"] {
    list-style-image: url(chrome://userchrome/content/skin/addons/addon-install-installed.svg);
  }

  /* OFFLINE APPS */

  .popup-notification-icon[popupid="offline-app-usage"] {
    list-style-image: url(chrome://userchrome/content/help.svg);
  }

  /* PLUGINS */

  .plugin-icon {
    list-style-image: url(chrome://userchrome/content/plugin.svg);
    transition: fill 1.5s;
  }

  #plugin-icon-badge {
    list-style-image: url(chrome://userchrome/content/notifications/plugin-badge.svg);
    width: 16px;
    height: 16px;
    opacity: 0;
    transition: opacity 1.5s;
  }

  #plugins-notification-icon:not(.plugin-blocked)[extraAttr="inactive"] > .plugin-icon {
    fill-opacity: 0.25;
  }

  #plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge {
    opacity: 1;
  }

  #plugins-notification-icon[extraAttr="inactive"] > #plugin-icon-badge[animate] {
    animation: blink-badge 1000ms ease 0s 5 alternate both;
  }

  @keyframes blink-badge {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .plugin-blocked > .plugin-icon {
    list-style-image: url(chrome://userchrome/content/plugin-blocked.svg);
    fill: #d92215 !important;
  }

  .plugin-blocked > #plugin-icon-badge {
    visibility: collapse;
  }

  #plugins-notification-icon.plugin-blocked[showing] {
    animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
  }

  @keyframes pluginBlockedNotification {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* TRANSLATION */

  .translation-icon {
    list-style-image: url(chrome://userchrome/content/material/translate.svg);
    -moz-image-region: auto;
  }

  .translation-icon.in-use {
    -moz-image-region: auto;
  }

  .translation-icon.in-use:not(:hover, :focus-visible, :active, [open]) {
    fill-opacity: 1;
    fill: var(--toolbarbutton-icon-fill-attention);
  }

  /* UPDATE */
  .popup-notification-icon[popupid="update-available"],
  .popup-notification-icon[popupid="update-downloading"],
  .popup-notification-icon[popupid="update-manual"],
  .popup-notification-icon[popupid="update-other-instance"],
  .popup-notification-icon[popupid="update-restart"] {
    background: #74bf43 url(chrome://userchrome/content/notifications/update.svg) no-repeat center;
    border-radius: 50%;
  }

  .popup-notification-icon[popupid="update-unsupported"] {
    background: #ffe900 url(chrome://userchrome/content/notifications/update.svg) no-repeat center;
    border-radius: 50%;
  }

  #pageActionButton,
  .share-more-button {
    list-style-image: url(chrome://userchrome/content/more.svg);
  }

  #reader-mode-button > .urlbar-icon {
    list-style-image: url(chrome://userchrome/content/skin/reader-mode.svg);
  }

  #pageAction-panel-bookmark,
  #star-button {
    list-style-image: url(chrome://userchrome/content/skin/bookmark-hollow.svg);
  }

  #sidebar-switcher-bookmarks,
  #pageAction-panel-bookmark[starred],
  #star-button[starred] {
    list-style-image: url(chrome://userchrome/content/skin/bookmark.svg);
  }

  .protections-popup-category-icon.trackers-icon {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/tracker-image.svg);
  }

  .socialblock-icon,
  .protections-popup-category-icon.socialblock-icon {
    list-style-image: url(chrome://userchrome/content/material/dislike.svg);
  }

  .protections-popup-category-icon.thirdpartycookies-icon {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/3rdpartycookies.svg);
  }

  .protections-popup-category-icon.cryptominers-icon {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/cryptominers.svg);
  }

  .protections-popup-category-icon.fingerprinters-icon {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/fingerprinters.svg);
  }

  .protections-popup-trackersView-icon {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/tracker-image-disabled.svg);
    width: 16px;
    height: 16px;
  }

  .protections-popup-trackersView-icon.allowed {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/tracker-image.svg);
  }

  .protections-popup-socialblockView-icon {
    list-style-image: url(chrome://userchrome/content/material/dislike-disabled.svg);
  }

  .protections-popup-socialblockView-icon.allowed {
    list-style-image: url(chrome://userchrome/content/material/dislike.svg);
  }

  .protections-popup-cookiesView-icon {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/3rdpartycookies-disabled.svg);
  }

  .protections-popup-cookiesView-icon.allowed {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/3rdpartycookies.svg);
  }

  .protections-popup-fingerprintersView-icon {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/fingerprinters-disabled.svg);
  }

  .protections-popup-fingerprintersView-icon.allowed {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/fingerprinters.svg);
  }

  .protections-popup-cryptominersView-icon {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/cryptominers-disabled.svg);
  }

  .protections-popup-cryptominersView-icon.allowed {
    list-style-image: url(chrome://userchrome/content/skin/controlcenter/cryptominers.svg);
  }

  /* ctrl tab */
  #ctrlTab-panel::part(content) {
    flex-flow: column nowrap;
    justify-content: center;
    color: inherit;
    padding: 30px 30px 20px 30px;
  }

  #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::part(icon)
  {
    display: none;
  }

  #handlersView .actionsMenu[image="chrome://browser/skin/preferences/application.png"]::before
  {
    width: 16px;
    height: 16px;
    margin-inline: 11px 8px;
    fill: currentColor;
    -moz-context-properties: fill, fill-opacity, stroke;
    content: "";
    /* see uc-nsRules.au.css */
    /* display: -moz-inline-box; */
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(chrome://userchrome/content/shortcut.svg);
  }

  #handlersView .actionIcon[src="chrome://browser/skin/preferences/application.png"]
  {
    width: 16px;
    height: 16px;
    margin-inline: 11px 8px;
    fill: currentColor;
    -moz-context-properties: fill, fill-opacity, stroke;
    content: "";
    /* display: -moz-inline-box; */
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(chrome://userchrome/content/shortcut.svg);
    padding-inline-start: 16px !important;
  }

  .checkbox-check {
    appearance: none;
    color: var(--checkbox-border-color, ThreeDShadow);
    background-color: var(--checkbox-unchecked-bgcolor, Field);
    border: 1px solid currentColor;
    border-radius: 2px;
    margin-inline-end: 6px;

    &:not([native]) {
      /* TODO: Make this em-based, probably? */
      width: 16px;
      height: 16px;

      checkbox:focus-visible > & {
        outline: var(--focus-outline);
      }
    }

    &[checked] {
      border-color: var(--checkbox-checked-border-color, transparent);
      background-color: var(--checkbox-checked-bgcolor, AccentColor);
      background-image: url("chrome://global/skin/icons/check.svg");
      background-position: center;
      background-repeat: no-repeat;
      -moz-context-properties: fill;
      fill: currentColor;
      color: var(--checkbox-checked-color, AccentColorText);
      /* Style the button also when printing with "Print Backgrounds" unchecked */
      color-adjust: exact;
    }

    &[native] {
      appearance: auto;
      -moz-default-appearance: checkbox;
      align-items: center;
    }
  }

  checkbox:not([disabled="true"]):hover {
    > .checkbox-check {
      background-color: var(--checkbox-unchecked-hover-bgcolor, color-mix(in srgb, AccentColor 4%, Field));

      @media (prefers-contrast) {
        /* color will set the border-color on the check due to how HCM works for in-content pages. */
        color: var(--checkbox-checked-border-color, color-mix(in srgb, AccentColor 4%, Field));
      }

      &[checked] {
        background-color: var(--checkbox-checked-hover-bgcolor, color-mix(in srgb, currentColor 12.5%, AccentColor));

        @media (prefers-contrast) {
          color: var(--checkbox-checked-border-color, AccentColorText);
          fill: var(--checkbox-checked-color, AccentColorText);
          background-color: var(--checkbox-checked-bgcolor, AccentColor);
        }
      }
    }

    &:active > .checkbox-check {
      background-color: var(--checkbox-unchecked-active-bgcolor, color-mix(in srgb, AccentColor 8%, Field));

      &[checked] {
        background-color: var(--checkbox-checked-active-bgcolor, color-mix(in srgb, currentColor 25%, AccentColor));

        @media (prefers-contrast) {
          color: var(--checkbox-checked-border-color, AccentColorText);
          fill: var(--checkbox-checked-color, AccentColorText);
          background-color: var(--checkbox-checked-bgcolor, AccentColor);
        }
      }
    }
  }

  .checkbox-label[native] {
    margin: 0;
  }

  #tab-preview-panel::part(arrowbox),
  #selection-shortcut-action-panel::part(arrowbox),
  #chat-shortcuts-options-panel::part(arrowbox),
  #feature-callout::part(arrowbox) {
    display: none;
  }

  #selection-shortcut-action-panel {
    --panel-subview-body-padding: var(--panel-subview-body-padding-magnitude);
    transform: none !important;
    margin: revert !important;
  }

  #chat-shortcuts-options-panel {
    margin-inline: 0 !important;
    margin-top: calc(2px - (2 * var(--panel-shadow-margin))) !important;
    margin-bottom: 0 !important;
  }

  #ai-action-button {
    --button-min-height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
    --button-size-icon: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
    --button-border-radius: var(--toolbarbutton-border-radius);
    --button-padding-icon: var(--toolbarbutton-inner-padding);
    --icon-size-default: 16px;
    margin: 0;
  }

  @-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml"),
    url("chrome://global/content/appPicker.xhtml")
  {
    :root {
      --in-content-page-color: rgb(21, 20, 26);
      --in-content-page-background: #fff;
      --in-content-text-color: var(--in-content-page-color);
      --in-content-box-background: #fff;
      --in-content-box-background-odd: rgba(12, 12, 13, 0.05);
      --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent);
      --in-content-box-info-background: #f0f0f4;
      --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent);
      --in-content-item-hover-text: var(--in-content-page-color);
      --in-content-item-selected: var(--in-content-primary-button-background);
      --in-content-item-selected-text: var(--in-content-primary-button-text-color);
      --in-content-icon-color: rgb(91, 91, 102);
      --in-content-accent-color: #0a84ff;
      --in-content-accent-color-active: #0060df;
      --in-content-border-hover: var(--grey-90-a50);
      --in-content-border-invalid: var(--red-50);
      --in-content-border-color: #d7d7db;
      --in-content-error-text-color: #c50042;
      --in-content-link-color: var(--blue-60);
      --in-content-link-color-hover: var(--blue-70);
      --in-content-link-color-active: var(--blue-80);
      --in-content-link-color-visited: var(--blue-60);
      --in-content-button-text-color: var(--in-content-text-color);
      --in-content-button-text-color-hover: var(--in-content-text-color);
      --in-content-button-text-color-active: var(--in-content-button-text-color-hover);
      --in-content-button-background: rgba(207, 207, 216, 0.33);
      --in-content-button-background-hover: rgba(207, 207, 216, 0.66);
      --in-content-button-background-active: rgb(207, 207, 216);
      --in-content-button-border-color: transparent;
      --in-content-button-border-color-hover: transparent;
      --in-content-button-border-color-active: var(--in-content-button-border-color-hover);
      --in-content-primary-button-text-color: rgb(251, 251, 254);
      --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color);
      --in-content-primary-button-background: #0061e0;
      --in-content-primary-button-background-hover: #0250bb;
      --in-content-primary-button-background-active: #053e94;
      --in-content-primary-button-border-color: transparent;
      --in-content-primary-button-border-hover: transparent;
      --in-content-focus-outline-color: var(--in-content-primary-button-background);
      --in-content-table-background: #f8f8fa;
      --in-content-table-border-color: var(--in-content-box-border-color);
      --in-content-table-header-background: var(--in-content-primary-button-background);
      --in-content-table-header-color: var(--in-content-primary-button-text-color);
      --checkbox-border-color: var(--in-content-box-border-color);
      --checkbox-unchecked-bgcolor: var(--in-content-button-background);
      --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover);
      --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active);
      --checkbox-checked-bgcolor: var(--in-content-primary-button-background);
      --checkbox-checked-color: var(--in-content-primary-button-text-color);
      --checkbox-checked-border-color: transparent;
      --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover);
      --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active);
      --blue-40: #45a1ff;
      --blue-50: #0a84ff;
      --blue-60: #0060df;
      --blue-70: #003eaa;
      --blue-80: #002275;
      --grey-30: #d7d7db;
      --grey-60: #4a4a4f;
      --grey-90-a10: rgba(12, 12, 13, 0.1);
      --grey-90-a20: rgba(12, 12, 13, 0.2);
      --grey-90-a30: rgba(12, 12, 13, 0.3);
      --grey-90-a50: rgba(12, 12, 13, 0.5);
      --grey-90-a60: rgba(12, 12, 13, 0.6);
      --green-50: #30e60b;
      --green-60: #12bc00;
      --green-70: #058b00;
      --green-80: #006504;
      --green-90: #003706;
      --orange-50: #ff9400;
      --red-40: #ff4f5e;
      --red-50: #ff0039;
      --red-60: #d70022;
      --red-70: #a4000f;
      --red-80: #5a0002;
      --red-90: #3e0200;
      --yellow-50: #ffe900;
      --yellow-60: #d7b600;
      --yellow-60-a30: rgba(215, 182, 0, 0.3);
      --yellow-70: #a47f00;
      --yellow-80: #715100;
      --yellow-90: #3e2800;
      --shadow-10: 0 1px 4px var(--grey-90-a10);
      --shadow-30: 0 4px 16px var(--grey-90-a10);
      accent-color: var(--in-content-accent-color);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --in-content-page-background: rgb(28, 27, 34);
        --in-content-page-color: rgb(251, 251, 254);
        --in-content-box-background: rgb(35, 34, 43);
        --in-content-box-background-odd: rgba(249, 249, 250, 0.05);
        --in-content-box-info-background: rgba(249, 249, 250, 0.15);
        --in-content-border-color: rgba(249, 249, 250, 0.2);
        --in-content-border-hover: rgba(249, 249, 250, 0.3);
        --in-content-border-invalid: rgb(255, 132, 139);
        --in-content-button-background: rgb(43, 42, 51);
        --in-content-button-background-hover: rgb(82, 82, 94);
        --in-content-button-background-active: rgb(91, 91, 102);
        --in-content-icon-color: rgb(251, 251, 254);
        --in-content-primary-button-text-color: rgb(43, 42, 51);
        --in-content-primary-button-background: rgb(0, 221, 255);
        --in-content-primary-button-background-hover: rgb(128, 235, 255);
        --in-content-primary-button-background-active: rgb(170, 242, 255);
        --in-content-table-background: rgb(35, 34, 43);
        --in-content-accent-color: var(--in-content-primary-button-background);
        --in-content-accent-color-active: var(--in-content-primary-button-background-hover);
        --in-content-link-color: var(--in-content-primary-button-background);
        --in-content-link-color-hover: var(--in-content-primary-button-background-hover);
        --in-content-link-color-active: var(--in-content-primary-button-background-active);
        --in-content-link-color-visited: var(--in-content-link-color);
        --link-color: var(--in-content-primary-button-background);
        --link-color-hover: var(--in-content-primary-button-background-hover);
        --link-color-active: var(--in-content-primary-button-background-active);
        --link-color-visited: var(--in-content-link-color);
        --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);
      }
    }

    :root {
      background-color: var(--in-content-page-background);
      color: var(--in-content-page-color);
    }

    menulist {
      appearance: none;
      min-height: var(--menuitem-height);
      color: var(--in-content-button-text-color);
      border: 1px solid var(--in-content-button-border-color);
      border-radius: 4px;
      background-color: var(--in-content-button-background);
      font-weight: 400;
      padding: 5px 7px;
      text-decoration: none;
      margin: 4px 8px;
      font-size: 1em;
    }

    menulist:not([disabled="true"]):hover {
      background-color: var(--in-content-button-background-hover);
      color: var(--in-content-button-text-color-hover);
      border-color: var(--in-content-button-border-color-hover);
    }

    menulist[open="true"]:not([disabled="true"]) {
      background-color: var(--in-content-button-background-active);
      color: var(--in-content-button-text-color-active);
      border-color: var(--in-content-button-border-color-active);
    }

    menulist[disabled="true"] {
      opacity: 0.4;
    }

    menulist[image]::part(icon) {
      margin-inline-end: 5px;
    }

    .checkbox-check,
    .checkbox-check[native],
    .radio-check {
      appearance: none;
      min-width: 13px;
      min-height: 13px;
      margin-inline-end: 5px;
    }

    checkbox:focus-visible > .checkbox-check,
    radiogroup:focus-visible > radio[focused] > .radio-check,
    radiogroup:focus-visible radio[focused] .radio-check  {
      outline: var(--global-focus-outline);
    }

    .radio-label-box {
      margin-inline-start: 0;
      padding-bottom: 1px;
      padding-inline-start: 1px;
    }

    .radio-check {
      appearance: none;
      color: var(--checkbox-border-color, ThreeDDarkShadow);
      background-color: var(--checkbox-unchecked-bgcolor, Field);
      border: 1px solid currentColor;
      border-radius: 50%;
      align-items: center;
    }

    .radio-check[selected] {
      border-color: var(--checkbox-checked-border-color, transparent);
      background-color: var(--checkbox-checked-bgcolor);
      background-image: url("chrome://global/skin/icons/radio.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      -moz-context-properties: fill;
      fill: currentColor;
      color: var(--checkbox-checked-color);
      color-adjust: exact;
    }

    radio:not([disabled="true"]):hover:active > .radio-check[selected] {
      background-color: var(--checkbox-checked-active-bgcolor, color-mix(in srgb, currentColor 25%));
    }

    radio:not([disabled="true"]):hover > .radio-check[selected] {
      background-color: var(--checkbox-checked-hover-bgcolor, color-mix(in srgb, currentColor 12.5%));
    }

    radio:not([disabled="true"]):hover:active > .radio-check {
      background-color: var(--checkbox-unchecked-active-bgcolor, color-mix(in srgb 8%, Field));
    }

    radio:not([disabled="true"]):hover > .radio-check {
      background-color: var(--checkbox-unchecked-hover-bgcolor, color-mix(in srgb 4%, Field));
    }

    radio[disabled="true"] {
      color: var(--uc-menu-disabled-color);
    }
  }
}
