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

/* ===== messenger.css ==================================================
  == Styles shared throughout the Messenger application.
  ======================================================================= */

@import url("chrome://messenger/skin/shared/messenger.css");

@media not (-moz-windows-non-native-menus) {
  .menu-iconic > .menu-iconic-left,
  .menuitem-iconic > .menu-iconic-left {
    display: flex;
    padding-top: 0;
  }
}

@media (-moz-windows-non-native-menus) {
  /* UI Density customization */
  :root {
    --menuitem-vertical-padding: 3px;
  }
  :root[uidensity="compact"] {
    --menuitem-vertical-padding: 1px;
  }

  :root[uidensity="touch"] {
    --menuitem-vertical-padding: 8px;
  }

  menupopup > menu,
  menupopup > menuitem {
    padding-block: var(--menuitem-vertical-padding);
  }

  menulist > menupopup > menu,
  menulist > menupopup > menuitem {
    padding-inline-end: 5px;
  }

  menulist > menupopup:not([needsgutter]) > menu:not([icon], .menu-iconic),
  menulist > menupopup:not([needsgutter]) > menuitem:not([icon], .menuitem-iconic) {
    padding-inline-start: 1em;
  }

  menupopup:not([needsgutter]) > menu:not([icon], .menu-iconic),
  menupopup:not([needsgutter]) > menuitem:not([checked="true"], [icon], .menuitem-iconic) {
    padding-inline-start: 32px;
  }

  .folderMenuItem > .menu-iconic-left,
  .menuitem-iconic > .menu-iconic-left {
    display: flex;
  }
}

@media (-moz-windows-default-theme: 0),
       (-moz-platform: windows-win10) and (-moz-windows-default-theme) {
  #menubar-items > #mail-menubar > menu {
    appearance: none;
  }

  #menubar-items > #mail-menubar > menu:not([disabled="true"]) {
    color: inherit;
  }
}

@media (-moz-windows-default-theme: 0) {
  #menubar-items > #mail-menubar > menu[_moz-menuactive="true"] {
    color: -moz-MenuHoverText;
  }
}

.titlebar-buttonbox-container {
  align-items: stretch;
}

@media (-moz-platform: windows-win7),
       (-moz-platform: windows-win8) {
  /* Preserve window control buttons position at the top of the button box. */
  .titlebar-buttonbox-container {
    align-items: flex-start;
  }
}

@media (-moz-platform: windows-win7) {
  @media (-moz-windows-default-theme) and (-moz-windows-glass: 0) {
    #messengerWindow[sizemode="normal"] .titlebar-buttonbox-container {
      padding-top: 4px;
    }
  }
}

@media (-moz-platform: windows-win8) {
  #messengerWindow[sizemode="normal"] .titlebar-buttonbox-container {
    padding-top: 3px;
  }

  @media (-moz-windows-default-theme: 0) {
    menu {
      appearance: none;
    }
  }
}

@media (-moz-windows-classic) {
  #messengerWindow[sizemode="normal"] .titlebar-buttonbox-container {
    padding-top: 3px;
  }

  :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar {
    margin-top: 4px;
  }
}

.inline-toolbar {
  appearance: none;
}

.inline-toolbar toolbarpaletteitem toolbarseparator,
.inline-toolbar > toolbarseparator {
  height: 24px;
}

/* ::::: menubar ::::: */

#menubar-items {
  flex-direction: column; /* for flex hack */
  margin-bottom: 1px;
}

#menubar-items > menubar {
  flex: 1; /* make menu items expand to fill toolbar height */
}

menubar > menu[disabled="true"]:-moz-lwtheme {
  color: inherit;
  opacity: .4;
}

/* ::::: Toolbar customization ::::: */

toolbarpaletteitem[place="toolbar"] > toolbarspacer {
  width: 11px;
}

/* ::::: toolbarbutton menu-button ::::: */

toolbarbutton[is="toolbarbutton-menu-button"] {
  align-items: stretch;
  flex-direction: row !important;
  padding: 0 !important;
}

/* .......... dropmarker .......... */

.toolbarbutton-menubutton-dropmarker {
  appearance: none;
  padding: 3px 7px;
  width: auto;
}

.toolbarbutton-icon {
  margin-inline-end: 0;
}

