/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@import url("chrome://global/skin/global.css");
@import url("chrome://messenger/content/webextensions.css");
@import url("chrome://messenger/skin/autocomplete.css");
@import url("chrome://messenger/skin/variables.css");
@import url("chrome://messenger/skin/splitter.css");
@import url("chrome://messenger/skin/widgets.css");

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

:root {
  user-select: none;
}

:root,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: clip;
}

#messengerWindow {
  text-rendering: optimizeLegibility;
  min-height: 95px;
  min-width: 95px;
}

:root:-moz-locale-dir(rtl) {
  direction: rtl;
}

body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

p {
  margin: 2px 4px;
}

hr {
  width: 100%;
  border-top: 1px solid var(--field-border-color);
  border-bottom: 0;
}

:root:not([sizemode=maximized]) .titlebar-restore,
:root:is([sizemode=maximized]) .titlebar-max {
  display: none;
}

#toolbar-menubar[autohide="true"] {
  overflow: hidden;
}

#toolbar-menubar[autohide="true"][inactive="true"]:not([customizing="true"]) {
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  appearance: none !important;
}

#titlebar-spacer {
  pointer-events: none;
}

#navigation-toolbox:-moz-lwtheme,
#compose-toolbox:-moz-lwtheme {
  background-color: var(--lwt-accent-color);
  background-image: var(--lwt-additional-images);
  background-repeat: var(--lwt-background-tiling);
  background-position: var(--lwt-background-alignment);
}

:root:not([tabsintitlebar]) #navigation-toolbox:-moz-lwtheme {
  color: var(--toolbar-color, inherit);
  background-color: var(--toolbar-bgcolor);
}

/* When a theme defines both theme_frame and additional_backgrounds, show
   the latter atop the former. */
:root[lwtheme-image] #navigation-toolbox,
:root[lwtheme-image] #compose-toolbox {
  background-image: var(--lwt-header-image), var(--lwt-additional-images);
  background-repeat: no-repeat, var(--lwt-background-tiling);
  background-position: right top, var(--lwt-background-alignment);
}

:root[tabsintitlebar] #navigation-toolbox:-moz-window-inactive:-moz-lwtheme,
#compose-toolbox:-moz-window-inactive:-moz-lwtheme {
  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
}

#titlebar > #toolbar-menubar:-moz-window-inactive,
#titlebar > #tabs-toolbar:-moz-window-inactive {
  color: color-mix(in srgb, currentColor 70%, transparent);
}

.tree-columnpicker-button {
  list-style-image: var(--icon-column-menu);
  padding-inline: 4px;
  border-style: none;
  border-radius: 0;
  -moz-context-properties: stroke, fill;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
}

.thread-tree-col-picker > image,
.thread-tree-icon-header img {
  -moz-context-properties: stroke, fill;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
}

treechildren::-moz-tree-row(selected, current, focus) {
  outline: 1px solid color-mix(in srgb, var(--selected-item-color), black 10%);
  outline-offset: -1px;
}

tree > treechildren::-moz-tree-row(hover) {
  background-color: hsla(0, 0%, 50%, 0.15);
}

tree > treechildren::-moz-tree-row(selected) {
  background-color: -moz-cellhighlight;
}

tree > treechildren::-moz-tree-row(selected, focus) {
  background-color: var(--selected-item-color);
}

treechildren::-moz-tree-twisty {
  -moz-context-properties: stroke;
  stroke: currentColor;
  color: #505050;
}

@media (prefers-color-scheme: dark) {
  treechildren::-moz-tree-twisty {
    color: #d4d4d4;
  }
}

treechildren::-moz-tree-twisty(selected, focus) {
  stroke: var(--select-focus-text-color);
}

/* LW theme tree styling */
:root[lwt-tree] #threadTree treechildren::-moz-tree-row(untagged, selected),
:root[lwt-tree]:-moz-window-inactive #threadTree treechildren::-moz-tree-row(selected),
:root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-row(selected) {
  border-color: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, .3));
  background: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, .3));
  outline: none;
}

:root[lwt-tree] treechildren::-moz-tree-row(current, focus) {
  border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.6));
}

/* Dark theme adaptions */
:root[lwt-tree-brighttext] #threadTree treechildren::-moz-tree-row(untagged, selected),
:root[lwt-tree-brighttext]:-moz-window-inactive #threadTree treechildren::-moz-tree-row(selected),
:root[lwt-tree-brighttext] tree:not(#threadTree) treechildren::-moz-tree-row(selected) {
  border-color: var(--sidebar-highlight-background-color, rgba(249, 249, 250, .1));
  background: var(--sidebar-highlight-background-color, rgba(249, 249, 250, .1));
}

:root[lwt-tree-brighttext] treechildren::-moz-tree-row(current, focus) {
  border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.3));
}

:root[lwt-tree] #threadTree treechildren::-moz-tree-row(untagged, selected, focus, current),
:root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-row(selected, focus, current) {
  border-color: var(--sidebar-highlight-border-color, var(--item-focus-selected-border-color));
}

