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

@import url("chrome://global/skin/design-system/panel.css");

: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: var(--color-accent-attention);
  --panel-banner-item-info-icon-bgcolor: light-dark(#0090ed, #80ebff);

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

  --panel-header-info-icon-padding: 4px;
  --panel-header-info-icon-full-width: calc(var(--icon-size-small) + (2 * var(--panel-header-info-icon-padding)));

  --panel-subview-body-padding-block: 8px;
  --panel-subview-body-padding-inline: 0px;
  --panel-subview-body-padding: var(--panel-subview-body-padding-block) var(--panel-subview-body-padding-inline);

  --panel-and-palette-icon-size: var(--icon-size-small);

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

  &[uidensity="compact"] {
    --panel-subview-body-padding-block: 4px;
    :is(panel, menupopup):not([touchmode]) {
      --panel-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. */
  --panel-header-back-icon-padding: 6px;
  --panel-header-back-icon-full-width: calc(16px + (2 * var(--panel-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. */
  --panel-header-min-height: calc(var(--panel-header-back-icon-full-width) + (var(--panel-separator-padding-inline) * 2));
}

panel toolbarseparator {
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  color: var(--panel-separator-color);
  padding: var(--panel-separator-padding);
}

#PanelUI-menu-button {
  &[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
    display: flex;
    height: var(--size-item-xsmall);
    width: var(--size-item-xsmall);
    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 */
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      margin: -5px 0 0 !important;
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      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(--icon-color-warning);
  }
}

.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(--icon-color-warning);
    fill: var(--icon-color-warning);
  }
}

: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: var(--icon-size-xsmall);
    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(--icon-color-warning);
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    stroke: var(--toolbar-background-color);
  }
}

#fxa-toolbar-menu-button[badge-status="login_failed"] > .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 {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  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-menu);
  background-color: var(--button-background-color-menu);
  padding: 0;
  border-radius: var(--button-border-radius);
  flex-shrink: 0;

  &[disabled] {
    visibility: hidden;
  }

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

  &:not(:hover)[checked],
  &:hover:active {
    color: var(--button-text-color-menu-active);
    background-color: var(--button-background-color-menu-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;
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    padding: var(--panel-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(--panel-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-color: inherit;
    --panel-border-color: inherit;
    --panel-border-radius: inherit;
    --panel-text-color: inherit;
    --panel-padding: var(--panel-subview-body-padding);
    --panel-box-shadow-margin: inherit;
    --menuitem-border-radius: var(--panel-menuitem-border-radius);
    --menuitem-padding: var(--panel-menuitem-padding);
    --menuitem-margin: var(--panel-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. */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    margin-top: calc(-1 * (var(--panel-subview-body-padding-block) + var(--panel-box-shadow-margin) + 1px));
  }

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

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

      &:active {
        color: var(--button-text-color-menu-active);
        background-color: var(--button-background-color-menu-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: var(--space-small);
  }

  menu::after,
  .menu-accel {
    margin-inline-start: var(--space-large);
  }

  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 {
  --panel-background-color: var(--button-background-color-primary);
  --panel-border-color: var(--button-border-color-ghost);
  --panel-text-color: var(--button-text-color-primary);
  --panel-padding: var(--space-small) var(--space-medium);

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

  /* Don't show the checkmark if there is a description or if we don't want to show one */
  &.with-description #confirmation-hint-checkmark-animation-container,
  &:not(.with-checkmark) #confirmation-hint-checkmark-animation-container {
    display: none;
  }

  &:not(.with-checkmark) #confirmation-hint-message-container {
    margin-inline-start: 0;
  }

  &[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: white;
    animation: none;
  }
}

#confirmation-hint-checkmark-animation-container {
  position: relative;
  overflow: hidden;
  width: var(--icon-size);
  height: var(--icon-size);

  &[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 */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    min-width: 304px;
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    max-width: 304px;
    min-height: var(--icon-size);
    max-height: var(--icon-size);
    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-container {
  margin-inline-start: var(--space-small);
}

#confirmation-hint-message {
  #confirmation-hint.with-description & {
    font-size: var(--font-size-heading-medium);
    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 {
  --panel-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);
}

#toolbar-tabGroupsListView {
  max-width: var(--menu-panel-width);
}

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

@media -moz-pref("browser.nova.enabled") {
  #appMenu-nova-update-promo[hidden] {
    display: none;
  }
}

@media not -moz-pref("browser.nova.enabled") {
  #appMenu-nova-update-promo {
    display: none !important;
  }
}

