tor-browser

panelUI-shared.css (63470B)

---

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

:root {
 --panelui-subview-transition-duration: 150ms;

 --panel-banner-item-color: var(--button-text-color);
 --panel-banner-item-background-color: var(--button-background-color);
 --panel-banner-item-hover-bgcolor: var(--button-background-color-hover);
 --panel-banner-item-active-bgcolor: var(--button-background-color-active);
 --panel-banner-item-update-supported-bgcolor: light-dark(#2ac3a2, #54ffbd);
 --panel-banner-item-info-icon-bgcolor: light-dark(#0090ed, #80ebff);

 --menu-panel-width: 22.35em;
 --menu-panel-width-wide: 29em;

 --arrowpanel-header-info-icon-padding: 4px;
 --arrowpanel-header-info-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-info-icon-padding)));
 --panel-separator-padding-vertical: 4px;
 --panel-separator-padding-horizontal: 8px;
 --panel-separator-padding: var(--panel-separator-padding-vertical) var(--panel-separator-padding-horizontal);
 --panel-subview-body-padding-block: 8px;
 --panel-subview-body-padding-inline: 0;
 --panel-subview-body-padding: var(--panel-subview-body-padding-block) var(--panel-subview-body-padding-inline);

 --panel-and-palette-icon-size: 16px;

 &:not([lwtheme]) {
   --panel-separator-zap-gradient: linear-gradient(90deg, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%);
 }

 &[uidensity="compact"] {
   --arrowpanel-menuitem-margin-inline: 4px;
   --arrowpanel-menuitem-padding-block: 4px;
   --panel-separator-padding-horizontal: 4px;
   --panel-subview-body-padding-block: 4px;
   :is(panel, menupopup):not([touchmode]) {
     --arrowpanel-header-back-icon-padding: 4px;
   }
 }
}

/* The vars in this rule are not on the :root above so that they would
* work in conjunction with when touchmode attribute is set on the panels. */
panel,
menupopup {
 /* The value for the header back icon padding is selected in a way that the
  * height of the header and its separator will be equal to the panel inner
  * top padding plus standard menuitem, so that the header's separator will
  * be located excatly where a normal toolbarseparator would be located after
  * the first menuitem, in a menu without a header. */
 --arrowpanel-header-back-icon-padding: 6px;
 --arrowpanel-header-back-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-back-icon-padding)));
 /* The min-height is calculated with the separator's horizontal margin rather
  * than the vertical, to let the back icon have even spacing all around
  * while being aligned with the separator. */
 --arrowpanel-header-min-height: calc(var(--arrowpanel-header-back-icon-full-width) + (var(--panel-separator-padding-horizontal) * 2));
}

panel toolbarseparator {
 color: var(--panel-separator-color);
 padding: var(--panel-separator-padding);
}

#PanelUI-menu-button {
 &[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   display: flex;
   height: 10px;
   width: 10px;
   background-size: contain;
   border: none;

   &:-moz-window-inactive {
     filter: grayscale(100%);
   }
 }

 &[badge-status="extension-new-tab"],
 &[badge-status="download-success"] {
   > .toolbarbutton-badge-stack > .toolbarbutton-badge {
     display: none;
   }
 }

 &[badge-status="update-available"],
 &[badge-status="update-downloading"],
 &[badge-status="update-manual"],
 &[badge-status="update-other-instance"],
 &[badge-status="update-restart"],
 &[badge-status="update-unsupported"] {
   > .toolbarbutton-badge-stack > .toolbarbutton-badge {
     box-shadow: none;
     /* "!important" is necessary to override the rule in toolbarbutton.css */
     margin: -5px 0 0 !important;
     margin-inline-end: -3px !important;
     min-width: var(--icon-size-xsmall);
     min-height: var(--icon-size-xsmall);
     -moz-context-properties: fill;
     background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center;
     background-size: var(--icon-size-xsmall);
   }
 }

 &[badge-status="update-available"],
 &[badge-status="update-downloading"],
 &[badge-status="update-manual"],
 &[badge-status="update-other-instance"],
 &[badge-status="update-restart"] {
   > .toolbarbutton-badge-stack > .toolbarbutton-badge {
     fill: var(--panel-banner-item-update-supported-bgcolor);
   }
 }

 &[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center;
   fill: var(--warning-icon-bgcolor);
 }
}

.panel-banner-item {
 &[notificationid="update-available"],
 &[notificationid="update-downloading"],
 &[notificationid="update-manual"],
 &[notificationid="update-other-instance"],
 &[notificationid="update-restart"] {
   > .toolbarbutton-icon {
     background-image: url(chrome://browser/skin/update-badge.svg);
     background-repeat: no-repeat;
     background-position: center;
     -moz-context-properties: fill;
     fill: var(--panel-banner-item-update-supported-bgcolor);
   }
 }

 &[notificationid="update-unsupported"] > .toolbarbutton-icon {
   background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
   -moz-context-properties: stroke, fill;
   stroke: var(--arrowpanel-background);
   fill: var(--warning-icon-bgcolor);
 }
}

:root[taskbartab] {
 #appMenu-new-tab-button2,
 #appMenu-new-window-button2,
 #appMenu-new-private-window-button2,
 #appMenu-new-private-window-button2 + toolbarseparator,
 #appMenu-bookmarks-button {
   display: none;
 }
}

#PanelUI-menu-button[badge-status="addon-alert"],
#PanelUI-menu-button[badge-status="fxa-needs-authentication"],
#fxa-toolbar-menu-button[badge-status="login_failed"] {
 > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   height: 13px;
   background: url(chrome://global/skin/icons/warning-fill-12.svg) center / contain no-repeat transparent;
   box-shadow: none;
   border-radius: 0;
   -moz-context-properties: fill, stroke;
   fill: var(--warning-icon-bgcolor);
   stroke: var(--toolbar-bgcolor);
 }
}

#fxa-toolbar-menu-button[badge-status="sync-disabled"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 box-shadow: none;
 min-width: var(--icon-size-xsmall);
 min-height: var(--icon-size-xsmall);
 -moz-context-properties: stroke, fill;
 background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center;
 background-size: var(--icon-size-xsmall);
 stroke: var(--arrowpanel-background);
 fill: var(--warning-icon-bgcolor);
 filter: drop-shadow(0 0 5px var(--warning-icon-bgcolor));
}

#fxa-toolbar-menu-button:is([badge-status="login_failed"], [badge-status="sync-disabled"]) > .toolbarbutton-badge-stack > .toolbarbutton-badge {
 display: flex;
}

.cui-widget-panel,
#widget-overflow,
#unified-extensions-panel {
 font: menu;
}

panelmultiview {
 align-items: flex-start;
 min-width: 0;
 min-height: 0;

 &[transitioning] {
   pointer-events: none;
 }
}

panelview {
 flex-direction: column;
 padding: 0;

 &:not([visible]) {
   visibility: collapse;
 }
}

.panel-viewcontainer {
 overflow: hidden;
 flex-shrink: 0;
 min-width: 0;
 min-height: 0;
 max-height: 100%;

 &[panelopen] {
   transition-property: height;
   transition-timing-function: var(--animation-easing-function);
   transition-duration: var(--panelui-subview-transition-duration);
   will-change: height;
 }

 &.offscreen {
   display: block;
 }
}

.panel-viewstack {
 overflow: visible;
 transition: height var(--panelui-subview-transition-duration);
}

.panel-subview-body {
 overflow-y: auto;
 overflow-x: hidden;
 flex: 1;
 padding: var(--panel-subview-body-padding);

 &:not(:last-child) {
   padding-bottom: 0;
 }

 toolbarseparator + & {
   padding-top: 0;
 }
}

.panel-view-body-unscrollable {
 overflow: hidden;
 flex: 1;
}