/* toolbar */

toolbar[type="menubar"][autohide="true"] {
  overflow: hidden;
}

toolbar[type="menubar"][autohide="true"][inactive="true"]:not([customizing="true"]) {
  min-height: 0 !important;
  height: 0 !important;
  appearance: none !important;
}

/* Show hidden toolbars in customize mode */
toolbar[customizing="true"][collapsed="true"] {
  visibility: visible;
}

/* toolbarbutton */

.toolbarbutton-1 {
  flex-direction: column;
  margin: 4px 1px;
  padding: 1px 5px !important;
  -moz-context-properties: fill, stroke, fill-opacity;
  fill: color-mix(in srgb, var(--toolbarbutton-icon-fill, currentColor) 20%, transparent);
  stroke: var(--toolbarbutton-icon-fill, currentColor);
  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
}

.toolbarbutton-1,
.toolbarbutton-menubutton-button {
  min-height: 24px;
  min-width: 32px;
  margin: 4px 1px;
  padding: 1px 5px !important;
}

:root[uidensity="touch"] .toolbarbutton-1:not([is="toolbarbutton-menu-button"]),
:root[uidensity="touch"] .toolbarbutton-1 > .toolbarbutton-menubutton-button,
:root[uidensity="touch"] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
  padding: 5px !important;
}

.toolbarbutton-menubutton-button {
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

toolbox[labelalign="end"] .toolbarbutton-1,
toolbox[labelalign="end"] .toolbarbutton-menubutton-button,
toolbox:not([mode="full"]) .toolbarbutton-1,
toolbox:not([mode="full"]) .toolbarbutton-menubutton-button {
  flex-direction: row;
}

/* Replicate the xul.css rule for when toolbar button icons are html:img instead
 * of xul:image. */
toolbar[mode="text"] .toolbarbutton-icon {
  display: none;
}

toolbar[mode="full"] .toolbarbutton-1:not([hideWebExtensionLabel="true"]) {
  min-width: 55px;
}

toolbar:not([mode="text"]) .toolbarbutton-1[hideWebExtensionLabel="true"] .toolbarbutton-text {
  display: none;
}

#header-view-toolbar .toolbarbutton-1[hideWebExtensionLabel="true"] .toolbarbutton-text {
  display: none;
}

.toolbarbutton-menubutton-dropmarker {
  pointer-events: none;
}

.toolbarbutton-1:not([is="toolbarbutton-menu-button"]),
.toolbarbutton-1 > .toolbarbutton-menubutton-button,
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
  border: 1px solid transparent;
  border-radius: var(--button-border-radius);
  transition: background-color .15s, border-color .15s;
}

.toolbarbutton-1:not([disabled="true"]):is(:hover,[open="true"]) >
.toolbarbutton-menubutton-button,
.toolbarbutton-1:not([disabled="true"]):hover >
.toolbarbutton-menubutton-dropmarker,
.toolbarbutton-1:not([is="toolbarbutton-menu-button"],[disabled="true"],[checked="true"],[open="true"],:active):hover {
  background-color: var(--toolbarbutton-hover-background);
  border-color: var(--toolbarbutton-hover-bordercolor);
  box-shadow: var(--toolbarbutton-hover-boxshadow);
}

.toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
.toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
.toolbarbutton-1:not([is="toolbarbutton-menu-button"],[disabled="true"]):is([open="true"],[checked="true"],:hover:active) {
  background-color: var(--toolbarbutton-checked-background);
  border-color: var(--toolbarbutton-active-bordercolor);
  box-shadow: var(--toolbarbutton-active-boxshadow);
  transition-duration: 10ms;
}

.toolbarbutton-1:not([is="toolbarbutton-menu-button"],[disabled="true"]):hover:active,
.toolbarbutton-1:not([is="toolbarbutton-menu-button"],[disabled="true"])[open="true"],
.toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
.toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]) {
  background-color: var(--toolbarbutton-active-background) !important;
}

.toolbarbutton-1[is="toolbarbutton-menu-button"] > .toolbarbutton-menubutton-button {
  border-inline-end: none;
  margin: 0;
}

.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
  height: auto;
  width: auto;
  padding: 1px 5px;
}

.toolbarbutton-1 .toolbarbutton-menu-dropmarker,
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
  list-style-image: var(--icon-nav-down-sm);
  -moz-context-properties: stroke;
  stroke: currentColor;
}

.toolbarbutton-1 .toolbarbutton-menu-dropmarker::part(icon),
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker::part(icon) {
  width: 12px;
}

/* Separator between menu and split type buttons */
.toolbarbutton-1:not(:hover,:active,[open],[checked]) >
.toolbarbutton-menubutton-dropmarker::before,
.toolbarbutton-1[disabled="true"] >
.toolbarbutton-menubutton-dropmarker::before {
  margin-inline: -6px 5px;
}

.toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(ltr),
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(rtl),
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(ltr) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

