/* 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");

#mail-menubar,
#mailContext {
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
}

.sidebar-header {
  background-color: -moz-Dialog;
  color: -moz-dialogText;
  text-shadow: none;
}

.inline-toolbar,
.contentTabToolbar {
  appearance: none;
  min-width: 50px;
  min-height: 14px;
}

.inline-toolbar > toolbarseparator {
  height: 20px;
  margin-top: 2px;
}

#navigation-toolbox {
  appearance: none;
}

/*
  This is a workaround for Bug 1482157
  -moz-default-appearance: toolbox; makes the macOS sheets attached to the
  element's bottom border. We cannot put this property on the toolbox itself as
  it cancels all backgrounds that are there, so we set it on the toolbox bottom
  border.
*/
#navigation-toolbox::after {
  content: "";
  display: flex;
  appearance: auto;
  -moz-default-appearance: toolbox;
  height: 1px;
  margin-top: -1px;
  opacity: 0.001;
}

#titlebar {
  /* Centrally align content items vertically */
  justify-content: center;
}

.titlebar-button {
  display: none;
}

#titlebar:-moz-lwtheme {
  appearance: none;
}

#toolbar-menubar {
  visibility: collapse;
}

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

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

.toolbarbutton-menubutton-button {
  text-shadow: inherit;
}

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

.toolbarbutton-menubutton-dropmarker {
  appearance: none;
  border: none;
  padding: 0 5px;
}

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

.toolbarbutton-1[open],
.toolbarbutton-1[open] > .toolbarbutton-menubutton-button {
  text-shadow: none;
}

.toolbarbutton-1[checked="true"]:-moz-window-inactive {
  box-shadow: var(--toolbarbutton-inactive-boxshadow);
  border-color: var(--toolbarbutton-inactive-bordercolor);
  background: transparent !important;
}

.toolbarbutton-1[is="toolbarbutton-menu-button"] {
  padding: 0;
}

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

.toolbarbutton-1[disabled="true"] .toolbarbutton-icon,
.toolbarbutton-1[is="toolbarbutton-menu-button"]
  > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon,
.toolbarbutton-1[disabled="true"] > .toolbarbutton-menu-dropmarker,
.toolbarbutton-1[disabled="true"] > .toolbarbutton-menubutton-dropmarker,
.toolbarbutton-1:not(:hover):-moz-window-inactive .toolbarbutton-icon,
.toolbarbutton-1:not(:hover):-moz-window-inactive
  > .toolbarbutton-menu-dropmarker,
.toolbarbutton-1:not(:hover):-moz-window-inactive
  > .toolbarbutton-menubutton-dropmarker {
  opacity: .5;
}

.toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-icon,
.toolbarbutton-1:-moz-window-inactive[is="toolbarbutton-menu-button"]
  > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon {
  opacity: .25;
}

.toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
  margin-inline-end: 1px;
  padding-inline-start: 4px;
}

toolbar[mode="icons"] .toolbarbutton-1 > menupopup {
  margin-top: 1px;
}

menulist {
  padding: 1px 6px;
}

menulist > menupopup:not([position]) {
  margin-inline-start: 0;
}

menulist > menupopup menu,
menulist > menupopup menuitem,
toolbarbutton > menupopup menu,
toolbarbutton > menupopup menuitem {
  appearance: none !important;
  padding-block: 4px !important;
}

@media (-moz-mac-big-sur-theme) {
  menulist > menupopup menu,
  menulist > menupopup menuitem,
  toolbarbutton > menupopup menu,
  toolbarbutton > menupopup menuitem {
    margin-inline:5px;
    border-radius: 4px;
  }
}

menupopup menu[disabled="true"][_moz-menuactive="true"],
menupopup menuitem[disabled="true"][_moz-menuactive="true"] {
  background-color: transparent !important;
}

menulist > menupopup menu .menu-right,
toolbarbutton > menupopup menu .menu-right {
  appearance: none;
  list-style-image: url(chrome://global/skin/icons/arrow-right-12.svg);
  -moz-context-properties: fill;
  fill: currentColor;
}

menulist > menupopup menu .menu-right:-moz-locale-dir(rtl),
toolbarbutton > menupopup menu .menu-right:-moz-locale-dir(rtl) {
  list-style-image: url(chrome://global/skin/icons/arrow-left-12.svg);
}

/* :::::: throbber :::::::::: */

#throbber-box {
  margin: 0 4px;
}

/* ::::: online/offline icons ::::: */

#offline-status {
  padding-inline-start: 3px;
}

/* ::::: directional button icons ::::: */

.up,
.down {
  min-width: 0;
  -moz-context-properties: stroke, fill-opacity;
  stroke: currentColor;
  fill-opacity: 1;
}

.up {
  list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
}

.down {
  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
}

