/* 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/. */

/* Abuse Reports card */

:root {
  --close-icon-url: url("chrome://global/skin/icons/close.svg");
  --close-icon-size: 20px;

  --modal-panel-min-width: 60%;
  --modal-panel-margin-top: 36px;
  --modal-panel-margin-bottom: 36px;
  --modal-panel-margin: 20%;
  --modal-panel-padding: 40px;

  --line-height: 20px;
  --textarea-height: 220px;
  --button-padding: 52px;
  --listitem-padding-bottom: 14px;
  --list-radio-column-size: 28px;
  --note-font-size: 14px;
  --note-font-weight: 400;
  --subtitle-font-size: 16px;
  --subtitle-font-weight: 600;
}

/* Ensure that the document (embedded in the XUL about:addons using a
   XUL browser) has a transparent background */
html {
  background-color: transparent;
}

.modal-overlay-outer {
  background: var(--grey-90-a60);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}

.modal-panel-container {
  padding-top: var(--modal-panel-margin-top);
  padding-bottom: var(--modal-panel-margin-bottom);
  padding-left: var(--modal-panel-margin);
  padding-right: var(--modal-panel-margin);
}

.addon-abuse-report {
  min-width: var(--modal-panel-min-width);
  padding: var(--modal-panel-padding);
  display: flex;
  flex-direction: column;
  position: relative;
}

.addon-abuse-report:hover {
  /* Avoid the card box highlighting on hover. */
  box-shadow: none;
}

.addon-abuse-report button {
  padding: 0 var(--button-padding);
}

.abuse-report-close-icon {
  /* position the close button in the panel upper-right corner */
  position: absolute;
  top: 12px;
  inset-inline-end: 16px;
}

button.abuse-report-close-icon {
  background: var(--close-icon-url) no-repeat center center;
  -moz-context-properties: fill;
  color: inherit !important;
  fill: currentColor;
  min-width: auto;
  min-height: auto;
  width: var(--close-icon-size);
  height: var(--close-icon-size);
  margin: 0;
  padding: 0;
}

button.abuse-report-close-icon:hover {
  fill-opacity: 0.1;
}

button.abuse-report-close-icon:hover:active {
  fill-opacity: 0.2;
}

.abuse-report-header {
  display: flex;
  flex-direction: row;
}

.abuse-report-contents,
.abuse-report-contents > hr {
  width: 100%;
}

.abuse-report-note {
  color: var(--text-color-deemphasized);
  font-size: var(--note-font-size);
  font-weight: var(--note-font-weight);
  line-height: var(--line-height);
}

.abuse-report-subtitle {
  font-size: var(--subtitle-font-size);
  font-weight: var(--subtitle-font-weight);
  line-height: var(--line-height);
}

ul.abuse-report-reasons {
  list-style-type: none;
  padding-inline-start: 0;
}

ul.abuse-report-reasons > li {
  display: flex;
  padding-bottom: var(--listitem-padding-bottom);
}

ul.abuse-report-reasons > li > label {
  display: grid;
  grid-template-columns: var(--list-radio-column-size) auto;
  grid-template-rows: 50% auto;
  width: 100%;
  line-height: var(--line-height);
  font-size: var(--subtitle-font-size);
  font-weight: var(--note-font-weight);
  margin-inline-start: 4px;
}

ul.abuse-report-reasons > li > label > [type="radio"] {
  grid-column: 1;
}

ul.abuse-report-reasons > li > label > span {
  grid-column: 2;
}

abuse-report-submit-panel textarea {
  width: 100%;
  height: var(--textarea-height);
  resize: none;
  box-sizing: border-box;
}

/* Adapt styles for the panel opened in its own dialog window */

html.dialog-window {
  background-color: var(--in-content-box-background);
  height: 100%;
  min-width: 740px;
}

html.dialog-window body {
  overflow: hidden;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

html.dialog-window .abuse-report-close-icon {
  display: none;
}

html.dialog-window addon-abuse-report {
  flex-grow: 1;
  display: flex;
  /* Ensure that the dialog window starts from a reasonable initial size */
  --modal-panel-min-width: 700px;
}

html.dialog-window addon-abuse-report form {
  display: flex;
}

html.dialog-window addon-abuse-report form .abuse-report-contents {
  flex-grow: 1;
}