/* Has to be !important to overrule toolkit's dropmarker.css for the
   dropmarker[disabled="true"] case. */
.toolbarbutton-menu-dropmarker {
  padding-inline-start: 3px !important;
}

.sidebar-header .toolbarbutton-text:not([value]) {
  display: none;
}

menulist.folderMenuItem menu:not(.folderMenuItem) {
  padding-top: 3px;
  padding-bottom: 3px;
}

treecol[sortDirection="ascending"]:not([hideheader="true"]) > .treecol-sortdirection {
  list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
}

treecol[sortDirection="descending"]:not([hideheader="true"]) > .treecol-sortdirection {
  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
}

.thread-tree-col-picker image,
.thread-tree-icon-header img {
  padding-inline-start: 1px;
  padding-inline-end: 2px;
  padding-bottom: 2px;
}

treechildren::-moz-tree-row(multicol, odd) {
  background-color: transparent;
}

treechildren::-moz-tree-cell-text {
  padding-inline-start: 2px;
  padding-bottom: 2px;
}

@media (prefers-color-scheme: dark) {
  /* Override the toolkit color. */
  :root:-moz-lwtheme tree > treechildren::-moz-tree-row(selected) {
    background-color:  rgba(249, 249, 250, .1);
  }

  :root:-moz-lwtheme tree > treechildren::-moz-tree-row(selected, focus) {
    background-color: var(--dark-lwt-highlight-color);
  }

  :root:-moz-lwtheme treechildren::-moz-tree-twisty(selected),
  :root:-moz-lwtheme tree:not(:focus) treechildren::-moz-tree-image(selected),
  :root:-moz-lwtheme #threadTree:not(:focus) treechildren::-moz-tree-cell-text(untagged, selected),
  :root:-moz-lwtheme tree:not(#threadTree,:focus) treechildren::-moz-tree-cell-text(selected) {
    color: FieldText;
  }

  :root:-moz-lwtheme tree:not(#threadTree) treechildren::-moz-tree-image(selected, focus),
  :root:-moz-lwtheme #threadTree treechildren::-moz-tree-image(untagged, selected, focus) {
    color: FieldText;
    fill: color-mix(in srgb, currentColor 20%, transparent);
    stroke: currentColor;
  }

  :root:-moz-lwtheme #threadTree treechildren::-moz-tree-cell-text(untagged, selected),
  :root:-moz-lwtheme tree:not(#threadTree) treechildren::-moz-tree-cell-text(selected) {
    color: FieldText;
    fill: currentColor;
    stroke: currentColor;
  }

  :root:-moz-lwtheme tree:not(#threadTree) treechildren::-moz-tree-twisty(selected),
  :root:-moz-lwtheme #threadTree treechildren::-moz-tree-twisty(untagged, selected) {
    fill: FieldText !important;
  }

  :root:-moz-lwtheme treechildren::-moz-tree-image(folderNameCol, selected, focus) {
    fill: color-mix(in srgb, currentColor 20%, transparent) !important;
    stroke: currentColor;
  }
}

@media (prefers-contrast) {
  #threadTree > treechildren::-moz-tree-row(tagged, selected),
  #threadTree > treechildren::-moz-tree-row(untagged, selected),
  tree:not(#threadTree) > treechildren::-moz-tree-row(selected) {
    border-color: SelectedItem;
    background-color: transparent;
  }
}

