%if 0
/* 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/. */
%endif

/* Hide all conditional elements by default. */
:is([when-connection],[when-customroot],[when-mixedcontent],[when-ciphers],[when-httpsonlystatus]) {
  display: none;
}


#identity-popup,
#protections-popup {
%if defined(XP_MACOSX) || defined(XP_WIN)
  font-size: 1.18em;
%endif
  --popup-width: 30.81em;
  /* Set default fill for icons in the identity popup.
     Individual icons can override this. */
  fill: currentColor;
  --horizontal-padding: 1.78em;
  --vertical-section-padding: 0.9em;
  --height-offset: 0px;
}

#protections-popup {
  --protections-popup-switch-off-background: #f9f9fa;
  --protections-popup-switch-off-hover-background: #c9c9ca;
  --protections-popup-switch-off-active-background: #b1b1b2;
}

:root[lwt-popup-brighttext] #protections-popup {
  --protections-popup-switch-off-background: #5c5c61;
  --protections-popup-switch-off-hover-background: #6d6d71;
  --protections-popup-switch-off-active-background: #737379;
}

#protections-popup[toast] {
  --popup-width: 27.12em;
}

#protections-popup[infoMessageShowing] {
  --height-offset: 260px;
}

/* This is used by screenshots tests to hide intermittently different
 * identity popup shadows (see bug 1425253). */
#identity-popup.no-shadow {
  -moz-window-shadow: none;
}

/* Show the right elements for the right connection states. */
#identity-popup[customroot=true] [when-customroot=true],
#identity-popup[connection=not-secure] [when-connection~=not-secure],
#identity-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden],
#identity-popup[connection=secure-ev] [when-connection~=secure-ev],
#identity-popup[connection=secure] [when-connection~=secure],
#identity-popup[connection=chrome] [when-connection~=chrome],
#identity-popup[connection=file] [when-connection~=file],
#identity-popup[connection=extension] [when-connection~=extension],
#identity-popup[connection=cert-error-page] [when-connection~=cert-error-page],
#identity-popup[connection=https-only-error-page] [when-connection~=https-only-error-page],
/* Show weak cipher messages when needed. */
#identity-popup[ciphers=weak] [when-ciphers~=weak],
/* Show mixed content warnings when needed */
#identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded],
#identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded],
#identity-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked],
/* Show the right elements when there is mixed passive content loaded and active blocked. */
#identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded],
/* HTTPS-Only Mode */
#identity-popup[httpsonlystatus=exception] [when-httpsonlystatus~=exception],
#identity-popup[httpsonlystatus=upgraded] [when-httpsonlystatus~=upgraded],
#identity-popup[httpsonlystatus=failed-top] [when-httpsonlystatus~=failed-top],
#identity-popup[httpsonlystatus=failed-sub] [when-httpsonlystatus~=failed-sub],
/* Show 'disable MCB' button always when there is mixed active content blocked. */
#identity-popup-securityView-body[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] {
  display: inherit;
}

/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */
#identity-popup-securityView-body:is([mixedcontent],[ciphers]) > description[when-connection=not-secure],
/* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */
#identity-popup-securityView-body[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] {
  display: none;
}

/* Make sure hidden elements don't accidentally become visible from one of the
   above selectors (see Bug 1194258) */
#identity-popup [hidden] {
  display: none !important;
}

#identity-popup-mainView,
#protections-popup-mainView,
#identity-popup-mainView-panel-header,
#protections-popup-mainView-panel-header {
  min-width: var(--popup-width);
  max-width: var(--popup-width);
}

#protections-popup[toast] #protections-popup-mainView > :not(#protections-popup-mainView-panel-header-section),
#protections-popup[toast] #protections-popup-main-header-label {
  display: none;
}

#protections-popup[toast] #protections-popup-mainView-panel-header {
  min-height: 30px;
}

.identity-popup-section,
.protections-popup-section {
  border-top: 1px solid var(--panel-separator-color);
}