toolbox[labelalign="end"] > toolbar[mode="full"] .toolbarbutton-1 .toolbarbutton-text {
  padding-inline-start: 2px;
}

.toolbarbutton-1 .toolbarbutton-icon {
  /* NOTE: At the moment, these rule can be applied to either xul:image elements
   * (the plain toolbarbutton elements, defined in mozilla) or html:img
   * elements (custom extensions in comm).
   * The icon content is meant to be 16px by 16px, but xul:image sizing is
   * essentially always border-box, and a content-box value would be ignored. We
   * include this explicit border-box value for buttons that use a html:img
   * icon.
   * If all such icons become html:img elements, then it will be safe to use the
   * default content-box sizing. */
  box-sizing: border-box;
  padding: 1px;
  width: 18px;
  height: 18px;
}

.toolbarbutton-menubutton-button > .toolbarbutton-icon {
  padding: 1px;
}

/* Separator between menu and split type buttons */
.toolbarbutton-1:not(:hover,:active,[open],[checked]) >
.toolbarbutton-menubutton-dropmarker::before,
.toolbarbutton-1[disabled="true"] >
.toolbarbutton-menubutton-dropmarker::before {
  content: "";
  display: flex;
  width: 1px;
  height: 18px;
  background-image: linear-gradient(currentColor 0, currentColor 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1px 18px;
  opacity: .2;
}

toolbox:not([labelalign="end"]) > toolbar[mode="full"]
  .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"] {
  padding-inline-end: 15px !important;
  background-image: var(--icon-nav-down-sm);
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: calc(100% - 4px) center;
}

toolbox:not([labelalign="end"]) > toolbar[mode="full"]
  .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"]:-moz-locale-dir(rtl) {
  background-position: 4px center;
}

toolbox:not([labelalign="end"]) > toolbar[mode="full"]
  .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"][disabled="true"] {
  opacity: 0.4;
}

/* Don't set a reduced opacity because we set it on the whole button. */
toolbox:not([labelalign="end"]) > toolbar[mode="full"]
  .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"][disabled="true"]
  .toolbarbutton-icon,
toolbox:not([labelalign="end"]) > toolbar[mode="full"]
  .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"][disabled="true"]
  .toolbarbutton-text {
  opacity: 1;
}

toolbox:not([labelalign="end"]) > toolbar[mode="full"]
  .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"] >
  .toolbarbutton-menu-dropmarker {
  display: none;
}

toolbar[brighttext] .toolbarbutton-1:not(:hover,:active,[open]) >
  .toolbarbutton-menubutton-dropmarker::before {
  opacity: .3;
}

#alltabs-button {
  margin-block: 3px;
}

#palette-box .toolbarbutton-1 {
  flex-direction: row;
}

description.error {
  color: #f00;
}

.sidebar-header {
  min-height: 25px;
  text-shadow: none;
}

.sidebar-header > xul|label {
  padding-inline-start: 4px;
}

menupopup,
menubar {
  font-size: inherit;
}

menulist {
  min-height: 24px;
  margin-block: 4px;
  color: var(--button-text-color);
  border: 1px solid var(--toolbarbutton-hover-bordercolor);
  border-radius: var(--button-border-radius);
  background-color: var(--toolbarbutton-hover-background);
  box-shadow: var(--toolbarbutton-hover-boxshadow);
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 150ms;
}

menulist:-moz-lwtheme {
  color: inherit;
}

/* Override the not existing rule in menu.css */
menulist[disabled="true"]:hover,
menulist[open="true"]:hover {
  background-color: var(--toolbarbutton-hover-background);
}

menulist:not([disabled="true"],[open="true"]):hover {
  background-color: var(--toolbarbutton-active-background);
  border-color: var(--toolbarbutton-active-bordercolor);
}

menulist[open="true"] {
  background-color: var(--toolbarbutton-active-background);
  border-color: var(--toolbarbutton-active-bordercolor);
  box-shadow: var(--toolbarbutton-active-boxshadow);
}

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

menulist::part(label-box) {
  font-weight: inherit;
}

menulist::part(dropmarker-icon) {
  -moz-context-properties: stroke;
  stroke: currentColor;
  width: 16px;
}

menupopup.no-accel-menupopup > :is(menu, menuitem) > .menu-accel-container {
  display: none;
}

/* NOTE: the menuitem children must be constructed with the menuitem-iconic
 * class so that this rule can hide the icon container. */
menupopup.no-icon-menupopup > :is(menu, menuitem) > .menu-iconic-left {
  display: none;
}

/* Buttons */

button,
html|input[type="color"] {
  appearance: none;
  min-height: 24px;
  min-width: 5.5em;
  color: inherit;
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  background: var(--button-background-color);
  margin: 1px 5px;
  padding: 0 4px;
  box-shadow: none;
}

xul|button:is(:not([disabled="true"])):hover,
html|button:is(:not([disabled])):hover {
  border-color: var(--button-border-color);
  background-color: var(--button-hover-background-color);
}

