/* 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/messenger.css");
@import url("chrome://messenger/skin/colors.css");
@import url("chrome://messenger/skin/layout.css");
@import url("chrome://messenger/skin/widgets.css");

html,
body {
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  overflow-y: auto;
}

#body {
  --dateColor: var(--color-gray-20);
  --dateTextColor: var(--color-gray-90);
  --barColor: var(--selected-item-color);
  --barHlColor: var(--linkColor);
  --dateHLColor: var(--selected-item-color);
  --panelHoverColor: inherit;
  --linkColor: var(--color-blue-70);
}

@media (prefers-color-scheme: dark) {
  #body {
    --dateColor: var(--color-gray-60);
    --dateTextColor: var(--color-white);
    --linkColor: var(--color-blue-30);
  }
}

@media (prefers-contrast) {
  #body {
    --panelHoverColor: SelectedItemText;
    --linkColor: -moz-NativehyperlinkText;
  }
}

#gloda-facet-view {
  display: flex;
  background-color: var(--layout-background-0);
  color: var(--layout-color-0);
  align-items: stretch;
}

.facets-sidebar {
  width: 20em;
  max-width: 20em;
  padding: 4px;
  padding-inline-start: 1em;
  background-color: var(--layout-background-1);
  color: var(--layout-color-1);
}

#main-column {
  flex: 1;
  padding-inline-start: 1em;
  min-height: 100vh;
}

#header {
  max-width: 60em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2em;
}

#data-column {
  margin-top: 1em;
  margin-inline-end: 1em;
  max-width: 60em;
  display: flex;
  flex-direction: column;
}

.popup-menu {
  position: absolute;
  display: block;
  z-index: 100;
  overflow: hidden;
  padding: 3px;
  border: 1px solid var(--arrowpanel-border-color);
  border-radius: 8px;
  background-color: var(--arrowpanel-background);
  box-shadow: 0 0 4px hsla(210, 4%, 10%, .2);
}

.popup-menuitem {
  font: menu;
  padding: 4px 10px;
  border-radius: 3px;
}

.popup-menuitem:hover,
.popup-menuitem:focus {
  background-color: var(--arrowpanel-dimmed);
  color: var(--panelHoverColor);
}

.popup-menu[variety="remainder"] .undo {
  display: none;
}
.popup-menu[variety="include"] .top {
  display: none;
}
.popup-menu[variety="include"] .bottom {
  display: none;
}
.popup-menu[variety="exclude"] .top {
  display: none;
}
.popup-menu[variety="exclude"] .bottom {
  display: none;
}

.popup-menuitem:focus {
  cursor: pointer;
}

.popup-menu[variety="invisible"] {
  display: none;
}

/* ===== Query Explanation ===== */

#query-explanation {
  padding-inline-start: 0;
  font-size: small;
}

.explanation-fulltext-label,
.explanation-query-label {
  font-size: medium;
  font-weight: bold;
}

.explanation-fulltext-label,
.explanation-fulltext-term {
  margin: 0 0.1em;
}

.explanation-fulltext-criteria {
  color: var(--layout-color-3);
  margin: 0 0.1em;
}

.explanation-query-label,
.explanation-query-involves,
.explanation-query-tagged {
  margin-inline-end: 0.5ex;
}

/* ===== Facets ===== */

h1, h2, h3 {
  cursor: default;
}

.facetious[uninitialized] {
  display: none !important;
}

.facetious {
  display: list-item; /* take the whole column width */
  list-style: none;
  padding: 2px;
}

.facet-included-header[state="empty"],
.facet-excluded-header[state="empty"],
.facet-remaindered-header[needed="false"] {
  display: none;
}

.facet-included-header[state="empty"] + .facet-included,
.facet-excluded-header[state="empty"] + .facet-excluded,
.facet-remaindered:empty {
  display: none;
}

.facet-excluded > .bar > .bar-link {
  text-decoration: line-through; /* strike the names of excluded facets */
}

.date-wrapper {
  position: relative;
  height: 80px;
  display: block;
  padding: 0;
  padding-top: 0.5em;
  margin-inline-end: 1em;
  padding-inline-start: 2em;
  padding-bottom: 1em;
}

.gloda-timeline-button {
  margin-inline-start: 8px;
}

.gloda-timeline-button > img {
  /* Icon is squashed. */
  width: 14px;
  height: 10px;
  margin-inline-end: 2px;
  -moz-context-properties: fill;
  fill: currentColor;
}

.gloda-timeline-button[checked="true"] {
  background: var(--toolbarbutton-active-background);
  border-color: var(--toolbarbutton-active-bordercolor);
  box-shadow: var(--toolbarbutton-active-boxshadow);
}

.facet-date-zoom-out {
  position: absolute;
  top: -18px;
  left: 0;
  width: 24px !important;
  height: 24px !important;
  background-position: center center;
  background-repeat: no-repeat;
  border: 1px solid transparent;
  border-radius: var(--button-border-radius);
}