#identity-popup-securityView .identity-popup-security-content {
  border-bottom: 1px solid var(--panel-separator-color);
}

.identity-popup-security-connection {
  background-repeat: no-repeat;
  background-position: 2em 50%;
  background-size: 16px auto;
  -moz-context-properties: fill, fill-opacity;
}

.identity-popup-security-connection:-moz-locale-dir(rtl) {
  background-position-x: right 2em
}

.identity-popup-security-connection > description {
  margin-block: 0;
}

#identity-popup-permissions-header,
.identity-popup-security-connection,
#identity-popup-security-description,
#identity-popup-security-httpsonlymode {
  /* icon indent + 16px icon width + 6px description margin
     (total of 12px margin with the native 6px description margin) */
  padding-inline: calc(2em + 22px) 1em;
}

#identity-popup-security-description > description {
  margin-top: 0.5em;
}

#identity-popup-security-httpsonlymode > label {
  margin-top: 0.5em;
}
#identity-popup-security-httpsonlymode > div {
  /* Make the content fit in the panel for locales with longer text */
  display: flex;
  margin-inline-start: 0.3em;
}
#identity-popup-security-httpsonlymode > label {
  margin-block: 0.5em 0;
}

#identity-popup-security-httpsonlymode-menulist {
  text-overflow: ellipsis;
  overflow: hidden;
}
#identity-popup-security-httpsonlymode-info {
  font-size: 0.85em;
  color: var(--panel-description-color);
}

.identity-popup-connection-secure.upgraded {
  margin-inline: 0;
}

#identity-popup-permissions-content {
  padding-inline: 2em 1em;
}

.identity-popup-security-content,
#identity-popup-permissions-content {
  padding-block: 1em;
}

#identity-popup-permissions-header {
  background-image: url(chrome://browser/skin/permissions.svg);
  background-repeat: no-repeat;
  -moz-context-properties: fill;
  fill: currentColor;
}

#identity-popup-permissions-header:-moz-locale-dir(rtl) {
  background-position-x: right;
}

#identity-popup-permissions-header,
#identity-popup-permission-list {
  /* 16px icon width + 12px margin */
  padding-inline-start: 28px;
}

#protections-popup-content {
  background-repeat: no-repeat;
  background-position: 1em 1em;
  background-size: 24px auto;
  -moz-context-properties: fill;
  padding: 0.5em 0 1em;
  padding-inline: calc(2em + 24px) 1em;
}

#protections-popup-content:-moz-locale-dir(rtl) {
  background-position: calc(100% - 1em) 1em;
}

/* EXPAND BUTTON */

.identity-popup-expander {
  margin: 0;
  padding: 4px 0;
  min-width: auto;
  width: 38px;
  border-style: none;
  appearance: none;
  background: url("chrome://global/skin/icons/arrow-left.svg") center no-repeat;
  background-size: 16px, auto;
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: .6;
  color: inherit !important; /* !important overrides :hover and :active:hover colors from button.css on Mac and Linux */
}

.identity-popup-expander:-moz-locale-dir(ltr) {
  transform: scaleX(-1);
}

.identity-popup-expander > .button-box {
  border-right: 1px solid var(--panel-separator-color);
  padding: 0;
}

.identity-popup-expander:hover {
  background-color: var(--arrowpanel-dimmed);
}

.identity-popup-expander:hover:active {
  background-color: var(--arrowpanel-dimmed-further);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}

/* CONTENT */

#identity-popup-permissions-headline,
.protections-popup-empty-label,
.tracking-protection-button,
.protections-popup-cookiesView-list-header,
.protections-popup-list-item > label,
#protections-popup-mainView-panel-header > label,
#protections-popup-mainView-panel-header > description,
#protections-popup-trackersView > .panel-header,
#protections-popup-sendReportView > .panel-header,
.protections-popup-category-label,
.protections-popup-category-state-label,
#protections-popup-content > description,
.protections-popup-footer-button-label,
#protections-popup-trackers-blocked-counter-description,
#protections-popup-sendReportView-heading > description {
  margin: 0;
}

