{
  margin: var(--space-xxsmall) 0;

  &.tail-with-learn-more + a {
    margin-block: var(--space-xxsmall);
    margin-inline: var(--space-small) 0;
  }
}

.description-deemphasized {
  color: var(--text-color-deemphasized);
}

.tip-caption {
  font-size: 0.9em;
  color: var(--text-color-deemphasized);
}

menulist::part(label),
menuitem > label,
button > hbox > label {
  line-height: unset;
}

.indent {
  margin-inline-start: calc(var(--checkbox-size) + var(--checkbox-margin-inline)) !important;
}

checkbox,
radio {
  margin: var(--space-small) 0;

  &.tail-with-learn-more + a {
    margin-block: var(--space-small);
    margin-inline: var(--space-small) 0;
  }
}

/* Add a bit of space to the end of descriptions to
 * leave margin with e.g. additional buttons on the side. */
.description-with-side-element {
  margin-inline-end: 10px !important;
}

.learnMore {
  margin-inline-start: 0;
  font-weight: normal;
  white-space: nowrap;
}

.accessory-button {
  min-width: 150px;
  margin: 4px 0;
}

.spotlight {
  background-color: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
  outline: var(--border-color-selected) 1px dotted;
  animation: fade-out 0.5s ease-out 2s forwards;
  /* Show the border to spotlight the components in high-contrast mode. */
  border: 1px solid transparent;
  border-radius: var(--border-radius-xsmall);
}

@keyframes fade-out {
  100% {
    background-color: transparent;
    outline-color: transparent;
  }
}

[data-subcategory] {
  margin-inline: -4px;
  padding-inline: 4px;
}

.ac-site-icon {
  display: flex;
}

/* Subcategory title */

/**
 * The first subcategory title for each category should not have margin-top.
 */

.subcategory:not([hidden]) ~ .subcategory {
  padding-top: var(--space-xxlarge);
  border-top: 1px solid var(--border-color);
}

/* Category List */

#categories {
  overflow: visible;
  min-height: auto;
  padding: 1px; /* Adding padding around richlistitem in order to make entire keyboard focusing outline visible */
}

#category-general > .category-icon {
  list-style-image: url("chrome://browser/skin/preferences/category-general.svg");
}

#category-home > .category-icon {
  list-style-image: url("chrome://browser/skin/home.svg");
}

#category-search > .category-icon {
  list-style-image: url("chrome://browser/skin/preferences/category-search.svg");
}

#category-privacy > .category-icon {
  list-style-image: url("chrome://browser/skin/preferences/category-privacy-security.svg");
}

#category-sync > .category-icon {
  list-style-image: url("chrome://browser/skin/preferences/category-sync.svg");
}

#category-ai-features > .category-icon {
  list-style-image: url("chrome://global/skin/icons/highlights.svg");
}

#category-experimental > .category-icon {
  list-style-image: url("chrome://global/skin/icons/experiments.svg");
}

#category-more-from-mozilla > .category-icon {
  list-style-image: url("chrome://browser/skin/preferences/mozilla-logo.svg");
}

/* All panes */

.info-icon,
.androidIcon,
.iOSIcon {
  -moz-context-properties: fill;
  fill: currentColor;
}

/* General Pane */

/* stylelint-disable-next-line media-query-no-invalid */
@media not -moz-pref("browser.migrate.preferences-entrypoint.enabled") {
  #dataMigrationGroup {
    display: none;
  }
}

.extension-controlled {
  margin-block: 18px;
}

.extension-controlled-icon {
  height: var(--icon-size-medium);
  margin: 2px 0 6px;
  vertical-align: middle;
  width: var(--icon-size-medium);
  -moz-context-properties: fill;
  fill: currentColor;
}

.extension-controlled-disabled {
  -moz-context-properties: fill;
  color: GrayText;
  fill: currentColor;
}

.extension-controlled-disabled > .extension-controlled-button {
  display: none;
}

.extension-controlled-icon.close-icon {
  height: 30px;
  width: 30px;
  margin-inline-start: 5px;
}

#getStarted {
  font-size: 90%;
}

