/* 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://messenger/skin/icons.css");

@namespace html url("http://www.w3.org/1999/xhtml");

:host,
:root {
  --button-background-color: color-mix(in srgb, currentColor 13%, transparent);
  --button-hover-background-color: color-mix(in srgb, currentColor 17%, transparent);
  --button-active-background-color: color-mix(in srgb, currentColor 30%, transparent);
  --button-border-color: color-mix(in srgb, currentColor 17%, transparent);
  --button-border-radius: 3px;
  --box-text-color: MenuText;
  --box-background-color: Menu;
  --box-border-color: ThreeDShadow;
  --checkbox-border-color: var(--field-border-color);
  --checkbox-unchecked-bgcolor: var(--field-background-color);
  --checkbox-unchecked-hover-bgcolor: var(--field-background-color);
  --field-text-color: FieldText;
  --field-background-color: Field;
  --field-border-color: rgba(128, 128, 128, .6);
  --field-border-hover-color: rgba(128, 128, 128, .8);
  --selected-item-color: var(--color-blue-60);
  --primary-text-color: var(--selected-item-text-color);
  --primary-background-hover: color-mix(in srgb, var(--selected-item-color) 85%, black);
  --primary-background-active: color-mix(in srgb, var(--selected-item-color) 78%, black);
  --primary-focus-border: -moz-Dialog;
  --richlist-button-background: -moz-Dialog;
  --tab-hover-background: hsla(0, 0%, 50%, 0.15);
  --tab-selected-background: hsla(0, 0%, 50%, 0.25);
}

:root:-moz-lwtheme {
  --box-text-color: var(--color-ink-90);
  --box-background-color: var(--color-white);
  --box-border-color: var(--color-gray-40);
  --field-text-color: var(--color-gray-90);
  --field-background-color: var(--color-white);
  --field-border-color: rgba(0, 0, 0, 0.3);
  --field-border-hover-color: rgba(0, 0, 0, 0.4);
  --primary-focus-border: var(--lwt-accent-color);
  background-color: var(--lwt-accent-color);
  color: var(--lwt-text-color);
}

:root[lwt-tree] {
  --richlist-button-background: var(--sidebar-background-color);
}

:root:not([lwt-tree]):-moz-lwtheme[lwtheme-image] {
  background-image: var(--lwt-header-image) !important;
  background-repeat: no-repeat;
  background-position: right top !important;
}

:root:not([lwt-tree]):-moz-lwtheme:-moz-window-inactive {
  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
}

:root:not([lwt-tree]):-moz-lwtheme dialog,
#calendar-event-dialog-inner:not([lwt-tree]):-moz-lwtheme,
#calendar-task-dialog-inner:not([lwt-tree]):-moz-lwtheme {
  background-color: -moz-Dialog;
  color: -moz-DialogText;
  text-shadow: none !important;

  --box-text-color: MenuText;
  --box-background-color: Menu;
  --box-border-color: ThreeDShadow;
  --checkbox-border-color: rgba(128, 128, 128, .6);
  --checkbox-unchecked-bgcolor: Field;
  --checkbox-unchecked-hover-bgcolor: Field;
  --field-text-color: FieldText;
  --field-background-color: Field;
  --field-border-color: rgba(128, 128, 128, .6);
  --field-border-hover-color: rgba(128, 128, 128, .8);
  --selected-item-color: var(--color-blue-60);
  --lwt-accent-color: -moz-Dialog;
  --richlist-button-background: -moz-Dialog;
  --tab-hover-background: hsla(0, 0%, 50%, 0.15);
  --tab-selected-background: hsla(0, 0%, 50%, 0.25);
}

@media (prefers-color-scheme: dark) {
  :host,
  :root:-moz-lwtheme,
  :root:not([lwt-tree]):-moz-lwtheme dialog {
    --box-text-color: var(--color-ink-10);
    --box-background-color: var(--color-ink-80);
    --box-border-color: rgba(249, 249, 250, 0.3);
    --field-text-color: var(--color-ink-10);
    --field-background-color: var(--color-gray-70);
    --field-border-color: hsla(0, 0%, 70%, 0.4);
    --field-border-hover-color: hsla(0, 0%, 70%, 0.5);
    --selected-item-color: var(--color-blue-50);
    --highlight-background: var(--color-white);
    --primary-text-color: var(--color-ink-10);
    --tab-hover-background: hsla(0, 0%, 50%, 0.3);
    --tab-selected-background: hsla(0, 0%, 50%, 0.5);
  }
}

@media (prefers-contrast) {
  :host,
  :root:not(:-moz-lwtheme) {
    --button-background-color: ButtonFace;
    --button-hover-background-color: SelectedItem;
    --button-active-background-color: SelectedItem;
    --button-text-active: SelectedItemText;
    --button-border-color: ThreeDShadow;
    --field-border-color: ThreeDShadow;
    --field-border-hover-color: SelectedItemText;
    --primary-text-color: SelectedItemText;
    --selected-item-color: SelectedItem;
    --tab-hover-background: SelectedItem;
    --tab-selected-background: SelectedItem;
  }

  button[open],
  button:not([disabled="true"]):hover,
  button:not([disabled="true"]):hover:active,
  menulist:not([disabled="true"],[open="true"]):hover,
  menulist[open="true"]:not([disabled="true"]),
  tab:hover,
  tab[visuallyselected="true"] {
    color: var(--button-text-active) !important;
  }
}

dialog::part(content-box) {
  flex: 1;
}

dialog.scrollable {
  width: 100vw;
  height: 100vh;
}

dialog.scrollable::part(content-box) {
  overflow: scroll;
}

html|input,
html|textarea {
  appearance: none;
  background-color: var(--field-background-color);
  border: 1px solid var(--field-border-color);
  border-radius: var(--button-border-radius);
  color: var(--field-text-color);
  margin: 2px 4px;
}

html|input:not(:focus):hover,
html|textarea:not(:focus):hover {
  border-color: var(--field-border-hover-color);
}

html|input:focus,
html|textarea:focus {
  border-color: var(--selected-item-color);
  outline: 1px solid var(--selected-item-color);
}

:root[lwt-tree-brighttext] html|input::selection,
:root[lwt-tree-brighttext] html|textarea::selection,
:root[lwt-default-theme-in-dark-mode] html|input::selection,
:root[lwt-default-theme-in-dark-mode] html|textarea::selection {
  background-color: var(--highlight-background);
  color: var(--selected-item-color);
}

html|input:is([type="email"],[type="tel"],[type="text"],[type="password"],
  [type="url"],[type="number"]):disabled {
  opacity: 0.4;
}

html|input[type="number"] {
  padding-inline-end: 1px;
}

html|input[type="number"]::-moz-number-spin-up,
html|input[type="number"]::-moz-number-spin-down {
  appearance: none;
  width: 16px;
  background-position: center;
  background-color: var(--button-background-color);
  background-repeat: no-repeat;
  border: 1px solid var(--field-border-color);
  -moz-context-properties: stroke;
  stroke: currentColor;
}

html|input[type="number"]::-moz-number-spin-up {
  background-image: var(--icon-nav-up-sm);
  border-bottom-style: none;
  border-radius: 2px 2px 0 0;
}
html|input[type="number"]::-moz-number-spin-down {
  background-image: var(--icon-nav-down-sm);
  border-radius: 0 0 2px 2px;
}

button,
menulist,
html|input[type="color"] {
  appearance: none;
  min-height: 24px;
  /* !important overrides button.css for disabled and default XUL buttons: */
  color: inherit !important;
  border: 1px solid var(--button-border-color); /* needed for high-contrast mode, where it'll show up */
  border-radius: var(--button-border-radius);
  background-color: var(--button-background-color);
  padding: 0 8px;
  text-decoration: none;
  margin: 4px;
  /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
  font-size: 1em;
}