#identity-popup-mainView-panel-header,
#protections-popup-mainView-panel-header {
  min-height: 40px;
  -moz-box-pack: center;
  -moz-box-align: center;
}

#identity-popup-mainView-panel-header {
  padding: var(--vertical-section-padding) var(--horizontal-padding);
}

#protections-popup::part(arrow) {
  transition-property: fill;
  transition-timing-function: var(--animation-easing-function);
  transition-duration: var(--panelui-subview-transition-duration);
}

#protections-popup[mainviewshowing][side=top]::part(arrow) {
  fill: #0A51BF;
}

#protections-popup-mainView-panel-header-section {
  overflow: hidden;
  color: white;
  background: radial-gradient(circle farthest-side at top right, #9059FF, #0250BB);
  /* Set custom hover/focus/active states on the info button,
     to make them more visible on the header background */
  --arrowpanel-dimmed: rgba(12, 12, 13, 0.2);
  --arrowpanel-dimmed-further: rgba(12, 12, 13, 0.3);
  --arrowpanel-dimmed-even-further: rgba(12, 12, 13, 0.4);
}

#protections-popup-mainView-panel-header-section:-moz-locale-dir(rtl) {
  background: radial-gradient(circle farthest-side at top left, #9059FF, #0250BB);
}

#identity-popup-mainView-panel-header-span,
#protections-popup-mainView-panel-header-span {
  font-weight: 600;
}

#protections-popup-mainView-panel-header-span {
  margin: var(--vertical-section-padding) 0;
  /* 9px + 26px to compensate for the info button */
  margin-inline-start: 35px;
}

#identity-popup-mainView-panel-header-span,
#protections-popup-mainView-panel-header-span,
#protections-popup-toast-panel-tp-on-desc,
#protections-popup-toast-panel-tp-off-desc,
#protections-popup .panel-header > label > span,
#identity-popup .panel-header > label > span {
  display: inline-block;
  text-align: center;
  overflow-wrap: break-word;
  /* This is needed for the overflow-wrap to work correctly.
   * The panel-header has 1em padding on each side. */
  max-width: calc(var(--popup-width) - 2 * var(--horizontal-padding));
}

#protections-popup[toast] #protections-popup-info-button {
  display: none;
}

#protections-popup-info-button {
  margin-inline-end: 10px;
}

#protections-popup-info-button > image {
  fill-opacity: 1;
}

#identity-popup-permissions-content > description,
#protections-popup-content > description {
  color: var(--panel-description-color);
}

/* This element needs the pre-wrap because we add newlines to it in the code. */
#identity-popup-content-supplemental {
  white-space: pre-wrap;
}

.identity-popup-warning-box {
  padding: 0.5em;
}

.identity-popup-warning-gray {
  background-color: var(--arrowpanel-dimmed);
  border: 1px solid var(--panel-separator-color);
}

.identity-popup-warning-yellow {
  color: black;
  background-color: #FFEEBF;
  border: 1px solid #FFE083;
}

/* SECURITY */

.identity-popup-connection-secure {
  color: #058B00;
}

:root[lwt-popup-brighttext] .identity-popup-connection-secure {
  color: #30e60b;
}

#identity-popup[mixedcontent~=active-loaded] .identity-popup-connection-not-secure,
#identity-popup:not([mixedcontent]) .identity-popup-connection-not-secure {
  color: #d74345;
}

.identity-popup-security-connection {
  background-image: url(chrome://global/skin/icons/connection-mixed-active-loaded.svg);
}

#identity-popup[connection=chrome] .identity-popup-security-connection {
  background-image: url(chrome://branding/content/icon48.png);
}

#identity-popup[connection=file] .identity-popup-security-connection {
  background-image: url(chrome://global/skin/icons/document.svg);
}

#identity-popup[connection^=secure] .identity-popup-security-connection {
  background-image: url(chrome://browser/skin/connection-secure.svg);
  -moz-context-properties: fill;
}

#identity-popup[connection^=secure] .identity-popup-security-connection {
  fill: #12BC00;
}