@media (-moz-windows-default-theme: 0) {
  tree > treechildren::-moz-tree-row(hover) {
    border-color: SelectedItemText !important;
    border-style: solid;
    background-color: transparent;
  }

  #threadTree > treechildren::-moz-tree-cell-text(untagged, selected),
  tree:not(#threadTree) > treechildren::-moz-tree-cell-text(selected) {
    color: WindowText;
  }

  #threadTree > treechildren::-moz-tree-row(untagged, selected, focus),
  tree:not(#threadTree) > treechildren::-moz-tree-row(selected, focus) {
    border-color: SelectedItemText;
    background-color: SelectedItem;
  }

  tree > treechildren::-moz-tree-twisty {
    color: WindowText;
  }

  #threadTree > treechildren::-moz-tree-twisty(untagged, selected, focus),
  tree:not(#threadTree) > treechildren::-moz-tree-twisty(selected, focus),
  #threadTree > treechildren::-moz-tree-image(untagged, selected, focus),
  tree:not(#threadTree) > treechildren::-moz-tree-image(selected, focus),
  #threadTree > treechildren::-moz-tree-cell-text(untagged, selected, focus),
  tree:not(#threadTree) > treechildren::-moz-tree-cell-text(selected, focus) {
    color: SelectedItemText;
    fill: currentColor;
  }

  treechildren::-moz-tree-cell-text {
    padding-inline-start: 4px !important;
  }

  .autocomplete-richlistitem:hover {
    color: SelectedItemText;
  }
}

treechildren::-moz-tree-indentation {
  width: 12px;
}

@media (-moz-windows-classic) {
  treecol[hideheader="true"],
  .tree-columnpicker-button[hideheader="true"] {
    border-width: 0;
  }

  :root[lwt-tree] treecol:not([hideheader="true"]),
  :root[lwt-tree] .tree-columnpicker-button:not([hideheader="true"]) {
    border-top-width: 0;
    border-inline-start-width: 0;
  }

  :root:not(:-moz-lwtheme) treechildren::-moz-tree-row(hover) {
    border-color: transparent;
    background-color: transparent;
  }

  :root:not(:-moz-lwtheme) treechildren::-moz-tree-row(selected) {
    border-color: transparent;
    background-color: -moz-cellhighlight;
  }

  :root:not(:-moz-lwtheme) tree:not(#threadTree) > treechildren::-moz-tree-row(selected, focus),
  :root:not(:-moz-lwtheme) #threadTree > treechildren::-moz-tree-row(untagged, selected, focus) {
    border-color: SelectedItemText;
    background-color: SelectedItem;
  }

  /* Add a window top border for webextension themes */
  :root[tabsintitlebar][sizemode="normal"] #navigation-toolbox:-moz-lwtheme {
    background-image: linear-gradient(to bottom,
          ThreeDLightShadow 0, ThreeDLightShadow 1px,
          ThreeDHighlight 1px, ThreeDHighlight 2px,
          ActiveBorder 2px, ActiveBorder 4px, transparent 4px),
          var(--lwt-header-image), var(--lwt-additional-images);
  }
}

:root[lwt-tree] treechildren::-moz-tree-row(hover) {
  background-color: hsla(0,0%,50%,.15);
  border-color: transparent;
  background-image: none;
}

menulist {
  padding: 0 5px 1px !important;
}

menulist.folderMenuItem::part(label) {
  margin-inline-start: 2px !important;
}

button[is="toolbarbutton-menu-button"] > .button-box > button {
  margin-block: -1px;
}

button.notification-button[is="toolbarbutton-menu-button"] {
  padding-inline-end: 1px;
}

.messageCloseButton > .toolbarbutton-icon {
  margin-inline-end: 12px;
}

.toolbarbutton-menu-dropmarker {
  margin-top: 0;
}

@media (-moz-windows-default-theme: 0) {
  #tabmail:not(:-moz-lwtheme) {
    background-color: ActiveCaption;
  }

  #tabmail:not(:-moz-lwtheme):-moz-window-inactive {
    background-color: InactiveCaption;
  }
}

@media (-moz-windows-compositor: 0) {
  #print-preview-toolbar:not(:-moz-lwtheme) {
    appearance: auto;
    -moz-default-appearance: -moz-win-browsertabbar-toolbox;
  }
}

/* ::::: primary toolbar buttons ::::: */

.toolbarbutton-1[disabled=true] .toolbarbutton-icon,
.toolbarbutton-1[disabled=true] .toolbarbutton-text,
.toolbarbutton-1[disabled=true] .toolbarbutton-menu-dropmarker,
.toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker {
  opacity: .4;
}

toolbar[mode="text"] .toolbarbutton-text {
  margin: 0 !important;
  padding-inline: 2px !important;
}

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

.toolbarbutton-1,
.toolbarbutton-1 > .toolbarbutton-menubutton-button,
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
  appearance: none;
}

@media (-moz-windows-compositor) {
  #unifinder-searchBox,
  #task-addition-box {
    border-top: none;
    background-color: -moz-dialog;
  }

  @media (-moz-platform: windows-win10) {
    /* See bug 1715990 about why we do this ourselves on HCM */
    @media (prefers-contrast) {
      :root[tabsintitlebar]:not(:-moz-lwtheme) {
        background-color: ActiveCaption;
      }

      :root[tabsintitlebar]:not(:-moz-lwtheme):-moz-window-inactive {
        background-color: InactiveCaption;
      }
    }
  }
}

