path: root/browser/themes/shared/urlbarView.css

/* 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://browser/skin/urlbar-dynamic-results.css");

@namespace html url("http://www.w3.org/1999/xhtml");

:root {
  --autocomplete-popup-highlight-background: SelectedItem;
  --autocomplete-popup-highlight-color: SelectedItemText;

  --urlbar-popup-action-color: hsl(178, 100%, 28%);

  --urlbarView-action-slide-in-distance: 200px;

  --urlbarView-row-gutter: 2px;

  --urlbarView-item-inline-padding: var(--urlbar-icon-padding);
  --urlbarView-favicon-width: 16px;
  --urlbarView-icon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline));

  --urlbarView-result-button-size: 24px;
  --urlbarView-result-button-background-opacity: 60%;
  --urlbarView-result-button-selected-color: var(--toolbar-field-focus-color);
  --urlbarView-result-button-selected-background-color: color-mix(in srgb, var(--toolbar-field-focus-background-color) var(--urlbarView-result-button-background-opacity), transparent);
  --urlbarView-result-button-hover-color: var(--toolbar-field-focus-background-color);
  --urlbarView-result-button-hover-background-color: color-mix(in srgb, var(--toolbar-field-focus-color) var(--urlbarView-result-button-background-opacity), transparent);
}

:root:-moz-lwtheme {
  --urlbar-popup-action-color: rgb(91,91,102);
  --urlbar-popup-url-color: rgb(0,97,224);
  /* Fallback colours for when theme authors don't define lwtheme variables. */
  --autocomplete-popup-highlight-background: rgb(0, 99, 255);
  --autocomplete-popup-highlight-color: white;
}

:root[lwt-toolbar-field-focus-brighttext] {
  --urlbar-popup-url-color: var(--lwt-brighttext-url-color);
  --urlbar-popup-action-color: #30e60b;
}

:root[lwt-toolbar-field-brighttext] {
  --autocomplete-popup-highlight-background: rgb(0, 99, 225);
}

:root[lwt-toolbar-field-focus-brighttext] {
  --urlbar-popup-action-color: rgb(191,191,201);
}

@media (prefers-contrast) {
  :root {
    --urlbarView-result-button-background-opacity: 100%;
  }
}

:root:-moz-locale-dir(rtl) {
  --urlbarView-action-slide-in-distance: -200px;
}

.urlbarView {
  /* Don't handle window drag events in case we are overlapping a toolbar */
  -moz-window-dragging: no-drag;

  display: block;
  text-shadow: none;
  overflow: clip;
  margin-inline: calc(5px + var(--urlbar-container-padding));
  width: calc(100% - 2 * (5px + var(--urlbar-container-padding)));
  /* Match urlbar-background's border. */
  border-inline: 1px solid transparent;
}

.urlbarView-body-inner {
  width: calc(100% + 2 * var(--urlbarView-row-gutter));
  margin-inline: calc(-1 * var(--urlbarView-row-gutter));
}

#urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner {
  border-top: 1px solid var(--autocomplete-popup-separator-color);
}

.urlbarView-results {
  padding-block: 4px;
  white-space: nowrap;
}

/* Vertically center the one-offs when no results are present. */
.urlbarView[noresults] > .urlbarView-body-outer > .urlbarView-body-inner > .urlbarView-results {
  padding-block: 0;
}

.urlbarView-row {
  display: flex;
  align-items: center;
  fill: currentColor;
  fill-opacity: var(--urlbar-icon-fill-opacity);

  /* Use a transparent border rather than margin such that the view's entire
     hover area is contiguous and a row is always hovered as the user moves the
     mouse across rows, even though each row's highlighted area is smaller. */
  border: var(--urlbarView-row-gutter) solid transparent;
  border-radius: calc(var(--urlbarView-row-gutter) + var(--toolbarbutton-border-radius));
  background-clip: padding-box;
}

.urlbarView-row[row-selectable]:not([selected]):hover {
  background-color: var(--autocomplete-popup-hover-background);
}

