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

/* Generic (cross-platform) multimessage view CSS.  Some bits will be overridden
  by theme specific files */

:root {
  --body-background-color: Field;
  --body-text-color: FieldText;
  --info-text-color: GrayText;
  background-color: var(--body-background-color);
  color: var(--body-text-color);
  appearance: none;
  user-select: auto; /* Overrides messenger.css. */
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-background-color: #2a2a2e;
    --body-text-color: rgb(249, 249, 250);
    --info-text-color: #b1b1b3;
  }

  #headingWrapper {
    --toolbarbutton-hover-background: rgba(179, 179, 179, 0.4);
    --toolbarbutton-hover-bordercolor: rgba(179, 179, 179, 0.4);
    --toolbarbutton-header-bordercolor: rgba(179, 179, 179, 0.4);
    --toolbarbutton-active-background: rgba(179, 179, 179, 0.6);
    --toolbarbutton-active-bordercolor: rgba(179, 179, 179, 0.6);
    --toolbarbutton-active-boxshadow: none;
  }
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* The heading area */

#headingWrapper {
  display: flex;
  flex-direction: row-reverse;
  gap: 6px;
  flex-wrap: wrap;
  padding: 9px 6px;
  color: var(--layout-color-1);
  background-color: var(--layout-background-1);
  border-bottom: 1px solid var(--splitter-color);
}

#heading {
  flex: 1;
  font-size: large;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

#summary_subtitle {
  margin-inline-start: 1em;
  font-size: small;
  white-space: nowrap;
}

/* The main content area */

#content {
  flex: 1 1 0;
  overflow: auto;
  padding: 1ex 1em;
  font-size: initial;
}

#message_list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#footer {
  margin-top: 1em;
  padding-inline-start: 1em;
}

.info {
  font-size: small;
}

/* The message/thread summary rows */

#message_list > li {
  position: relative;
  margin-bottom: 1ex;
  border-width: 2px;
  border-radius: 2px;
  border: 1px solid transparent;
  border-bottom-color: lightgrey;
}

#message_list > li.thread {
  border-color: lightgrey;
}

.star {
  width: 16px;
  height: 16px;
  position: absolute;
  background-repeat: no-repeat;
}

.starred .star {
  background-image: url("chrome://messenger/skin/icons/flagged.svg");
  background-size: contain;
  -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
  fill: #f4bc44;
  fill-opacity: 1;
  stroke: #f4bc44;
  stroke-opacity: 1;
}

.item_summary {
  margin-inline-start: 19px;
  padding: 0.3ex 0;
}

.item_header {
  padding-inline-end: 18px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.unread .primary_header  {
  font-weight: bold;
}

.right {
  float: inline-end;
}

.count {
  white-space: nowrap;
  margin-inline-start: 1ch;
}

.tags {
  padding-top: 4px;
  margin-inline-start: 1ch;
}

.tag {
  display: inline-block; /* to avoid splitting 'To' and 'Do' e.g. */
  margin-inline-start: 0;
  margin-inline-end: 3px;
  padding: 0 0.5ex;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
}

.snippet {
  opacity: .65;
  padding-inline-end: 1.5em;
  padding-bottom: 1ex;
}

.count, .info, .date,
.message > .header > .snippet,
.message > .header > .senders {
  color: var(--info-text-color);
}

a {
  color: -moz-nativehyperlinktext;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

.link:hover {
  text-decoration: underline;
  cursor: pointer;
}

#header-view-toolbox {
  font: message-box;
}

#header-view-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

@media print {
  #header-view-toolbox {
    display: none;
  }

  #headingWrapper {
    position: static;
  }
}