.panel-info-button {
 appearance: none;
 color: var(--button-text-color-ghost);
 background-color: var(--button-background-color-ghost);
 padding: 0;
 border-radius: var(--button-border-radius);
 flex-shrink: 0;

 &[disabled] {
   visibility: hidden;
 }

 &:hover {
   color: var(--button-text-color-ghost-hover);
   background-color: var(--button-background-color-ghost-hover);
 }

 &:not(:hover)[checked],
 &:hover:active {
   color: var(--button-text-color-ghost-active);
   background-color: var(--button-background-color-ghost-active);
 }

 &:focus-visible {
   outline: var(--focus-outline);
 }

 > image {
   list-style-image: url(chrome://global/skin/icons/info.svg);
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   padding: var(--arrowpanel-header-info-icon-padding);
 }
}

#widget-overflow-list:empty + #widget-overflow-fixed-separator,
#widget-overflow:not([hasfixeditems]) #widget-overflow-fixed-separator {
 display: none;
}

#wrapper-edit-controls:is([place="palette"], [place="panel"]) > #edit-controls,
#wrapper-zoom-controls:is([place="palette"], [place="panel"]) > #zoom-controls,
:is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons {
 margin: var(--arrowpanel-menuitem-margin);
}

/* Tweaks for menupopups hanging off toolbar buttons to make them feel like panels */

.toolbar-menupopup {
 &,
 menupopup {
   appearance: none;
   border: none;
   font: menu;
   background-color: transparent;
   --panel-background: var(--arrowpanel-background);
   --panel-color: var(--arrowpanel-color);
   --panel-border-color: var(--arrowpanel-border-color);
   --panel-border-radius: var(--arrowpanel-border-radius);
   --panel-padding: var(--panel-subview-body-padding);
   --panel-shadow-margin: var(--arrowpanel-shadow-margin);
   --menuitem-border-radius: var(--arrowpanel-menuitem-border-radius);
   --menuitem-padding: var(--arrowpanel-menuitem-padding);
   --menuitem-margin: var(--arrowpanel-menuitem-margin);
 }

 menupopup {
   /* Align non top-level menupopup's first menuitem with the menuitem that opened it.
    * The 1px is for the menupopup's border. */
   margin-top: calc(-1 * (var(--panel-subview-body-padding-block) + var(--panel-shadow-margin) + 1px));
 }

 menu,
 menuitem {
   &[disabled] {
     color: var(--button-text-color-ghost-disabled);
     background-color: var(--button-background-color-ghost-disabled);
     opacity: var(--button-opacity-disabled);
   }

   &:not([disabled])[_moz-menuactive] {
     color: var(--button-text-color-ghost-hover);
     background-color: var(--button-background-color-ghost-hover);

     &:active {
       color: var(--button-text-color-ghost-active);
       background-color: var(--button-background-color-ghost-active);
     }
   }

   &::before {
     content: none; /* Reset's macOS' checkmark spacing */
   }
 }

 .menu-text,
 .menu-icon,
 .menu-accel,
 menu::after {
   /* Reset spacing set by menu.css */
   margin: 0;
   padding: 0;
 }

 menuitem:not(.menuitem-iconic, [image]) > .menu-icon,
 menu:not(.menu-iconic) > .menu-icon {
   display: none;
 }

 .menu-icon {
   margin-inline-end: 8px;
 }

 menu::after,
 .menu-accel {
   margin-inline-start: 16px;
 }

 menu::after {
   fill-opacity: 0.6;
 }

 menuseparator {
   padding: var(--panel-separator-padding);
 }
}

#BMB_bookmarksPopup {
 max-width: 30em;
}

menupopup[emptyplacesresult] > .hide-if-empty-places-result {
 display: none;
}

:is(.toolbar-menupopup, .toolbar-menupopup menupopup)[emptyplacesresult] > menuitem > .menu-accel-container > .menu-accel {
 margin: 0;
}

#confirmation-hint {
 --arrowpanel-background: #0060df;
 --arrowpanel-border-color: #0060df;
 --arrowpanel-color: #fff;
 --arrowpanel-padding: 6px 10px;
 font-size: 1.1rem;

 &::part(content) {
   align-items: center;
 }

 /* Don't show the checkmark if there is a description */
 &.with-description #confirmation-hint-checkmark-animation-container {
   display: none;
 }

 &[data-message-id="loginRemoved"] #confirmation-hint-checkmark-image {
   background-image: url("chrome://global/skin/icons/delete.svg");
   background-size: contain;
   -moz-context-properties: fill;
   fill: #fff;
   animation: none;
 }
}

#confirmation-hint-checkmark-animation-container {
 position: relative;
 overflow: hidden;
 width: 14px;
 height: 14px;

 &[animate] > #confirmation-hint-checkmark-image {
   display: block;
   position: absolute;
   background-image: url(chrome://browser/skin/success-animation.svg);
   background-repeat: no-repeat;
   /* frames are 16px wide by 14px high */
   min-width: 304px;
   max-width: 304px;
   min-height: 14px;
   max-height: 14px;
   animation-name: confirmation-hint-checkmark-animation;
   animation-fill-mode: forwards;
   animation-timing-function: steps(18);
   -moz-context-properties: fill;
   fill: currentColor;

   &:-moz-locale-dir(rtl) {
     animation-name: confirmation-hint-checkmark-animation-rtl;
     transform: translateX(288px);
   }

   @media (prefers-reduced-motion: no-preference) {
     animation-duration: 300ms;
     animation-delay: 60ms;
   }
 }
}

@keyframes confirmation-hint-checkmark-animation {
 from {
   transform: translateX(0);
 }
 to {
   transform: translateX(-288px);
 }
}

@keyframes confirmation-hint-checkmark-animation-rtl {
 from {
   transform: translateX(288px);
 }
 to {
   transform: translateX(0);
 }
}

#confirmation-hint-message {
 margin-inline: 7px 0;

 #confirmation-hint.with-description & {
   font-size: 1.2em;
   font-weight: var(--font-weight-semibold);
 }
}

@media (prefers-reduced-motion: no-preference) {
 #confirmation-hint-message-container {
   transform: scale(0.8);
   opacity: 0;
   transition:
     transform 120ms cubic-bezier(0.25, 1.27, 0.35, 1.18),
     opacity 60ms linear;

   #confirmation-hint-checkmark-animation-container[animate] + & {
     transform: scale(1);
     opacity: 1;
   }
 }
}

.cui-widget-panel {
 --arrowpanel-padding: var(--panel-subview-body-padding);
}

#appMenu-popup panelview,
/* The Report Broken Site panel can be opened from the Help menu
* in the menubar, which isn't a descendant of #appMenu-popup.
* Target it specifically in this rule to make it the same width
* as if it was a standard panelview opened from the app menu. */
#report-broken-site-popup-mainView[mainview],
#PanelUI-fxa {
 width: 22.5em;
}

:where(#customizationui-widget-multiview) panelview:not([extension]) {
 min-width: var(--menu-panel-width);
 max-width: 35em;
}

#appMenu-libraryView,
#pageActionPanel panelview,
#widget-overflow panelview {
 min-width: var(--menu-panel-width-wide);
 max-width: var(--menu-panel-width-wide);
}

/* Add 2 * 16px extra width for touch mode button padding. */
#appMenu-popup[touchmode] panelview {
 min-width: calc(var(--menu-panel-width) + 32px);
}

.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton > .toolbarbutton-icon {
 min-width: 0;
 min-height: 0;
 margin: 0;
}

.animate-out {
 animation-name: widget-animate-out;
 animation-fill-mode: forwards;
 animation-duration: 500ms;
 animation-timing-function: var(--animation-easing-function);
}

@keyframes widget-animate-out {
 0% {
   opacity: 1;
   transform: scale(1);
 }
 100% {
   opacity: 0;
   transform: scale(0.5);
 }
}

/* Webextension buttons */
toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-icon,
toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
 height: var(--panel-and-palette-icon-size);
 width: var(--panel-and-palette-icon-size);
}

#zoom-in-button > .toolbarbutton-text,
#zoom-out-button > .toolbarbutton-text,
#zoom-reset-button > .toolbarbutton-icon {
 display: none;
}

/* Main menu banner menuitems */