.urlbarView-row[selected] {
  background-color: var(--autocomplete-popup-highlight-background);
  color: var(--autocomplete-popup-highlight-color);
}

:root:not([uidensity=compact]) .urlbarView-row:not([type=tip], [type=dynamic]) {
  min-height: 32px;
}

:root[uidensity=touch] .urlbarView-row:not([type=tip], [type=dynamic]) {
  padding-block: 11px;
}

.urlbarView-row-inner {
  display: inline-flex;
  flex: 1 1;
  flex-wrap: nowrap;
  overflow: hidden;
  padding-inline: var(--urlbarView-item-inline-padding);
  padding-block: 6px;
}

:root:not([uidensity=compact]) .urlbarView-row-inner {
  min-height: 20px; /* row min-height 32px - (2 * padding-block 6px) */
}

.urlbarView-row-inner,
.urlbarView-no-wrap {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: start;
}

.urlbarView-no-wrap {
  display: inline-flex;
  max-width: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}

.urlbarView-url {
  flex-grow: 1;
  flex-shrink: 1;
}

.urlbarView[actionoverride] .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap,
.urlbarView-row[has-url]:not([type$=tab]) > .urlbarView-row-inner > .urlbarView-no-wrap,
.urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap {
  /* We prioritize icons + title + action over the url, so they can grow freely,
     but the url should never disappear when it's visible */
  flex-shrink: 0;
  max-width: calc(70% - 2 * (var(--urlbarView-favicon-width) + (6px + 2px)));
}

/* Wrap the url to a second line when the window is narrow. Do not wrap when the
   window is also short, because fewer results will be shown. */
@media screen and (min-height: 600px) {
  .urlbarView-results[wrap] > .urlbarView-row:where(:not([rich-suggestion=with-icon])) > .urlbarView-row-inner {
    flex-wrap: wrap;
  }
  .urlbarView-results[wrap] > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap {
    max-width: 100% !important;
    flex-basis: 100%;
  }
  .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url,
  .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-url {
    margin-top: 2px;
  }
  /* urlbarView-url is forced to be LTR for RTL locales, so set the padding based on the browser's directionality. */
  .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) {
    padding-left: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width));
  }
  .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(rtl) {
    padding-right: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width));
  }
  /* When rich suggestions are enabled the space for the icon increases to allow for larger icons */
  .urlbarView-results[wrap]>.urlbarView-row[rich-suggestion=no-icon][has-url]>.urlbarView-row-inner>.urlbarView-url {
    margin-inline-start: var(--urlbarView-icon-margin-end);
  }
  /* Note: switchtab entries show the url only in override mode,
     remotetab and sponsored ones only when selected or :hover. */
  .urlbarView[actionoverride] .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
  .urlbarView-results[wrap] > .urlbarView-row[has-url]:not([type$=tab], [sponsored]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
  .urlbarView-results[wrap] > .urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
  .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap > .urlbarView-title-separator,
  .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator {
    display: none;
  }
  .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap {
    flex-wrap: wrap;
  }
  .urlbarView-results[wrap] > .urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
    flex-basis: 100%;
    margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width));
  }

  .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top {
    flex-wrap: wrap;
  }
  .urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap {
    flex-basis: 100%;
  }
}

.urlbarView-overflowable,
.urlbarView-url {
  overflow: hidden;
}

.urlbarView-overflowable[overflow],
.urlbarView-url[overflow] {
  mask-image: linear-gradient(to left, transparent, black 2em);
}

.urlbarView-overflowable[overflow]:not(.urlbarView-title[isurl]):-moz-locale-dir(rtl) {
  mask-image: linear-gradient(to right, transparent, black 2em);
}

.urlbarView-title[isurl]:-moz-locale-dir(rtl),
.urlbarView-url:-moz-locale-dir(rtl) {
  direction: ltr !important;
}

.urlbarView-url:-moz-locale-dir(rtl) {
  /* .urlbarView-url can grow due to `flex-grow: 1`, so without `text-align:
     right`, the URL text would be left-aligned within .urlbarView-url for RTL
     due to the `direction: ltr` rule.  .urlbarView-title does not have this
     problem since it does not have flex. */
  text-align: right;
}