xul|button:is(:not([disabled="true"])):hover:active,
html|button:is(:not([disabled])):hover:active,
xul|button:is(:not([disabled="true"]))[open="true"],
html|input[type="color"]:not([disabled="true"]):hover,
html|input[type="color"]:not([disabled="true"]):hover:active {
  border-color: var(--button-border-color);
  background-color: var(--button-active-background-color);
}

html|input[type="color"] {
  padding: 4px;
}

/* For buttons that wraps its content with no outline or background.
 * NOTE: the hover background will still appear on hover. */
button.plain-button {
  /* grid display ensures the button only takes up the same room as its
   * content. */
  display: inline grid;
  height: -moz-fit-content;
  min-height: auto;
  min-width: -moz-fit-content;
  border: none;
  background: none;
}

button.plain-button[hidden] {
  display: none;
}

button[is="toolbarbutton-menu-button"] {
  appearance: none;
}

button[is="toolbarbutton-menu-button"] > .button-box > button {
  appearance: none;
  min-width: 5.5em;
  background: transparent;
  border-color: transparent;
  border-inline-end-color: var(--toolbarbutton-active-bordercolor);
  margin-inline: -4px 5px;
  padding: 0 4px;
}

button > .button-box > dropmarker {
  appearance: none;
  list-style-image: var(--icon-nav-down-sm);
  -moz-context-properties: stroke;
  stroke: currentColor;
}

img.invisible-on-broken:-moz-broken {
  visibility: hidden;
}

.popup-notification-button {
  height: auto;
  border-style: none;
  border-radius: 0;
}

#notification-popup-box {
  display: flex;
  align-items: center;
  gap: 9px;
}

#notification-popup-box > .notification-anchor-icon {
  width: 16px;
  height: 16px;
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, var(--toolbarbutton-icon-fill, currentColor) 20%, transparent);
  stroke: var(--toolbarbutton-icon-fill, currentColor);
  opacity: var(--toolbarbutton-icon-fill-opacity);
}

/* notification anchors should only be visible when their associated
   notifications are */
.notification-anchor-icon {
  -moz-user-focus: normal;
}

.notification-anchor-icon:not([showing]) {
  display: none;
}

.popup-notification-icon {
  width: 32px;
  height: 32px;
  margin-inline-end: 12px;
  -moz-context-properties: fill;
  fill: currentColor;
}

.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://messenger/skin/icons/addon-install-blocked.svg);
}

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

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

.popup-notification-icon[popupid="addon-install-confirmation"] {
  list-style-image: url(chrome://messenger/skin/icons/addon-install-confirm.svg);
}

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

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

.popup-notification-body[popupid="addon-progress"],
.popup-notification-body[popupid="addon-install-confirmation"] {
  width: 28em;
  max-width: 28em;
}

.addon-install-confirmation-name {
  font-weight: bold;
}

html|*.addon-webext-perm-list {
  margin-block-end: 0;
  padding-inline-start: 10px;
}

.addon-webext-perm-single-entry {
  margin-top: 11px;
}

.addon-webext-perm-text,
.addon-webext-perm-single-entry {
  margin-inline-start: 0;
}

.popup-notification-description[popupid="addon-webext-permissions"],
.popup-notification-description[popupid="addon-webext-permissions-notification"] {
  margin-inline-start: -1px;
}

.addon-webext-perm-notification-content,
.addon-installed-notification-content {
  margin-top: 0;
}

#addon-webext-experiment-warning {
  margin-top: 11px;
  margin-inline-start: 0;
}

#addon-webext-perm-info {
  margin-inline-start: 0;
}

#addon-progress-notification-progressmeter {
  margin: 2px 4px;
}

.addon-webext-name {
  display: inline;
  font-weight: bold;
  margin: 0;
}

html|ul.addon-installed-list {
  margin-top: 0;
}

.chromeclass-toolbar {
  overflow-x: hidden;
}

.chromeclass-toolbar toolbarseparator {
  appearance: none;
  min-width: 1px;
  background-image: linear-gradient(
                    transparent 4px,
                    var(--toolbarseparator-color) 4px,
                    var(--toolbarseparator-color) calc(100% - 4px),
                    transparent calc(100% - 4px));
  margin-left: 1px;
  margin-right: 1px;
}

#tabpanelcontainer {
  /* While mail tab browsers load, the window goes transparent. Stop that. */
  background-color: -moz-Dialog;
}

.button-more {
  list-style-image: var(--icon-more);
}

:root[lwt-tree] tree,
:root[lwt-tree] #folderPaneHeader {
  background-color: var(--sidebar-background-color);
  color: var(--sidebar-text-color);
}

:root[lwt-tree-brighttext] treechildren::-moz-tree-twisty {
  color: #d4d4d4;
}

:root[lwt-tree] treechildren::-moz-tree-image,
:root[lwt-tree] #threadTree treechildren::-moz-tree-cell-text(untagged),
:root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-cell-text {
  color: var(--sidebar-text-color);
}

