fune/browser/themes/shared/urlbarView.inc.css

%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-result-hover-bgcolor: var(--arrowpanel-dimmed);
  --urlbar-popup-action-color: hsl(178, 100%, 28%);

  /* Colors copied from in-content button styling */
  --urlbarView-button-background: rgba(12, 12, 13, 0.1);
  --urlbarView-button-background-hover: rgba(12, 12, 13, 0.2);
  --urlbarView-button-background-active: rgba(12, 12, 13, 0.3);
  --urlbarView-primary-button-text: white;
  --urlbarView-primary-button-background: #0060df;
  --urlbarView-primary-button-background-hover: #003eaa;
  --urlbarView-primary-button-background-active: #002275;
  --urlbarView-action-slide-in-distance: 200px;

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

@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
:root {
  --urlbar-popup-url-color: hsl(210, 77%, 47%);
}
} /*** END !proton ***/

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
: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;

  /* Colors copied from in-content button styling */
  --urlbarView-button-background: rgba(249, 249, 250, 0.24);
  --urlbarView-button-background-hover: rgba(249, 249, 250, 0.15);
  --urlbarView-button-background-active: rgba(249, 249, 250, 0.2);
}

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
:root {
  --urlbarView-item-inline-padding: var(--urlbar-icon-padding);
}

/* Fallback colours for when theme authors don't define lwtheme variables. */
:root:-moz-lwtheme {
  --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: #bfbfc9;
}
} /*** 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;
}

@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
.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(--urlbar-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 {
  display: flex;
  flex-wrap: nowrap;
  fill: currentColor;
  fill-opacity: .6;
  padding-block: 3px;
}

:root[uidensity=compact] .urlbarView-row {
  padding-block: 2px;
}

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
:root:not([uidensity=compact]) .urlbarView-row:not([type=tip], [type=dynamic]) {
  min-height: 32px;
  padding-block: 4px;
}
} /*** END proton ***/

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

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
.urlbarView-row-inner {
  border-radius: var(--toolbarbutton-border-radius);
}
} /*** END proton ***/

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

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

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
.urlbarView-row-inner,
.urlbarView-no-wrap {
  align-items: center;
}
} /*** END proton ***/

.urlbarView-no-wrap {
  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-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) {
  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(--urlbar-result-hover-bgcolor);
}

.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);
  fill-opacity: 1;
}

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

@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
.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 {
  color: #0060df; /* Blue-60 */
  stroke: #fff;
  -moz-context-properties: fill, stroke;
}

.urlbarView-row[type=tabtosearch][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
  color: #fff;
  stroke: #0060df;
}

:root[lwt-toolbar-field-brighttext] .urlbarView-row[type=tabtosearch]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
  color: #0a84ff; /* Blue-50 */
}

:root[lwt-toolbar-field-brighttext] .urlbarView-row[type=tabtosearch][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
  stroke: #0a84ff;
}

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

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

.urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  background-image: url(chrome://browser/skin/bookmark-12.svg);
  color: #0060df; /* Blue-60 */
  stroke: #fff;
}

.urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  background-image: url(chrome://browser/skin/pin-12.svg);
  color: #b1b1b3; /* Grey-40 */
  stroke: #fff;
}

.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-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-brighttext] .urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
  color: #d7d7db; /* Grey-30 */
  stroke: #38383d; /* Grey-70 */
}

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

/* Help button */

/* Help buttons are a standard Photon ghost buttons. */
.urlbarView-help {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 16px;
  min-width: 16px;
  background-image: url("chrome://global/skin/icons/help.svg");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  padding-inline: 8px;
  margin-inline-start: 8px;
  margin-inline-end: 4px;
  -moz-context-properties: fill, fill-opacity;
}

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
.urlbarView-help  {
  border-radius: var(--toolbarbutton-border-radius);
}
} /*** END proton ***/

.urlbarView-help[selected] {
  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
}

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

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

/* 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-row[type=tip] > .urlbarView-row-inner > .urlbarView-help {
  height: 32px;
}

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

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
.urlbarView-tip-button {
  border-radius: var(--toolbarbutton-border-radius);
}
} /*** END proton ***/

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

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

.urlbarView-tip-button[selected] {
  color: var(--urlbarView-primary-button-text);
  background-color: var(--urlbarView-primary-button-background);
  border-color: #0a84ff;
  box-shadow: 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
}

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

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

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

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

.urlbarView-row[selected] > .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[selected] > .urlbarView-url {
  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;
}

.urlbarView-tags {
  overflow: hidden;
}

.urlbarView-tag {
  background-color: var(--arrowpanel-dimmed);
  border-radius: 2px;
  border: 1px solid var(--panel-separator-color);
  padding: 0 1px;
  margin-inline-start: .4em;
}

.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-tags > .urlbarView-tag {
  background-color: var(--autocomplete-popup-highlight-color);
  color: var(--autocomplete-popup-highlight-background);
}

/* Search one-offs */

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

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar .search-one-offs:not([hidden]) {
  padding-block: 10px;
  border-top-color: var(--urlbar-separator-color);
}
} /*** END proton ***/

.urlbarView[noresults] > .search-one-offs {
  border-top: none;
}

#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: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#urlbar .search-panel-one-offs-header-label {
  white-space: nowrap;
  margin: 0;
  padding-inline: 8px 16px;
}

#urlbar .searchbar-engine-one-off-item {
  min-width: 32px;
  height: 32px;
  margin-inline-end: 8px;
}

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
#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: #0060df; /* Blue-60 */
  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");
  fill: #008eaf; /* Teal-70 */
  fill-opacity: 1;
  -moz-context-properties: fill, 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");
  fill: currentColor;
  fill-opacity: .9;
  -moz-context-properties: fill, fill-opacity;
}

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

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

.urlbarView-row[source="bookmarks"][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
.urlbarView-row[source="tabs"][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
#urlbar-engine-one-off-item-bookmarks[selected],
#urlbar-engine-one-off-item-tabs[selected] {
  fill: currentColor;
  fill-opacity: .9;
}

/* search bar popup */

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

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
#PopupSearchAutoComplete {
  background-color: var(--lwt-toolbar-field-focus);
  border: 1px solid var(--arrowpanel-border-color);
  /* Remove the top border since the panel is flush with the input. */
  border-top-width: 0;
  border-radius: var(--arrowpanel-border-radius);
  /* override autocomplete.css padding */
  padding: var(--panel-subview-body-padding) !important;
}
} /*** END proton ***/

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