/* Rich Suggestions */

.urlbarView-row[rich-suggestion=with-icon] > .urlbarView-row-inner > .urlbarView-favicon {
  width: 28px;
  height: 28px;
  margin-inline-end: 8px;
}

.urlbarView-row[rich-suggestion=with-icon] > .urlbarView-row-inner {
  padding-block: 4px;
  flex-wrap: nowrap;
}

.urlbarView-row[rich-suggestion=no-icon]:not([firefox-suggest-sponsored]) .urlbarView-favicon {
  margin-inline: 4px 16px;
}

.urlbarView-row[rich-suggestion=with-icon] > .urlbarView-row-inner > .urlbarView-no-wrap {
  display: grid;
  grid-template-columns: repeat(3, min-content);
  align-items: center;
  flex-shrink: 1;
}

.urlbarView-row[rich-suggestion=with-icon]:not(:hover) .urlbarView-action {
  visibility: collapse;
}

.urlbarView-description {
  /* We want the description to be last visually but to be after the title
     in the screenreader */
  order: 2;
  grid-area: 2 / 1 / 3 / 4;
}

/* Favicon */

.urlbarView-favicon {
  width: var(--urlbarView-favicon-width);
  height: var(--urlbarView-favicon-width);
  margin-inline-end: var(--urlbarView-icon-margin-end);
  background-repeat: no-repeat;
  background-size: contain;
  object-fit: contain;
  flex-shrink: 0;
  -moz-context-properties: fill, fill-opacity;
}

.urlbarView-row[tail-suggestion] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
  visibility: hidden;
}

.urlbarView-row[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
  /* We use the URL color for this icon to inherit its accessibility
     properties, like adapting to high contrast modes. We also want to ensure
     contrast from the result highlight. */
  color: var(--urlbar-popup-url-color);
  -moz-context-properties: fill;
}

/* Type icon */

.urlbarView-type-icon {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-top: var(--urlbarView-favicon-width);
  margin-inline-start: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  -moz-context-properties: fill, stroke;
  stroke: var(--toolbar-field-focus-background-color);
}

/* Favicon badges have this priority: pinned > bookmark. */

.urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  background-image: url(chrome://browser/skin/bookmark-12.svg);
  fill: var(--toolbarbutton-icon-fill-attention);
}

.urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  background-image: url(chrome://browser/skin/pin-12.svg);
  fill: rgb(91,91,102);
}

:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  fill: rgb(251,251,254);
}

/* Buttons */

.urlbarView-button {
  display: inline-block;
  min-width: var(--urlbarView-result-button-size);
  min-height: var(--urlbarView-result-button-size);
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  margin-inline: 4px;
  -moz-context-properties: fill, fill-opacity;
  border-radius: 100%;
}

.urlbarView-button[selected] {
  outline: var(--focus-outline);
  outline-color: var(--autocomplete-popup-highlight-color);
  outline-offset: 1px;
}

.urlbarView-row:is([row-selectable]:hover, [selected]) > .urlbarView-button:not(:hover, [open]) {
  color: var(--urlbarView-result-button-selected-color);
  background-color: var(--urlbarView-result-button-selected-background-color);
}

.urlbarView-button:is(:hover, [open]) {
  color: var(--urlbarView-result-button-hover-color);
  background-color: var(--urlbarView-result-button-hover-background-color);
}

.urlbarView-button + .urlbarView-button {
  margin-inline-start: 0;
}

.urlbarView-button-block {
  background-image: url("chrome://browser/skin/thumb-down.svg");
}

.urlbarView-button-help {
  background-image: url("chrome://global/skin/icons/help.svg");
}

/* Result menu button */

.urlbarView-button-menu {
  background-image: url("chrome://global/skin/icons/more.svg");
  background-color: var(--button-bgcolor);
}

.urlbarView-results:not([disable-resultmenu-autohide]) > .urlbarView-row:not(:hover, [selected]) > .urlbarView-row-inner + .urlbarView-button-menu:not([open]):empty {
  display: none;
}