#identity-popup[connection^=secure][lock-icon-gray] .identity-popup-security-connection {
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
}

/* Use [isbroken] to make sure we don't show a warning lock on an http page. See Bug 1192162. */
#identity-popup[ciphers=weak] .identity-popup-security-connection,
#identity-popup[mixedcontent~=passive-loaded][isbroken] .identity-popup-security-connection {
  background-image: url(chrome://global/skin/icons/connection-mixed-passive-loaded.svg);
  -moz-context-properties: fill, fill-opacity;
}

#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection,
#identity-popup[connection=cert-error-page] .identity-popup-security-connection {
  background-image: url(chrome://global/skin/icons/connection-mixed-passive-loaded.svg);
  fill: unset;
  -moz-context-properties: fill;
}

#identity-popup[mixedcontent~=active-loaded][isbroken] .identity-popup-security-connection {
  background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg);
  -moz-context-properties: fill;
}

#identity-popup[connection=extension] .identity-popup-security-connection {
  background-image: url(chrome://mozapps/skin/extensions/extension.svg);
  -moz-context-properties: fill;
  fill: #60bf4c;
}

#identity-popup-securityView-body {
  /* icon indent + 16px icon width + 6px description margin
    (total of 12px margin with the native 6px description margin) */
  margin-inline: calc(2em + 22px) 1em;
  padding-inline-end: 1em;
  padding-top: 0.5em;
}

#identity-popup-more-info-footer {
  margin-top: 1em;
}

#identity-popup-securityView-body > label:not(.plain),
#identity-popup-content-verifier ~ description {
  margin-top: 0.5em;
}

description#identity-popup-content-owner-label,
description#identity-popup-content-owner,
description#identity-popup-content-verifier,
#identity-popup-securityView-body > button {
  margin-top: 0.5em;
}

/* CONTENT BLOCKING / TRACKING PROTECTION */

#protections-popup-sendReportView-footer {
  display: flex;
}

#protections-popup-sendReportView-footer > button {
  flex: 1;
}

#protections-popup-sendReportView-heading,
#protections-popup-sendReportView-body {
  padding: var(--vertical-section-padding) var(--horizontal-padding);
}

.protections-popup-sendReportView-collection-section {
  margin-bottom: 16px;
}

#protections-popup-sendReportView-body {
  border-top: 1px solid var(--panel-separator-color);
}

#protections-popup-sendReportView-collection-url {
  appearance: none;
  border: none;
}

#protections-popup-sendReportView-collection-comments {
  height: 120px;
}

#protections-popup-sendReportView label {
  margin-inline-start: 0;
}

#protections-popup-sendReportView-report-error {
  margin-bottom: 24px;
  color: #d74345;
}

.protections-popup-category {
  /* Overwrite toolbarbutton styles */
  appearance: none;
  margin: 0;
  padding-inline-start: 0;
}

.protections-popup-category:-moz-focusring,
.protections-popup-category:hover,
.protections-popup-footer-button:-moz-focusring,
.protections-popup-footer-button:hover,
#protections-popup-show-report-stack:hover > .protections-popup-footer-button {
  border-radius: 2px;
  background-color: var(--arrowpanel-dimmed);
  outline: none;
}

.protections-popup-category:hover:active,
.protections-popup-footer-button:hover:active,
#protections-popup-show-report-stack:hover:active > .protections-popup-footer-button {
  background-color: var(--arrowpanel-dimmed-further);
}

.protections-popup-category::after {
  content: url(chrome://browser/skin/back-12.svg);
  -moz-context-properties: fill, fill-opacity;
  fill-opacity: .6;
  transform: scaleX(-1) translateY(1px);
  float: inline-end;
}

.protections-popup-category:-moz-locale-dir(rtl)::after {
  transform: scaleX(1) translateY(1px);
}

/* This subview could get filled with a lot of trackers, set a maximum size
 * and allow it to scroll vertically.*/
#protections-popup-socialblockView,
#protections-popup-cookiesView,
#protections-popup-trackersView {
  max-height: calc(600px + var(--height-offset));
}