#appMenu-nova-update-promo,
#appMenu-nova-switch-device-promo {
  --promo-image-size: var(--icon-size-small);
  --promo-image-fill: var(--icon-color-accent-primary-desaturated);
  margin: var(--panel-menuitem-margin);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  margin-bottom: 4px;
  padding: var(--panel-menuitem-padding);
}

#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: var(--space-xsmall);
    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: var(--space-xsmall);
  }
}

.panel-banner-item > .toolbarbutton-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  /* 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: var(--icon-size);
    height: var(--icon-size);
    -moz-context-properties: fill;
    fill: var(--icon-color-warning);
    margin-inline-start: var(--space-medium);
  }
}

/* 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: var(--icon-size);
  width: var(--icon-size);
  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-nova-fxa-label {
  display: none;
}

#appMenu-fxa-status2 {
  display: flex;

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

  &:not([fxastatus]) {
    padding-block: 0 var(--space-xxsmall);

    @media not -moz-pref("browser.nova.enabled") {
      > #appMenu-fxa-label2 {
        padding: var(--space-small) var(--space-medium);
        color: var(--button-text-color);
        background-color: var(--button-background-color);
        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);
        }
      }
    }

    @media -moz-pref("browser.nova.enabled") {
      > #appMenu-fxa-label2 {
        display: none;
      }

      > #appMenu-nova-fxa-label {
        display: flex;
      }
    }
  }
}

#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 label {
    margin: 0;
  }
}

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

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

.PanelUI-fxa-menu-setup-sync {
  padding: var(--space-large);
}

.sync-setup-icon,
.sync-status-indicator {
  width: var(--icon-size-medium);
  height: var(--icon-size-medium);
  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(--icon-color-warning);
  background-size: 18px;
}

.sync-setup-title {
  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: var(--space-small) var(--space-medium);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  background-color: var(--button-background-color);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  font-size: 0.9em;
  font-weight: var(--font-weight-semibold);
  max-width: fit-content;
  border-radius: var(--button-border-radius);

  &:hover {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    background-color: var(--button-background-color-hover);
  }

  &:hover:active {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    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;
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      top: calc(var(--icon-size) - 6px);
      /* Avatar icon size minus its circle width minus half of the little circle icon size */
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      left: calc(var(--icon-size) - 1px - 6px / 2);
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      height: 6px;
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      width: 6px;
      background-image: url(chrome://browser/skin/fxa/circle.svg);
      background-repeat: no-repeat;
      background-position: center;
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      opacity: 0.43;

      @media (prefers-color-scheme: dark) {
        /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
        opacity: 0.67;
      }
    }
  }

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

  @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(--panel-text-color);
  text-wrap: wrap;
}

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

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

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

.ctaMenuLogo {
  width: var(--icon-size);
  height: var(--icon-size);
  margin-inline-end: var(--space-medium);
}

#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-monochrome.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: var(--space-large);
  height: var(--size-image-xlarge);
  width: var(--size-image-xlarge);
}

.fxaSendToDeviceLogo {
  margin-top: var(--space-large);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  height: 119px;
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  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;
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  max-width: 15em;
  margin-top: var(--space-medium);
}