/* Labeled result menu button */

.urlbarView-results:not([wrap]) > .urlbarView-row > .urlbarView-button-menu:not(:empty) {
  display: inline-flex;
  align-items: center;
  border-radius: var(--urlbarView-result-button-size);
  padding-inline: 8px 26px;
  background-position-x: right 4px;
  font-size: 0.85em;
}

.urlbarView-results:not([wrap]) > .urlbarView-row > .urlbarView-button-menu:not(:empty):-moz-locale-dir(rtl) {
  background-position-x: left 4px;
}

.urlbarView-results[wrap] > .urlbarView-row > .urlbarView-button-menu:not(:empty) {
  /* Hide the label in narrow windows. */
  font-size: 0;
}

/* Button with label, e.g. tip button */

.urlbarView-button:not(:empty, .urlbarView-button-menu) {
  border-radius: var(--toolbarbutton-border-radius);
  padding: 7px;
  font-size: 0.93em;
  font-weight: 600;
  background-clip: padding-box;
  min-height: 16px;
  min-width: 8.75em;
  text-align: center;
  flex-basis: initial;
  flex-shrink: 0;
}

.urlbarView-button:not(:empty, :hover, .urlbarView-button-menu) {
  background-color: var(--button-bgcolor);
}

.urlbarView-button:not(:empty, .urlbarView-button-menu)[selected] {
  color: var(--button-primary-color);
  background-color: var(--button-primary-bgcolor);
  outline-offset: var(--focus-outline-offset);
}

.urlbarView-button:not(:empty, .urlbarView-button-menu)[selected]:hover {
  background-color: var(--button-primary-hover-bgcolor);
}

.urlbarView-button:not(:empty, .urlbarView-button-menu)[selected]:hover:active {
  background-color: var(--button-primary-active-bgcolor);
}

.urlbarView-button:not(:empty) + .urlbarView-button:empty {
  /* Add space between a labeled button followed by an unlabeled button. */
  margin-inline-start: 1.8em;
}

.urlbarView-button:not(:empty, .urlbarView-button-menu):last-child {
  /* Add space between a labeled button and the trailing edge of the panel. */
  margin-inline-end: 1.8em;
}

/* Tip rows */

.urlbarView-row[type=tip] {
  padding-block: 18px;
  border-radius: 0;
}

.urlbarView-row[type=tip]:not(:last-child) {
  border-bottom: 1px solid var(--autocomplete-popup-separator-color);
  margin-bottom: 4px;
}

.urlbarView-row[type=tip]:not(:first-child) {
  border-top: 1px solid var(--autocomplete-popup-separator-color);
  margin-top: 4px;
}

.urlbarView-row[type=tip] > .urlbarView-row-inner {
  min-height: 32px;

  /* Add space between the tip title (and the rest of row-inner) and its
     button. */
  margin-inline-end: 1.8em;
}

.urlbarView-row[type=tip]:not([tip-type=dismissalAcknowledgment]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
  width: 24px;
  height: 24px;
  margin-inline-end: 12px;
  flex-basis: 24px;
  flex-grow:  0;
}

.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-url {
  display: none;
}

.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title {
  white-space: normal;
}

.urlbarView-row[type=tip][tip-type=dismissalAcknowledgment] {
  padding-block: 6px;
}

/* Row label (a.k.a. group label) */

.urlbarView-row[label]::before {
  content: attr(label);
  display: block;
  /* Remove the label from the document flow so it doesn't affect the row
     selection and hover states. */
  position: absolute;
  /* `top` controls how far the label is from the main part of the row. */
  top: calc(-1.27em - 2px);
  margin-inline-start: var(--urlbarView-item-inline-padding);
  font-size: 0.8em;
  /* The color and opacity of labels is the same as the "This time, search with"
     text in the search shortcuts. See `.search-panel-header > label` in
     searchbar.css. */
  color: var(--toolbar-field-focus-color);
  opacity: 0.6;
  pointer-events: none;
}
:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[label]::before {
  /* Same as `.search-panel-header > label` in searchbar.css */
  opacity: 1;
}