#colors {
  margin-inline-start: 5px;
}

#FontsDialog menulist:empty {
  /* When there's no menupopup, while the font builder is running,
   * the height of the menulist would otherwise shrink. This throws
   * off the height determination SubDialog.sys.mjs does, which then
   * leads to content being cut off. Fix by enforcing a minimum height
   * when there's no content: */
  min-height: max(32px, calc(1.4em + 16px));
}

#useDocumentColors {
  margin: 4px 0;
}

#activeLanguages > richlistitem {
  padding: 0.3em;
}

#updateBox {
  margin-block: 4px 32px;
}

/* Work around bug 560067 - animated images in visibility: hidden
 * still eat CPU. */
#updateDeck > *:not(.deck-selected) > .update-throbber {
  display: none;
}

#updateDeck > hbox > button {
  margin-block: 0;
  margin-inline-end: 0;
}

#updateDeck > hbox > label {
  flex: 1;
  margin-inline-end: 5px !important;
}

.manualLink {
  margin-inline-start: 6px !important;
}

#updateRadioGroup > radio {
  min-height: 30px;
  margin: 2px 0;
}

#filter {
  flex: 1;
  margin: 4px 0 8px;
}

#handlersView {
  height: 25em;
  margin-inline-end: 0;
}

#handlersView > richlistitem {
  min-height: 30px;
}

#handlersView .actionsMenu {
  margin: 0;
  min-height: 0;
  padding: 0;
  border: none;
  padding-inline-end: 8px;
}

#handlersView .actionsMenu::part(label) {
  margin: 0;
}

.typeIcon,
.actionIcon,
.actionsMenu::part(icon) {
  height: 16px;
  width: 16px;
}

.typeIcon {
  margin-inline: 10px 9px !important;
  &:not([srcset]) {
    visibility: hidden;
  }
}

#handlersView .actionsMenu::part(icon),
.actionIcon {
  margin-inline: 11px 8px !important;
}

.actionsMenu > menupopup > menuitem {
  padding-inline-start: 10px !important;
}

.actionsMenu > menupopup > menuitem > .menu-icon {
  margin-inline-end: 8px !important;
}

/* Increase the specifity to override common.inc.css */
richlistitem[selected] .actionsMenu:focus-visible {
  outline-offset: -3px;
}

/* Home Pane */

#homepageGroup menulist,
#homepageGroup html|input {
  margin: var(--space-xsmall) 0;
}

#homepageGroup html|input {
  text-align: match-parent;
}

#homepageGroup:-moz-locale-dir(rtl) html|input {
  unicode-bidi: plaintext;
}

#homepageAndNewWindowsOption {
  margin-top: 20px;
}

#homepageGroup:-moz-locale-dir(rtl) panel[type="autocomplete-richlistbox"] {
  direction: rtl;
}

.homepage-buttons > .homepage-button {
  flex: 1 auto;
}

.homepage-button:first-of-type {
  margin-inline-start: 0;
}

.homepage-button:last-of-type {
  margin-inline-end: 0;
}

#homeContentsGroup .checkbox-icon[src] {
  -moz-context-properties: fill;
  fill: currentColor;
  margin-inline-end: var(--checkbox-margin-inline);
  width: 16px;
}

#homeContentsGroup > [data-subcategory] {
  margin-top: 14px;
}

#homeContentsGroup > [data-subcategory] .section-checkbox {
  font-weight: var(--font-weight-semibold);
}

#homeContentsGroup > [data-subcategory] > vbox menulist {
  margin-block: 0;
}

/* Align fix for prefs that have a text link in the headline */
#homeContentsGroup > [data-subcategory] > hbox {
  align-items: last baseline;
}

#homeContentsGroup .checkbox-label {
  margin-inline-end: var(--space-small);
}

a[is="moz-support-link"]:not(.sidebar-footer-link, [hidden]) {
  display: inline-block;
  white-space: initial;
}

/* Search Pane */

#engineList {
  margin: 2px 0 5px;
}

#engineList > treechildren::-moz-tree-image(engineShown, checked),
#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) {
  list-style-image: url("chrome://global/skin/icons/check.svg");
  -moz-context-properties: fill, stroke;
  fill: var(--color-accent-primary);
}

