/* 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/shared/threadPane.css");

:root {
  --foldertree-background: -moz-Dialog;
  --treeitem-border-radius: 3px;
  --folder-mode-name-padding: 6px;
  --folder-tree-header-gap: 9px;
  --folder-tree-header-padding: 9px;
  --folder-pane-icon-size: 16px;
  --folder-pane-icon-new: var(--icon-add);
  --folder-pane-icon-more: var(--icon-more);
  --folder-pane-icon-download: var(--icon-cloud-download);
  --folder-pane-icon-kebab: var(--icon-kebab);
}

@media not (prefers-contrast) {
  :root {
    --foldertree-background: var(--color-gray-05);
    --folderpane-unread-count-background: var(--color-gray-50);
    --folderpane-unread-count-text: var(--color-white);
    --folderpane-total-count-background: var(--color-gray-20);
    --folderpane-total-count-text: var(--color-gray-90);
    --folderpane-unread-new-count-background: var(--color-blue-60);
    --treeitem-background-selected: var(--color-gray-20);
    --treeitem-background-hover: var(--color-gray-10);
    --treeitem-text-active: var(--color-white);
    --treeitem-background-active: var(--color-blue-50);
    --in-content-item-selected-unfocused: var(--color-gray-20);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --foldertree-background: var(--color-gray-80);
      --folderpane-unread-new-count-background: var(--color-blue-50);
      --folderpane-total-count-background: var(--color-gray-60);
      --folderpane-total-count-text: var(--color-white);
      --treeitem-background-selected: var(--color-gray-70);
      --treeitem-background-hover: var(--color-gray-60);
      --treeitem-background-active: var(--color-blue-60);
      --in-content-item-selected-unfocused: rgba(249, 249, 250, 0.05);
      --in-content-primary-button-background: #45a1ff;
      --in-content-primary-button-background-hover: #65c1ff;
      --in-content-primary-button-background-active: #85e1ff;
      --in-content-focus-outline-color: #45a1ff;
    }
  }
}

@media (prefers-contrast) {
  :root:not(:-moz-lwtheme) {
    --folderpane-unread-count-background: var(--selected-item-color);
    --folderpane-unread-count-text: var(--selected-item-text-color);
    --folderpane-total-count-background: var(--selected-item-color);
    --folderpane-total-count-text: var(--selected-item-text-color);
    --folderpane-unread-new-count-background: ButtonShadow;
    --treeitem-background-selected: transparent;
    --treeitem-background-hover: transparent;
    --treeitem-outline-hover: 2px solid var(--selected-item-color);
    --treeitem-text-active: var(--selected-item-text-color);
    --treeitem-background-active: var(--selected-item-color);
  }
}

:root[lwt-tree] {
  --foldertree-background: var(--sidebar-background-color);
  --treeitem-background-selected: color-mix(in srgb, transparent 70%, var(--sidebar-highlight-background-color));
  --treeitem-background-hover: color-mix(in srgb, transparent 80%, var(--sidebar-highlight-background-color));
  --treeitem-text-active: var(--sidebar-highlight-text-color);
  --treeitem-background-active: var(--sidebar-highlight-background-color);
}

:root[uidensity="compact"] {
  --folder-mode-name-padding: 3px;
  --folder-tree-header-gap: 6px;
  --folder-tree-header-padding: 4px 6px 3px;
}

:root[uidensity="touch"] {
  --folder-mode-name-padding: 9px;
  --folder-tree-header-gap: 12px;
  --folder-pane-icon-size: 20px;
  --folder-pane-icon-new: var(--icon-add-md);
  --folder-pane-icon-more: var(--icon-more-md);
  --folder-pane-icon-download: var(--icon-cloud-download-md);
}


html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  text-shadow: none;

  display: grid;
  --folderPaneSplitter-width: 18em;
  --messagePaneSplitter-width: 54em;
  --messagePaneSplitter-height: 36em;
}

/* Different layouts */

#folderPane {
  grid-area: folders;
  box-sizing: border-box;
  /* Matches the collapse-width on the splitter. */
  min-width: 100px;
  overflow: hidden auto;
  background-color: var(--sidebar-background-color, var(--foldertree-background));
  color: var(--sidebar-text-color, inherit);
  user-select: none;
}

#folderPaneSplitter {
  grid-area: folderPaneSplitter;
}

#threadPane {
  container-name: threadPane;
  container-type: inline-size;
  grid-area: threads;
  box-sizing: border-box;
  min-height: 200px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#messagePaneSplitter {
  grid-area: messagePaneSplitter;
}

