/* 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 "chrome://browser/skin/downloads/progressmeter.css";
@import "chrome://browser/skin/downloads/download-blockedStates.css";

/*** Panel and outer controls ***/

#downloadsListBox {
  background: transparent;
  color: inherit;
  appearance: none;
  border: 0;
  margin: 0;
  /* We have an explicit width set by l10n, but we still want to fill our
   * container if it's wider. */
  min-width: 100%;
}

@media not (prefers-contrast) {
  #downloadsListBox[disabled] {
    opacity: var(--downloads-item-disabled-opacity) !important;
  }
}

@media (prefers-contrast) {
  #downloadsListBox[disabled] {
    color: GrayText;
  }
}

#emptyDownloads {
  padding: 1.5em 8px 2.1em;
  margin: 0;
  pointer-events: none;
}

#downloadsListBox > richlistitem {
  /* Leave space for the 32x32 icon with 16px vertical padding, and/or
   * the text in the item, with the same padding, whichever is bigger: */
  min-height: max(48px, calc(16px + 2em));
  padding-inline-end: 4px;
  margin: 0 0 8px;
  border-radius: 4px;
}

.downloadMainArea {
  padding-block: 8px;
  padding-inline-start: 4px;
  border-radius: 4px;
}

#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover,
#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover,
#downloadsListBox > richlistitem[verdict]:hover,
#downloadsListBox > richlistitem.openWhenFinished:hover,
.downloadsPanelFooterButton:hover {
  background-color: var(--panel-item-hover-bgcolor);
}

#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover:active,
#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover:active,
#downloadsListBox > richlistitem[verdict]:hover:active,
.downloadsPanelFooterButton[open="true"] {
  background-color: var(--panel-item-active-bgcolor);
}

#downloadsListBox:focus-visible > richlistitem[selected],
#downloadsListBox[force-focus-visible]:focus > richlistitem[selected],
.downloadButton:focus-visible,
#downloadsSummary:focus-visible,
.downloadsPanelFooterButton:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-inset);
}

#downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails,
#downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails {
  color: var(--text-color-error);
  /* The details text usually gets an opacity reduction, but for the error
     states we disable that, because it would reduce the contrast too much. */
  opacity: inherit;
}

.downloadTypeIcon {
  margin-inline-end: 0.7em;
}

#downloadsPanel-blockedSubview-buttons {
  margin-top: 1.5em;
}

#downloadsSummary {
  background: var(--arrowpanel-dimmed);
  border-top: 1px solid var(--panel-separator-color);
  /* Reserve the same space as the button and separator in download items. */
  padding-inline-end: 59px;
  -moz-user-focus: normal;
}

#downloadsSummary > .downloadTypeIcon {
  list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
}

#downloadsSummaryDescription {
  color: var(--link-color);
}

/*** List items and similar elements in the summary ***/
#downloadsSummary {
  min-height: var(--downloads-item-height);
}

#downloadsListBox > richlistitem {
  background: transparent;
  color: inherit;
}

#downloadsListBox > richlistitem:last-child {
  margin-bottom: 0;
}

.downloadTypeIcon {
  width: 32px;
  height: 32px;
}

#downloadsSummaryDescription,
.downloadTarget {
  margin: 0;
}

#downloadsSummaryDetails,
.downloadDetails {
  font-size: calc(100% * var(--downloads-item-font-size-factor));
  opacity: var(--downloads-item-details-opacity);
  /* Use calc() to keep the height consistent with .downloadTarget, so that the
     progress bar can be vertically centered. */
  margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);
}

/* When hovering the mouse pointer over the item, instead of the normal message
   we display a more detailed one. For blocked downloads the entire area shows
   the hover message, for other downloads only the main area does. */
#downloadsListBox > richlistitem[verdict]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
#downloadsListBox > richlistitem[verdict]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
.downloadMainArea:hover > .downloadContainer > .downloadDetailsNormal,
#downloadsListBox > richlistitem:not([verdict]) > .downloadMainArea:not(:hover) > .downloadContainer > .downloadDetailsHover {
  display: none;
}

/* When hovering the action button in particular, instead of the usual hover
   message we display the command associated with the button. */
#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
#downloadsListBox > richlistitem:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadDetailsButtonHover {
  display: none;
}

.downloadButton {
  appearance: none;
  min-width: 32px;
  height: 32px;
  margin: 0;
  margin-inline-start: 4px;
  border: 1px solid transparent;
  padding: 0;
  background: transparent;
  color: inherit;
  border-radius: 4px;
  --button-hover-bgcolor: var(--panel-item-hover-bgcolor);
  --button-hover-color: inherit;
  --button-active-bgcolor: var(--panel-item-active-bgcolor);
  --button-active-color: inherit;
}

.downloadButton > .button-box > .button-icon {
  width: 16px;
  height: 16px;
  margin: 1px;
  -moz-context-properties: fill;
  fill: currentColor;
}

.downloadButton > .button-box > .button-text {
  margin: 0 !important;
  padding: 0;
}

@media (prefers-contrast) {
  .downloadButton {
    background-color: ButtonFace;
    color: ButtonText;
    border-color: currentColor;
    --button-hover-bgcolor: SelectedItem;
    --button-hover-color: SelectedItemText;
    --button-active-bgcolor: ButtonFace;
    --button-active-color: ButtonText;
  }
}

.downloadButton:hover:not(:active) {
  background-color: var(--button-hover-bgcolor);
  color: var(--button-hover-color);
  border-color: var(--button-hover-bgcolor);
}
.downloadButton:hover:active {
  background-color: var(--button-active-bgcolor);
  color: var(--button-active-color);
}

/*** Button icons ***/

.downloadIconCancel > .button-box > .button-icon {
  list-style-image: url("chrome://global/skin/icons/close.svg");
}

.downloadIconShow > .button-box > .button-icon {
  list-style-image: url("chrome://global/skin/icons/folder.svg");
}

@media (-moz-platform: macos) {
  .downloadIconShow > .button-box > .button-icon {
    list-style-image: url("chrome://global/skin/icons/search-glass.svg");
  }
}

.downloadIconRetry > .button-box > .button-icon {
  list-style-image: url("chrome://global/skin/icons/reload.svg");
}

.downloadIconSubviewArrow > .button-box > .button-icon {
  list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
}

.downloadIconSubviewArrow > .button-box > .button-icon:-moz-locale-dir(ltr) {
  list-style-image: url("chrome://global/skin/icons/arrow-right.svg");
}

/*** Blocked subview ***/
#downloadsPanel-blockedSubview-title {
  font-size: calc(100% * var(--downloads-item-font-size-factor));
  margin-bottom: 1.5em;
}

#downloadsPanel-blockedSubview-details1,
#downloadsPanel-blockedSubview-details2 {
  font-size: calc(100% * var(--downloads-item-font-size-factor));
  margin-bottom: 0.5em;
  opacity: var(--downloads-item-details-opacity);
}

/*** Toolbarseparator ***/
#downloadsFooterButtons > toolbarseparator {
  margin-inline: 0;
}