menulist {
  padding-inline: 4px;
}

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

#folderCompactDialog {
  width: 50em;
}

#resetColor {
  list-style-image: url("chrome://messenger/skin/icons/forget.svg");
  -moz-context-properties: fill;
  fill: currentColor;
  min-width: 16px;
  min-height: 16px;
  padding: 2px !important;
  margin-inline-end: 4px;
  --toolbarbutton-hover-background: var(--button-hover-background-color);
  --toolbarbutton-hover-bordercolor: var(--button-border-color);
  --toolbarbutton-active-background: var(--button-active-background-color);
  --toolbarbutton-active-bordercolor: var(--button-border-color);
}

#resetColor:not(:hover) {
  background-color: transparent;
}

#resetColor .button-icon {
  margin-inline-end: 0;
}

button:-moz-focusring {
  outline: 2px solid var(--selected-item-color);
  outline-offset: -1px;
}

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

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

button[default] {
  background-color: var(--selected-item-color);
  color: var(--primary-text-color) !important;
}

button[default]:-moz-focusring {
  border-color: var(--primary-focus-border);
  outline-offset: 0;
}

button[default]:not([disabled="true"]):hover {
  background-color: var(--primary-background-hover);
}

button[default]:not([disabled="true"]):hover:active {
  background-color: var(--primary-background-active);
}