#messagePane {
  grid-area: message;
  box-sizing: border-box;
  /* Matches the collapse-height and collapse-width on the splitter. */
  min-height: 100px;
  min-width: 300px;
  overflow: auto;
  display: flex;
}

#accountCentralBrowser {
  grid-area: account-central;
  box-sizing: border-box;
  min-width: 400px;
}

:is(
  #messagePane,
  #folderPane
).collapsed-by-splitter {
  /* NOTE: We use "display: none" rather than "visibility: collapse". In the
   * latter case, the min-width of min-height of the element would still
   * influence the "auto" track sizing in the grid layout. In the former case
   * the grid is completely missing a grid item for this track, so the "auto"
   * size properly reduces to 0, as desired. Note that the track is indeed
   * missing a grid item because each element in the body is explicitly placed
   * in a grid-area, which means that there is no auto-placement of the grid
   * items that would fill the track. */
  display: none;
}

/* Classic layout: folder tree on the left, thread tree and message browser on the right. */
body.layout-classic {
  grid-template: "folders folderPaneSplitter threads" minmax(auto, 1fr)
                 "folders folderPaneSplitter messagePaneSplitter" min-content
                 "folders folderPaneSplitter message" minmax(auto, var(--messagePaneSplitter-height))
                 / minmax(auto, var(--folderPaneSplitter-width)) min-content minmax(auto, 1fr);
}

/* Vertical layout: three columns. */
body.layout-vertical {
  grid-template: "folders folderPaneSplitter threads messagePaneSplitter message" auto
                 / minmax(auto, var(--folderPaneSplitter-width)) min-content minmax(auto, 1fr) min-content minmax(auto, var(--messagePaneSplitter-width));
}

/* Wide layout: folder tree and thread tree on the top, and message browser on the bottom. */
body.layout-wide {
  grid-template: "folders folderPaneSplitter threads" minmax(auto, 1fr)
                 "messagePaneSplitter messagePaneSplitter messagePaneSplitter" min-content
                 "message message message" minmax(auto, var(--messagePaneSplitter-height))
                 / minmax(auto, var(--folderPaneSplitter-width)) min-content minmax(auto, 1fr);
}

/* If Account Central is shown, it overrides the layout setting. */
body.account-central {
  grid-template: "folders folderPaneSplitter account-central" auto
                 / minmax(auto, var(--folderPaneSplitter-width)) min-content minmax(auto, 1fr);
}

body.account-central :is(
  #threadPane,
  #messagePaneSplitter,
  #messagePane,
) {
  display: none;
}

body:not(.account-central) #accountCentralBrowser {
  display: none;
}

/* Folder tree pane. */

#folderPaneHeaderBar:not([hidden]) {
  --button-margin: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--folder-tree-header-gap);
  position: sticky;
  top: 0;
  background-color: var(--sidebar-background-color, var(--foldertree-background));
  color: var(--layout-color-2);
  padding: var(--folder-tree-header-padding);
  z-index: 1;
}

#folderPaneGetMessages,
#folderPaneMoreButton,
#folderPaneWriteMessage {
  --icon-size: var(--folder-pane-icon-size);
}

#folderPaneGetMessages {
  background-image: var(--folder-pane-icon-download);
}

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

#itemGetAllNewMessages {
  list-style-image: var(--folder-pane-icon-download);
}

#folderPaneMoreButton {
  background-image: var(--folder-pane-icon-more);
}

#folderPaneWriteMessage {
  background-image: var(--folder-pane-icon-new);
}

#folderTree,
#folderTree ul {
  margin: 0;
  padding: 0;
  list-style: none;
  --depth: 0;
  --indent: calc(16px * var(--depth));
}

#folderTree ul {
  overflow: hidden;
  height: auto;
}

#folderTree:focus-visible {
  outline: none;
}

#folderTree li[data-mode] {
  margin-bottom: 3px;
}

#folderTree > li:not(:first-of-type) > .mode-container {
  justify-content: space-between;
  border-top: 1px solid var(--sidebar-border-color, var(--splitter-color));
}

#folderTree > li.unselectable > .mode-container {
  margin: 0;
  border-radius: 0;
}

#folderTree > li.unselectable > .mode-container:hover {
  background-color: transparent;
}

#folderTree > li > .mode-container > .mode-name {
  font-weight: 600;
  font-size: 1.1rem;
  min-height: initial;
  padding-block: var(--folder-mode-name-padding);
  padding-inline-start: 12px;
  flex: 1;
}