html[dir="rtl"] .facet-date-zoom-out {
  left: auto;
  right: 0;
}

.facetious[type="date"][zoomedout="false"] .facet-date-zoom-out {
  background-image: url("chrome://messenger/skin/icons/zoomout.svg");
  cursor: pointer;
  -moz-context-properties: fill;
  fill: currentColor;
}

.facetious[type="date"][zoomedout="false"] .facet-date-zoom-out:hover {
  fill: var(--selected-item-text-color);
  background-color: var(--selected-item-color);
  border-color: Field;
}

.date-vis-frame {
  position: absolute;
  top: 0;
  left: 0;
}

html[dir="rtl"] .date-vis-frame {
  left: auto;
  right: 0;
}

/* === Boolean Facet === */

#facet-fromMe, #facet-toMe, #facet-star, #facet-attachmentTypes {
  display: inline-block; /* override the general .facetious list-item style */
}

/* special case: hide these two facets when they don't match */
#facet-star[disabled], #facet-attachmentTypes[disabled] {
  display: none;
}

.facet-checkbox-bubble {
  display: inline-flex;
  padding: 2px;
  padding-inline-end: 6px;
  border-radius: var(--button-border-radius);
  cursor: pointer;
}

.facet-checkbox-bubble > input {
  display: none;
}

facet-boolean[disabled] {
  opacity: 0.6;
}

facet-boolean[disabled] > .facet-checkbox-bubble,
facet-boolean-filtered[disabled] > .facet-checkbox-bubble {
  cursor: default;
}

facet-boolean:not([disabled]):hover > .facet-checkbox-bubble,
facet-boolean-filtered:not([disabled]):hover > .facet-checkbox-bubble,
facet-boolean[checked="true"]:not([disabled]) > .facet-checkbox-bubble,
facet-boolean-filtered[checked="true"]:not([disabled]) > .facet-checkbox-bubble {
  background-color: var(--selected-item-color);
  color: var(--selected-item-text-color);
}

.facet-checkbox-label,
.facet-checkbox-count {
  margin: 3px;
}

.facetious:not(:hover) > .facet-checkbox-count {
  color: var(--layout-color-3);
}
.facet-checkbox-count:empty {
  display: none;
}
.facet-checkbox-count::before {
  content: "(";
}
.facet-checkbox-count::after {
  content: ")";
}

/* === Boolean Filtered === */

facet-boolean-filtered:not([checked]) > .facet-filter-list {
  display: none
}

.facet-filter-list {
  display: block;
}

/* === Discrete Facet === */

.facet-content {
  max-height: 32em;
  overflow: auto;
}

.facet-more {
  display: none;
  margin: 1px;
  margin-top: 0.5em;
  cursor: pointer;
}

.facet-more[needed="true"] {
  display: inline-block;
}

html[dir="rtl"] .bar-count {
  right: auto;
  left: 3px;
}

.barry {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--layout-color-3);
}

.bar {
  position: relative;
  cursor: pointer;
  border-bottom: 1px solid var(--layout-color-3);
}

.bar[selected="true"] {
  background-color: var(--selected-item-color);
  color: var(--selected-item-text-color);
}

.bar:hover,
.bar:focus {
  background-color: var(--selected-item-color);
  outline: none;
}

.bar-link {
  text-decoration: none;
  display: block;
  color: var(--linkColor);
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  padding-inline-start: 0.5em;
  padding-inline-end: 4em;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-count {
  position: absolute;
  display: block;
  right: 0;
  margin-inline-end: 8px;
  line-height: 1.6em;
  color: var(--layout-color-3);
}

html[dir="rtl"] .bar-link {
  padding: 0.3em 0.5em 0.3em 2em;
}

.bar:hover > .bar-link,
.bar:hover > .bar-count,
.bar:focus > .bar-link,
.bar:focus > .bar-count {
  color: var(--selected-item-text-color);
}

.bar[selected="true"]> .bar-link {
  color: var(--selected-item-text-color);
}
.bar[selected="true"] > .bar-count {
  color: var(--selected-item-text-color);
}

/* ===== Results ===== */

.results-message-header {
  display: none; /* $('.results-message-header').show() is run if there are results */
  border-bottom: 2px solid hsla(0, 0%, 60%, 0.25);
  padding: 4px 2px;
  padding-inline-end: 0;
  margin-bottom: 0.5em;
}

#results[state="some"] .results-message-header {
  display: flex;
  align-items: center;
}

.results-message-count {
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}

.results-message-showall-button {
  appearance: none !important;
  color: var(--linkColor);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--button-border-radius);
  padding-inline-end: 20px;
  margin-inline-end: 2px;
  -moz-context-properties: fill;
  fill: currentColor;
  background-image: url("chrome://messenger/skin/icons/new-window.svg");
  background-position: right 4px center;
  background-size: 11px;
  background-repeat: no-repeat;
}