#appMenu-popup {
 .panel-banner-item,
 .addon-banner-item {
   align-items: flex-start;
   color: var(--panel-banner-item-color);
   background-color: var(--panel-banner-item-background-color);
   margin-bottom: 4px;
   font-weight: var(--font-weight-semibold);
 }

 .panel-banner-item,
 .addon-banner-item {
   &:not([disabled]):hover {
     background-color: var(--panel-banner-item-hover-bgcolor);

     &:active {
       background-color: var(--panel-banner-item-active-bgcolor);
     }
   }

   > .toolbarbutton-text {
     display: inline-block;
     padding: 0;
   }
 }
}

:root[uidensity="compact"] {
 .panel-banner-item,
 .addon-banner-item {
   /* Without some padding the button gets too crowded even for compact mode
     when the text wraps to a newline. */
   padding-block: 4px;
 }
}

.panel-banner-item > .toolbarbutton-icon {
 width: 16px;
 height: 16px;
 /* Move the icon to appear after the text label. */
 order: 2;
}

.addon-banner-item {
 > .toolbarbutton-icon {
   display: none;
 }

 /* Addon banners use that one for the addon's icon and need a content element
   added to put their generic notification in. */
 &::after {
   content: "";
   display: flex;
   background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
   width: 16px;
   height: 16px;
   -moz-context-properties: fill;
   fill: var(--warning-icon-bgcolor);
   margin-inline-start: 10px;
 }
}

/* FxAccount indicator bits. */

@keyframes syncRotate {
 from {
   transform: rotate(0);
 }
 to {
   transform: rotate(360deg);
 }
}

@media (prefers-reduced-motion: no-preference) {
 #PanelUI-fxa-menu-syncnow-button[syncstatus="active"] > .toolbarbutton-icon,
 #PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon,
 .syncNowBtn[syncstatus="active"] {
   animation: syncRotate 0.8s linear infinite;
   -moz-context-properties: fill;
   fill: var(--toolbarbutton-icon-fill-attention);
   visibility: visible;
 }
}

.syncNowBtn {
 -moz-context-properties: fill;
 fill: currentColor;
 height: 16px;
 width: 16px;
 list-style-image: url("chrome://browser/skin/sync.svg");
 visibility: collapse;
 order: 2;
}

#fxa-menu-account-fxa-avatar {
 pointer-events: none;
 list-style-image: var(--avatar-image-url);
 -moz-context-properties: fill;
 fill: currentColor;
}

/* Handle different UI states. */

#appMenu-mainView:not([showing-fxa-menu-message], [showing-default-cta-menu-message]) #appMenu-menu-message,
#PanelUI-fxa:not([showing-fxa-menu-message]) #PanelUI-fxa-menu-message {
 display: none;
}

#appMenu-mainView[showing-fxa-menu-message] {
 & #appMenu-fxa-status2,
 & #appMenu-fxa-separator {
   display: none;
 }
}

#PanelUI-fxa[showing-fxa-menu-message] #fxa-manage-account-button {
 display: none;
}

:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button {
 display: none;
}

/* Error states */

#appMenu-fxa-status2 {
 display: flex;

 &[fxastatus] {
   margin: 0;
   padding: 0;
 }

 &:not([fxastatus]) {
   padding-block: 0 2px;

   > #appMenu-fxa-label2 {
     padding: 6px 12px;
     color: var(--button-text-color);
     background-color: var(--button-background-color);
     font-size: 0.8em;
     font-weight: var(--font-weight-semibold);

     &:hover {
       color: var(--button-text-color-hover);
       background-color: var(--button-background-color-hover);
     }

     &:hover:active {
       color: var(--button-text-color-active);
       background-color: var(--button-background-color-active);
     }
   }
 }
}

#appMenu-fxa-text,
#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 {
 flex: 1;
 align-self: center;
}

#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 > vbox > #appMenu-header-description,
#appMenu-fxa-text {
 font-weight: var(--font-weight-semibold);
}

:root[fxadisabled="true"] #appMenu-fxa-status2,
:root[fxadisabled="true"] #appMenu-fxa-separator {
 display: none;
}

#fxa-manage-account-button > vbox > label,
#PanelUI-fxa-menu-syncnow-button > hbox > label,
#PanelUI-remotetabs-syncnow > hbox > label,
#appMenu-fxa-label2 > vbox > label {
 margin: 0;
}

#PanelUI-fxa-cta-menu,
#PanelUI-fxa-menu-services {
 .fxa-cta-button {
   margin: var(--space-xsmall);
 }
}

.PanelUI-fxa-menu-section-title,
.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
 /* FIXME: these elements should use the subview-subheader class */
 color: var(--text-color-deemphasized);
 font-size: 0.9em;
 margin-top: 6px;
 margin-bottom: 2px;
}

#appMenu-fxa-status2 {
 &[fxastatus="login-failed"] #appMenu-fxa-label2::after {
   content: url("chrome://global/skin/icons/warning.svg");
   -moz-context-properties: fill;
   fill: var(--warning-icon-bgcolor);
 }

 &[fxastatus="unverified"] #appMenu-fxa-label2::after {
   content: url("chrome://global/skin/icons/info-filled.svg");
   -moz-context-properties: fill;
   fill: var(--panel-banner-item-info-icon-bgcolor);
 }
}

.PanelUI-fxa-menu-setup-sync {
 padding: 16px;
}

.sync-setup-icon,
.sync-status-indicator {
 width: 20px;
 height: 20px;
 box-shadow: none;
 -moz-context-properties: fill;
 fill: currentColor;
}

.sync-setup-icon {
 list-style-image: url("chrome://browser/skin/sync-off.svg");
}

.sync-status-indicator {
 background: url("chrome://browser/skin/notification-fill-12.svg") no-repeat center;
 margin-inline-end: var(--space-xsmall);
 fill: var(--warning-icon-bgcolor);
 background-size: 18px;
}

.sync-setup-title {
 font-size: 1.1em;
 font-weight: normal;
 margin-block: auto;
}

.sync-setup-description {
 padding: var(--space-large) 0;
}

#PanelUI-fxa-menu-setup-sync-button,
.sync-status-container {
 margin-inline-start: var(--space-small);
}

#PanelUI-fxa-menu-setup-sync-button {
 padding: 6px 12px;
 background-color: var(--button-background-color);
 font-size: 0.9em;
 font-weight: var(--font-weight-semibold);
 max-width: fit-content;
 border-radius: var(--button-border-radius);

 &:hover {
   background-color: var(--button-background-color-hover);
 }

 &:hover:active {
   background-color: var(--button-background-color-active);
 }
}

/* Firefox Account Toolbar Panel */

#fxa-avatar-image {
 width: var(--icon-size);
 height: var(--icon-size);
}