#engineList > treechildren::-moz-tree-image(engineShown, checked, selected),
#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) {
  fill: var(--text-color-accent-primary-selected);
  stroke: var(--color-accent-primary-selected);
}

@media (forced-colors) {
  #engineList > treechildren::-moz-tree-image(hover),
  #blocklistsTree > treechildren::-moz-tree-image(hover) {
    fill: var(--text-color-list-item-hover);
    /* fill allows icon and text colors, but we have no such rules for stroke */
    /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */
    stroke: var(--background-color-list-item-hover);
  }
}

#engineList > treechildren::-moz-tree-row,
#blocklistsTree > treechildren::-moz-tree-row {
  min-height: 36px;
}

#selectionCol {
  min-width: 26px;
}

#addEnginesBox {
  margin: 4px 0 0;
}

/* Privacy Pane */

#allowSmartSize {
  margin-block: 0 4px;
}

#historyPane {
  margin-top: 4px;
}

#historyButtons {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#blockCookies,
#keepRow {
  margin-top: 1.5em;
}

/* Collapse the non-active vboxes in decks to use only the height the
   active vbox needs */
#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
#historyPane:not([selectedIndex="2"]) > #historyCustomPane,
#weavePrefsDeck:not([selectedIndex="1"]) > #hasFxaAccount,
#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected {
  visibility: collapse;
}

#tabsElement {
  margin-inline-end: 4px; /* add the 4px end-margin of other elements */
}

.text-link {
  margin-bottom: 0;
}

.text-link[disabled="true"] {
  pointer-events: none;
}

html|label[disabled] {
  /* This matches XUL checkbox.css - but for HTML labels for HTML inputs we
   * need to do this ourselves. */
  opacity: 0.4;
}

#showUpdateHistory {
  margin-inline-start: 0;
}

/**
 * Dialog
 */

.dialogOverlay {
  visibility: hidden;
}

html|dialog {
  padding: var(--space-xlarge);
}

html|dialog::backdrop,
.dialogOverlay[topmost="true"] {
  background-color: var(--background-color-overlay);
}

html|dialog,
.dialogBox {
  border: 1px solid transparent;
  border-radius: var(--border-radius-medium);
  box-shadow: var(--box-shadow-popup);
}

.dialogBox {
  background-color: var(--background-color-canvas);
  background-clip: content-box;
  color: var(--text-color);
  /* `transparent` will use the dialogText color in high-contrast themes and
     when page colors are disabled */
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

@media (prefers-color-scheme: dark) {
  @media not (forced-colors) {
    html|dialog,
    .dialogBox {
      --background-color-canvas: #42414d;
    }
  }
}

.dialogBox[resizable="true"] {
  resize: both;
  overflow: hidden;
  min-height: 20em;
  min-width: 66ch;
}

.dialogTitleBar {
  padding: 0.4em 0.2em;
  border-bottom: 1px solid var(--border-color);
}

.dialogTitle {
  font-weight: var(--heading-font-weight);
  text-align: center;
  user-select: none;
}

.fxaPairDeviceIcon {
  background-image: url("chrome://browser/content/logos/fxa-logo.svg");
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  height: 80px;
  padding-top: 42px;
  margin-top: -40px;
}

.fxaPairDeviceIcon .close-icon {
  margin-top: 10px;
}

.close-icon {
  border: none;
  background-color: transparent; /* override common.css, but keep hover/active states */
  min-width: 0;
  min-height: auto;
  width: var(--icon-size-medium);
  height: var(--icon-size-medium);
  padding: 0;
  margin-inline: 0 8px;
}

.dialogFrame {
  margin: 10px;
  flex: 1;
  /* Default dialog dimensions */
  min-width: 66ch;
}

/**
 * End Dialog
 */

/**
 * Font group and font dialog menulist fixes
 */

#font-chooser-group {
  display: grid;
  grid-template-columns: max-content 1fr max-content max-content;
}

#defaultFont {
  flex: 1 25ch;
}