#protections-popup-trackersView-list.empty {
  -moz-box-align: center;
  -moz-box-pack: center;
}

.protections-popup-empty-label {
  margin-inline-start: 0;
  color: var(--panel-description-color);
}

.protections-popup-trackersView-empty-image {
  width: 48px;
  height: 48px;
  -moz-context-properties: fill;
  margin-bottom: 16px;
}

#protections-popup-cookiesView .protections-popup-empty-label {
  margin-inline-start: 24px;
  margin-block: 2px 4px;
}

.protections-popup-cookiesView-list-header {
  color: var(--panel-description-color);
  margin: 5px 0;
}

#protections-popup-cookiesView-list > .protections-popup-cookiesView-list-section:only-of-type > .protections-popup-cookiesView-list-header {
  display: none;
}

.protections-popup-list {
  padding: 5px 20px;
  -moz-box-flex: 1;
  overflow: auto;
}

.protections-popup-list-item {
  margin: 5px 0;
  overflow: hidden;
  -moz-box-align: center;
}

.protections-popup-list-host-label {
  -moz-box-flex: 1;
  direction: ltr;
  text-align: match-parent;
}

.protections-popup-list-state-label {
  -moz-box-flex: 1;
  text-align: end;
  margin-inline: 5px 2px;
}

.protections-popup-socialblockView-icon,
.protections-popup-fingerprintersView-icon,
.protections-popup-cryptominersView-icon,
.protections-popup-trackersView-icon,
.protections-popup-cookiesView-icon {
  margin-inline-end: 10px;
  -moz-context-properties: fill;
}

.protections-popup-trackersView-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/tracker-image-disabled.svg);
  width: 16px;
  height: 16px;
}

.protections-popup-trackersView-icon.allowed {
  list-style-image: url(chrome://browser/skin/controlcenter/tracker-image.svg);
}

.protections-popup-socialblockView-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/socialblock-disabled.svg);
}

.protections-popup-socialblockView-icon.allowed {
  list-style-image: url(chrome://browser/skin/controlcenter/socialblock.svg);
}

.protections-popup-cookiesView-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies-disabled.svg);
}

.protections-popup-cookiesView-icon.allowed {
  list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg);
}

.protections-popup-fingerprintersView-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/fingerprinters-disabled.svg);
}

.protections-popup-fingerprintersView-icon.allowed {
  list-style-image: url(chrome://browser/skin/controlcenter/fingerprinters.svg);
}

.protections-popup-cryptominersView-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/cryptominers-disabled.svg);
}

.protections-popup-cryptominersView-icon.allowed {
  list-style-image: url(chrome://browser/skin/controlcenter/cryptominers.svg);
}

/* Content Blocking categories */

#protections-popup-no-trackers-found-description {
  margin: 4.85em 7.25em;
  font-size: 1.1em;
  text-align: center;
  color: var(--panel-description-color);
}

#protections-popup-content {
  padding: 0;
  margin: 0 0 var(--vertical-section-padding);
}

#protections-popup-blocking-section-header,
#protections-popup-not-blocking-section-header,
#protections-popup-not-found-section-header {
  margin: 0;
  padding: var(--vertical-section-padding) var(--horizontal-padding);
  color: var(--panel-description-color);
}

#tracking-protection-container > tooltip {
  max-width: var(--popup-width);
}
/*
 * The category list is split into two sections: "Blocking" and "Not Blocking",
 * with five different category items distributed between them at runtime.
 * To achieve this, we use a grid layout with 12 rows: one row for each header
 * label and five rows in each section for the items.
 * Items with the "blocked" class are assigned rows 2-6, and those without
 * are assigned rows 8-12, with the headers taking rows 1 and 7.
 */

#protections-popup-category-list {
  padding: 0;
  margin: 0;
}