:root {
 --avatar-image-url: url(chrome://browser/skin/fxa/avatar.svg);

 &[fxastatus="not_configured"] {
   --avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty.svg);
 }

 /**
  * If we're not showing the glowing badge, we'll switch to the cutout variant
  * of avatar-empty. If we ARE showing the glowing badge, we don't want the
  * cutout to appear.
  */
 &[fxastatus="not_configured"][fxa-avatar-icon-variant="human-circle"] {
   #fxa-toolbar-menu-button {
     --avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty-circle.svg);
   }

   #fxa-toolbar-menu-button[showing-callout] {
     --avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty.svg);
   }
 }

 /**
  * Similar to the above for the fox variant of the icon, we only want to show
  * the cutout variant if we're showing the glowing badge.
  */
 &[fxastatus="not_configured"][fxa-avatar-icon-variant="fox-circle"] {
   #fxa-toolbar-menu-button {
     --avatar-image-url: url(chrome://browser/skin/fxa/avatar-fox-circle.svg);
   }

   #fxa-toolbar-menu-button[showing-callout] {
     --avatar-image-url: url(chrome://browser/skin/fxa/avatar-fox.svg);
   }
 }

 /**
  * This overrides the hidden state of the badge so that we can repurpose it
  * for the "circle" that fills the little cut-out in the -circle avatar
  * variants. We only do this if we're not currently showing the glowing badge
  * on the button.
  *
  * This is pretty gross, but it's just for the signed-out avatar experiment,
  * and I'm hoping we're okay accepting this until we decide whether or not
  * one of these variants should be the default signed-out avatar. At that
  * point, I'm hoping we can shift to something less gross (bug 1938106).
  */
 &[fxastatus="not_configured"][fxa-avatar-icon-variant$="-circle"] #fxa-toolbar-menu-button:not([showing-callout]) {
   .avatar-container {
     position: relative;

     &:-moz-locale-dir(rtl) {
       transform: scaleX(-1);
     }
   }

   .avatar-container::after {
     content: "";
     position: absolute;
     top: calc(var(--icon-size) - 6px);
     /* Avatar icon size minus its circle width minus half of the little circle icon size */
     left: calc(var(--icon-size) - 1px - 6px / 2);
     height: 6px;
     width: 6px;
     background-image: url(chrome://browser/skin/fxa/circle.svg);
     background-repeat: no-repeat;
     background-position: center;
     opacity: 0.43;

     @media (prefers-color-scheme: dark) {
       opacity: 0.67;
     }
   }
 }

 &:not([fxatoolbarmenu]) #fxa-toolbar-menu-button {
   display: none;
 }

 /* stylelint-disable-next-line media-query-no-invalid */
 @media not -moz-pref("identity.fxaccounts.toolbar.defaultVisible") {
   /* Hide the FxA toolbar button when its in the nav-bar, until in use */
   &[fxastatus="not_configured"] #widget-overflow-list > #fxa-toolbar-menu-button,
   &[fxastatus="not_configured"] #nav-bar-customization-target > #fxa-toolbar-menu-button {
     display: none;
   }
 }

 /* Non-signedin statuses icons are not totally round. */
 &[fxastatus="signedin"] #fxa-avatar-image {
   border-radius: var(--border-radius-circle);
 }

 &[fxastatus="signedin"] #fxa-avatar-label {
   display: none;
 }

 &:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button {
   color: var(--text-color-disabled);
 }
}

#fxa-avatar-image {
 list-style-image: var(--avatar-image-url);
}

#fxa-avatar-label {
 margin: 0;
 margin-inline-start: var(--space-small);
}

#fxa-menu-header-title {
 color: var(--arrowpanel-color);
 text-wrap: wrap;
}

#fxa-menu-header-description {
 color: var(--text-color-deemphasized);
 font-weight: var(--heading-font-weight);
 text-wrap: wrap;
}

#cta-menu-header-description {
 color: var(--text-color-deemphasized);
}

#PanelUI-appMenu-fxa-label-last-synced {
 font-size: 10px;
 font-style: italic;
 color: var(--text-color-deemphasized);
}

#PanelUI-fxa-menu-send-button {
 list-style-image: url(chrome://browser/skin/fxa/send.svg);
}

.ctaMenuLogo {
 width: 16px;
 height: 16px;
 margin-inline-start: 5px;
}

#PanelUI-fxa-menu-monitor-button {
 list-style-image: url(chrome://browser/skin/fxa/monitor.svg);
}

#PanelUI-fxa-menu-relay-button,
#PanelUI-services-menu-relay-button {
 list-style-image: url(chrome://browser/content/logos/relay.svg);
}

#PanelUI-fxa-menu-vpn-button {
 list-style-image: url("chrome://browser/skin/preferences/vpn-logo.svg");
 -moz-context-properties: fill;
 fill: currentColor;
}

:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button {
 color: var(--text-color-disabled);
}

/* From the FxA menu -> synced tabs, we don't need to clutter the view with
  redundant buttons because these are accessible from the main menu */
panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
 display: none;
}

#PanelUI-sendTabToDevice > .panel-subview-body:not([state]) > #PanelUI-sendTabToDevice-syncingDevices {
 display: none;
}

#PanelUI-fxa-menu-sendtab-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
 transform: scaleX(-1);
}

.fxaSendLogo,
.fxaMonitorLogo {
 margin-top: 15px;
 height: 80px;
 width: 80px;
}

.fxaSendToDeviceLogo {
 margin-top: 15px;
 height: 119px;
 width: 164px;
 list-style-image: url(chrome://browser/skin/fxa/send-to-device.svg);
}

.fxaSendLogo {
 list-style-image: url(chrome://browser/content/logos/send.svg);
}

.fxaMonitorLogo {
 list-style-image: url(chrome://browser/content/logos/monitor.svg);
}

#PanelUI-remotetabs {
 --panel-ui-sync-illustration-height: 141px;
}

.sendToDevice-device {
 &[clientType="phone"] {
   list-style-image: url("chrome://browser/skin/device-phone.svg");
 }

 &[clientType="tablet"] {
   list-style-image: url("chrome://browser/skin/device-tablet.svg");
 }

 &[clientType="desktop"] {
   list-style-image: url("chrome://browser/skin/device-desktop.svg");
 }

 &[clientType="tv"] {
   list-style-image: url("chrome://browser/skin/device-tv.svg");
 }

 &[clientType="vr"] {
   list-style-image: url("chrome://browser/skin/device-vr.svg");
 }

 &.signintosync {
   list-style-image: url("chrome://browser/skin/sync.svg");
 }
}

.PanelUI-fxa-service-description-label,
.PanelUI-remotetabs-instruction-label {
 /* If you change the margin here, the min-height of the synced tabs panel
   (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
   need adjusting (see bug 1248506) */
 margin: 0;
 text-align: center;
 text-shadow: none;
 max-width: 15em;
 margin-top: 10px;
}

.PanelUI-fxa-signin-button,
.PanelUI-remotetabs-button {
 appearance: none;
 background-color: #0060df;
 /* !important for the color as an OSX specific rule when a lightweight theme
    is used for buttons in the toolbox overrides. See bug 1238531 for details */
 color: white !important;
 border-radius: var(--border-radius-xsmall);
 /* If you change the margin or padding below, the min-height of the synced tabs
    panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
    etc) may need adjusting (see bug 1248506) */
 margin-block: 15px;
 text-shadow: none;
 min-width: 200px;
 padding: 1em;

 &:hover {
   background-color: #003eaa;

   &:active {
     background-color: #002275;
   }
 }
}

.remotetabs-promo-link {
 margin: 0;
}

.PanelUI-remotetabs-notabsforclient-label {
 color: var(--text-color-deemphasized);
 /* This margin is to line this label up with the labels in toolbarbuttons. */
 margin-inline-start: 28px;
}

.fxaSyncIllustration,
.fxaSyncIllustrationIssue {
 /* If you change the margin here, the min-height of the synced tabs panel
 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
 need adjusting (see bug 1248506) */
 width: 204px;
 height: var(--panel-ui-sync-illustration-height);
 -moz-context-properties: fill;
 fill: #cdcdcd;
}

.fxaSyncIllustration {
 list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
}

.fxaSyncIllustrationIssue {
 list-style-image: url(chrome://browser/skin/fxa/sync-illustration-issue.svg);
}

.PanelUI-fxa-signin-button > .toolbarbutton-text,
.PanelUI-remotetabs-button > .toolbarbutton-text {
 /* Overrides toolbar[mode="icons"] from xul.css */
 display: block;
}

#PanelUI-remotetabs[mainview] {
 /* panel anchored to toolbar button might be too skinny */
 min-width: 19em;

 .PanelUI-remotetabs-notabsforclient-label {
   margin-inline-start: 32px;
 }

 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
  the panel is anchored to a toolbar button.
 */
 /* prettier-ignore */
 #PanelUI-remotetabs-setupsync,
 #PanelUI-remotetabs-syncdisabled,
 #PanelUI-remotetabs-reauthsync,
 #PanelUI-remotetabs-unverified,
 #PanelUI-remotetabs-nodevicespane,
 #PanelUI-remotetabs-tabsdisabledpane {
   min-height: calc(var(--panel-ui-sync-illustration-height) +
               15px + /* margin of .fxaSyncIllustration */
               30px + /* margin of .PanelUI-remotetabs-button */
               8px + /* padding of .PanelUI-remotetabs-button */
               1em);
 }
}

/* Collapse the non-active vboxes in the remotetabs deck to use only the
 height the active box needs */
#PanelUI-remotetabs-deck {
 &:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
 &:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
 &:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
   visibility: collapse;
 }
}

#PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
 display: none;
}

#PanelUI-fxa-remotetabs-deck:not([syncingtabs]) {
 display: none;
}

#customization-palette .toolbarbutton-text {
 display: none;
}

.subview-subheader,
panelview .toolbarbutton-1,
.subviewbutton,
.widget-overflow-list .toolbarbutton-1 {
 appearance: none;
 margin: var(--arrowpanel-menuitem-margin);
 min-height: 24px;
 padding: var(--arrowpanel-menuitem-padding);
 border-radius: var(--arrowpanel-menuitem-border-radius);
 background-color: transparent;
 flex-shrink: 0;
}

.subview-subheader {
 font-size: 0.9em;
 font-weight: inherit;
 color: var(--text-color-deemphasized);
 padding-block: 4px;
 box-sizing: border-box;
}

.subviewbutton {
 /* toolbarbuttons default to centered, but we don't want that for subviews. */
 justify-content: flex-start;

 /* We don't always display: none this item, and if it has forced width (like above)
 * or margin, that impacts the position of the label. Fix:
 */
 > .toolbarbutton-icon {
   margin: 0;
 }

 > .toolbarbutton-text {
   text-align: start;
   display: block;
 }

 &[shortcut]::after {
   content: attr(shortcut);
   display: flex;
 }

 &[shortcut]:not([disabled])::after {
   color: var(--text-color-deemphasized);
 }

 &[shortcut]::after,
 .widget-overflow-list .subviewbutton-nav::after,
 .PanelUI-subView .subviewbutton-nav::after {
   margin-inline-start: 10px;
 }

 &[checked] {
   list-style-image: url(chrome://global/skin/icons/check.svg);
   -moz-context-properties: fill;
   fill: currentColor;
   color: inherit;
 }

 &[type="open-to-new"]::after {
   content: url(chrome://global/skin/icons/open-in-new.svg);
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.6;
   display: flex;
   height: var(--icon-size-xsmall);
   width: var(--icon-size-xsmall);
 }

 &[type="open-to-new"]:-moz-locale-dir(rtl)::after {
   transform: scaleX(-1);
 }
}

.subviewbutton-iconic > .toolbarbutton-text,
.subviewbutton[image] > .toolbarbutton-text,
.subviewbutton[targetURI] > .toolbarbutton-text,
.subviewbutton.bookmark-item > .toolbarbutton-text,
.subviewbutton[checked] > .toolbarbutton-text {
 padding-inline-start: 8px;
}

.subviewbutton-iconic {
 -moz-context-properties: fill;
 fill: currentColor;

 > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
}

#appMenu-profiles-button,
#PanelUI-fxa-menu-profiles-button {
 justify-content: space-between;
}

/* Set the --appmenu-profiles-theme-bg and --appmenu-profiles-theme-fg
* variables inline on the toolbarbutton */
#appMenu-profiles-button.subviewbutton-iconic > .toolbarbutton-icon,
#PanelUI-fxa-menu-profiles-button.subviewbutton-iconic > .toolbarbutton-icon,
.subviewbutton-iconic.profile-item > .toolbarbutton-icon {
 -moz-context-properties: fill, stroke;
 fill: var(--appmenu-profiles-theme-bg);
 stroke: var(--appmenu-profiles-theme-fg);
}

/* Adjust the Zoom toolbaritem padding to have its height the same as other toolbarbuttons,
* also in compact density and touch mode. */
#appMenu-zoom-controls {
 padding-block: max(0px, var(--arrowpanel-menuitem-padding-block) - 4px);

 > .subviewbutton {
   margin-inline-start: 2px;
   padding: 4px;
 }

 /* hover and active color changes are applied to child elements not the button itself */
 > .subviewbutton:not([disabled]):is(:hover, :hover:active) {
   color: unset;
   background-color: unset;
 }

 > .subviewbutton:focus-visible {
   outline: none;
 }
}

#appMenu-zoom-controls > .subviewbutton-iconic:focus-visible > .toolbarbutton-icon,
#appMenu-zoomReset-button2:focus-visible > .toolbarbutton-text {
 outline: var(--focus-outline);
}

#appMenu-zoomReduce-button2,
#appMenu-zoomEnlarge-button2 {
 > .toolbarbutton-icon {
   -moz-context-properties: fill, stroke;
   color: var(--button-text-color);
   fill: currentColor;
   /* the stroke color is used to fill the circle in the icon */
   stroke: var(--button-background-color);
   border-radius: var(--border-radius-circle);
   padding: 0;
 }

 &:not([disabled]):hover > .toolbarbutton-icon {
   color: var(--button-text-color-hover);
   stroke: var(--button-background-color-hover);
 }

 &:not([disabled]):active:hover > .toolbarbutton-icon {
   color: var(--button-text-color-hover);
   stroke: var(--button-background-color-active);
 }
}

#appMenu-zoomReset-button2 > .toolbarbutton-text,
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
 border-radius: var(--border-radius-xsmall);
}

#appMenu-fullscreen-button2 > .toolbarbutton-icon {
 padding: 1px;
 color: var(--button-text-color);
 background-color: var(--button-background-color);
}

#appMenu-zoomReset-button2:not([disabled]):hover > .toolbarbutton-text,
#appMenu-fullscreen-button2:not([disabled]):hover > .toolbarbutton-icon {
 color: var(--button-text-color-hover);
 background-color: var(--button-background-color-hover);
}

#appMenu-zoomReset-button2:not([disabled]):hover:active > .toolbarbutton-text,
#appMenu-fullscreen-button2:not([disabled]):hover:active > .toolbarbutton-icon {
 color: var(--button-text-color-active);
 background-color: var(--button-background-color-active);
}

/**
* When the Zoom Reset button is disabled, we don't want the zoom-level
* indicator to be so hard to read, so we override the disabled text
* style on it.
*/
#appMenu-zoomReset-button2[disabled],
#zoom-reset-button[disabled] {
 opacity: 1;
}

.panel-subview-footer-button {
 /* Set the footer's bottom margin according to menuitems inline margin
    to make sure the footer's margin is even from all sides. */
 margin-bottom: var(--arrowpanel-menuitem-margin-inline);
}

#protections-popup-mainView .subviewbutton-nav:not(.notFound),
.widget-overflow-list .subviewbutton-nav,
.PanelUI-subView .subviewbutton-nav {
 &::after {
   -moz-context-properties: fill, fill-opacity;
   content: url(chrome://global/skin/icons/arrow-right.svg);
   fill: currentColor;
   fill-opacity: 0.6;
   display: flex;
 }

 &:-moz-locale-dir(rtl)::after {
   content: url(chrome://global/skin/icons/arrow-left.svg);
 }
}

.PanelUI-subView {
 .subviewbutton-nav-down::after {
   -moz-context-properties: fill, fill-opacity;
   content: url(chrome://global/skin/icons/arrow-down.svg);
   fill: currentColor;
   fill-opacity: 0.6;
   display: flex;
 }

 .toolbaritem-combined-buttons > .subviewbutton {
   flex: none;
   height: auto;
   margin-inline-start: 18px;
   min-width: auto;
   padding: 4px 5px;
 }

 .toolbaritem-combined-buttons > .subviewbutton-iconic > .toolbarbutton-text,
 .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon {
   display: none;
 }

 toolbarseparator.proton-zap::before {
   border-image: var(--panel-separator-zap-gradient, none) 1;
 }
}

/* A menu item with some buttons at the end. */
.toolbaritem-menu-buttons {
 /* Use the same margin at the start as at the end (other margin set below). */
 margin-inline-start: 8px;

 > .subviewbutton {
   min-width: auto;
   padding-inline: 5px;
 }

 > .subviewbutton-iconic:not([flex]) > .toolbarbutton-text {
   display: none;
 }
}

.toolbaritem-combined-buttons,
.toolbaritem-menu-buttons {
 align-items: center;
 flex-direction: row;
 border: 0;
 border-radius: 0;
}

.toolbaritem-combined-buttons:not([widget-type="button-and-view"], [widget-type="custom"]),
.toolbaritem-menu-buttons {
 margin-inline-end: 8px;
}

panelmultiview .toolbaritem-combined-buttons > label {
 flex: 1;
 margin: 0;
 padding: 4px 0;
}

#appMenu-zoomReset-button2 > .toolbarbutton-text {
 min-width: calc(4ch + 8px);
 text-align: center;
}

.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
 padding-inline-start: 0;
}

panelview .toolbarbutton-1 {
 margin-top: 6px;
}

:is(
 panelview .toolbarbutton-1,
 toolbarbutton.subviewbutton,
 .widget-overflow-list .toolbarbutton-1,
 .toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton
) {
 color: var(--button-text-color-ghost);
 background-color: var(--button-background-color-ghost);

 &:focus-visible {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-inset);
 }

 &[disabled] {
   color: var(--button-text-color-ghost-disabled);
   background-color: var(--button-background-color-ghost-disabled);
   opacity: var(--button-opacity-disabled);
 }

 &:not([disabled]):hover {
   color: var(--button-text-color-ghost-hover);
   background-color: var(--button-background-color-ghost-hover);

   &:active {
     color: var(--button-text-color-ghost-active);
     background-color: var(--button-background-color-ghost-active);
     box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset;
   }
 }
}