#defaultFontType,
#serif,
#sans-serif,
#monospace {
  width: 0; /* Might be able to be removed */
  min-width: 30ch;
}

/**
 * Sync
 */

.fxaProfileImage {
  width: 80px;
  height: 80px;
  border-radius: var(--border-radius-circle);
  border: 1px solid transparent;
  list-style-image: url(chrome://browser/skin/fxa/avatar-color.svg);
  margin-inline-end: var(--space-xlarge);
  -moz-user-focus: normal;
}

.fxaProfileImage.actionable {
  cursor: pointer;
}

.fxaProfileImage.actionable:hover {
  border-color: #0095dd;
}

.fxaProfileImage.actionable:hover:active {
  border-color: #ff9500;
}

#useFirefoxSync {
  font-size: 90%;
  margin-inline-end: 8px !important;
}

#fxaNoLoginStatus {
  margin-block: 46px 64px;
}

#fxaSyncComputerName {
  flex: 1;
  margin-block: 4px;
  margin-inline-start: 0;
}

#fxaChangeDeviceName {
  margin-block: 4px;
  margin-inline-end: 0;
}

#noFxaAccount > label:first-child {
  margin-bottom: 0.6em;
}

#noFxaCaption {
  margin-block: 0 4px;
}

button#noFxaSignIn {
  margin-inline-start: 8px;
}

#syncConfigured {
  --box-icon-start-fill: var(--icon-color-success);
}

#syncNotConfigured,
#noFxaSignIn {
  --box-icon-start-fill: var(--icon-color-warning);
}

#syncSetup {
  white-space: nowrap;
}

#syncNow,
#syncing {
  min-width: 150px;
}

.fxaSyncIllustration {
  list-style-image: url(chrome://browser/skin/fxa/sync-devices.svg);
  width: 312px;
  height: 136px;
}

#noFxaDescription {
  padding-inline-end: 52px;
}

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

#fxaGroup {
  margin-bottom: 32px;
}

.openLink {
  cursor: pointer;
}

#fxaDisplayName {
  margin-inline-end: 10px !important;
}

.fxaLoginRejectedWarning {
  list-style-image: url(chrome://global/skin/icons/warning.svg);
  -moz-context-properties: fill;
  fill: #ffbf00;
  margin-inline: 4px 8px;
}

#fxaLoginVerified {
  --box-icon-size: calc(var(--icon-size-xlarge) * 2);
  --box-icon-border-radius: var(--border-radius-circle);

  &[description] {
    --box-label-alignment: end;
    --box-description-alignment: start;
  }
}

#syncStatusContainer {
  margin-top: 32px;
}

#syncChangeOptions {
  margin-inline-start: 0;
}

.sync-group {
  margin-block: var(--space-large);
  border: 1px solid var(--border-color);
}

.sync-configured {
  display: block;
}

.sync-info-box {
  border-radius: var(--border-radius-medium);
  padding: var(--space-large);
}

.sync-engines-list > div,
.sync-engines-list + hbox {
  margin-top: 0;
  padding-top: var(--space-large);
}

dialog > .sync-engines-list > div,
dialog > .sync-engines-list + hbox {
  padding-top: 0;
}

.sync-engines-list checkbox .checkbox-icon,
.sync-engine-image {
  display: flex;
  margin-inline: 2px 8px;
  width: 16px;
  height: 16px;
  -moz-context-properties: fill;
  fill: currentColor;
  align-self: center;
}

.sync-engines-list checkbox {
  min-width: max-content;
  max-width: calc(50vw - 10px);
}

.sync-engines-list .checkbox-label-box {
  align-items: center;
}

.sync-engines-list {
  column-count: 3;
  column-fill: balance;
  margin-block-end: 10px;
}

.sync-engines-list > div:not([hidden]) {
  display: flex;
  break-inside: avoid;
}

.sync-engine-bookmarks .checkbox-icon,
.sync-engine-bookmarks.sync-engine-image {
  list-style-image: url("chrome://browser/skin/bookmark.svg");
}

.sync-engine-history .checkbox-icon,
.sync-engine-history.sync-engine-image {
  list-style-image: url("chrome://browser/skin/history.svg");
}

