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

/* Permissions */

.highlighting-group {
  --section-highlight-background-color: color-mix(in srgb, var(--in-content-accent-color) 20%, transparent);
}

.permission-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-inline-end: 0.2em;
}

.permission-icon,
.privacy-detailedoption .checkbox-label-box,
.extra-information-label > image,
.arrowhead,
.reload-tabs-button,
.content-blocking-warning-image {
  -moz-context-properties: fill;
  fill: currentColor;
}

.geo-icon {
  list-style-image: url(chrome://browser/skin/notification-icons/geo.svg);
}

.xr-icon {
  list-style-image: url(chrome://browser/skin/notification-icons/xr.svg);
}

.camera-icon {
  list-style-image: url(chrome://browser/skin/notification-icons/camera.svg);
}

.microphone-icon {
  list-style-image: url(chrome://browser/skin/notification-icons/microphone.svg);
}

.speaker-icon {
  list-style-image: url(chrome://global/skin/media/audio.svg);
}

.desktop-notification-icon {
  list-style-image: url(chrome://browser/skin/notification-icons/desktop-notification.svg);
}

.autoplay-icon {
  list-style-image: url(chrome://browser/skin/notification-icons/autoplay-media.svg);
}

.midi-icon {
  list-style-image: url(chrome://browser/skin/notification-icons/midi.svg);
}

/* Content Blocking */

/* Override styling that sets descriptions as grey */
#trackingGroup description.indent,
#trackingGroup .indent > description {
  color: inherit;
}

[data-subcategory="trackingprotection"] {
  margin-top: 10px;
}

#trackingProtectionShield {
  list-style-image: url("chrome://browser/skin/controlcenter/tracking-protection.svg");
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0.5;
  width: 64px;
  height: 64px;
  margin-inline-end: 10px;
}

.privacy-detailedoption,
#fpiIncompatibilityWarning {
  margin: 3px 0;
}

#fpiIncompatibilityWarning {
  background-color: var(--section-highlight-background-color);
}

#fpiIncompatibilityWarning,
#contentBlockingCategories {
  margin-top: 16px;
}

.privacy-detailedoption {
  border-color: var(--in-content-box-border-color);
}

.privacy-detailedoption.disabled {
  opacity: 0.5;
}

.privacy-detailedoption.disabled .radio-check {
  opacity: 1;
}

.privacy-detailedoption > .indent {
  margin-inline-end: 22px;
}

.arrowhead {
  border-radius: 2px;
  min-height: 20px;
  min-width: 20px;
  max-height: 20px;
  max-width: 20px;
  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
  background-color: transparent;
  padding: 3px;
}

.arrowhead:not([disabled]):hover {
  cursor: pointer;
}

.arrowhead.up {
  list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
}

.privacy-detailedoption.expanded:not(.selected) .reload-tabs {
  display: none;
}

.content-blocking-warning.reload-tabs:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
}

.content-blocking-reload-desc-container {
  /* 345px is enough for (almost) twice the size of the default English
   * string at default font sizes. If this and the button do not fit
   * on one line, the button will get wrapped to the next line and this
   * item will stretch to fill all available space. */
  flex: 1 1 345px;
  display: flex;
  align-self: center;
}

.content-blocking-reload-description {
  line-height: 1.8em;
  margin-inline-end: 5px;
}

.reload-tabs-button {
  max-height: 30px;
  min-height: 30px;
  padding: 0 20px;
  list-style-image: url("chrome://global/skin/icons/reload.svg");
  align-self: center;
}

.reload-tabs-button .button-icon {
  margin: 0 6px;
  color: inherit;
}

.reload-tabs-button .button-text {
  color: inherit;
}

.privacy-detailedoption.selected .content-blocking-warning {
  background-color: var(--section-highlight-background-color);
}

.privacy-detailedoption.selected .arrowhead {
  display: none;
}

.privacy-detailedoption.selected {
  border-color: var(--in-content-accent-color);
}

@media (prefers-contrast) {
  .privacy-detailedoption.selected {
    outline: 2px solid var(--in-content-accent-color);
  }
}

@media not (prefers-contrast) {
  .privacy-detailedoption {
    background-color: rgba(215, 215, 219, 0.1);
  }

  .privacy-detailedoption.selected {
    background-color: var(--section-highlight-background-color);
  }
}

.content-blocking-warning-title,
.privacy-detailedoption .radio-label-box {
  font-weight: bold;
}

.privacy-detailedoption:not(.expanded, .selected) .privacy-extra-information {
  visibility: collapse;
}

.extra-information-label {
  margin-top: 18px;
}

/* Apply display: block to the containers of all the category information, as
 * without this the flex-wrapped blocks inside don't stretch vertically to
 * enclose their content. */
.privacy-detailedoption > .indent {
  display: block;
}

.privacy-detailedoption.expanded .privacy-extra-information,
.privacy-detailedoption.selected .privacy-extra-information {
  display: flex;
  flex-direction: column;
  align-content: stretch;
}

.privacy-extra-information > .indent {
  margin-bottom: 18px;
}

.privacy-extra-information > .custom-option {
  margin: 10px 0;
}

.content-blocking-warning {
  /* Match .indent's horizontal padding, minus the border added via .info-box-container: */
  padding-inline: calc(22px - 1px);
  margin: 10px 0;
}

.content-blocking-warning:not([hidden]) + .content-blocking-warning {
  margin-top: 0;
}

.content-blocking-extra-blocking-desc {
  margin-inline-start: 0.5em;
  position: relative;
  top: 0.65em;
}

.content-blocking-label,
.doh-label {
  display: list-item;
  line-height: 1.2em;
}

.content-blocking-warning-image {
  list-style-image: url("chrome://global/skin/icons/warning.svg");
  width: 16px;
  margin-inline-end: 6px;
}

#blockCookiesMenu {
  width: 450px;
}

#blockCookiesMenu,
#trackingProtectionMenu {
  margin: 0;
}