#protections-popup-no-trackers-found-description:not([hidden]) ~ #protections-popup-content {
  display: none;
}

#protections-popup-not-blocking-section-description {
  flex: -moz-available;
  margin: 0;
}

#protections-popup-not-blocking-section-why {
  margin: 0;
}

#protections-popup-not-blocking-section-why:hover {
  background-color: var(--arrowpanel-dimmed);
  outline: 4px solid var(--arrowpanel-dimmed);
  text-decoration: none;
}

.protections-popup-category.notFound {
  color: var(--panel-description-color);
  fill: var(--panel-description-color);
}

.protections-popup-category.notFound:hover {
  background: none;
}

/* Hide the arrow for not found items */
.protections-popup-category.notFound::after {
  display: none;
}

.tracking-protection-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/tracker-image.svg);
}

.socialblock-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/socialblock.svg);
}

.thirdpartycookies-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg);
}

.cryptominers-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/cryptominers.svg);
}

.fingerprinters-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/fingerprinters.svg);
}

/* PERMISSIONS */

@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
  /* The extra padding-bottom is there to work around XUL flex (Bug 1368281).
     This rule and the 1.5em above can both be removed once we are only using CSS flex. */
  #identity-popup-permissions-content {
    padding-bottom: 1em;
  }
}

.protections-popup-category,
.identity-popup-permission-item {
  min-height: 24px;
}

.protections-popup-category {
  padding: 0 var(--horizontal-padding);
}

.protections-popup-category[uidisabled] {
  display: none;
}

.identity-popup-permission-item,
#identity-popup-storage-access-permission-list-header {
  padding-inline-end: 8px;
  margin-top: 0.25em;
}

#identity-popup-permission-reload-hint,
#identity-popup-permission-empty-hint,
#identity-popup-permission-list:not(:empty),
#identity-popup-permission-list:empty + #identity-popup-storage-access-permission-list:not(:empty) {
  margin-top: 8px;
}

.identity-popup-permission-list-anchor[anchorfor="3rdPartyStorage"] > vbox:only-child {
  display: none;
}

#identity-popup-storage-access-permission-list-hint {
  margin-top: 0.25em;
  font-size: 0.85em;
  /* Matches offset for items - 3px margin + 16px icon + 10px margin */
  margin-inline-start: calc(3px + 16px + 10px);
  color: var(--panel-description-color);
}

.identity-popup-permission-icon {
  margin-inline-start: 3px;
}

.protections-popup-category-icon,
.identity-popup-permission-icon {
  width: 16px;
  height: 16px;
}

.identity-popup-permission-icon.in-use {
  -moz-context-properties: fill;
  fill: rgb(224, 41, 29);
  animation: 1.5s ease identity-popup-permission-icon-in-use-blink infinite;
}

@keyframes identity-popup-permission-icon-in-use-blink {
  50% { opacity: 0; }
}

.protections-popup-category-label,
.protections-popup-footer-button-label {
  margin-inline-start: 1em;
}

.identity-popup-permission-label,
.identity-popup-permission-header-label {
  margin-inline-start: 10px;
}

.identity-popup-permission-label-subitem {
  /* Align label with other labels with icon. */
  /* icon width + icon inline margin + label inline margin */
  margin-inline-start: calc(16px + 3px + 10px);
}

.protections-popup-category-state-label,
.identity-popup-permission-state-label {
  margin-inline-end: 5px;
  text-align: end;
}

.identity-popup-permission-state-label {
  color: var(--panel-description-color);
}

#protections-popup[hasException] .protections-popup-category-state-label {
  visibility: hidden;
}

.identity-popup-permission-remove-button {
  appearance: none;
  margin: 0;
  margin-inline-start: 2px;
  border-width: 0;
  border-radius: 50%;
  min-width: 0;
  padding: 2px;
  background-color: transparent;
  /* !important overrides :hover and :active colors from button.css */
  color: inherit !important;
  opacity: 0.6;
}