.up[disabled="true"],
.down[disabled="true"] {
  fill-opacity: .5;
}

/* ::::: Tabs ::::: */

tabmail > tabbox {
  margin: 0;
}

/* ::::: Trees ::::: */

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

treechildren::-moz-tree-line {
  border-color: inherit;
}

treechildren::-moz-tree-line(selected, focus) {
  border-color: var(--selected-item-text-color);
}

/* message column icons */

:root:not(:-moz-lwtheme) treecol:not([hideheader="true"]),
:root:not(:-moz-lwtheme) .tree-columnpicker-button:not([hideheader="true"]) {
  appearance: none;
  color: inherit;
  background-color: transparent;
  padding-block: 2px;
  border-bottom: 1px solid ThreeDShadow;
}

:root:not(:-moz-lwtheme) treecol {
  border-inline-end: 1px solid ThreeDShadow;
}

:root:not(:-moz-lwtheme) treecol:hover:active,
:root:not(:-moz-lwtheme) .tree-columnpicker-button:hover:active {
  background-color: ThreeDFace;
}

.treecol-sortdirection {
  appearance: none;
  -moz-context-properties: fill;
  fill: currentColor;
}

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");
}

:root[lwt-tree] treechildren::-moz-tree-row(odd) {
  background-color: transparent;
}

:root[lwt-tree] treechildren::-moz-tree-row(odd, hover) {
  background-color: hsla(0, 0%, 50%, 0.15);
}

/* ::::: Tabs in Titlebar :::::: */

#messengerWindow[tabsintitlebar="true"]:not(:-moz-lwtheme) #titlebar {
  appearance: auto;
  -moz-default-appearance: -moz-window-titlebar;
}

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

@media not (-moz-mac-rtl) {
  .titlebar-buttonbox-container:-moz-locale-dir(ltr) {
    order: -1;
  }
}

@media (-moz-mac-rtl) {
  #unifiedToolbarContainer:-moz-locale-dir(rtl) {
    flex-direction: row-reverse;
  }

  .titlebar-buttonbox-container:-moz-locale-dir(rtl) {
    order: -1;
  }
}

/* NB: these would be margin-inline-start/end if it wasn't for the fact that OS X
 * doesn't reverse the order of the items in the titlebar in RTL mode. */
.titlebar-buttonbox {
  margin-inline: 12px;
}

.titlebar-buttonbox {
  appearance: auto;
  -moz-default-appearance: -moz-window-button-box;
}

#messengerWindow[sizemode="fullscreen"] .titlebar-buttonbox-container {
  display: none;
}

button.notification-button[is="toolbarbutton-menu-button"] {
  margin: 0 6px;
}

button[is="toolbarbutton-menu-button"] > .button-box > button {
  margin-block: -4px;
  margin-inline: -7px 2px;
}

.button-menubutton-dropmarker {
  appearance: none;
}

button dropmarker::part(icon) {
  margin-inline-start: 3px;
}

toolbarbutton.notification-button[is="toolbarbutton-menu-button"] > .button-box > dropmarker {
  margin-inline-end: -5px;
}

/* Status bar */

#status-bar:-moz-lwtheme  {
  padding-top: 1px;
}

.statusbar {
  min-width: 1px; /* DON'T DELETE!
  Prevents hiding of scrollbars in browser when window is made smaller.*/
  min-height: 15px !important;
  margin: 0 !important;
  /* need to use padding-inline-end when/if bug 631729 gets fixed: */
  padding: 0 16px 1px 1px;
  text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
}

.statusbar:-moz-lwtheme {
  background: none;
  border-style: none;
  text-shadow: inherit;
}

/* Status panel */

.statuspanel-label {
  margin: 0;
  padding: 2px 4px;
  background-color: #f9f9fa;
  border: 1px none #ddd;
  border-top-style: solid;
  color: #444;
  text-shadow: none;
}

.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
.statuspanel-label:-moz-locale-dir(rtl)[mirror] {
  border-right-style: solid;
  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;
  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);
}

.contentTabAddress * {
  text-shadow: none;
}

fieldset {
  padding: 0 8px 5px;
  margin: 1.5em 6px 6px 6px;
  border: none;
}

legend {
  font-size: 1.18em;
  margin-top: -1.3em;
  margin-bottom: 5px;
  margin-inline-start: -5px;
  font-weight: bold;
}

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

.menu-right,
.menu-accel-container {
  margin-inline-end: 0;
}

menupopup[type="arrow"] .menu-accel-container {
  margin-inline-end: 0;
}

.menu-accel-container {
  opacity: 0.5;
}

menuitem:not([disabled="true"]):hover .menu-accel-container,
menuitem:not([disabled="true"]):focus .menu-accel-container {
  opacity: 1;
}

/* UI Density customization */

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

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

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