:root[lwt-tree] treechildren::-moz-tree-image(selected),
:root[lwt-tree] #threadTree treechildren::-moz-tree-cell-text(untagged, selected),
:root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-cell-text(selected) {
  color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
}

tree:-moz-lwtheme:not(:focus)
  treechildren::-moz-tree-row(selected) {
  --sidebar-highlight-background-color: hsla(0, 0%, 50%, 0.2);
}

:root[lwt-tree] tree:not(:focus) treechildren::-moz-tree-image(selected),
:root[lwt-tree] #threadTree:not(:focus) treechildren::-moz-tree-cell-text(untagged, selected),
:root[lwt-tree] tree:not(#threadTree,:focus) treechildren::-moz-tree-cell-text(selected) {
  color: var(--sidebar-text-color);
}

:root[lwt-tree] treechildren::-moz-tree-line {
  border-color: var(--sidebar-text-color);
}

:root[lwt-tree] treechildren::-moz-tree-line(selected, focus) {
  border-color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
}

tree > treechildren::-moz-tree-row(dropOn) {
  border-color: var(--selected-item-text-color);
  background-color: var(--selected-item-color) !important;
}

tree > treechildren::-moz-tree-cell-text(primary, dropOn) {
  color: var(--selected-item-text-color);
}

tree > treechildren::-moz-tree-image(primary, dropOn) {
  fill: color-mix(in srgb, var(--selected-item-text-color) 20%, transparent);
  stroke: var(--selected-item-text-color) !important;
}

:root:-moz-lwtheme treecol:not([hideheader="true"]),
:root:-moz-lwtheme .tree-columnpicker-button:not([hideheader="true"]) {
  appearance: none;
  color: inherit;
  background-color: transparent;
  padding-block: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--splitter-color,
                                     hsla(0, 0%, 60%, 0.4)) 50%, transparent);
}

:root:-moz-lwtheme treecol {
  border-inline-end: 1px solid color-mix(in srgb, var(--splitter-color,
                                         hsla(0, 0%, 60%, 0.4)) 50%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:-moz-lwtheme treecol,
  :root:-moz-lwtheme .tree-columnpicker-button {
    border-color: var(--splitter-color, rgba(249, 249, 250, 0.2));
  }

  :root:-moz-lwtheme treecol {
    border-inline-end-color: var(--splitter-color, rgba(249, 249, 250, 0.2));
  }
}

:root:-moz-lwtheme treecol:hover,
:root:-moz-lwtheme .tree-columnpicker-button:hover {
  background-color: hsla(0, 0%, 60%, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:-moz-lwtheme treecol:hover,
  :root:-moz-lwtheme .tree-columnpicker-button:hover {
    background-color: rgba(249, 249, 250, 0.2);
  }
}

.treecol-sortdirection {
  -moz-context-properties: stroke;
  stroke: currentColor;
}

.toolbarbutton-1:not(.qfb-tag-button),
.toolbarbutton-menubutton-button {
  color: inherit !important;
}

/* Don't show a menupopup in customize mode */
toolbarpaletteitem menulist,
toolbarpaletteitem toolbarbutton {
  pointer-events: none;
}

/* throbber */

#throbber-box {
  margin: 0 3px;
  /* Allow image to be center aligned vertically (when in the toolbar) or
   * horizontally (when in the customize toolbar dialog). */
  display: grid;
}

#throbber-box img {
  width: 16px;
  height: 16px;
  align-self: center;
  justify-self: center;
}

#throbber-box:not([busy="true"]) .animated-throbber-icon {
  /* Hide the icon, but still occupy space in the toolbar. */
  visibility: hidden;
}

/* When the throbber-box is wrapped by the customizeToolbar dialog, we show the
 * static image. */
#wrapper-throbber-box > #throbber-box .animated-throbber-icon {
  display: none;
}
/* Else, we hide the static image. */
:not(#wrapper-throbber-box) > #throbber-box .static-throbber-icon {
  display: none;
}

/* Panels. */

panelmultiview[transitioning] {
  pointer-events: none;
}

.panel-viewcontainer {
  overflow: hidden;
}

.panel-viewcontainer[panelopen] {
  transition-property: height;
  transition-timing-function: var(--animation-easing-function);
  transition-duration: var(--panelui-subview-transition-duration);
  will-change: height;
}

.panel-viewcontainer.offscreen {
  display: block;
}

.panel-viewstack {
  overflow: visible;
  transition: height var(--panelui-subview-transition-duration);
}

/* Status panel */

statuspanel {
  position: fixed;
  display: block;
  left: 0;
  bottom: 0;
  z-index: 20;
  max-width: 50%;
  transition: opacity 120ms ease-out, visibility 120ms;
}

statuspanel:-moz-locale-dir(ltr)[mirror],
statuspanel:-moz-locale-dir(rtl):not([mirror]) {
  left: auto;
  right: 0;
}

