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

html, body {
  width: 250px;
  height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  background: var(--in-content-box-background);
}

body[loading] #print {
  visibility: hidden;
}

*[hidden] {
  display: none !important;
}

.section-block {
  margin: 16px;
}

.section-block .block-label {
  display: block;
  margin-bottom: 8px;
}

.row {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 1.8em;
  margin-block: 2px;
}

.row > input,
.row > select,
.col > input {
  margin-inline: 0 0;
  max-width: 100%;
  display: inline-block;
}

.row.cols-2 {
  flex-direction: row;
  align-items: center;
}

.cols-2 > .col:nth-child(1) {
  flex: 0 0 2em;
  text-align: center;
}

.header-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex: 0 1 auto;
  border-bottom: 1px solid var(--in-content-border-color);
  padding: 8px 18px;
}
.header-container > h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1;
}

#sheet-count {
  font-size: 11px;
  padding: 3px 8px;
  margin: 0;
}

#sheet-count[loading],
body[invalid] #sheet-count {
  visibility: hidden;
}

form#print {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  font: menu;
}

select {
  min-height: auto;
  margin: 0;
  padding: 0;
}

select:not([size], [multiple])[iconic] {
  padding-inline-start: 28px;
}

#printer-picker {
  background-size: auto 12px, 16px;
  background-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg"), url("chrome://global/skin/icons/print.svg");
  background-position: right 3px center, left 8px center;
  width: 100%;
}

#printer-picker:dir(rtl) {
  background-position-x: left 3px, right 8px;
}

#printer-picker[output="pdf"] {
  background-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg"), url("chrome://global/content/portrait.svg");
}

input[type="checkbox"] {
  margin-inline-end: 8px;
}

input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--in-content-box-border-color);
  border-radius: 50%;
  margin: 0;
  margin-inline-end: 8px;
  background-color: var(--in-content-box-background);
}

input[type="radio"]:checked {
  appearance: none;
  background-image: url("chrome://global/skin/in-content/radio.svg");
  -moz-context-properties: fill;
  fill: #3485ff;
}

input[type="radio"]:enabled:-moz-focusring,
input[type="radio"]:enabled:hover {
  border-color: var(--in-content-border-focus);
}

input[type="radio"]:enabled:-moz-focusring {
  outline: 2px solid var(--in-content-border-active);
  /* offset outline to align with 1px border-width set for buttons/menulists above. */
  outline-offset: -1px;
  /* Make outline-radius slightly bigger than the border-radius set above,
   * to make the thicker outline corners look smooth */
  -moz-outline-radius: 50%;
  box-shadow: 0 0 0 4px var(--in-content-border-active-shadow);
}

input[type="radio"]:disabled {
  opacity: 0.5;
}

input[type="number"],
input[type="text"] {
  padding: 2px;
  padding-inline-start: 4px;
  outline: none !important;
}

.cols-2 > input {
  flex: none;
}

.toggle-group-label {
  padding: 4px 8px;
}

.body-container {
  flex: 1 1 auto;
  overflow: auto;
}

#more-settings {
  border-top: 1px solid var(--in-content-border-color);
}

.twisty > summary {
  list-style: none;
  display: flex;
  cursor: pointer;
  align-items: center;
}

#more-settings > summary > .twisty {
  background-image: url("chrome://global/skin/icons/twisty-expanded.svg");
  background-repeat: no-repeat;
  background-position: center;
  -moz-context-properties: fill;
  fill: currentColor;
  width: 12px;
  height: 12px;
  scale: 1 1;
}

#more-settings > summary > .label {
  flex-grow: 1;
}

#more-settings[open] > summary > .twisty {
  /* flip arrow to point up for the open state */
  scale: 1 -1;
}

#open-dialog-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#open-dialog-link::after {
  display: block;
  content: url(chrome://global/skin/icons/open-in-new.svg);
  -moz-context-properties: fill;
  fill: currentColor;
  width: 12px;
  height: 12px;
}

#open-dialog-link:dir(rtl)::after {
  scale: -1 1;
}

.footer-container {
  border-top: 1px solid var(--in-content-border-color);
  flex: 0 1 auto;
}

#print-progress {
  background-image: url("chrome://global/skin/icons/loading.png");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: left center;
  padding-inline-start: 20px;
}

@media (min-resolution: 1.1dppx) {
  #print-progress {
    background-image: url("chrome://global/skin/icons/loading@2x.png");
  }
}

#print-progress:dir(rtl) {
  background-position-x: right;
}

#button-container {
  display: flex;
  justify-content: center;
  gap: 8px;
}

#button-container > button {
  flex: 1 1 auto;
  margin: 0;
}

#custom-range {
  margin-top: 4px;
}

.vertical-margins,
.horizontal-margins {
  display: flex;
  gap: 20px;
  margin-block: 5px;
}

.margin-input {
  width: 6em !important;
}

.margin-descriptor {
  text-align: center;
  display: block;
  margin-top: 2px;
}

.toggle-group #landscape + .toggle-group-label::before {
  content: url("chrome://global/content/landscape.svg");
}
.toggle-group #portrait + .toggle-group-label::before {
  content: url("chrome://global/content/portrait.svg");
}

select:invalid,
input[type="text"]:invalid,
input[type="number"]:invalid {
  border: 1px solid #D70022;
  box-shadow: 0 0 0 1px #D70022, 0 0 0 4px rgba(215, 0, 34, 0.3);
}

.error-message {
  font-size: 12px;
  color: #D70022;
  margin-top: 4px;
}

#percent-scale {
  margin-inline-start: 4px;
}

input[type="number"].photon-number {
  padding: 0;
  padding-inline-start: 4px;
  margin: 0;
  height: 20px;
  width: 4em;
}

input[type="number"].photon-number::-moz-number-spin-box {
  height: 100%;
  max-height: 100%;
  border-inline-start: 1px solid var(--in-content-box-border-color);
  width: 1em;
}

input[type="number"].photon-number:hover::-moz-number-spin-box {
  border-color: var(--in-content-border-hover);
}

input[type="number"].photon-number::-moz-number-spin-up,
input[type="number"].photon-number::-moz-number-spin-down {
  border: 0;
  border-radius: 0;
  background-color: var(--in-content-button-background);
  background-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
  background-size: 8px;
  background-position: center;
  -moz-context-properties: fill;
  fill: currentColor;
}

input[type="number"].photon-number::-moz-number-spin-up {
  scale: 1 -1;
}

input[type="number"].photon-number::-moz-number-spin-up:hover,
input[type="number"].photon-number::-moz-number-spin-down:hover {
  background-color: var(--in-content-button-background-hover);
}