.sync-engine-tabs .checkbox-icon,
.sync-engine-tabs.sync-engine-image {
  list-style-image: url("chrome://browser/skin/synced-tabs.svg");
}

.sync-engine-passwords .checkbox-icon,
.sync-engine-passwords.sync-engine-image {
  list-style-image: url("chrome://browser/skin/login.svg");
}

.sync-engine-addons .checkbox-icon,
.sync-engine-addons.sync-engine-image {
  list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
}

.sync-engine-prefs .checkbox-icon,
.sync-engine-prefs.sync-engine-image {
  list-style-image: url("chrome://global/skin/icons/settings.svg");
}

.sync-engine-addresses .checkbox-icon,
.sync-engine-addresses.sync-engine-image {
  list-style-image: url("chrome://formautofill/content/formfill-anchor.svg");
}

.sync-engine-creditcards .checkbox-icon,
.sync-engine-creditcards.sync-engine-image {
  list-style-image: url("chrome://formautofill/content/icon-credit-card-generic.svg");
}

.fxaMobilePromo {
  margin-top: 2px !important;
  margin-bottom: var(--space-xxlarge);
}

.androidIcon,
.iOSIcon {
  margin-inline: 2px 4px;
  width: var(--icon-size-medium);
  height: var(--icon-size-medium);
  vertical-align: text-bottom;
}

.update-throbber {
  width: 1.3em;
  min-height: 1.3em;
  margin-inline-end: 8px;
  content: url("chrome://global/skin/icons/loading.svg");
  -moz-context-properties: fill;
  fill: var(--color-accent-primary);
}

.navigation {
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

@media (prefers-reduced-motion) {
  /* Setting border-inline-end on .navigation makes it a focusable element */
  .navigation::after {
    content: "";
    width: 1px;
    height: 100%;
    /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */
    background-color: var(--border-color);
    top: 0;
    inset-inline-end: 0;
    position: absolute;
  }
}

.face-sad::before {
  content: "\01F641";
  font-size: 1.3em;
  margin-inline-end: 8px;
}

.face-smile::before {
  content: "\01F600";
  font-size: 1.3em;
  margin-inline-end: 8px;
}

#policies-container,
#searchInput {
  min-height: 32px;
  margin: 20px 0 30px;
}

#policies-container {
  margin-inline-end: var(--space-large);
  /* Make sure the container is at least the same height as the searchbox.
     This is needed in addition to the min-height above to make the info icon
     the same height as the first line in the policies label.
     Searchbox's height - line-height - border top and bottom */
  padding-block: max(0px, calc((32px - 1.8em - 2px) / 2));
}

.info-box-container {
  background-color: var(--background-color-box-info);
  padding: 9px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
}

.info-box-container.smaller-font-size {
  font-size: 85%;
}

.info-icon-container {
  display: flex;
}

.info-icon {
  content: url("chrome://global/skin/icons/info.svg");
  width: 16px;
  height: 16px;
  margin-inline-end: 6px;
  align-self: start;
  margin-top: 0.4em;
  flex-shrink: 0;
}

.info-box-container.smaller-font-size .info-icon {
  margin-top: 0.3em;
}

.sticky-container {
  position: sticky;
  background-color: var(--background-color-canvas);
  top: 0;
  z-index: 1;
  /* The sticky-container should have the capability to cover all spotlight area. */
  width: calc(100% + 8px);
  margin-inline: -4px;
  padding-inline: 4px;
}

.sticky-inner-container {
  flex: 1;
  max-width: var(--page-main-content-width);
}

#search-tooltip-container {
  position: relative;
  top: 0;
}

.search-tooltip {
  max-width: 10em;
  font-size: 1rem;
  position: absolute;
  padding: 0 0.7em;
  background-color: #ffe900;
  color: #000;
  border: 1px solid #d7b600;
  margin-top: -18px;
  opacity: 0.85;
  z-index: 1;
}

.search-tooltip:hover {
  opacity: 0.1;
}