statuspanel[label=""],
statuspanel:not([label]) {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.statuspanel-inner {
  height: 3em;
  align-items: flex-end;
}

.statuspanel-label {
  display: inline-block;
}

:root[lwt-tree] .statuspanel-label {
  background-color: var(--toolbar-field-background-color);
  color: var(--toolbar-field-color);
  border-color: var(--toolbar-field-border-color);
}

/* Status bar */

.statusbar {
  background-color: var(--layout-background-1);
  border-top: 1px solid var(--splitter-color);
  min-height: 22px;
}

#status-bar:-moz-lwtheme {
  appearance: none;
  background-repeat: no-repeat, var(--lwt-background-tiling);
  background-position: bottom right, var(--lwt-background-alignment);
  background-color: var(--lwt-accent-color);
  background-image: var(--lwt-header-image), var(--lwt-additional-images);
  color: var(--lwt-text-color);
  border-top-color: var(--lwt-tabs-border-color);
}

@media (prefers-color-scheme: dark) {
  .statusbar:-moz-lwtheme {
    border-top-color: var(--lwt-accent-color);
  }
}

#status-bar:-moz-lwtheme toolbarbutton {
  color: var(--lwt-text-color, inherit);
}

.statusbarpanel {
  padding: 0 4px;
}

label.statusbarpanel {
  margin-block: 3px;
  display: inline-block;
}

.statusbarpanel-progress {
  align-items: center;
}

#dialog\.progress,
#shutdown_progressmeter,
.progressmeter-statusbar {
  appearance: none;
  height: 4px;
  background-color: hsla(0, 0%, 60%, 0.2);
  border-style: none;
  border-radius: 2px;
}

#dialog\.progress::-moz-progress-bar,
#shutdown_progressmeter::-moz-progress-bar,
.progressmeter-statusbar::-moz-progress-bar {
  appearance: none;
  background-color: var(--primary);
  border-radius: 2px;
}

#dialog\.progress:indeterminate::-moz-progress-bar,
#shutdown_progressmeter:indeterminate::-moz-progress-bar,
.progressmeter-statusbar:indeterminate::-moz-progress-bar {
  /* Make a white reflecting animation.
     Create a gradient with 2 identical pattern, and enlarge the size to 200%.
     This allows us to animate background-position with percentage. */
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%,
                                           rgba(255, 255, 255, 0.2) 25%,
                                           rgba(255, 255, 255, 0.8) 50%,
                                           rgba(255, 255, 255, 0.2) 75%,
                                           rgba(255, 255, 255, 0.8) 100%);
  background-size: 200% 100%;
}

@media (prefers-color-scheme: dark) {
  #dialog\.progress:indeterminate::-moz-progress-bar,
  #shutdown_progressmeter:indeterminate::-moz-progress-bar,
  .progressmeter-statusbar:indeterminate::-moz-progress-bar {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%,
                                             rgba(0, 0, 0, 0.1) 25%,
                                             rgba(0, 0, 0, 0.5) 50%,
                                             rgba(0, 0, 0, 0.1) 75%,
                                             rgba(0, 0, 0, 0.5) 100%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  #dialog\.progress:indeterminate::-moz-progress-bar,
  #shutdown_progressmeter:indeterminate::-moz-progress-bar,
  .progressmeter-statusbar:indeterminate::-moz-progress-bar {
    animation: progressSlideX 1.5s linear infinite;
  }

  @keyframes progressSlideX {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -100% 0;
    }
  }
}

/* online/offline icons */

#offline-status {
  padding: 0 2px;
  list-style-image: var(--icon-online);
  appearance: none;
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
}

#offline-status[offline="true"] {
  list-style-image: var(--icon-offline);
}

/* status bar adjustments */

#quotaMeter {
  min-width: 8em;
  max-width: 8em;
  height: 10px;
  border: 1px solid var(--chrome-content-separator-color);
}

#quotaPercentageBar {
  border-color: ThreeDShadow;
}

#quotaPanel ::-moz-progress-bar {
  appearance: none;
  background-color: #45a1ff;
  opacity: .75;
  border-radius: 0;
}

#quotaPanel.alert-warning ::-moz-progress-bar {
  background-color: orange;
}

#quotaPanel.alert-critical ::-moz-progress-bar {
  background-color: red;
  opacity: .6;
}

#quotaLabel {
  text-align: center;
  font-size: 0.8rem;
  text-decoration: none;
  margin-top: -1px;
}

/* searchTermOverlay */
@media (prefers-reduced-motion: no-preference) {
  #searchTermList > richlistitem[highlight = "true"] {
    animation: highlight .4s ease-in;
  }

  @keyframes highlight {
    from { background-color: Highlight; }
    to { background-color: transparent; }
  }
}

#findbar-beforeReplaceSeparator {
  height: 16px;
}

findbar {
  background-color: var(--toolbar-bgcolor);
  color: var(--toolbar-color);
  border-top-color: var(--chrome-content-separator-color, ThreeDShadow);
}