.PanelUI-fxa-signin-button,
.PanelUI-remotetabs-button {
  /* 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: var(--space-large);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  min-width: 200px;
  padding: var(--space-large);
}

.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. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  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) */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  width: 204px;
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  height: var(--panel-ui-sync-illustration-height);
  -moz-context-properties: fill;
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  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-remotetabs[mainview] {
  /* panel anchored to toolbar button might be too skinny */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  min-width: 19em;

  .PanelUI-remotetabs-notabsforclient-label {
    margin-inline-start: var(--space-xxlarge);
  }

  /* 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 {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    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(--panel-menuitem-margin);
  min-height: var(--size-item-medium);
  padding: var(--panel-menuitem-padding);
  border-radius: var(--panel-menuitem-border-radius);
  background-color: transparent;
  flex-shrink: 0;
}

.subview-subheader {
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  font-size: 0.9em;
  font-weight: inherit;
  color: var(--text-color-deemphasized);
  padding-block: var(--space-xsmall);
  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;
    margin-inline-start: var(--space-medium);
  }

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

  &[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);
    width: var(--icon-size);
  }

  &[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: var(--space-small);
}

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

  > .toolbarbutton-icon {
    width: var(--size-item-small);
    height: var(--size-item-small);
  }
}

#appMenu-profiles-button {
  justify-content: space-between;
}

#PanelUI-fxa-menu-all-profiles-list {
  overflow: hidden auto;
}

#PanelUI-fxa-menu-all-profiles-list .profile-item-labels {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;

  > label {
    margin: 0;
  }
}

#PanelUI-fxa-menu-all-profiles-list .profile-item-current-label {
  color: var(--text-color-deemphasized);
}

#PanelUI-fxa-menu-all-profiles-list .profile-item-check-icon {
  -moz-context-properties: fill;
  fill: currentColor;
  width: var(--size-item-small);
  height: var(--size-item-small);
}

/* Set the --appmenu-profiles-theme-bg and --appmenu-profiles-theme-fg
 * variables inline on the toolbarbutton */
.subviewbutton-iconic.profile-item > .toolbarbutton-icon {
  -moz-context-properties: fill, stroke;
  /* Both --appmenu-profiles-theme-* values are set via JS */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  fill: var(--appmenu-profiles-theme-bg);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  stroke: var(--appmenu-profiles-theme-fg);
  width: var(--icon-size-large);
  height: var(--icon-size-large);
}

/* Adjust the Zoom toolbaritem padding to have its height the same as other toolbarbuttons,
 * also in compact density and touch mode. */
#appMenu-zoom-controls {
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  padding-block: max(0px, var(--panel-menuitem-padding-block) - var(--space-xsmall));

  > .subviewbutton {
    margin-inline-start: var(--space-xxsmall);
    padding: var(--space-xsmall);
  }

  /* 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 */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    stroke: var(--button-background-color);
    border-radius: var(--border-radius-circle);
    padding: 0;
  }

  &:not([disabled]):hover > .toolbarbutton-icon {
    color: var(--button-text-color-hover);
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    stroke: var(--button-background-color-hover);
  }

  &:not([disabled]):active:hover > .toolbarbutton-icon {
    color: var(--button-text-color-hover);
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    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(--panel-menuitem-margin-inline);
}

#protections-popup-mainView .subviewbutton-nav:not(.notFound),
.widget-overflow-list .subviewbutton-nav,
.PanelUI-subView .subviewbutton-nav,
.tab-preview-add-note.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;
    margin-inline-start: var(--space-medium);
  }

  &:-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: var(--space-large);
    min-width: auto;
    padding: var(--space-xsmall) var(--space-xsmall);
  }

  .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;

    @media -moz-pref("browser.nova.enabled") {
      border-image: var(--tab-border-color-accent) 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: var(--space-small);

  > .subviewbutton {
    min-width: auto;
    padding-inline: var(--space-xsmall);
  }

  > .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: var(--space-small);
}

panelmultiview .toolbaritem-combined-buttons > label {
  flex: 1;
  margin: 0;
  padding: var(--space-xsmall) 0;
}

#appMenu-zoomReset-button2 > .toolbarbutton-text {
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  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: var(--space-small);
}

: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-menu);
  background-color: var(--button-background-color-menu);

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

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

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

    &:active {
      color: var(--button-text-color-menu-active);
      background-color: var(--button-background-color-menu-active);
      /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
      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: var(--icon-size);
  height: var(--icon-size);

  /* 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: calc(-1 * var(--space-small));
  }
}

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

.remote-tabs-undo-button {
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  font-size: 0.9em;
  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(--panel-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] {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    opacity: var(--button-opacity-disabled);
    /* 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 */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    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 */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  min-width: calc(5ch + var(--toolbarbutton-padding-inner) * 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: var(--space-small);
  }

  > #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 {
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  min-width: 280px;
}

#PanelUI-panic-timeframe {
  padding: var(--space-large);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  border-bottom: var(--border-width) solid var(--panel-separator-color);
}

#panic-button-success-icon,
#PanelUI-panic-timeframe-icon {
  background-color: transparent;
  margin-inline-end: var(--space-medium);
  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: var(--space-xsmall);
}

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

.subviewradio {
  appearance: none;
  align-items: center;
  padding: var(--space-xxsmall);
  margin: 0 0 var(--space-xxsmall);
  background-color: transparent;
  border-radius: var(--border-radius-small);
  border: var(--border-width) 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: var(--size-item-small);
    height: var(--size-item-small);
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    border: var(--border-width) solid rgba(110, 110, 110, 0.4);
    border-radius: var(--border-radius-circle);
    margin: var(--space-xxsmall) var(--space-xsmall);
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    background-color: rgba(150, 150, 150, 0.2);
  }

  > .radio-check[selected] {
    background-color: light-dark(white, transparent);
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    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: var(--space-medium) var(--space-medium) 0;
}

