%if 0
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%endif

%filter substitution
%define urlbarViewPadding 4px
%define urlbarViewFaviconWidth 16px
%define urlbarViewIconMarginEnd (var(--urlbar-icon-padding) + var(--identity-box-margin-inline))

%include ../shared/urlbar/dynamicResults.inc.css

:root {
  --autocomplete-popup-background: var(--arrowpanel-background);
  --autocomplete-popup-color: var(--arrowpanel-color);
  --autocomplete-popup-highlight-background: Highlight;
  --autocomplete-popup-highlight-color: HighlightText;

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

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

  --urlbarView-item-inline-padding: calc(var(--urlbar-icon-padding) / 2 + 3px);
}

@media not (-moz-proton) {
:root {
  --urlbar-popup-url-color: hsl(210, 77%, 47%);
}
} /*** END !proton ***/

@media (-moz-proton) {
:root:-moz-lwtheme {
  --urlbar-popup-url-color: rgb(0,97,224);
}
} /*** END proton ***/

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

@media (-moz-proton) {
:root {
  --urlbarView-item-inline-padding: var(--urlbar-icon-padding);
}

:root:-moz-lwtheme {
  --urlbar-popup-action-color: rgb(91,91,102);
  /* 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-brighttext] {
  --autocomplete-popup-highlight-background: rgb(0, 99, 225);
}

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

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

@media not (-moz-proton) {
.urlbarView {
  margin-inline: calc(4px + var(--identity-box-margin-inline));
  width: calc(100% - 2 * (4px + var(--identity-box-margin-inline)));
}
/* If the view is open, offset the toolbar overlap so the view's top border
   aligns with the toolbar. */
#urlbar[open] > .urlbarView {
  margin-block-start: -@urlbarBreakoutExtend@;
}
} /*** END !proton ***/

.urlbarView-body-inner {
  width: 100%;
}

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

.urlbarView-results {
  padding-block: @urlbarViewPadding@;
  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 {
  fill: currentColor;
  fill-opacity: var(--urlbar-icon-fill-opacity);
  padding-block: 3px;
}

@media not (-moz-proton) {
:root[uidensity=compact] .urlbarView-row {
  padding-block: 2px;
}
} /*** END !proton ***/

@media (-moz-proton) {
.urlbarView-row {
  padding-block: 2px;
}

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

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

.urlbarView-row-inner {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  border-radius: 2px;
  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[has-help] > .urlbarView-row-inner {
  display: inline-flex;
  vertical-align: middle;
  /* For rows with a help button, row-inner is the main selectable part of the
     row, and it takes up the entire row width except for the help button. */
  width: calc(100% - 56px);
}

@media (-moz-proton) {
.urlbarView-row-inner {
  border-radius: var(--toolbarbutton-border-radius);
}
} /*** END proton ***/


.urlbarView-row[type=tip] {
  padding-block-start: 18px;
  /* Compensating for the 16px bottom margin on the tip elements. */
  padding-block-end: calc(18px - 16px);
  padding-inline-end: calc(@urlbarViewIconMarginEnd@);
}

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

@media (-moz-proton) {
.urlbarView-row-inner,
.urlbarView-no-wrap {
  align-items: center;
}
} /*** END proton ***/

.urlbarView-no-wrap {
  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 * (@urlbarViewFaviconWidth@ + (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 > .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 {
    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) + @urlbarViewFaviconWidth@);
  }
  .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) + @urlbarViewFaviconWidth@);
  }
  /* 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=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) + @urlbarViewFaviconWidth@);
  }
}

/* We should always wrap tip results at narrow widths regardless of screen
   height. Unlike regular results, unwrapped tips are taller than wrapped
   tips. */
.urlbarView-results[wrap] > .urlbarView-row[type=tip] > .urlbarView-row-inner {
  flex-wrap: wrap;
}

.urlbarView-row:not([type=tip], [type=dynamic]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title[overflow],
.urlbarView-tags[overflow],
.urlbarView-url[overflow] {
  mask-image: linear-gradient(to left, transparent, black 2em);
}

.urlbarView-row:not([type=tip], [type=dynamic]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title[overflow]:not([isurl]):-moz-locale-dir(rtl),
.urlbarView-tags[overflow]:-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;
}

.urlbarView-row:not([type=tip], [type=dynamic], [has-help]):hover > .urlbarView-row-inner,
.urlbarView-row[has-help] > .urlbarView-row-inner:not([selected]):hover {
  background-color: var(--autocomplete-popup-hover-background);
}

.urlbarView-row:not([type=tip], [type=dynamic])[selected] > .urlbarView-row-inner,
.urlbarView-row-inner[selected] {
  background-color: var(--autocomplete-popup-highlight-background);
  color: var(--autocomplete-popup-highlight-color);
}

/* Favicon */

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

@media not (-moz-proton) {
.urlbarView-favicon {
  /* 2px is from identity-block.inc.css */
  margin-inline-end: calc(var(--urlbar-icon-padding) / 2 + var(--identity-box-margin-inline) + 2px);
}
} /*** END !proton ***/

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

.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-bottom: -4px;
  margin-inline-start: 8px;
  align-self: end;
  background-repeat: no-repeat;
  background-size: contain;
  -moz-context-properties: fill, stroke;
  stroke: Field;
}

.urlbarView-type-icon:-moz-lwtheme {
  stroke: var(--lwt-toolbar-field-focus);
}

/* 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);
}

@media not (-moz-proton) {
.urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  color: #0060df; /* Blue-60 */
}

.urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  color: #b1b1b3; /* Grey-40 */
}

.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon,
.urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  background-image: url(chrome://browser/skin/tab-12.svg);
  color: #008eaf; /* Teal-70 */
  stroke: #fff;
}

:root[lwt-toolbar-field-focus-brighttext] .urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon,
:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  color: #00c8d7; /* Teal-60 */
  stroke: #38383d; /* Grey-70 */
}

:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  color: #0a84ff; /* Blue-50 */
  stroke: #38383d; /* Grey-70 */
}

:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  color: #d7d7db; /* Grey-30 */
  stroke: #38383d; /* Grey-70 */
}
} /*** END !proton ***/


/* Help button */

/* Help buttons are ghost buttons. */
.urlbarView-help {
  display: inline-block;
  min-width: 16px;
  min-height: 16px;
  vertical-align: middle;
  background-image: url("chrome://global/skin/icons/help.svg");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  padding: 8px;
  margin-inline-start: 8px;
  margin-inline-end: 4px;
  fill-opacity: 1;
  -moz-context-properties: fill, fill-opacity;
}

@media (-moz-proton) {
.urlbarView-help {
  border-radius: var(--toolbarbutton-border-radius);
}
} /*** END proton ***/

.urlbarView-help[selected] {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.urlbarView-help:hover {
  background-color: var(--button-hover-bgcolor);
}

.urlbarView-help:hover:active {
  background-color: var(--button-active-bgcolor);
}

/* Tip rows */

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

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

.urlbarView-row[type=tip] > .urlbarView-row-inner {
  display: flex;
  align-items: center;
  min-height: 32px;
  width: 100%;
}

/* For tips, give the title some bottom margin so that when the window is narrow
   and the buttons wrap below it, there's space between it and the buttons.  We
   then need to give the same bottom margin to the other tip elements so that
   they all remain vertically aligned. */
.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-favicon,
.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-title,
.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-help,
.urlbarView-tip-button {
  margin-block-end: 16px;
}

.urlbarView-tip-button,
.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-help {
  min-height: 16px;
  padding: 7px;
}

/* The tip button is a Photon default button when unfocused and a
   primary button in all other states. */
.urlbarView-tip-button {
  border-radius: var(--toolbarbutton-border-radius);
  font-size: 0.93em;
  background-color: var(--button-bgcolor);
  font-weight: 600;
  background-clip: padding-box;
  min-width: 8.75em;
  text-align: center;
  flex-basis: initial;
  flex-shrink: 0;
  margin-inline-end: 4px;
}

@media (-moz-proton) {
.urlbarView-tip-button {
  border-radius: var(--toolbarbutton-border-radius);
}
} /*** END proton ***/

.urlbarView-tip-button:hover {
  background-color: var(--button-hover-bgcolor);
}

.urlbarView-tip-button:hover:active {
  background-color: var(--button-active-bgcolor);
}

.urlbarView-tip-button[selected] {
  color: var(--button-primary-color);
  background-color: var(--button-primary-bgcolor);
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.urlbarView-tip-button[selected]:hover {
  background-color: var(--button-primary-hover-bgcolor);
}

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

.urlbarView-tip-button-spacer {
  flex-basis: 48px;
  flex-grow: 1;
  flex-shrink: 1;
}

.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: -1.27em;
  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.inc.css. */
  opacity: 0.6;
  pointer-events: none;
}
:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[label]::before {
  /* Same as `.search-panel-header > label` in searchbar.inc.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: 1.46em;
}

/* Title */

.urlbarView-title {
  overflow: hidden;
  white-space: nowrap;
}

.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-title {
  white-space: normal;
  /* Give the tip title appropriate flex so that when the window is narrow, the
     tip buttons wrap around under it.  We want the icon and title to remain on
     one line.  So make the title's flex-basis the width of the parent minus the
     width of the icon. */
  flex-basis: calc(100% - /* .urlbarView-row-inner padding-inline-start */ 6px - /* .urlbarView-favicon width */ 24px - /* .urlbarView-favicon margin-inline-end */ 12px);
  flex-grow: 1;
  flex-shrink: 1;
}

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

@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 {
  overflow: hidden;
  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[selected] > .urlbarView-row-inner > .urlbarView-no-wrap >.urlbarView-action,
.urlbarView-row:hover > .urlbarView-row-inner > .urlbarView-no-wrap >.urlbarView-action,
.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-url,
.urlbarView-row-inner[selected] > .urlbarView-no-wrap >.urlbarView-action,
.urlbarView-row-inner:hover > .urlbarView-no-wrap >.urlbarView-action,
.urlbarView-row-inner[selected] > .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], [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[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
  display: none;
}

@media (-moz-proton) {
/* 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 {
  background-color: var(--urlbar-box-bgcolor);
  border-radius: var(--toolbarbutton-border-radius);
  padding: 6px 8px;
  margin-block: -6px;
  margin-inline-start: 8px;
  color: inherit;
}

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

/* On hover and selected the chiclet background would fade into the row style,
   thus we invert the background, using the panel color, instead. */
.urlbarView-row:is([type=switchtab], [type=remotetab]):is([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
  background-color: Field;
  color: FieldText;
}
.urlbarView-row:is([type=switchtab], [type=remotetab]):is([selected], :hover) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action:-moz-lwtheme {
  background-color: var(--lwt-toolbar-field-focus);
  color: var(--lwt-toolbar-field-focus-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 {
  overflow: hidden;
  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;
}
} /*** END !proton ***/

/* Search one-offs */

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

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

@media (-moz-proton) {
#urlbar .search-one-offs:not([hidden]) {
  padding-block: 10px;
}

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

#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;
}

@media (-moz-proton) {
#urlbar .searchbar-engine-one-off-item {
  border-radius: var(--toolbarbutton-border-radius);
}
} /*** END proton ***/

#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-compact {
  /* Force empty space before the button */
  margin-inline-start: calc(32px - /* settings start padding */ 8px );
}

#urlbar .search-one-offs-spacer {
  flex-grow: 1;
}

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

/**
 * 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);
}

@media not (-moz-proton) {
.urlbarView-row[source="bookmarks"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
#urlbar-engine-one-off-item-bookmarks {
  fill: #0060df; /* Blue-60 */
}

.urlbarView-row[source="tabs"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
#urlbar-engine-one-off-item-tabs {
  fill: #008eaf; /* Teal-70 */
  fill-opacity: 1;
}

:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[source="bookmarks"]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
:root[lwt-toolbar-field-focus-brighttext] #urlbar-engine-one-off-item-bookmarks:not([selected]) {
  fill: #0a84ff; /* Blue-50 */
}

:root[lwt-toolbar-field-focus-brighttext] .urlbarView-row[source="tabs"]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
:root[lwt-toolbar-field-focus-brighttext] #urlbar-engine-one-off-item-tabs:not([selected]) {
  fill: #00c8d7; /* Teal-60 */
}
} /*** END !proton ***/

/* search bar popup */

#PopupSearchAutoComplete {
  --panel-background: var(--autocomplete-popup-background);
  --panel-color: var(--autocomplete-popup-color);
  --panel-border-color: var(--arrowpanel-border-color);
}

@media (-moz-proton) {
#PopupSearchAutoComplete::part(content)  {
  /* Remove the top border since the panel is flush with the input. */
  border-top-width: 0;
  --panel-padding: var(--panel-subview-body-padding);
}

#PopupSearchAutoComplete:-moz-lwtheme {
  --panel-color: var(--lwt-toolbar-field-focus-color);
  --panel-background: var(--lwt-toolbar-field-focus);
}
} /*** END proton ***/

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