findbar:-moz-lwtheme {
  background-color: var(--lwt-accent-color);
  background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images);
  background-repeat: no-repeat, var(--lwt-background-tiling);
  background-position: right bottom, var(--lwt-background-alignment);
  background-position-y: bottom;
}

:root[lwtheme-image] findbar {
  background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
                                    var(--lwt-header-image), var(--lwt-additional-images);
  background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
  background-position: center, right bottom, var(--lwt-background-alignment);
}

/* Workaround until bug 1828322 is fixed */
#messagepanebox > findbar {
  color: var(--layout-color-1);
  background-color: var(--layout-background-1);
  border-top-color: var(--splitter-color);
}

#messagepanebox > findbar > .findbar-container {
  min-width: 100px;
}

/* menupopup/panel */
:is(panel, menupopup)::part(content) {
  --panel-color: var(--layout-color-1);
  --panel-background: var(--layout-background-1);
  --panel-border-color: var(--layout-border-1);
}

/* Panel toolbarbuttons */

.panelTitle {
  margin-top: 8px;
  margin-inline-start: 7px;
  margin-bottom: 6px;
}

.panelButton {
  appearance: none;
  min-height: 24px;
  padding: 4px 6px;
  background-color: transparent;
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
}

.panelButton:focus {
  outline: 0;
}

.panelButton:not([disabled],[open],:active):is(:hover,:focus-visible) {
  background-color: var(--arrowpanel-dimmed);
}

.panelButton:not([disabled]):is([open],:hover:active) {
  background-color: var(--arrowpanel-dimmed-further);
  box-shadow: 0 1px 0 hsla(210, 4%, 10%, .03) inset;
}

.panelButton > .toolbarbutton-text {
  text-align: start;
  padding-inline-start: 6px;
  padding-inline-end: 6px;
}

.panelButton[prettykey]::after {
  content: attr(prettykey);
  float: inline-end;
  color: GrayText;
}

toolbarpaletteitem toolbarspacer,
toolbarpaletteitem toolbarspring {
  -moz-window-dragging: no-drag;
}

/* MailExtension panels */

.mail-extension-panel {
  font: menu;
}

/* Autocomplete labels
 * These styles match those in chrome://calendar/content/calendar-event-dialog-attendees.css. */

html|span.ac-emphasize-text {
  font-weight: bold;
}

.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-url,
.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-separator {
  display: flex;
}

.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-url {
  order: 1;
}

.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-separator {
  order: 2;
}

.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-title {
  order: 3;
}

.ac-url-text {
  max-width: unset !important;
}

/* Date/time picker anchor */
.popup-anchor {
  /* should occupy space but not be visible */
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

html|input[type="number"] {
  margin: 2px 4px;
}
/* sizes: chars + 8px padding + 1px borders + spin buttons 14+0+10px  */
html|input[type="number"].size2 {
  width: calc(2ch + 44px);
}
html|input[type="number"].size3 {
  width: calc(3ch + 44px);
}
html|input[type="number"].size4 {
  width: calc(4ch + 44px);
}
html|input[type="number"].size5 {
  width: calc(5ch + 44px);
}

/* Fix the height of the print preview toolbar */
#print-preview-toolbar {
  max-height: 2.5em;
}

/* Toolbar customization */

toolbar[customizing="true"] {
  outline: 2px dashed var(--focus-outline-color);
  outline-offset: -3px;
  border-radius: 3px;
}

toolbarpaletteitem[type="spacer"][place="toolbar"],
toolbarpaletteitem[type="spring"][place="toolbar"] {
  align-items: center;
}

toolbarpaletteitem[type="spring"][place="toolbar"] {
  flex: 1000 1000;
}

toolbarpaletteitem[type="spacer"][place="toolbar"] toolbarspacer,
toolbarpaletteitem[type="spring"][place="toolbar"] toolbarspring {
  height: 16px;
  margin-inline: 6px;
  opacity: 0.5;
  border-inline: 2px solid currentColor;
  background-image: linear-gradient(transparent calc(50% - 1px), currentColor calc(50% - 1px),
                                    currentColor calc(50% + 1px), transparent calc(50% + 1px));
}

toolbarpaletteitem[type="separator"][place="palette"] toolbarseparator {
  appearance: none;
  width: 1px;
  height: 50px;
  background-color: currentColor;
}

toolbarpaletteitem[type="spacer"][place="palette"] toolbarspacer,
toolbarpaletteitem[type="spring"][place="palette"] toolbarspring {
  margin-bottom: 2px;
  border: 1px solid currentColor;
  background-color: hsla(0, 0%, 100%, .3) !important;
}

toolbarpaletteitem[type="spring"][place="palette"] toolbarspring {
  background: url("chrome://messenger/skin/icons/spring.svg") no-repeat center;
  -moz-context-properties: fill;
  fill: currentColor;
}

panel[type="arrow"].panel-block-padding::part(content) {
  padding-block: 6px;
}

/* Used by the import dialog */
.wizard-box {
  padding: 20px 44px 10px;
}