#PanelUI-panic-actionlist-main-label {
  color: var(--text-color-deemphasized);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  font-size: 0.9em;
}

.PanelUI-panic-actionlist {
  padding: var(--space-xxsmall) 0;

  &::before {
    display: inline-block;
    content: "";
    width: var(--size-item-small);
    height: var(--size-item-small);
    margin-inline-end: var(--space-xsmall);
    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: var(--text-color-error);
  text-align: center;
  width: 100%;
  margin-top: var(--space-xlarge);
}

#PanelUI-panic-view-button {
  appearance: none;
  background-color: var(--button-background-color-destructive);
  color: var(--button-text-color-destructive);
  margin: var(--space-xsmall) var(--space-large) var(--space-medium);
  border: 1px solid var(--button-border-color-destructive);
  border-radius: var(--button-border-radius);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-medium);

  &: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: var(--space-xsmall) 0 0;
  border: 1px solid transparent;
  border-radius: var(--button-border-radius);
  padding: var(--space-medium);
  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;
  box-sizing: border-box;
  /* 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(--panel-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). */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  min-height: var(--panel-header-min-height);

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

  > h1 {
    flex: auto;
    margin: 0;
    font-size: inherit;
  }

  &.panel-header-with-info-button > h1 {
    /* Add the size of the info button to center properly. */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    margin-inline-start: var(--panel-header-info-icon-full-width);
  }

  &.panel-header-with-info-button > .subviewbutton-back + h1 {
    margin-inline-start: 0;
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    margin-inline-end: calc(var(--panel-header-back-icon-full-width) - var(--panel-header-info-icon-full-width));
  }

  &:not(.panel-header-with-additional-element) > .subviewbutton-back + h1 {
    /* Add the size of the back button to center properly. */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    margin-inline-end: var(--panel-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. */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    margin-inline-end: var(--panel-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);
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    padding: var(--panel-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 {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    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. */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    margin-bottom: -260px;
    pointer-events: none;
  }

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

#protections-popup-message {
  display: flex;
  align-items: flex-end;
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  height: calc(100% - 20px);
  margin: var(--space-medium);
  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: var(--space-medium) 0;
  }

  .protections-popup-message-title {
    display: grid;
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    font-size: 1.3em;
    font-weight: var(--font-weight-heading);
    line-height: 1.4em;
    margin: var(--space-large) 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. */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    margin: 0 calc(-10px + var(--horizontal-padding)) var(--vertical-section-padding);
    margin-inline: var(--space-small);
  }

  .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 {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    min-width: 319px;
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    max-width: 319px;
  }

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

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

#PanelUI-profiler-header {
  --panelui-profiler-header-toolbarseparator: var(--color-black-alpha-20);

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

    &:-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: var(--panelui-profiler-header-toolbarseparator);
    }
  }

  &[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 {
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  min-height: 180px;
  padding: 0 var(--space-large) var(--space-large);
  background: top 10px right no-repeat url("chrome://browser/skin/profiler-popup-backdrop.png");
  opacity: 1;
}

#PanelUI-profiler-content {
  position: relative;
  padding: calc(var(--space-large) - var(--panel-separator-padding-block)) var(--space-large) var(--space-large);
}

.PanelUI-profiler-description-title {
  font-size: var(--font-size-xlarge);
  font-weight: var(--font-weight-heading);
  margin-block: var(--space-xxsmall);
}

.PanelUI-profiler-description {
  margin-block: var(--space-xsmall);
}

#PanelUI-profiler-learn-more {
  --panelui-profiler-learn-more-text-color: white;
  --panelui-profiler-learn-more-text-color-active: var(--color-white-alpha-80);

  margin-top: var(--space-xsmall);
  color: var(--panelui-profiler-learn-more-text-color);
  text-decoration: underline;

  &:hover:active {
    color: var(--panelui-profiler-learn-more-text-color-active);
  }
}

#PanelUI-profiler-presets {
  margin: var(--space-small) 0;

  &[disabled]::part(label-box) {
    opacity: var(--opacity-deemphasized-strong);
  }
}

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