button[is="toolbarbutton-menu-button"] > .button-box > button {
  border-inline-end-color: var(--button-border-color);
}

button > .button-box > dropmarker {
  padding-inline-start: 3px;
}

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

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

menulist:-moz-focusring::part(label-box),
menulist:-moz-focusring:not([open="true"])::part(label-box) {
  outline: none;
}

menulist::part(icon) {
  -moz-context-properties: fill;
  fill: currentColor;
}

menulist[is="menulist-addrbooks"]::part(icon) {
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
}

menulist::part(dropmarker) {
  appearance: none;
  width: 16px;
  padding: 0;
  border: none;
  background-color: transparent;
}

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

menulist[is="menulist-editable"][editable="true"]::part(text-input) {
  background-color: var(--field-background-color);
  color: var(--field-text-color);
  border: 1px solid var(--field-border-color);
  border-start-start-radius: 3px;
  border-end-start-radius: 3px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

menulist[is="menulist-editable"][editable="true"]::part(text-input):focus {
  border-color: var(--selected-item-color);
  outline: 1px solid var(--selected-item-color);
}

.menu-iconic-left {
  -moz-context-properties: fill;
  fill: currentColor;
}

.abMenuItem > .menu-iconic-left {
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
}

.menu-right {
  appearance: none;
  -moz-context-properties: fill;
  list-style-image: var(--icon-nav-right-sm);
  fill: currentColor;
}

.menu-right:-moz-locale-dir(rtl) {
  list-style-image: var(--icon-nav-left-sm);
}

button menupopup menuseparator,
menulist menupopup menuseparator {
  appearance: none;
  margin: 2px 0;
  padding: 0;
  border-top: 1px solid var(--box-border-color);
  border-bottom: none;
}

:root[lwt-tree] .autocomplete-richlistbox {
  border-style: none;
  background-color: var(--box-background-color);
}

label {
  margin-inline-start: 4px;
}

radio,
checkbox {
  appearance: none;
}

checkbox {
  margin: 2px 4px;
  padding-inline: 4px 2px;
}

radio[disabled="true"],
checkbox[disabled="true"] {
  color: #999;
}

.radio-check {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--field-border-color);
  margin: 0;
  margin-inline-end: 6px;
  background-color: var(--field-background-color);
}

.radio-check {
  border-radius: 50%;
}

radio:not([disabled="true"]):hover > .radio-check,
checkbox:not([disabled="true"]):hover > .checkbox-check {
  border-color: var(--selected-item-color);
}

.radio-check[selected] {
  list-style-image: url("chrome://global/skin/icons/radio.svg");
  -moz-context-properties: fill;
  color: var(--checkbox-checked-border-color, currentColor);
  fill: var(--checkbox-checked-color, AccentColorText);
  background-color: var(--checkbox-checked-bgcolor, AccentColor);
}