.PanelUI-tabitem-container > toolbarbutton[itemtype="tab"],
#PanelUI-historyItems > toolbarbutton {
 list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
 -moz-context-properties: fill;
 fill: currentColor;
}

#fxa-menu-account-fxa-avatar,
#appMenu-fxa-label > .toolbarbutton-icon,
#PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon,
.PanelUI-tabitem-container > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
.PanelUI-remotetabs-clientcontainer > toolbarbutton > .toolbarbutton-icon,
#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
 width: 16px;
 height: 16px;

 /* Apply crisp rendering for favicons at exactly 2x resolution */
 @media (resolution: 2x) {
   image-rendering: -moz-crisp-edges;
 }
}

#PanelUI-fxa-remotetabs-tabspane,
#PanelUI-remotetabs-tabspane {
 min-width: 0;
}

.PanelUI-tabitem-container {
 transition:
   opacity 0.2s ease,
   transform 0.2s ease;

 &.tabitem-removed {
   opacity: 0;
   transform: translateY(-20px);
 }

 > toolbarbutton[itemtype="tab"] {
   flex: 1;
   min-width: 0;
   display: flex;

   &[disabled] {
     pointer-events: none;
   }
 }
}

toolbarbutton[itemtype="showmorebutton"],
toolbarbutton[itemtype="showinactivebutton"] {
 padding-inline-start: 0;

 > label {
   /* Needed to properly left-align with the rest of list */
   margin-inline-start: -8px;
 }
}

.remote-tabs-close-button {
 .toolbarbutton-icon {
   /* To match the nav elements in the panel */
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.6;
   display: flex;
 }
}

.remote-tabs-undo-button {
 font-size: 0.8em;
 font-weight: var(--font-weight-semibold);
}

.toolbaritem-combined-buttons {
 &:where(:not(.unified-extensions-item)):is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton {
   border: 0;
   margin: 0;
   flex: 1;
   padding-block: var(--arrowpanel-menuitem-padding-block);
   flex-direction: row;
 }

 &[cui-areatype="panel"] > .toolbarbutton-combined-buttons-dropmarker,
 &[overflowedItem] > .toolbarbutton-combined-buttons-dropmarker {
   display: none;
 }

 &:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton:not(.toolbarbutton-1)[disabled] {
   opacity: 0.4;
   /* Override toolbarbutton.css which sets the color to GrayText */
   color: inherit;
 }

 &:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > separator {
   /* Override toolbarbuttons.css which sets the color to currentColor */
   color: var(--panel-separator-color);
 }
}

#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
 display: block;
 /* 4 chars max, but `ch` is the width of the `0` glyph, so account for larger glyphs by adding 1ch */
 min-width: calc(5ch + var(--toolbarbutton-inner-padding) * 2);
}

.widget-overflow-list {
 .toolbarbutton-1 {
   align-items: center;
   flex-direction: row;
 }

 .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text {
   text-align: start;
   padding-inline-start: 0.5em;
 }

 > #stop-reload-button > .toolbarbutton-1 {
   flex: 1;
 }
}

#widget-overflow-list > toolbarspring {
 display: none;
}

#PanelUI-panicView > .panel-subview-body,
#PanelUI-panicView {
 overflow: visible;
}

#PanelUI-panicView.cui-widget-panelview {
 min-width: 280px;
}

#PanelUI-panic-timeframe {
 padding: 15px;
 border-bottom: 1px solid var(--panel-separator-color);
}

#panic-button-success-icon,
#PanelUI-panic-timeframe-icon {
 background-color: transparent;
 margin-inline-end: 10px;
 list-style-image: image-set(
   url(chrome://browser/skin/panic-panel/header.png),
   url(chrome://browser/skin/panic-panel/header@2x.png) 2x
 );
 max-height: var(--size-item-xlarge);
 width: var(--size-item-xlarge);
}

#panic-button-success-header {
 align-items: center;
 margin-bottom: 5px;
}

#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
 transform: scaleX(-1);
}

.subviewradio {
 appearance: none;
 align-items: center;
 padding: 3px;
 margin: 0 0 2px;
 background-color: transparent;
 border-radius: var(--border-radius-small);
 border: 1px solid transparent;

 &:hover {
   background-color: var(--button-background-color-hover);
 }

 &:is([selected], [selected]:hover, :hover:active) {
   background-color: var(--button-background-color-active);
 }

 > .radio-check {
   appearance: none;
   width: 16px;
   height: 16px;
   border: 1px solid rgba(110, 110, 110, 0.4);
   border-radius: var(--border-radius-circle);
   margin: 1px 5px;
   background-color: rgba(150, 150, 150, 0.2);
 }

 > .radio-check[selected] {
   background-color: light-dark(#fff, transparent);
   border: 4px solid light-dark(#177ee6, #00ddff);
 }
}

radiogroup:focus-visible > .subviewradio[focused="true"] {
 outline: var(--focus-outline);

 > .radio-label-box {
   outline: none;
 }
}

#PanelUI-panic-explanations {
 padding: 10px 10px 0;
}

#PanelUI-panic-actionlist-main-label {
 color: var(--text-color-deemphasized);
 font-size: 0.9em;
}

.PanelUI-panic-actionlist {
 padding: 2px 0;

 &::before {
   display: inline-block;
   content: "";
   width: 16px;
   height: 16px;
   margin-inline-end: 4px;
   background-image: image-set(
     url(chrome://browser/skin/panic-panel/icons.png),
     url(chrome://browser/skin/panic-panel/icons@2x.png) 2x
   );
   vertical-align: bottom;
 }
}

#PanelUI-panic-actionlist-newwindow::before {
 background-position-x: 16px;
}

#PanelUI-panic-actionlist-windows::before {
 background-position-x: 32px;
}

#PanelUI-panic-actionlist-history::before {
 background-position-x: 48px;
}

#PanelUI-panic-warning {
 color: #d74345;
 text-align: center;
 width: 100%;
 margin-top: 20px;
}

#PanelUI-panic-view-button {
 appearance: none;
 background-color: var(--button-background-color-destructive);
 color: var(--button-text-color-destructive);
 margin: 5px 15px 11px;
 border: 1px solid var(--button-border-color-destructive);
 border-radius: var(--button-border-radius);
 font-weight: var(--font-weight-semibold);
 padding: 10px;

 &:hover {
   background-color: var(--button-background-color-destructive-hover);
   color: var(--button-text-color-destructive-hover);
   border-color: var(--button-border-color-destructive-hover);
 }

 &:hover:active {
   background-color: var(--button-background-color-destructive-active);
   color: var(--button-text-color-destructive-active);
   border-color: var(--button-border-color-destructive-active);
 }

 &:focus-visible {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);
 }

 > .toolbarbutton-text {
   text-align: center;
   text-shadow: none;
 }
}