#changeBlockListLink {
  margin-inline-start: 56px;
}

#telemetry-container {
  margin-block: 4px;
  line-height: 1.8em;
  width: 100%;
}

.privacy-detailedoption-description {
  font-size: 90%;
  opacity: 0.6;
}

.warning-description {
  background: url(chrome://global/skin/icons/warning.svg) no-repeat 0 5px;
  opacity: 0.6;
  -moz-context-properties: fill, stroke;
  fill: #d7b600;
  stroke: white;
  padding-inline-start: 20px;
}

.reject-trackers-warning-icon:-moz-locale-dir(rtl) {
  background-position-x: right 0;
}

#contentBlockingChangeCookieSettings {
  padding: 0.25em 0.75em;
  margin: 4px 8px;
}

#deleteOnCloseNote {
  margin-top: 8px;
  margin-inline-end: 32px;
}

#submitHealthReportBox {
  display: inline-flex;
}

/* Address bar */

.firefoxSuggestOptionBox {
  /* With this value we're trying to keep the apparent vertical space between
     option boxes the same as the apparent vertical space between the labels of
     the checkboxes above the Firefox Suggest subsection. */
  margin-block-start: 18px;
}

.firefoxSuggestOptionBox:first-of-type {
  /* Similar here: Make the apparent vertical space between the last checkbox
     and first option box the same as elsewhere. */
  margin-block-start: 11px;
}

#firefoxSuggestInfoBox {
  margin-block-start: 16px;
}

#openSearchEnginePreferences {
  margin-block-start: .5em;
}

#dismissedSuggestions,
#openSearchEnginePreferences.extraMargin {
  margin-block-start: 2em;
}

#dohDescription,
#dohLearnMore,
#dohStatusSection {
  line-height: 1.8em;
}