#folderTree > li > .mode-container > .mode-button {
  background-image: var(--icon-kebab);
}

#folderPaneHeaderBar[hidden] + #folderTree > li.unselectable:first-of-type > .mode-container {
  border-top-style: none;
}

.mode-container:not([hidden]) {
  display: flex;
  align-items: center;
}

.container {
  display: flex;
  align-items: center;
  -moz-context-properties: fill;
  margin-inline: 6px;
  border-radius: var(--treeitem-border-radius);
  fill: currentColor;
  cursor: default;
  padding-inline-start: var(--indent);
}

li.selected > .container {
  background-color: var(--treeitem-background-selected);
}

li:not(.selected) > .container:hover {
  background-color: var(--treeitem-background-hover);
}

@media (prefers-contrast) {
  li:not(:focus-visible) > .container:hover {
    outline: var(--treeitem-outline-hover);
    outline-offset: -2px;
  }
}

li.context-menu-target:not(.selected) > .container,
li.context-menu-target:not(.selected) > .container:hover {
  background-color: color-mix(in srgb, var(--treeitem-background-active) 10%, transparent);
  outline: 1px var(--listbox-border-type) var(--listbox-focused-selected-bg);
  outline-offset: -1px;
}

#folderTree:focus-within li.selected > .container,
#folderTree li.drop-target > .container {
  background-color: var(--treeitem-background-active);
  color: var(--treeitem-text-active);
}

#folderTree li .twisty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--list-item-buttons-size);
  height: var(--list-item-buttons-size);
}

#folderTree li:not(.children) .twisty-icon {
  display: none;
}

#folderTree li.children.collapsed > .container .twisty-icon {
  transform: rotate(-90deg);
}

#folderTree li.children.collapsed:dir(rtl) > .container .twisty-icon {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: no-preference) {
  #folderTree .twisty-icon {
    transition: transform var(--transition-duration) var(--transition-timing);
  }
}

#folderTree .icon {
  position: relative;
  width: 16px;
  height: 16px;
  background-image: var(--icon-folder);
  background-repeat: no-repeat;
  --icon-color: var(--folder-color-folder);
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, var(--icon-color, var(--folder-color-folder)) 20%, transparent);
  stroke: var(--icon-color, var(--folder-color-folder));
}

.new-messages:not([data-server-type]) > .container > .icon::after {
  position: absolute;
  content: var(--icon-new-indicator);
  inset-inline-start: -2px;
  inset-block-start: -2px;
}

#folderTree:focus-within li.selected > .container > .icon {
  --icon-color: currentColor !important; /* Override the user customized folder color. */
}

#folderTree li[data-server-type] > .container > .icon {
  --icon-color: var(--primary);
}

#folderTree li:is([data-server-type="imap"], [data-server-type="pop3"]) > .container > .icon {
  background-image: var(--icon-mail);
}

menuitem.server:is([data-server-type="imap"], [data-server-type="pop3"]) {
  list-style-image: var(--icon-mail);
}

#folderTree li:is([data-server-type="imap"], [data-server-type="pop3"])[data-server-secure="true"]
  > .container > .icon {
  background-image: var(--icon-mail-secure);
}

menuitem.server:is([data-server-type="imap"], [data-server-type="pop3"])[data-server-secure="true"] {
  list-style-image: var(--icon-mail-secure);
}

#folderTree li[data-server-type="none"] > .container > .icon {
  background-image: var(--icon-folder);
}

#folderTree li[data-server-type="nntp"] > .container > .icon {
  background-image: var(--icon-globe);
}

menuitem.server[data-server-type="nntp"] {
  list-style-image: var(--icon-globe);
}

#folderTree li[data-server-type="nntp"][data-server-secure="true"] > .container > .icon {
  background-image: var(--icon-globe-secure);
}

menuitem.server[data-server-type="nntp"][data-server-secure="true"] {
  list-style-image: var(--icon-globe-secure);
}

#folderTree li[data-server-type="rss"] > .container > .icon {
  background-image: var(--icon-rss);
}

#folderTree li[data-server-type="rss"] > ul > li:not([data-folder-type], [data-is-busy="true"]) .icon {
  --icon-color: currentColor;
  fill: var(--icon-color);
}

menuitem.server[data-server-type="rss"] {
  list-style-image: var(--icon-rss);
}

#folderTree li[data-folder-type="archive"] > .container > .icon {
  background-image: var(--icon-archive);
  --icon-color: var(--folder-color-archive);
}