:root[lwt-tree] richlistbox {
  appearance: none;
  background-color: var(--field-background-color);
  color: var(--field-text-color);
  border: 1px solid var(--field-border-color);
}

:root[lwt-tree] richlistitem[selected="true"] {
  background-color: hsla(0,0%,50%,.15);
  color: inherit;
}

:root[lwt-tree] richlistbox:focus > richlistitem[selected="true"] {
  background-color: var(--sidebar-highlight-background-color, hsla(0, 0%, 50%, 0.35));
  color: var(--sidebar-highlight-text-color, inherit);
  outline: 1px solid var(--selected-item-color) !important;
  outline-offset: -1px;
}

:root[lwt-tree] richlistbox:focus > richlistitem[selected="true"] button,
:root[lwt-tree] richlistbox:focus > richlistitem[selected="true"] menulist {
  color: var(--sidebar-text-color) !important;
}

richlistitem[selected="true"] {
  background-color: var(--tab-selected-background);
  color: inherit;
}

richlistbox:where(:focus) > richlistitem[selected="true"] {
  background-color: var(--selected-item-color);
  color: var(--selected-item-text-color);
}

richlistbox[seltype="multiple"]:focus > richlistitem[current="true"] {
  outline-color: var(--selected-item-color);
}

richlistbox > richlistitem {
  padding-block: 1px;
}

richlistbox > richlistitem menulist {
  margin-block: 2px;
}

richlistitem button,
richlistitem menulist {
  background-color: var(--richlist-button-background);
  background-image: linear-gradient(var(--button-background-color),
                                    var(--button-background-color));
  color: var(--field-text-color) !important;
}

richlistitem button:not([disabled="true"]):hover,
richlistitem menulist:not([disabled="true"]):hover,
richlistitem menulist[open="true"]:not([disabled="true"]) {
  background-color: var(--richlist-button-background);
  background-image: linear-gradient(var(--button-hover-background-color),
                                    var(--button-hover-background-color));
}

richlistitem button[open],
richlistitem button[open]:hover,
richlistitem button:not([disabled="true"]):hover:active {
  background-color: var(--richlist-button-background);
  background-image: linear-gradient(var(--button-active-background-color),
                                    var(--button-active-background-color));
}

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

:root[lwt-tree] tree {
  appearance: none;
  border: 1px solid var(--sidebar-border-color);
}

tabbox {
  color: inherit;
  text-shadow: none;
}

tabs {
  margin-block: 8px 10px;
  margin-inline: 4px;
  border-bottom: 1px solid var(--box-border-color);
}

tab {
  appearance: none;
  margin-top: 0;
  padding: 6px 10px !important;
  border-bottom: 2px solid transparent;
  color: inherit !important;
}

tab:hover {
  background-color: var(--tab-hover-background);
}

tab[visuallyselected="true"] {
  margin-block: 0;
  background-color: var(--tab-selected-background);
  border-bottom-color: var(--lwt-tab-line-color, var(--selected-item-color));
}

tabpanels {
  appearance: none;
  border: none;
  padding: 0;
  background-color: transparent;
  color: inherit;
}

.dialog-button-box {
  padding-top: 6px;
}

fieldset:-moz-lwtheme {
  border: 1px solid var(--field-border-color);
}

legend:-moz-lwtheme {
  background-color: var(--lwt-accent-color);
}

separator.groove:not([orient="vertical"]) {
  border-top-color: var(--field-border-color);
  border-bottom-style: none;
}

.tip-caption {
  opacity: 0.7;
  font-size: .9em;
}

:root[lwt-tree-brighttext] .text-link {
  color: #0aa5ff;
}

.text-link:focus-visible {
  outline: 2px solid var(--selected-item-color);
  outline-offset: 1px;
  border-radius: 1px;
}

.alert-icon {
  content: var(--icon-warning-dialog);
  height: 48px;
  width: 48px;
}

.question-icon {
  content: var(--icon-question-dialog);
  height: 48px;
  width: 48px;
}

p {
  margin: 2px 4px;
}

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