.urlbarView-row[label] {
  position: relative;
  /* `margin-block-start` controls how far the main part of the row is from the
     main part of the previous row. */
  margin-block-start: calc(1.46em + 4px);
}

/* Feedback acknowledgment */

.urlbarView-row[feedback-acknowledgment]::after {
  content: attr(feedback-acknowledgment);
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0.72em;
  font-size: 0.85em;
  margin-inline-start: var(--urlbarView-item-inline-padding);
  padding-inline-start: calc(var(--urlbarView-favicon-width) + 6px);
  background-image: url("chrome://branding/content/icon32.png");
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: var(--urlbarView-favicon-width);
  min-height: var(--urlbarView-favicon-width);
}

.urlbarView-row[feedback-acknowledgment] {
  position: relative;
  padding-bottom: 1.94em;
}

/* Title */

.urlbarView-title {
  white-space: nowrap;
  /* Explicitly set line-height to avoid excessively tall rows if the title triggers use of
     fallback fonts with extreme metrics. */
  line-height: 1.4;
}

/* Tail suggestions */
.urlbarView-tail-prefix {
  display: none;
  justify-content: flex-end;
  white-space: pre;
}

.urlbarView-row[tail-suggestion] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-tail-prefix {
  display: inline-flex;
}

.urlbarView-tail-prefix > .urlbarView-tail-prefix-string {
  visibility: hidden;
}

.urlbarView-tail-prefix > .urlbarView-tail-prefix-char {
  position: absolute;
}

/* Title separator */

.urlbarView-title-separator::before {
  content: "\2014";
  margin: 0 .4em;
  opacity: 0.6;
}

.urlbarView-title:empty + .urlbarView-tags:empty + .urlbarView-title-separator {
  display: none;
}

/* URLs, action labels, tags */

.urlbarView-tags,
.urlbarView-url,
.urlbarView-title:not(:empty) ~ .urlbarView-action {
  font-size: .85em;
}

.urlbarView-title:not(:empty) ~ .urlbarView-action {
  color: var(--urlbar-popup-action-color);
}

.urlbarView-row[sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
  color: unset;
  opacity: .6;
}

.urlbarView-row[sponsored][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
.urlbarView-row[sponsored] > .urlbarView-row-inner[selected] > .urlbarView-no-wrap > .urlbarView-action {
  opacity: 1;
}

/* Firefox Suggest sponsored results */

.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner {
  /* 0px of top padding because the space between the favicon/title and the top
     edge of the row is determined by the favicon margin-top and we don't want
     any extra padding to complicate that. 1px of bottom padding so the bottom
     edge of the action isn't touching the bottom edge of the row. The space
     between the bottom edge of the favicon and the bottom edge of the row is
     determined by this + the action margin-top. */
  padding-block: 0 1px;
}

.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap {
  /* Wrap the action span onto a new row. */
  flex-wrap: wrap;
}

.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
  /* The favicon should be vertically centered in the row. The action span wraps
     below the favicon and title, leaving the favicon centered with the title,
     not the row, so we add margin-top. Normally there is 8x between the top
     edge of the favicon and the top edge of the row. Here 1em = 13.75px, so
     that's 8 / 13.75 =~ 0.58em. */
  margin-top: 0.58em;
}

.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title {
  /* The width of favicon + this title element + help icon is over than total
     displayed width, favicon and title will collapse as different row, the style
     will be broken. To avoid it, we specify the max displayable width for title
     explicitly. */
  flex-basis: calc(100% - var(--urlbarView-favicon-width) - var(--urlbarView-icon-margin-end));
  /* Move the title away from the action a little. This does not affect the
     height of the row. */
  margin-top: -0.3em;
}

.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
  flex-basis: 100%;
  margin-inline-start: calc(var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end));
  font-size: 0.73em;
  /* This value + the bottom padding control the space between the bottom edge
     of the favicon and the bottom edge of the row. The bottom padding is 1px,
     leaving 8px - 1px = 7px we need to make up here. Here 1em = 0.73 * 13.75 =~
     10px, so that's 7 / 10 = 0.7em. However, the action itself takes up some of
     that space, so it's not that simple. The value used here was arrived at by
     trial and error and is approximately 5px. */
  margin-top: -0.5em;
}