#PanelUI-profiler-content-description {
  margin-block: var(--space-xsmall);
  color: var(--text-color-deemphasized);
}

#PanelUI-profiler-content-recording {
  display: flex;
  place-items: center;
  place-content: center;
  gap: var(--space-medium);
  padding-block: var(--space-xxlarge);
  font-size: var(--font-size-xlarge);
}

.PanelUI-profiler-recording-icon {
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  width: 42px;
  list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg);
  -moz-context-properties: fill;
  fill: currentColor;
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  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: var(--space-small);
  margin: 0 var(--space-xsmall);

  &: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: var(--space-xsmall);
  opacity: var(--opacity-deemphasized-strong);
  text-align: center;
}

.PanelUI-profiler-buttons {
  margin: var(--space-small) var(--space-medium) 0;
}

.PanelUI-profiler-info-icon {
  margin-inline-end: var(--space-medium);
  margin-block-start: var(--space-xlarge);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  width: 50px;
  list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg);
  -moz-context-properties: fill;
  fill: white;
}

/* Web-extension pop-ups */

.cui-widget-panelview[id^="PanelUI-webext-"] {
  border-radius: var(--panel-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: var(--space-large) var(--space-large) 0;
  gap: var(--space-small);
}

#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(--font-weight-heading);
}

#reset-pbm-panel-checkbox {
  margin-inline: 0 var(--space-small);
}

/* 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: 80vh;

  &.main-view > .panel-subview-body > moz-box-group {
    /* let the reason-options scroll if the panelview is too short */
    overflow: unset;
  }

  &.wrong-tab-info {
    .favicon,
    .tab-specific-data,
    #report-broken-site-popup-screenshot-toggle,
    #report-broken-site-popup-blocked-trackers-toggle {
      display: none;
    }
  }

  &.no-screenshot,
  &.screenshots-disabled,
  &.screenshot-opt-out {
    .preview-screenshot {
      display: none;
    }
  }

  &.no-screenshot,
  &.screenshots-disabled {
    #report-broken-site-popup-screenshot-toggle {
      display: none;
    }
  }

  &.no-blocked-trackers,
  &.blocked-trackers-opt-out {
    .preview-blockedOrigins {
      display: none;
    }
  }

  &.no-blocked-trackers {
    #report-broken-site-popup-blocked-trackers-toggle {
      display: none;
    }
  }

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

  #report-broken-site-popup-intro {
    margin-block-end: 0;
    margin-block-start: var(--space-small);
  }

  #report-broken-site-popup-intro,
  #report-broken-site-details-instructions {
    line-height: 1.25em;
  }

  #report-broken-site-reason-selector-intro,
  #report-broken-site-details-instructions {
    margin-block: 0 var(--space-large);
  }

  #report-broken-site-popup-screenshot {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    max-height: 13rem;
    object-fit: contain;
    object-position: left top;
  }

  button.arrow-button {
    font-weight: normal;
    padding: var(--space-large) var(--space-medium);
    margin: 0 0 var(--space-large);
    border: 0;

    > hbox > label {
      text-align: start;

      /* allow for multi-line localizations */
      display: block !important;
      text-wrap: balance;
      width: 100%;
    }

    background: url("chrome://global/skin/icons/arrow-right.svg") no-repeat calc(100% - var(--panel-menuitem-padding-inline)) center;
    &:dir(rtl) {
      background: url("chrome://global/skin/icons/arrow-left.svg") no-repeat var(--panel-menuitem-padding-inline) center;
    }
    background-color: var(--background-color-box);
    -moz-context-properties: fill;
    fill: currentColor;

    &:not(:hover, :active) {
      background-color: inherit;
    }
  }

  &.preview-view {
    toolbarseparator {
      display: none;
    }

    #report-broken-site-panel-preview-items.update {
      margin: 0;
      border-inline: 0;
      border-radius: 0;
      details > summary {
        border-radius: 0;
      }
    }
  }

  #report-broken-site-panel-preview-items {
    margin: var(--panel-menuitem-padding);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: var(--border-width) solid var(--card-border-color);
    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(--panel-menuitem-padding);
      background:
        linear-gradient(0deg, color-mix(in srgb, currentColor 7%, transparent) 0, transparent var(--panel-padding)),
        linear-gradient(180deg, color-mix(in srgb, currentColor 7%, transparent) 0, transparent var(--panel-padding));
      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(--card-border-color);
      }

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

      > summary,
      > .data {
        /* prevent the keyboard-focus outlines from being partly cut off due to the summaries taking up the full width */
        outline-offset: calc(-1 * var(--default-focusring-width));
      }

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

      img {
        /* the screenshot */
        display: block;
        max-width: -moz-available;
        max-height: 15vh;
      }
    }
  }

  @media not (prefers-contrast) {
    fieldset > label,
    details > summary {
      color: var(--button-text-color);
      background-color: var(--button-background-color-menu);

      &: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);
      }
    }
  }

  p {
    line-height: 1.5;
  }

  .report-broken-site-url-label {
    margin-block-start: 0;
    margin-block-end: var(--space-xsmall);
  }

  url-input {
    margin-block-end: var(--space-xlarge);
  }

  textarea {
    resize: vertical;

    &:invalid {
      outline-color: var(--border-color-error);
    }

    &:not(:invalid) + .invalid-message {
      display: none;
    }

    + .invalid-message {
      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);
      margin-block-start: var(--space-xsmall);
      padding-inline-start: calc(var(--icon-size-small) + var(--space-small));

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

  moz-toggle[disabled],
  moz-toggle:not([pressed]) {
    #report-broken-site-popup-screenshot {
      display: none;
    }
  }

  > .panel-subview-body {
    moz-toggle,
    textarea:not(:invalid),
    textarea:invalid + label {
      margin-block-end: var(--space-xxlarge);
    }
  }

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

    > .panel-header {
      --panel-header-additional-element-width: var(--icon-size-small);

      > .checkmark-icon {
        list-style-image: url(chrome://global/skin/icons/check-filled.svg);
        -moz-context-properties: fill;
        fill: var(--color-accent-attention);
      }
    }

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

#report-broken-site-panel-container {
  padding: var(--space-small) var(--space-xlarge) var(--space-xlarge);
}