.results-message-showall-button:hover,
.results-message-showall-button:focus {
  background-color: var(--selected-item-color);
  color: var(--selected-item-text-color);
}

.results-message-sort-bar {
  flex: 1;
  display: flex;
  justify-content: end;
}

#sortby {
  appearance: none;
  min-height: 24px;
  color: inherit;
  margin: 1px 5px;
  padding-block: 0;
  padding-inline: 4px 20px;
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  background-color: var(--button-background-color);
  background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
  background-position: right 4px center;
  background-repeat: no-repeat;
  background-size: auto 12px;
  -moz-context-properties: fill;
  fill: currentColor;
}

#sortby:dir(rtl) {
  background-position-x: left 4px;
}

#sortby:hover,
#sortby:focus {
  background-color: var(--button-hover-background-color);
  cursor: pointer;
}

/* ===== Messages ===== */

.message {
  display: block;
  font-family: sans-serif;
  font-size: small;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-bottom-color: lightgrey;
  border-radius: var(--button-border-radius);
  color: var(--layout-color-1);
  overflow: hidden;
}
.message:not(:first-child) {
  border-top-style: none;
}
.message:last-child {
  border-bottom-color: transparent;
}

.message:hover {
  border-color: lightgrey;
  box-shadow: 0 0 1px lightgrey inset, 0 0 1px lightgrey inset, 0 0 1px lightgrey inset;
}

.message:hover .message-subject {
  color: var(--selected-item-color);
}

.message .message-subject:hover,
.message .message-subject:focus {
  background-color: var(--selected-item-color);
  color: var(--selected-item-text-color);
}

.message:focus,
.message[unread="true"]:focus {
  border: 1px dotted lightgrey;
  padding: 1em 0;
}

.message-header {
  margin-bottom: 0.5em;
}
.message-meta {
  float: inline-end;
  padding-inline-start: 2em;
  text-align: end;
  max-width: 20em;
  max-height: 10em;
  overflow: hidden;
  color: var(--layout-color-3);
}

.message-attachments {
  text-align: end;
  overflow: hidden;
}

.message-attachment {
  max-width: 20em;
  text-align: start;
  display: inline-block;
  white-space: nowrap;
  padding-inline-start: 1ex;
}

.message-attachment::after {
  content: ", ";
}
.message-attachment:last-child::after {
  content: "";
}

.message-attachment-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("chrome://messenger/skin/icons/attach.svg") transparent no-repeat center right;
  -moz-context-properties: fill;
  fill: currentColor;
}

html[dir="rtl"] .message-attachment-icon {
  background-position: center left;
}

.message-line {
  position: relative;
}

.message-addresses-group {
  text-align: end;
}

.message-star[starred="true"] {
  display: inline-block;
  width: 12px !important;
  height: 12px;
  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;
}

.message-addresses-group {
  padding-inline-start: 1em;
}

.message-subject-group {
  padding-inline-start: 2px; /* to line up the subjects with the "Top N messages out of M" */
}

.message-author, .message-recipients {
  text-align: end;
  display: inline;
  color: var(--layout-color-1);
}

.message-subject {
  color: var(--linkColor);
  font-size: medium;
}

.message-subject:hover {
  cursor: pointer;
}

.message-body {
  color: var(--layout-color-1);
  margin-inline-start: 1em;
  font-family: monospace;
  font-size: medium;
  white-space: pre-wrap;
}

.message-body-fulltext-match {
  color: var(--selected-item-text-color);
  background-color: var(--selected-item-color);
  border-radius: var(--button-border-radius);
}

.message-recipients-group {
  margin-inline-start: 0.5em;
  font-size: small;
}

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

.show-more {
  display: none; /* $('.show-more').show() is run if there are results */
  float: inline-end;
  margin-block: 5px 2em;
  margin-inline-end: 1em;
  cursor: pointer;
  align-self: flex-end;
}

div.loading,
div.empty {
  margin: 0 auto;
  text-align: center;
}

span.loading,
span.empty {
  color: var(--layout-color-2);
  background-color: var(--layout-background-2);
  border: 1px outset var(--layout-border-2);
  border-radius: var(--button-border-radius);
}

img.loading,
img.empty {
  margin: 0 1ex;
  padding: 0;
  border: none;
  vertical-align: middle;
}

html[dir="rtl"] img.empty {
  transform: scaleX(-1);
}

div.empty {
  display: none;
}

span.empty {
  background-color: inherit;
  border: none;
  font-size: large;
  color: var(--color-blue-70);
  -moz-context-properties: fill;
  fill: currentColor;
}

#facet-date {
  max-height: 104px;
  padding-top: 2px;
  padding-bottom: 2px;
  overflow: visible;
  /* Put facet-date at the top */
  order: -1;
}

#facet-date[hide="true"] {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

@media (prefers-reduced-motion: no-preference) {
  #facet-date,
  .results-message-showall-button {
    transition: all 200ms ease;
  }
}