.identity-popup-permission-remove-button > .button-box {
  padding: 0;
}

.identity-popup-permission-remove-button > .button-box > .button-icon {
  margin: 0;
  width: 16px;
  height: 16px;
  list-style-image: url(chrome://browser/skin/panel-icon-cancel.svg);
  -moz-context-properties: fill;
  fill: currentColor;
}

.identity-popup-permission-remove-button > .button-box > .button-text {
  display: none;
}

/* swap foreground / background colors on hover */
.identity-popup-permission-remove-button:not(:-moz-focusring):hover {
  background-color: currentColor;
}

.identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
  fill: var(--arrowpanel-background);
}

.identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
  opacity: 0.8;
}

#protections-popup[hasException] .protections-popup-tp-switch-on-header,
#protections-popup:not([hasException]) .protections-popup-tp-switch-off-header {
  display: none;
}

#protections-popup-toast-panel-tp-on-desc,
#protections-popup-toast-panel-tp-off-desc {
  display: none;
}

#protections-popup:not([hasException])[toast] #protections-popup-toast-panel-tp-on-desc,
#protections-popup[hasException][toast] #protections-popup-toast-panel-tp-off-desc {
  display: unset;
}

#protections-popup-siteNotWorkingView-header,
#protections-popup-tp-switch-section {
  padding: var(--vertical-section-padding) var(--horizontal-padding);
}

#protections-popup-siteNotWorkingView-body > label,
.protections-popup-tp-switch-label-box > label {
  margin: 0;
}

#protections-popup-tp-switch-breakage-link,
#protections-popup-tp-switch-breakage-fixed-link {
  margin-top: calc(0.5 * var(--vertical-section-padding)) !important;
}

#protections-popup[hasException] #protections-popup-tp-switch-section {
  background: repeating-linear-gradient(
    -56deg,
    hsla(0,0%,80%,.25),
    hsla(0,0%,80%,.25) 10px,
    transparent 10px,
    transparent 20px
  );
}

:root[lwt-popup-brighttext] #protections-popup[hasException] #protections-popup-tp-switch-section {
  background: repeating-linear-gradient(
    -56deg,
    rgba(249,249,250,.05),
    rgba(249,249,250,.05) 10px,
    transparent 10px,
    transparent 20px
  );
}

#protections-popup-siteNotWorkingView-header {
  border-bottom: 1px solid var(--panel-separator-color);
}

#protections-popup-siteNotWorkingView-body {
  padding: var(--vertical-section-padding) var(--horizontal-padding);
}

#protections-popup-siteNotWorkingView-body,
.protections-popup-tp-switch-label-box,
.protections-popup-tp-switch-box {
  min-height: 40px;
  -moz-box-pack: center;
  /* This is needed in order to make 'position' working for the badge alongside
     the TP switch toggle.*/
  position: relative;
}

/* This is needed in order to show a correct height if the 'Site not working?'
   link is not displaying. */
#protections-popup-tp-switch-section[short] > .protections-popup-tp-switch-label-box,
#protections-popup-tp-switch-section[short] > .protections-popup-tp-switch-box {
  min-height: 30px;
}

.protections-popup-tp-switch-on-header,
.protections-popup-tp-switch-off-header {
  font-weight: 600;
}

.protections-popup-tp-switch {
  appearance: none;
  box-sizing: border-box;
  min-width: 26px;
  border-radius: 10px;
  background-color: var(--protections-popup-switch-off-background);
  border: 1px solid hsla(210,4%,10%,.14);
  margin-block: 4px;
  margin-inline-start: 1px;
  padding: 2px;
  padding-inline-end: 0;
  transition: padding .2s ease;
}

.protections-popup-tp-switch::before {
  position: relative;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: white;
  outline: 1px solid var(--panel-separator-color);
  -moz-outline-radius: 11px;
}

.protections-popup-tp-switch[enabled] {
  background-color: #0060DF;
  /* Push the toggle to the right. */
  padding-inline-start: 12px;
}