.image-container > html|img {
  width: 32px;
  -moz-context-properties: fill;
  fill: currentColor;
}

.text-container description {
  margin-block-end: 1em;
}

#viewSource-toolbox {
  appearance: none;
}

/* Print UI, mostly from browser.css */

.browserContainer,
.browserStack {
  flex: 10000 10000;
}

.printPreviewStack {
  position: relative;
}

:is(browser, hbox, tabbox, vbox)[tabDialogShowing],
:is(browser, hbox, tabbox, vbox)[tabDialogShowing] * {
  -moz-user-focus: none !important;
}

.printSettingsBrowser {
  width: 250px !important;
}

.previewStack {
  background-color: #f9f9fa;
  color: #0c0c0d;
}

.previewRendering {
  background-repeat: no-repeat;
  background-size: 60px 60px;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}

.printPreviewBrowser {
  visibility: collapse;
  opacity: 1;
}

.previewStack[rendering=true] > .previewRendering,
.previewStack[previewtype="source"] > .printPreviewBrowser[previewtype="source"],
.previewStack[previewtype="selection"] > .printPreviewBrowser[previewtype="selection"],
.previewStack[previewtype="simplified"] > .printPreviewBrowser[previewtype="simplified"] {
  visibility: inherit;
}

.previewStack[rendering=true] > .printPreviewBrowser {
  opacity: 0;
}

.print-pending-label {
  margin-top: 110px;
  font-size: large;
}

printpreview-pagination {
  opacity: 0;
}
printpreview-pagination:focus-within,
.previewStack:hover printpreview-pagination {
  opacity: 1;
}
.previewStack[rendering=true] printpreview-pagination {
  opacity: 0;
}

@media (prefers-color-scheme: dark) {
  .previewStack {
    background-color: #2A2A2E;
    color: rgb(249, 249, 250);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .previewRendering {
    background-image: url("chrome://messenger/skin/images/pendingpaint.png");
  }

  .printPreviewBrowser {
    transition: opacity 60ms;
  }

  .previewStack[rendering=true] > .printPreviewBrowser {
    transition: opacity 1ms 250ms;
  }

  printpreview-pagination {
    transition: opacity 100ms 500ms;
  }

  printpreview-pagination:focus-within,
  .previewStack:hover printpreview-pagination {
    transition: opacity 100ms;
  }
}

.dialogStack {
  /* Should outrank the z-index values of other UI elements, particularly the devtools
     splitter element. */
  z-index: 11;
  position: absolute;
  inset: 0 0 0 0;
}

.dialogStack.temporarilyHidden {
  /* For some printing use cases we need to visually hide the dialog before
   * actually closing it / make it disappear from the frame tree. */
  visibility: hidden;
}

.dialogOverlay {
  visibility: hidden;
}

.dialogOverlay[topmost="true"] {
  z-index: 1;
}

.dialogBox {
  background-clip: content-box;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  border-radius: 8px;
}

.dialogBox[resizable="true"] {
  resize: both;
  overflow: hidden;
  min-height: 20em;
}

.dialogBox[sizeto="available"] {
  --box-inline-margin: 4px;
  --box-block-margin: 4px;
  --box-ideal-width: 1000;
  --box-ideal-height: 650;
  --box-max-width-margin: calc(100vw - 2 * var(--box-inline-margin));
  --box-max-height-margin: calc(100vh - var(--box-top-px) - var(--box-block-margin));
  --box-max-width-ratio: 70vw;
  --box-max-height-ratio: calc(var(--box-ideal-height) / var(--box-ideal-width) * var(--box-max-width-ratio));
  max-width: min(max(var(--box-ideal-width) * 1px, var(--box-max-width-ratio)), var(--box-max-width-margin));
  max-height: min(max(var(--box-ideal-height) * 1px, var(--box-max-height-ratio)), var(--box-max-height-margin));
  width: 100vw;
  height: 85vh; /* This is 100vh in Firefox but we have less space to work with. */
}

@media (min-width: 550px) {
  .dialogBox[sizeto="available"] {
    --box-inline-margin: min(calc(4px + (100vw - 550px) / 4), 16px);
  }
}

@media (min-width: 800px) {
  .dialogBox[sizeto="available"] {
    --box-inline-margin: min(calc(16px + (100vw - 800px) / 4), 32px);
  }
}

@media (min-height: 350px) {
  .dialogBox[sizeto="available"] {
    --box-block-margin: min(calc(4px + (100vh - 350px) / 4), 16px);
  }
}

@media (min-height: 550px) {
  .dialogBox[sizeto="available"] {
    --box-block-margin: min(calc(16px + (100vh - 550px) / 4), 32px);
  }
}

:not(.content-prompt-dialog) > .dialogOverlay > .dialogBox {
  /* Make dialogs overlap with upper chrome UI. */
  margin-top: 5px;
}

.dialogOverlay[topmost="true"] {
  background-color: rgba(28, 27, 34, 0.45);
}