@media (prefers-reduced-motion: no-preference) {
  /* The slide-in effect is delayed ~100ms to reduce motion during result
     composition. We set opacity: 0 at the 0% keyframe to ensure the text is not
     seen by the user until after the delay. */
  @keyframes urlbarView-action-slide-in {
    0%, 28.6% {
      translate: var(--urlbarView-action-slide-in-distance);
      opacity: 0;
    }
    100% {
      translate: 0;
      opacity: 1;
    }
  }

  .urlbarView-results > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title:not(:empty) ~ .urlbarView-action[slide-in] {
    animation-name: urlbarView-action-slide-in;
    animation-duration: 350ms;
    animation-timing-function: var(--animation-easing-function);
  }
}

.urlbarView-url {
  color: var(--urlbar-popup-url-color);
  /* Increase line-height to avoid cutting overhanging glyphs due to masking on
     the element */
  line-height: 1.4;
}

.urlbarView-row:is(:hover, [selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-url,
.urlbarView-row[type=tabtosearch][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
  color: inherit;
}

.urlbarView-row:is([type=remotetab], [sponsored]):not([selected], :hover) > .urlbarView-row-inner > .urlbarView-url,
.urlbarView-row:is([type=search], [restyled-search]):not([selected], [show-action-text], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
.urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-url {
  /* Use visibility:collapse instead of display:none since the latter can
     confuse the overflow state of title and url elements when their content
     changes while they're hidden. */
  visibility: collapse;
}

.urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
.urlbarView-row:is([type=search], [restyled-search]):not([selected], [rich-selection], [show-action-text], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
.urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
.urlbarView-row[firefox-suggest-sponsored] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
.urlbarView[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
  display: none;
}

/* Switch-to-tab action text is styled as a chiclet. */
.urlbarView-row:is([type=switchtab], [type=remotetab]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
  color: var(--urlbar-box-text-color);
  background-color: var(--urlbar-box-focus-bgcolor);
  border-radius: var(--toolbarbutton-border-radius);
  padding: 6px 8px;
  margin-block: -6px;
  margin-inline-start: 8px;
}

:root[uidensity=compact] .urlbarView-row:is([type=switchtab], [type=remotetab]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
  padding: 3px 6px;
  margin-block: -3px;
}

.urlbarView-row:is([type=switchtab], [type=remotetab]):is([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
  color: var(--urlbarView-result-button-selected-color);
  background-color: var(--urlbarView-result-button-selected-background-color);
}

.urlbarView-row[type=remotetab]:not([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before,
.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before {
  /* We make the title separator transparent so it stays in the accessibility
     tree. We want screen readers to pause between the result title and the
     switch-to-tab action text. */
  opacity: 0;
  /* -1em for the width of the \2014 character. -.4em to offset the
     margin-inline-start already set on this element. */
  margin-inline-end: -1.4em;
}

/* Tags */

.urlbarView-tags {
  display: flex;
  /* Increase line-height to avoid cutting overhanging glyphs due to masking on
     the element */
  line-height: 1.4;
}

.urlbarView-tag {
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  padding: 0 4px;
  margin-inline-start: .4em;
  border-radius: 4px;
}

/* Best match */

.urlbarView-row[type=bestmatch] > .urlbarView-row-inner {
  align-items: center;
  justify-content: start;
}

.urlbarView-row[type=bestmatch] > .urlbarView-row-inner,
.urlbarView-results[wrap] > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner {
  flex-wrap: nowrap;
}

.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-favicon {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 2px;
}

.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}

.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: start;
}

.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  flex-shrink: 0;
  min-width: 0;
}

.urlbarView-results:not([wrap]) > .urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-top > .urlbarView-row-body-top-no-wrap {
  /* Limit the title (which is inside .urlbarView-row-body-top-no-wrap) to 70%
     of the width so the URL is never completely hidden. */
  max-width: 70%;
}

.urlbarView-row[type=bestmatch] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-bottom {
  font-size: 0.73em;
  opacity: 0.6;
}

.urlbarView-row[type=bestmatch][selected] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-bottom {
  opacity: 1;
}

/* Search one-offs */

#urlbar .search-one-offs:not([hidden]) {
  display: flex;
  align-items: start;
  padding-block: 10px;
  flex-wrap: wrap;
}

.urlbarView:not([noresults]) > .search-one-offs:not([hidden]) {
  border-top: 1px solid var(--autocomplete-popup-separator-color);
}

:root[uidensity=touch] #urlbar .search-one-offs:not([hidden]) {
  padding-block: 15px;
}

#urlbar .search-panel-one-offs-container {
  /* Make sure horizontally we can fit four buttons, empty space, settings. */
  min-width: calc(4 * /* one-off with end margin */ 40px + /* settings with start margin */ 56px);
}

#urlbar .search-panel-header {
  padding: 0;
  min-height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#urlbar .search-panel-one-offs-header-label {
  white-space: nowrap;
  margin: 0;
  padding-inline: var(--urlbarView-item-inline-padding) 18px;
}