.protections-popup-tp-switch[enabled]:hover {
  background-color: #003EAA;
}

.protections-popup-tp-switch[enabled]:hover:active {
  background-color: #002275;
}

.protections-popup-tp-switch:not([enabled]):hover {
  background-color: var(--protections-popup-switch-off-hover-background);
}

.protections-popup-tp-switch:not([enabled]):hover:active {
  background-color: var(--protections-popup-switch-off-active-background);
}

#protections-popup-siteNotWorkingView-body-issue-list {
  padding-inline-start: 1em;
}

/* Protection popup footer categories */

.protections-popup-footer-button {
  /* Overwrite toolbarbutton styles */
  appearance: none;
  min-height: 24px;
  padding-inline-start: var(--horizontal-padding);
  margin: 0;
}

.protections-popup-footer-icon {
  -moz-context-properties: fill;
  width: 16px;
  height: 16px;
}

.protections-popup-settings-icon {
  list-style-image: url(chrome://global/skin/icons/settings.svg);
}

.protections-popup-show-report-icon {
  list-style-image: url(chrome://browser/skin/controlcenter/dashboard.svg);
}

#protections-popup-footer {
  padding: var(--vertical-section-padding) 0;
}

#protections-popup-trackers-blocked-counter-box {
  margin-inline-end: var(--horizontal-padding);
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms linear;
  justify-self: end;
}

#protections-popup-trackers-blocked-counter-box[showing] {
  visibility: visible;
  opacity: 1;
}

#protections-popup-trackers-blocked-counter-description {
  color: var(--panel-description-color);
}

#protections-popup-footer-protection-type-label {
    margin-inline-end: var(--horizontal-padding);
    color: var(--panel-description-color);
}

.protections-popup-description {
  border-bottom: 1px solid var(--panel-separator-color);
}

.protections-popup-description > description {
  margin: 10px 24px;
}

#protections-popup:not([milestone]) #protections-popup-milestones {
  display: none;
}

#protections-popup-milestones {
  margin: 0 calc(var(--horizontal-padding) * 0.5) var(--vertical-section-padding);
  /* Override .protections-popup-section */
  border-top: none;
  background-color: var(--arrowpanel-dimmed);
}

#protections-popup-milestones-content {
  appearance: none;
  padding: var(--vertical-section-padding) calc(var(--horizontal-padding) * 0.5);
  margin: 0;
}

#protections-popup-milestones-content:hover,
#protections-popup-milestones-content:-moz-focusring {
  background-color: var(--arrowpanel-dimmed);
}

#protections-popup-milestones-content:hover:active {
  background-color: var(--arrowpanel-dimmed-further);
}

#protections-popup-milestones-text {
  font-size: 1.23em;
  margin: 0;
}

#protections-popup-milestones-illustration {
  list-style-image: url(chrome://browser/skin/controlcenter/etp-milestone.svg);
  -moz-context-properties: fill, stroke;
  margin-inline-start: var(--horizontal-padding);
  margin-inline-end: 4px;
}

#protections-popup[milestone] #protections-popup-milestones-illustration {
  fill: #45278d;
  stroke: #321c64;
}

#protections-popup[milestone="5000"] #protections-popup-milestones-illustration {
  fill: #5a29cb;
  stroke: #45278d;
}

#protections-popup[milestone="10000"] #protections-popup-milestones-illustration {
  fill: #7641e5;
  stroke: #5a29cb;
}

#protections-popup[milestone="25000"] #protections-popup-milestones-illustration {
  fill: #e31587;
  stroke: #c60084;
}

#protections-popup[milestone="50000"] #protections-popup-milestones-illustration {
  fill: #ff298a;
  stroke: #e31587;
}

#protections-popup[milestone="100000"] #protections-popup-milestones-illustration {
  fill: #ffa436;
  stroke: #e27f2e;
}

#protections-popup[milestone="500000"] #protections-popup-milestones-illustration {
  fill: #ffd567;
  stroke: #ffbd4f;
}