.statusbarpanel {
  border-inline-end: 1px solid ThreeDLightShadow;
}

.statusbarpanel:-moz-lwtheme {
  border-inline-end-color: var(--lwt-tabs-border-color);
}

@media (-moz-platform: windows-win7) and (-moz-windows-default-theme),
       (-moz-platform: windows-win8) and (-moz-windows-default-theme) {
  #status-bar:not(:-moz-lwtheme) {
    appearance: none;
    border-style: none;
    border-top: 1px solid ThreeDShadow;
    background-color: var(--toolbar-bgcolor);
  }
}

@media (-moz-windows-classic) {
  label.statusbarpanel {
    margin: 1px;
    padding-block: 2px;
  }
}

/* Status panel */

.statuspanel-label {
  margin: 0;
  padding: 2px 4px;
  background-color: -moz-dialog;
  border: 1px none ThreeDLightShadow;
  border-top-style: solid;
  color: -moz-dialogText;
  text-shadow: none;
}

@media (-moz-windows-default-theme) {
  .statuspanel-label {
    background-color: #f9f9fa;
    color: #444;
  }
}

.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
  border-right-style: solid;
  /* disabled for triggering grayscale AA (bug 659213)
  border-top-right-radius: .3em;
  */
  margin-right: 1em;
}

.statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
.statuspanel-label:-moz-locale-dir(ltr)[mirror] {
  border-left-style: solid;
  /* disabled for triggering grayscale AA (bug 659213)
  border-top-left-radius: .3em;
  */
  margin-left: 1em;
}

.contentTabInstance {
  background-color: -moz-dialog;
}

.contentTabInstance:-moz-lwtheme {
  background-color: transparent;
  background-image: linear-gradient(transparent 40px, -moz-dialog 40px);
}

/* ::::: groupbox ::::: */

fieldset {
  border: 0.5px groove ThreeDLightShadow;
  border-radius: 3px;
  margin: 1em 3px 3px 3px;
  padding: 3px 0 6px;
}

legend {
  margin-top: -1em;
  margin-inline-start: 3px;
  padding-inline: 3px;
  background-color: -moz-dialog;
  font-weight: bold;
}

fieldset > hbox,
fieldset > vbox,
fieldset > radiogroup {
  width: -moz-available;
}

#navigation-toolbox {
  appearance: none;
}

@media (-moz-platform: windows-win7) {
  @media (-moz-windows-default-theme) and (-moz-windows-glass: 0) {
    /* Add a window top border behind the titlebar */
    :root[tabsintitlebar][sizemode="normal"] #navigation-toolbox-background {
      background-image: linear-gradient(to bottom, ThreeDDarkShadow 0,
                                        ThreeDDarkShadow 1px, ThreeDHighlight 1px,
                                        ThreeDHighlight 2px, transparent 2px);
    }
  }
  @media (-moz-windows-classic) {
    /* Add a window top border behind the titlebar */
    :root[tabsintitlebar][sizemode="normal"] #navigation-toolbox-background {
      background-image: linear-gradient(to bottom, ThreeDLightShadow 0,
                                        ThreeDLightShadow 1px, ThreeDHighlight 1px,
                                        ThreeDHighlight 2px, ActiveBorder 2px,
                                        ActiveBorder 4px, transparent 4px);
    }
  }

  @media (prefers-contrast) {
    /* Add a window top border behind the titlebar */
    :root[tabsintitlebar][sizemode="normal"] #navigation-toolbox-background {
      background-image: linear-gradient(to bottom, ThreeDLightShadow 0,
                                        ThreeDLightShadow 1px, ThreeDHighlight 1px,
                                        ThreeDHighlight 2px, transparent 2px);
    }
  }
}

/* UI Density customization */

treechildren::-moz-tree-row {
  height: 1.8rem;
}

:root[uidensity="compact"] treechildren::-moz-tree-row {
  height: 1.6rem;
}

:root[uidensity="touch"] treechildren::-moz-tree-row {
  height: 2.4rem;
}