#urlbar .searchbar-engine-one-off-item {
  min-width: 28px;
  height: 28px;
  margin-inline: 0 12px;
  border-radius: var(--toolbarbutton-border-radius);
}

#urlbar .searchbar-engine-one-off-item:last-child {
  /* This applies to both the last one-off and the compact settings button */
  margin-inline-end: 0;
}

#urlbar .search-setting-button {
  /* Force empty space before the button */
  margin-inline-start: calc(32px - /* settings start padding */ 8px );
}

.urlbarView-row[source="bookmarks"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
#urlbar-engine-one-off-item-bookmarks {
  list-style-image: url("chrome://browser/skin/bookmark.svg");
  fill: var(--toolbarbutton-icon-fill-attention);
  fill-opacity: 1;
  -moz-context-properties: fill, fill-opacity;
}

.urlbarView-row[source="tabs"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
#urlbar-engine-one-off-item-tabs {
  list-style-image: url("chrome://browser/skin/tab.svg");
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: var(--urlbar-icon-fill-opacity);
}

.urlbarView-row[source="history"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
#urlbar-engine-one-off-item-history {
  list-style-image: url("chrome://browser/skin/history.svg");
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: var(--urlbar-icon-fill-opacity);
}

.urlbarView-row[source="actions"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
#urlbar-engine-one-off-item-actions {
  list-style-image: url("chrome://browser/skin/quickactions.svg");
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: var(--urlbar-icon-fill-opacity);
}

/**
 * We remove the blue fill from the bookmark icon when it is selected. We use
 * a blue color as the selection background-color in some instances (Linux with
 * blue system color; fallback for third-party themes) and we want to ensure
 * contrast.
 */
.urlbarView-row[source="bookmarks"][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
#urlbar-engine-one-off-item-bookmarks[selected] {
  fill: currentColor;
  fill-opacity: var(--urlbar-icon-fill-opacity);
}

/* search bar popup */

#PopupSearchAutoComplete {
  --panel-color: var(--toolbar-field-focus-color);
  --panel-background: var(--toolbar-field-focus-background-color);
  --panel-border-color: var(--arrowpanel-border-color);
}

#PopupSearchAutoComplete::part(content)  {
  --panel-padding: var(--panel-subview-body-padding);
  /* NOTE(emilio): Once bug 1551637 is fixed we don't need to use block layout
   * for this (though it doesn't really hurt) */
  display: block;
}

@media not (prefers-contrast) {
  #PopupSearchAutoComplete::part(content)  {
    /* Remove the top border since the panel is flush with the input. */
   border-top-width: 0;
  }
}

#PopupSearchAutoComplete .autocomplete-richlistitem[selected] {
  background: var(--autocomplete-popup-highlight-background);
  color: var(--autocomplete-popup-highlight-color);
}