#report-broken-site-popup-detailsView > .panel-subview-body {
  padding: var(--space-small) var(--space-xlarge) 0 var(--space-xlarge);
}

#report-broken-site-popup-previewView > .panel-footer {
  padding-block-start: var(--space-small);
}

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

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

#profile-icon-image {
  width: var(--size-image-xxlarge);
  height: var(--size-image-xxlarge);
  -moz-context-properties: fill, stroke;
  /* Both --appmenu-profiles-theme-* values are set via JS */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  fill: var(--appmenu-profiles-theme-bg);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  stroke: var(--appmenu-profiles-theme-fg);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  border: 4px solid var(--panel-background-color);
  border-radius: var(--border-radius-circle);
}

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

#half-height-profile {
  /* Both --appmenu-profiles-theme-* values are set via JS */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  background: var(--appmenu-profiles-theme-bg);
  width: 100%;
  height: 50%;
  z-index: -1;
  position: absolute;
  top: 0;
  border-block-end: 1px solid var(--card-border-color);
}

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

#profiles-subview-list {
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  max-height: 50dvh;
  overflow: hidden auto;
}

#PanelUI-profiles {
  height: fit-content;
  min-height: 0 !important;
}

.panel-viewcontainer:has(#PanelUI-profiles[visible]) {
  min-height: 0 !important;
}

/* ----- 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"]
  :is(#PanelUI-fxa-menu-profiles-header-separator, #PanelUI-fxa-menu-profiles-header-label, #PanelUI-fxa-menu-profile-buttons) {
  display: none;
}

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

#content-analysis-panel-container {
  padding: var(--space-small);
}

/* ----- IP Protection panel ----- */
#PanelUI-ipprotection {
  padding: var(--space-small);
  padding-top: 0;
  width: 28em;

  @media not -moz-pref("browser.nova.enabled") {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    width: 400px;
  }

  > .panel-header {
    margin: 0;
  }

  > .panel-subview-body {
    padding: 0;
  }

  > toolbarseparator {
    display: none;
  }
}

@media not -moz-pref("browser.nova.enabled") {
  #ipprotection-header-content {
    color: var(--text-color);
  }
}

#ipprotection-header-content,
#ipprotection-experiment-badge {
  font-size: var(--font-size-large);
}

#ipprotection-experiment-badge {
  display: inline-block;
  color: var(--text-color-deemphasized);

  @media not -moz-pref("browser.nova.enabled") {
    margin-inline-start: var(--space-xsmall);
  }
}

#PanelUI-ipprotection-locations {
  max-height: 43em;
}

#PanelUI-ipprotection-locations-header h1 {
  font-size: var(--font-size-large);
}