#panic-button-success-closebutton {
 background-color: var(--button-background-color);
 color: var(--button-text-color);
 margin: 5px 0 0;
 border: 1px solid transparent;
 border-radius: var(--button-border-radius);
 padding: 10px;
 font-weight: var(--font-weight-semibold);
 appearance: none;

 &:hover {
   background-color: var(--button-background-color-hover);
   &:active {
     background-color: var(--button-background-color-active);
   }
 }
}

.panel-header {
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 /* Set the header's padding according to menuitems horizontal padding
    to make sure they are even from all sides and aligned according to that padding. */
 padding: var(--arrowpanel-menuitem-margin-inline);
 /* Calculate the header's height assuming it includes an icon even if it doesn't,
    to make sure all headers are the same height (assuming their text is a one liner). */
 min-height: var(--arrowpanel-header-min-height);

 + toolbarseparator {
   padding-top: 0 !important;
 }

 > h1 {
   flex: auto;
   margin: 0;
 }

 &.panel-header-with-info-button > h1 {
   /* Add the size of the info button to center properly. */
   margin-inline-start: var(--arrowpanel-header-info-icon-full-width);
 }

 &.panel-header-with-info-button > .subviewbutton-back + h1 {
   margin-inline-start: 0;
   margin-inline-end: calc(var(--arrowpanel-header-back-icon-full-width) - var(--arrowpanel-header-info-icon-full-width));
 }

 &:not(.panel-header-with-additional-element) > .subviewbutton-back + h1 {
   /* Add the size of the back button to center properly. */
   margin-inline-end: var(--arrowpanel-header-back-icon-full-width);
 }

 &.panel-header-with-additional-element > .additional-element-on-inline-start + h1 {
   /* This is for panels where the extra element is on the inline-start side like
    * the Report Broken Site panel.
    * The var needs to be set manually via CSS on the .panel-header element as we
    * can't predict what icon (and thus its size) may be in use. */
   margin-inline-end: var(--arrowpanel-header-additional-element-width);
 }

 > h1 > span {
   display: inline-block;
   white-space: pre-wrap;
 }

 > .subviewbutton-back {
   -moz-context-properties: fill;
   fill: var(--button-icon-fill);
   list-style-image: url(chrome://global/skin/icons/arrow-left.svg);
   padding: var(--arrowpanel-header-back-icon-padding);
 }

 > .subviewbutton-back:-moz-locale-dir(rtl) {
   list-style-image: url(chrome://global/skin/icons/arrow-right.svg);
 }
}

.subviewbutton-back {
 margin: 0;

 > .toolbarbutton-text {
   display: none;
 }
}

/* Protections panel info message */
#protections-popup {
 #info-message-container {
   height: 260px;
   overflow: hidden;
   transition: margin-bottom 0.25s;
 }

 #info-message-container[disabled] {
   /* Offset the height when hidden. This makes the panel content
   * cover the info message and reveal it as it slides down, rather
   * than the info message growing in height. */
   margin-bottom: -260px;
   pointer-events: none;
 }

 #info-message-container[disabled] #protections-popup-message {
   opacity: 0;
 }
}

#protections-popup-message {
 display: flex;
 align-items: flex-end;
 height: calc(100% - 20px);
 margin: 10px;
 transition: opacity 0.25s;
 opacity: 1;
 background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg);
 background-repeat: no-repeat;
 background-position: top right;
 -moz-context-properties: fill;

 &:-moz-locale-dir(rtl) {
   background-position-x: left;
 }

 .protections-popup-content {
   display: block;
   margin: 12px 0;
 }

 .protections-popup-message-title {
   display: grid;
   font-size: 1.3em;
   font-weight: var(--heading-font-weight);
   line-height: 1.4em;
   margin: 14px 0 0;
   grid-column-start: 1;
 }

 .protections-popup-message-body {
   /* -10px to compensate for the margin on the container. We can't get rid of that
      because it helps position the background image. */
   margin: 0 calc(-10px + var(--horizontal-padding)) var(--vertical-section-padding);
   margin-inline: 6px;
 }

 .text-link {
   color: inherit;
   font-weight: var(--font-weight-semibold);
 }
}

#customizationui-widget-panel {
 /* In the next two rules the panel's width is set according to the
 * profiler backdrop image when not opened from the overflow panel. */
 #PanelUI-profiler {
   min-width: 319px;
   max-width: 319px;
 }

 &[viewId="PanelUI-profiler"] {
   --panel-width: 319px;
 }
}

:where(#PanelUI-profiler) :is(description, label) {
 margin: 0;
}

#PanelUI-profiler-header {
 &[isinfocollapsed="false"] {
   background: radial-gradient(circle farthest-side at top right, #03b1f4, #0556cd);
   color: #fff;

   &:-moz-locale-dir(rtl) {
     background: radial-gradient(circle farthest-side at top left, #03b1f4, #0556cd);
   }

   :is(button, toolbarbutton):focus-visible {
     outline-color: currentColor;
   }

   toolbarseparator {
     color: #0003;
   }
 }

 &[isinfocollapsed="true"] #PanelUI-profiler-info {
   opacity: 0;
   pointer-events: none;
 }

 /* The header has an attribute "animationready" that is either set to "true" or to
  "false". When the DOM is being initialized it is set to "false" so that animations
  do not run. */
 &[animationready="true"] #PanelUI-profiler-info {
   transition:
     margin-block-end 250ms,
     opacity 250ms;
 }
}

#PanelUI-profiler-info {
 min-height: 180px;
 padding: 0 15px 15px;
 background: top 10px right no-repeat url("chrome://browser/skin/profiler-popup-backdrop.png");
 opacity: 1;
}

#PanelUI-profiler-content {
 position: relative;
 padding: calc(15px - var(--panel-separator-padding-vertical)) 15px 15px;
}

.PanelUI-profiler-description-title {
 font-size: 1.3em;
 font-weight: var(--heading-font-weight);
 margin-block: 2px;
}

.PanelUI-profiler-description {
 margin-block: 4px;
}

#PanelUI-profiler-learn-more {
 margin-top: 4px;
 color: #fff;
 text-decoration: underline;

 &:hover:active {
   color: #fffc;
 }
}

#PanelUI-profiler-presets {
 margin: 8px 0;

 &[disabled]::part(label-box) {
   opacity: 0.5;
 }
}

#PanelUI-profiler-content-edit-settings {
 font-size: 0.9em;
}

.PanelUI-profiler-content-label {
 font-weight: var(--font-weight-semibold);
}

#PanelUI-profiler-content-description {
 margin-block: 4px;
 font-size: 0.9em;
 color: var(--text-color-deemphasized);
}

#PanelUI-profiler-content-recording:not([hidden]) {
 display: flex;
 place-items: center;
 place-content: center;
 gap: 13px;
 padding-block: 28px;
 font-size: 1.3em;
}

.PanelUI-profiler-recording-icon {
 width: 42px;
 list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg);
 -moz-context-properties: fill;
 fill: currentColor;
 opacity: 0.3;
}

.PanelUI-profiler-button {
 appearance: none;
 background-color: var(--button-background-color);
 border-radius: var(--button-border-radius);
 color: var(--button-text-color);
 padding: 8px;
 margin: 0 5px;

 &:hover {
   background-color: var(--button-background-color-hover);
   &:active {
     background-color: var(--button-background-color-active);
   }
 }

 &:focus-visible {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);
 }
}

.PanelUI-profiler-button-primary {
 background-color: var(--color-accent-primary);
 color: var(--button-text-color-primary);

 &:hover {
   background-color: var(--color-accent-primary-hover);
   &:active {
     background-color: var(--color-accent-primary-active);
   }
 }
}

.PanelUI-profiler-shortcut {
 padding-block-start: 5px;
 opacity: 0.5;
 text-align: center;
}

.PanelUI-profiler-buttons {
 margin: 7px 10px 0;
}

.PanelUI-profiler-info-icon {
 margin-inline-end: 10px;
 margin-block-start: 25px;
 width: 50px;
 list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg);
 -moz-context-properties: fill;
 fill: #fff;
}

/* Web-extension pop-ups */