.search-tooltip::before {
  position: absolute;
  content: "";
  border: 7px solid transparent;
  border-top-color: #d7b600;
  top: 100%;
  inset-inline-start: calc(50% - 7px);
  forced-color-adjust: none;
}

.search-tooltip::after {
  position: absolute;
  content: "";
  border: 6px solid transparent;
  border-top-color: #ffe900;
  top: 100%;
  inset-inline-start: calc(50% - 6px);
  forced-color-adjust: none;
}

@media (forced-colors: active) {
  .search-tooltip::before {
    border-top-color: CanvasText;
  }

  .search-tooltip::after {
    border-top-color: Canvas;
  }
}

.search-tooltip-parent {
  position: relative;
}

.search-tooltip > span {
  display: block;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setting-hidden,
.visually-hidden {
  display: none !important;
}

menulist[indicator="true"] > menupopup menuitem:not([image]) > .menu-icon {
  display: flex;
  min-width: auto; /* Override the min-width defined in menu.css */
  margin-inline-end: 6px;
  width: 8px;
  height: 10px;
}

menulist[indicator="true"] > menupopup menuitem[indicator="true"]:not([image]) > .menu-icon {
  list-style-image: url(chrome://browser/skin/preferences/search-arrow-indicator.svg);

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

.menu-highlightable-text {
  margin: 0; /* Align with the margin of xul:label.menu-text */
}

#no-results-message > label {
  margin: 2px 0;
}

/* Proxy port input */

.proxy-port-input {
  width: calc(5ch + 18px); /* 5 chars + (8px padding + 1px border) on both sides */
  margin-inline-start: 4px;
}

#primaryBrowserLocale {
  margin-inline-start: 0;
  min-width: 20em;
}

#availableLanguages,
#availableLocales {
  margin-inline-start: 0;
}

#availableLanguages,
#availableLocales,
#activeLanguages,
#selectedLocales {
  margin-inline-end: 4px;
}

#activeLanguages,
#selectedLocales {
  min-height: 15em;
  contain: size;
}

#selectedLocales > richlistitem {
  padding-inline-start: 13px;
}

#warning-message > .message-bar-description {
  width: 32em;
}

#warning-message {
  margin-top: 8px;
}

.action-button {
  margin-inline-end: 0;
}

.languages-grid {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr auto;
}

/* Menulist styles */
.label-item {
  font-size: 0.8em;
}

.updateSettingCrossUserWarningContainer {
  margin-block-end: 17px;
}

#updateSettingCrossUserWarningDesc {
  padding-inline-start: calc(16px + 6px); /* radio-check's width + margin-inline-end */
  margin-block-start: 20px;
}

richlistitem .text-link {
  color: inherit;
  text-decoration: underline;
}

richlistitem .text-link:hover {
  color: inherit;
}

#proxy-grid,
#dnsOverHttps-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.proxy-grid-row:not([hidden]),
.dnsOverHttps-grid-row:not([hidden]) {
  display: contents;
}

#proxy-grid > .thin {
  grid-column: span 2;
  height: 20px;
}

#pane-experimental-featureGates > .featureGate:not(.visually-hidden) ~ .featureGate:not(.visually-hidden) {
  margin-top: var(--space-xlarge);
}

#pane-experimental-featureGates moz-fieldset::part(label) {
  font-size: var(--font-size-large);
}

#experimentalCategory-reset {
  margin-top: var(--space-small);
}

.featureGateDescription {
  white-space: pre-wrap;
}

.checkbox-row {
  display: flex;
  align-items: baseline;
}

.checkbox-row input[type="checkbox"] {
  translate: 0 2px;
}

.checkbox-row a {
  margin-inline-start: 6px;
}

#moreFromMozillaCategory-header .subtitle {
  margin-block-end: var(--space-xlarge);
}

#moreFromMozillaCategory:not([hidden]) {
  display: flex;
  flex-direction: column;
}

#moreFromMozillaCategory .mozilla-product-item {
  margin-top: 30px;
}

#moreFromMozillaCategory .product-title {
  margin: 4px 0 3px;
  background-repeat: no-repeat;
  background-size: contain;
  padding-inline-start: 30px;
  -moz-context-properties: fill;
  fill: currentColor;
}

