%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 urlbarViewIconMarginEnd 8px
%define urlbarViewFaviconOffset (@urlbarViewPadding@ + 16px /* type icon width */ + @urlbarViewIconMarginEnd@)

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

:root[lwt-popup-darktext] {
  --urlbar-popup-url-color: hsl(210, 77%, 47%);
  --urlbar-popup-action-color: hsl(178, 100%, 28%);
}

:root[lwt-popup-brighttext] {
  --urlbar-popup-url-color: @lwtPopupBrighttextLinkColor@;
  --urlbar-popup-action-color: #30e60b;
}

#urlbar-results {
  -moz-appearance: none;
  background: var(--autocomplete-popup-background);
  color: var(--autocomplete-popup-color);
  border: 1px solid var(--chrome-content-separator-color);
  border-left-style: none;
  border-right-style: none;
}

.urlbarView-body-inner {
  box-sizing: border-box;
}

#urlbarView-results {
  box-sizing: border-box;
  padding: @urlbarViewPadding@;
  white-space: nowrap;
}

.urlbarView-row {
  border-radius: 2px;
  fill: currentColor;
  fill-opacity: .6;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-inline-start: calc(var(--item-padding-start, calc(5px + @urlbarViewFaviconOffset@)) - @urlbarViewFaviconOffset@);
  padding-inline-end: var(--item-padding-end, 5px);
}

:root[uidensity=touch] .urlbarView-row {
  padding-top: 11px;
  padding-bottom: 11px;
}

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

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

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

.urlbarView-row:hover {
  background: var(--arrowpanel-dimmed);
}

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

.urlbarView-type-icon,
.urlbarView-favicon {
  display: inline-block;
  vertical-align: middle;
  min-width: 16px;
  height: 16px;
  margin-inline-end: @urlbarViewIconMarginEnd@;
  background-repeat: no-repeat;
  background-size: contain;
  -moz-context-properties: fill, fill-opacity;
}

@media (min-resolution: 2dppx) {
  .urlbarView-type-icon,
  .urlbarView-favicon {
    transform: translateY(-1.5px);
  }
}

.urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-type-icon {
  background-image: url(chrome://browser/skin/bookmark.svg);
}

.urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-type-icon,
#urlbar-results:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-type-icon {
  background-image: url(chrome://browser/skin/tab.svg);
}

.urlbarView-title {
  display: inline-block;
  vertical-align: text-bottom;
  overflow: hidden;
  white-space: nowrap;
  /* We prioritize the title over the url, so it can grow freely, but it should
     never crop the url completely */
  flex-shrink: 0;
  max-width: calc(70% - 2 * (16px + @urlbarViewIconMarginEnd@));
}

.urlbarView-title-separator::before {
  content: "\2014";
  color: var(--panel-disabled-color);
  margin: 0 .4em;
}

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

.urlbarView-tags,
.urlbarView-secondary {
  font-size: .85em;
}

.urlbarView-title > strong,
.urlbarView-url > strong,
.urlbarView-tag > strong {
  font-weight: 600;
}

.urlbarView-secondary {
  display: inline-block;
  color: var(--urlbar-popup-action-color);
}

.urlbarView-url {
  overflow: hidden;
  color: var(--urlbar-popup-url-color);
}

.urlbarView-url:-moz-locale-dir(rtl) {
  direction: ltr !important;
}

.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-title-separator::before,
.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-secondary {
  color: inherit;
}

.urlbarView-row[type=remotetab][selected] > .urlbarView-row-inner > .urlbarView-action,
.urlbarView-row[type=remotetab]:hover > .urlbarView-row-inner > .urlbarView-action,
.urlbarView-row[type=remotetab]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-url,
.urlbarView-row[type=search]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-action,
.urlbarView-row[type=search]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-title-separator,
#urlbar-results[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-action,
#urlbar-results:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-url {
  display: none;
}

.urlbarView-tags {
  display: inline-block;
  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-tags > .urlbarView-tag {
  background-color: var(--autocomplete-popup-highlight-color);
  color: var(--autocomplete-popup-highlight-background);
}

/* legacy URL bar styles below */

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

#PopupAutoCompleteRichResult .autocomplete-richlistbox {
  padding: 4px 3px;
  background: transparent;
  color: inherit;
}

#PopupAutoCompleteRichResult .autocomplete-richlistitem {
  min-height: 30px;
  font: message-box;
  border-radius: 2px;
  padding-inline-start: var(--item-padding-start);
  /* For the space after the autocomplete text we have to use a transparent
     border instead of padding, because the latter would considered part of the
     scrollable area when generating the overflow events that we use to
     constrain the autocomplete result item size. */
  border-inline-end: var(--item-padding-end) solid transparent;
}

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

:root[uidensity=touch] #PopupAutoCompleteRichResult .autocomplete-richlistitem {
  min-height: 40px;
}

/* Awesomebar popup items */

.ac-separator:not([selected=true]) {
  color: var(--panel-disabled-color);
}

.ac-url:not([selected=true]),
.autocomplete-richlistitem.aliasOffer > .ac-action:not([selected=true]) {
  color: var(--urlbar-popup-url-color);
}

.ac-action:not([selected=true]) {
  color: var(--urlbar-popup-action-color);
}

html|span.ac-tag {
  background-color: var(--arrowpanel-dimmed);
  border-radius: 2px;
  border: 1px solid var(--panel-separator-color);
  padding: 0 1px;
}

.ac-tags-text[selected] > html|span.ac-tag {
  background-color: var(--autocomplete-popup-highlight-color);
  color: var(--autocomplete-popup-highlight-background);
}

html|span.ac-emphasize-text-title,
html|span.ac-emphasize-text-tag,
html|span.ac-emphasize-text-url {
  font-weight: 600;
}

.ac-site-icon,
.ac-type-icon {
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0.6;
}

.ac-site-icon[selected],
.ac-type-icon[selected] {
  fill-opacity: 1;
}

.ac-type-icon[type=bookmark] {
  list-style-image: url("chrome://browser/skin/bookmark.svg");
}

.ac-type-icon[type=keyword],
.ac-site-icon[type=searchengine] {
  list-style-image: url(chrome://browser/skin/search-glass.svg);
}

.ac-type-icon[type=switchtab],
.ac-type-icon[type=remotetab] {
  list-style-image: url("chrome://browser/skin/tab.svg");
}