.cui-widget-panelview[id^="PanelUI-webext-"] {
 border-radius: var(--arrowpanel-border-radius);
}

.webextension-popup-browser,
.webextension-popup-stack {
 border-radius: inherit;
}

.webextension-popup-stack {
 position: relative;
}

/* Reset/Restart Private Browsing Panel */

#reset-pbm-panel {
 max-width: var(--menu-panel-width-wide);
}

#reset-pbm-panel-container {
 padding: 16px 16px 0;
 gap: 8px;
}

#reset-pbm-panel-header > description {
 margin-bottom: 0;
}

#reset-pbm-panel-header > description,
#reset-pbm-panel-description,
#reset-pbm-panel-footer {
 margin-inline: 0;
}

#reset-pbm-panel-header > description {
 font-weight: var(--heading-font-weight);
}

#reset-pbm-panel-checkbox {
 margin-inline: 0 8px;
}

/* Report Broken Site panels */

/* Hide the Report Broken Site menu item that
* is on the App Menu's Help sub-menu.
*/
#appMenu_help_reportBrokenSite {
 display: none;
}

.report-broken-site-view {
 max-height: 68vh;

 description,
 label,
 menulist,
 input,
 textarea {
   margin: 0;
 }

 > .panel-subview-body {
   toolbarbutton {
     margin-inline: calc(-1 * var(--arrowpanel-menuitem-padding-inline));
   }

   toolbarbutton::after {
     position: absolute;
     inset-inline-end: calc(2 * var(--arrowpanel-menuitem-padding-inline));
   }
 }

 #report-broken-site-panel-preview-items {
   margin: var(--arrowpanel-menuitem-padding);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   border: var(--border-width) solid var(--border-color-card);
   border-radius: var(--border-radius-medium);
   background-color: var(--background-color-box);
   box-sizing: border-box;

   summary {
     cursor: pointer;
     padding-block: var(--space-large);
   }

   .data {
     padding: var(--arrowpanel-menuitem-padding);
     background:
       linear-gradient(0deg, color-mix(in srgb, currentColor 7%, transparent) 0, transparent 16px),
       linear-gradient(180deg, color-mix(in srgb, currentColor 7%, transparent) 0, transparent 16px);
     overflow: auto;

     .entry {
       text-indent: var(--space-large) hanging;
     }

     .entry > span:first-child {
       margin-inline-end: var(--space-small);
     }
   }

   details {
     & {
       width: 100%;
     }

     &:not(:first-of-type) > summary {
       border-top: 1px solid var(--border-color-card);
     }

     > summary {
       list-style: none;
       cursor: pointer;
       width: -moz-available;
       padding: var(--arrowpanel-menuitem-padding);
       padding-inline-start: calc(16px + calc(2 * var(--arrowpanel-menuitem-padding-block)));
       background-image: url("chrome://global/skin/icons/arrow-down.svg");
       background-position: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
       background-repeat: no-repeat;
       -moz-context-properties: fill;
       fill: currentColor;
     }

     &[open] > summary {
       background-image: url("chrome://global/skin/icons/arrow-up.svg");
     }
   }

   details > summary {
     color: var(--button-text-color);
     background-color: var(--button-background-color-ghost);

     &:hover {
       background-color: var(--button-background-color-hover);
       color: var(--button-text-color-hover);
     }

     &:active {
       background-color: var(--button-background-color-active);
       color: var(--button-text-color-active);
     }

     &:focus-visible {
       outline: var(--focus-outline);
     }

     @media (prefers-contrast) {
       outline: var(--button-border-color) solid var(--border-width);
     }
   }

   details > summary {
     border-radius: calc(var(--border-radius-medium) - var(--border-width));
   }

   details:not(:first-of-type):not(:last-of-type) > summary {
     border-radius: 0;
   }

   details:first-of-type,
   details:last-of-type[open] {
     > summary {
       border-end-end-radius: 0;
       border-end-start-radius: 0;
     }
   }

   details:last-of-type > summary {
     border-start-start-radius: 0;
     border-start-end-radius: 0;
   }
 }

 p {
   line-height: 1.5;
 }

 vbox > checkbox {
   margin-block-start: var(--space-large);
 }

 #report-broken-site-popup-blocked-trackers > p {
   font-size: 0.9em;
   color: var(--text-color-deemphasized);
   line-height: 1.2em;
   margin-inline-start: calc(var(--space-medium) + var(--checkbox-size));
 }

 textarea {
   resize: vertical;
 }

 > .panel-subview-body > label {
   margin-block: 1.5em 0.5em;

   &.invalid-message {
     margin-block: 0.5em 0;
     background-image: url("chrome://global/skin/icons/error.svg");
     background-position: left center;
     background-repeat: no-repeat;
     -moz-context-properties: fill;
     fill: var(--icon-color-critical);
     padding-inline-start: calc(16px + 0.25em);

     &:-moz-locale-dir(rtl) {
       background-position-x: right;
     }

     display: none;

     input:user-invalid + &,
     select:user-invalid + & {
       display: block;
     }
   }
 }

 &.main-view {
   p {
     margin-block: 0;
   }

   a {
     margin-block: 1.5em 1em;
   }

   hbox:has(a#report-broken-site-popup-send-more-info-link[hidden]) + #report-broken-site-popup-preview-button {
     margin-block-start: 1.5em;
   }
 }

 &.sent-view {
   @media not (prefers-contrast) {
     background-color: var(--background-color-success);
   }

   > .panel-header {
     --arrowpanel-header-additional-element-width: 16px;

     > .checkmark-icon {
       list-style-image: url(chrome://global/skin/icons/check-filled.svg);
       -moz-context-properties: fill;
       fill: #2ac3a2;
     }
   }

   > .panel-subview-body {
     /* Don't let the footer appear way down in the panel while there's
      * almost no content above. */
     flex: 0 auto;

     > .subview-subheader {
       font-size: inherit;
     }
   }
 }
}

#report-broken-site-panel-container {
 padding: 8px 16px 16px;
}

/* ----- Profiles panels ----- */

#profiles-header-content {
 max-width: 16em;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

#profiles-edit-this-profile-button {
 list-style-image: url("chrome://global/skin/icons/edit-outline.svg");
 padding: var(--arrowpanel-header-back-icon-padding);
 margin: 0;
}

#profiles-edit-this-profile-button > .toolbarbutton-text {
 display: none;
}

#profiles-copy-profile-button {
 list-style-image: url("chrome://global/skin/icons/edit-copy.svg");
}

#profiles-create-profile-button {
 list-style-image: url("chrome://global/skin/icons/plus.svg");
}

#profile-icon-image {
 width: 90px;
 height: 90px;
 -moz-context-properties: fill, stroke;
 fill: var(--appmenu-profiles-theme-bg);
 stroke: var(--appmenu-profiles-theme-fg);
 border: 4px solid var(--panel-background);
 border-radius: var(--border-radius-circle);
}

#current-profile {
 align-items: center;
 gap: var(--space-small);
 position: relative;
}

#half-height-profile {
 background: var(--appmenu-profiles-theme-bg);
 width: 100%;
 height: 50%;
 z-index: -1;
 position: absolute;
 top: 0;
 border-block-end: 1px solid var(--border-color-card);
}

#PanelUI-profiles > .panel-subview-body {
 padding-block-start: 0;
}

/* ----- Profiles FxA panel ----- */

/* Special case: hide the profiles menuitem if the FxA/Sync panel is shown as
* a submenu of the app menu, rather than anchored to the FxA/Sync toolbar
* button. */
#appMenu-popup panelmultiview[mainViewId="appMenu-mainView"] #PanelUI-fxa-menu-profiles-button {
 display: none;
}

/* ----- Content Analysis indicator panel ----- */

#content-analysis-panel-container {
 padding: 8px;
}

/* ----- IP Protection panel ----- */
#PanelUI-ipprotection {
 width: 400px;
}

#ipprotection-experiment-badge {
 margin-inline-start: var(--space-xsmall);
 display: inline-block;
}

#ipprotection-header-button {
 list-style-image: url(chrome://global/skin/icons/help.svg);
}