#moreFromMozillaCategory .product-title:-moz-locale-dir(rtl) {
  background-position-x: right;
}

#moreFromMozillaCategory .product-description-box {
  padding-inline-start: 30px;
  margin: 2px 0;
}

#moreFromMozillaCategory .description {
  display: inline;
}

#moreFromMozillaCategory .small-button {
  margin-block: 14px 2px;
  margin-inline: 30px 0;
}

#firefox-mobile {
  background-image: url("chrome://browser/skin/device-phone.svg");
}

#mozilla-vpn {
  background-image: url("chrome://browser/skin/preferences/vpn-logo.svg");
}

#mozilla-monitor {
  background-image: url("chrome://browser/skin/preferences/monitor-logo.svg");
}

#firefox-relay {
  background-image: url("chrome://browser/skin/preferences/relay-logo.svg");
}

#solo-ai {
  background-image: url("chrome://browser/skin/preferences/solo-ai-logo.svg");
}

#mdn {
  background-image: url("chrome://browser/skin/preferences/mdn-logo.svg");
}

/*
 * The :not clause is required because hiding an element with `display: flex` only
 * partially hides it.
 */
.qr-code-box:not([hidden="true"]) {
  max-width: 320px; /* a unit better than px for this & next? */
  min-height: 204px;
  margin-block: 10px 0;
  margin-inline-start: 30px;
  background-color: var(--background-color-box-info);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border-radius: var(--border-radius-small);
}

@media (forced-colors) {
  .qr-code-box:not([hidden="true"]) {
    border: 1px solid currentColor;
  }
}

.qr-code-box-image-wrapper {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
}

.qr-code-box-image {
  border-radius: var(--border-radius-small);
  padding: 2px;
  width: 80px;
  flex: 0 0 auto;
  -moz-context-properties: fill;
  fill: currentColor;
}

.qr-code-box-logo {
  height: 18px;
  position: absolute;
}

.qr-code-title-label {
  flex: 1 1 auto;
}

.qr-code-box-title {
  font-size: 0.87em;
  font-weight: normal;

  text-align: center;

  margin-block: 20px 0;
  margin-inline: 40px;
}

.simple .qr-code-box-title {
  margin-block: 0;
  width: 296px;
}

.simple .qr-code-box {
  padding-inline: var(--space-xlarge);
  padding-block: 20px;
}

.simple .qr-code-box-image {
  padding: 10px;
}

#moreFromMozillaCategory .qr-code-link {
  font-size: 0.87em;
}

@media (prefers-color-scheme: dark) {
  .qr-code-box:not([hidden="true"]) {
    background-color: rgba(91, 91, 102, 0.45);
  }

  .qr-code-box-title {
    color: #fbfbfe;
  }
}

#webAppearanceGroup .description-deemphasized {
  margin-block-end: var(--space-large);
}

/** SRD web-appearance-chooser control START **/
.appearance-chooser-item {
  flex: 1;

  &::part(image) {
    width: 54px;
    box-shadow: var(--box-shadow-card);
    margin-block: var(--space-medium);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-small);
  }

  &:dir(rtl)::part(image) {
    transform: scaleX(-1);
  }
}
/** SRD web-appearance-chooser control END **/

/** SRD rows control for Homepage START **/
setting-group[groupid="homepage"] {
  --select-max-width: fit-content;
  --select-min-width: 15em;
}
/** SRD rows control for Homepage END **/

/** SRD rows control for New Tab START **/
setting-group[groupid="home"] {
  --select-max-width: 17rem;
}
/** SRD rows control for New Tab END **/

setting-group[groupid="aiFeatures"] {
  --select-max-width: fit-content;
}

setting-group[groupid="aiFeatures"] {
  --select-max-width: fit-content;

  > moz-card > moz-fieldset::part(inputs) {
    gap: var(--space-xlarge);
  }
}

#blockAiGroup {
  @media not (prefers-contrast) {
    --block-ai-background-color: light-dark(color-mix(in srgb, currentColor 3%, transparent), color-mix(in srgb, currentColor 5%, transparent));
    background-color: var(--block-ai-background-color);
  }
}