#folderTree li[data-folder-type="drafts"] > .container > .icon {
  background-image: var(--icon-draft);
  --icon-color: var(--folder-color-draft);
}

#folderTree li[data-folder-type="inbox"] > .container > .icon {
  background-image: var(--icon-inbox);
  --icon-color: var(--folder-color-inbox);
}

#folderTree li[data-folder-type="junk"] > .container > .icon {
  background-image: var(--icon-spam);
  --icon-color: var(--folder-color-spam);
}

#folderTree li[data-folder-type="outbox"] > .container > .icon {
  background-image: var(--icon-outbox);
  --icon-color: var(--folder-color-outbox);
}

#folderTree li[data-folder-type="sent"] > .container > .icon {
  background-image: var(--icon-sent);
  --icon-color: var(--folder-color-sent);
}

#folderTree li[data-folder-type="templates"] > .container > .icon {
  background-image: var(--icon-template);
  --icon-color: var(--folder-color-template);
}

#folderTree li[data-folder-type="trash"] > .container > .icon {
  background-image: var(--icon-trash);
  --icon-color: var(--folder-color-trash);
}

#folderTree li[data-folder-type="virtual"] > .container > .icon {
  background-image: var(--icon-folder-filter);
  --icon-color: var(--folder-color-folder-filter);
}

#folderTree li[data-server-type="nntp"] ul .icon {
  background-image: var(--icon-newsletter);
  --icon-color: var(--folder-color-newsletter);
}

#folderTree li[data-is-paused="true"] > .container > .icon,
#folderTree li[data-is-paused="true"] > .container > .name,
#folderTree li[data-is-paused="true"] ul > li > .container > .icon,
#folderTree li[data-is-paused="true"] ul > li > .container > .name {
  opacity: 0.6;
}

#folderTree li[data-is-busy="true"] > .container > .icon {
  content: var(--icon-clock) !important;
  background-image: none;
  --icon-color: var(--button-primary-background-color);
}

@media (prefers-reduced-motion: no-preference) {
  #folderTree li[data-is-busy="true"] > .container > .icon {
    content: var(--icon-loading) !important;
    animation: activity-indicator-3pane 1.05s steps(30) infinite;
    object-fit: cover;
    object-position: 0px 0;
  }
  @keyframes activity-indicator-3pane {
    100% { object-position: -480px 0; }
  }
}

#folderTree li[data-has-error="true"] > .container > .icon {
  content: var(--icon-warning) !important;
  background-image: none;
  fill: var(--color-amber-30);
  stroke: var(--color-amber-60);
}

#folderTree li[data-tag-key] > .container > .icon {
  background-image: var(--icon-tag);
}

.name {
  flex: 1;
  margin-inline: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

#folderTree li[data-server-type] > .container > .name {
  font-weight: bold;
}

.noselect-folder > .container > .name {
  font-style: italic;
  opacity: 0.6;
}

#folderTree:focus-within li.noselect-folder.selected > .container > .name {
  opacity: 0.8;
}

.unread > .container > .name,
.new-messages > .container > .name {
  font-weight: bold;
}

.new-messages > .container > .name {
  color: var(--new-folder-color);
}

#folderTree:focus-within li.selected.new-messages > .container > .name {
  color: currentColor;
}

.folder-count-badge {
  display: none;
  padding: 1px 4px;
  border-radius: 1000px;
  color: var(--folderpane-unread-count-text);
  font-size: 0.85em;
  font-weight: bold;
  min-width: 16px;
  text-align: center;
  line-height: initial;
  box-sizing: border-box;
  margin-inline-end: 6px;
}

.total-count {
  font-weight: normal;
  color: var(--folderpane-total-count-text);
  background-color: var(--folderpane-total-count-background);
}

.unread > .container > .unread-count {
  display: unset;
  background-color: var(--folderpane-unread-count-background);
}

.total > .container > .total-count:not([hidden]) {
  display: unset;
}

.new-messages > .container > .unread-count {
  background-color: var(--folderpane-unread-new-count-background);
}

#folderTree:focus-within li.selected > .container > .unread-count {
  background-color: var(--folderpane-unread-count-text);
  color: var(--treeitem-background-active);
}

.folder-size {
  font-size: .8rem;
  font-weight: bold;
  color: var(--layout-color-3);
  margin-inline-end: 6px;
}

#folderTree:focus-within li.selected > .container > .folder-size {
  color: currentColor;
}

/* Message browser pane. */

#webBrowser,
#messageBrowser,
#multiMessageBrowser {
  flex: 1;
}