#aiBlockedMessage {
  margin: calc(-1 * var(--space-large));
  margin-top: var(--space-medium);
  --message-bar-border-radius: 0 0 var(--box-border-radius) var(--box-border-radius);
  border-bottom-color: transparent;
  border-inline-color: transparent;
}

#aiControlDefaultToggle {
  --toggle-width: 40px;
  --toggle-height: 20px;
}

.ai-controls-description {
  --ai-controls-description-image-margin: calc(64px + var(--space-large));
  --ai-controls-description-background-color: light-dark(var(--color-violet-0), var(--color-violet-90));
  anchor-name: --ai-controls-description;

  @media not (forced-colors) {
    --card-background-color: var(--ai-controls-description-background-color);
  }

  > p {
    margin: 0;
    margin-inline-end: var(--ai-controls-description-image-margin);
  }

  > img {
    position: fixed;
    position-anchor: --ai-controls-description;
    inset-block-end: anchor(end);
    inset-inline-end: anchor(end);
    margin-inline-end: var(--space-large);
  }
}

setting-group[groupid="aiStatesDescription"] {
  p,
  ul {
    margin: 0;
  }
}

#translations-manage-install-list {
  height: 220px;
  overflow: auto;
  background-color: var(--background-color-box);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-small);
  resize: vertical;
  margin: 4px 0;
}

.translations-manage-language:first-child {
  border-bottom: 1px solid var(--border-color);
  padding: 8px;
  margin-bottom: 8px;
}

.translations-manage-language {
  align-items: center;
  padding: 0 8px;
}

.translations-manage-language > label {
  flex: 1;
  margin: 0 15px;
}

#translations-manage-error {
  color: var(--text-color-error);
  margin: var(--space-large) 0;
}

.translations-download-language-error {
  background-color: var(--background-color-critical);
}

.hidden-category {
  display: none;
}
/* Platform-specific tweaks & overrides */

@media (-moz-platform: macos) {
  tabpanels {
    padding: 20px 7px 7px;
  }

  #browserUseCurrent,
  #browserUseBookmark,
  #browserUseBlank {
    margin-top: 10px;
  }

  #privacyPrefs {
    padding: 0 4px;
  }

  #privacyPrefs > tabpanels {
    padding: 18px 10px 10px;
  }

  #OCSPDialogPane {
    font: message-box !important;
  }

  /**
   * Update Preferences
   */
  #autoInstallOptions {
    margin-inline-start: 20px;
  }

  .updateControls {
    margin-inline-start: 10px;
  }
}

@media (-moz-platform: linux) {
  .treecol-sortdirection {
    /* override the Linux only toolkit rule */
    appearance: none;
  }
}

.section-heading,
.section-description {
  margin: 0 0 var(--space-small);
}

.subsection-heading {
  margin-bottom: var(--space-small);
}

.section-header-last {
  margin: 0 0 var(--space-large);
}

.search-header:has(.section-heading) {
  margin: 0;
}

/* Styles for the "sponsors support our mission" message and link on the Home tab */
.mission-message {
  margin-block-start: var(--space-large);

  > a {
    font-size: var(--font-size-small);
  }
}

#dohProviderSelect {
  --select-max-width: 235px;
}

#browserContainersbox moz-message-bar {
  margin-block-start: 0;
}

#etpBannerEl {
  border-radius: var(--border-radius-large);
  background-clip: content-box;
  background-image:
    url("chrome://browser/content/preferences/etp-advanced-banner.svg"),
    radial-gradient(94.12% 34.67% at 50% 50%, rgba(159, 116, 255, 0.5) 0%, rgba(159, 116, 255, 0) 100%), linear-gradient(135deg, #592acb 0%, #ab43e7 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 128px;
}

#etpLevelWarning {
  --promo-image-position: top;
}

#etpResetButtonGroup {
  display: flex;
  gap: var(--space-small);
}

#addresses-list-header,
#payments-list-header {
  --box-label-font-weight: var(--heading-font-weight);
}

.box-header-bold {
  --box-label-font-weight: var(--heading-font-weight);
}
PK