%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

%define fieldHoverBorderColor hsla(240,5%,5%,.35)
%define urlbarMarginInline 5px
%define urlbarSearchButtonWidth calc(16px + 2 * var(--urlbar-icon-padding))

:root {
  --toolbar-field-border-color: hsla(240,5%,5%,.25);
}

@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
:root {
  --toolbar-field-focus-border-color: -moz-accent-color;
  /* px because it's used in calc */
  --urlbar-container-padding: 0px;
}
} /*** END !proton ***/

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
:root {
  --toolbar-field-focus-border-color: var(--focus-outline-color);
  --urlbar-container-padding: 1px;
}

@media not (prefers-contrast) {
  :root {
    --toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent);
  }
}
} /*** END proton ***/

#urlbar-container,
#search-container {
  padding-block: 4px;
  margin-inline: @urlbarMarginInline@;
}

@supports -moz-bool-pref("browser.proton.enabled") {
:root[uidensity=touch] #urlbar-container,
:root[uidensity=touch] #search-container {
  padding-block: 6px;
}
}

#urlbar,
#searchbar {
  min-height: var(--urlbar-min-height);
  text-shadow: none;
  color: FieldText;
}

@supports not -moz-bool-pref("browser.proton.enabled") {
#urlbar-container,
#search-container {
  padding-block: 3px;
}
} /* END !proton */

#urlbar-background,
#searchbar {
  background-color: Field;
  background-clip: padding-box;
  border: 1px solid var(--toolbar-field-border-color);
  border-radius: var(--toolbarbutton-border-radius);
}

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar-background,
#searchbar {
  border-color: transparent;
  background-clip: border-box;
}

#urlbar:not([focused="true"]) > #urlbar-background,
#searchbar:not(:focus-within) {
  background-color: var(--toolbar-field-non-lwt-bgcolor, Field);
}
} /*** END proton ***/

@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar-background,
#searchbar {
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
} /*** END !proton ***/

#urlbar-input-container,
#searchbar {
  border-radius: var(--toolbarbutton-border-radius);
  overflow: clip;
}

#urlbar-input,
#urlbar-scheme,
.searchbar-textbox {
  -moz-box-flex: 1;
  background-color: transparent;
  color: inherit;
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
}

@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar:not([focused="true"]):hover > #urlbar-background,
#searchbar:not(:focus-within):hover {
  border-color: @fieldHoverBorderColor@;
  box-shadow: 0 1px 6px rgba(0,0,0,.1);
}

#urlbar[focused="true"] > #urlbar-background,
#searchbar:focus-within {
  border-color: var(--toolbar-field-focus-border-color);
}
} /*** END !proton ***/

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background {
  border: var(--focus-outline);
  /* We used --focus-outline above to inherit its width and style properties,
     but we still want to use the theme's border-color.
     --toolbar-field-focus-border-color is set equal to --focus-outline-color
     on :root, but LWT themes can override this value. */
  border-color: var(--toolbar-field-focus-border-color);
}

#urlbar[focused="true"] > #urlbar-background {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13);
}

#urlbar[focused="true"][open] > #urlbar-background {
  border-color: var(--arrowpanel-border-color);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13);
}

/* We draw the searchbar's border as a combination of its 1px unfocused border
   and a 1px inset box-shadow. If we did it all as a border, the searchbar's
   contents would shift when its border-width expanded by 1px when focused.
   Removing the border when focused would also shift contents. #urlbar gets
   around this problem by applying its border to #urlbar-background, which is
   positioned absolutely. We don't plan on changing the searchbar's UX
   significantly, so it's better to avoid that extra complexity. */
#searchbar:focus-within {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13),
              0 0 0 1px var(--toolbar-field-focus-border-color) inset;
  border-color: var(--toolbar-field-focus-border-color);
}
} /*** END proton ***/

#urlbar:-moz-lwtheme,
#navigator-toolbox #searchbar:-moz-lwtheme {
  color: var(--lwt-toolbar-field-color, black);
}

#urlbar:-moz-lwtheme > #urlbar-background,
#navigator-toolbox #searchbar:-moz-lwtheme {
  background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
}

#urlbar:not([focused="true"]):-moz-lwtheme > #urlbar-background,
#navigator-toolbox #searchbar:not(:focus-within):-moz-lwtheme {
  border-color: var(--lwt-toolbar-field-border-color, var(--toolbar-field-border-color));
}

#urlbar:not([focused="true"]):-moz-lwtheme:hover > #urlbar-background,
#navigator-toolbox #searchbar:not(:focus-within):-moz-lwtheme:hover {
  border-color: var(--lwt-toolbar-field-border-color, @fieldHoverBorderColor@);
}

#urlbar:-moz-lwtheme:hover > #urlbar-background,
#navigator-toolbox #searchbar:-moz-lwtheme:hover {
  background-color: var(--lwt-toolbar-field-background-color, white);
}

#urlbar[focused="true"]:-moz-lwtheme,
#navigator-toolbox #searchbar:focus-within:-moz-lwtheme {
  color: var(--lwt-toolbar-field-focus-color);
}

#urlbar[focused="true"]:-moz-lwtheme > #urlbar-background,
#navigator-toolbox #searchbar:focus-within:-moz-lwtheme {
  background-color: var(--lwt-toolbar-field-focus);
}

:root[lwt-selection] #urlbar-input:-moz-lwtheme::selection,
:root[lwt-selection] .searchbar-textbox:-moz-lwtheme::selection {
  background-color: var(--lwt-toolbar-field-highlight, Highlight);
  color: var(--lwt-toolbar-field-highlight-text, HighlightText);
}

#urlbar:not([focused="true"]) {
  caret-color: transparent;
}

#urlbar.searchButton > #urlbar-input-container > #urlbar-search-button {
  width: @urlbarSearchButtonWidth@;
  background-image: url(chrome://global/skin/icons/search-glass.svg);
  background-repeat: no-repeat;
  background-position: center;
  -moz-context-properties: fill, fill-opacity;
  fill: var(--lwt-toolbarbutton-icon-fill, var(--toolbar-color));
  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
}

#urlbar.searchButton > #urlbar-input-container[pageproxystate="invalid"] > #urlbar-search-button {
  margin-inline-end: 6px;
}

/**
 * The urlbar background is a separate element so we can animate it
 * independently from the content. It's positioned absolutely and stretched to
 * the bounds of the urlbar.
 */

#urlbar,
#urlbar-input-container,
.urlbarView {
  position: relative;
}

#urlbar-background {
  display: block;
  position: absolute;
  inset: 0;
}

:root:not([chromehidden~="toolbar"]) #urlbar.searchButton:not([breakout]) > #urlbar-background,
:root:not([chromehidden~="toolbar"]) #urlbar.searchButton:not([breakout-extend]) > #urlbar-background {
  inset-inline-start: @urlbarSearchButtonWidth@;
}

#urlbar-input-container {
  /* Match urlbar-background's border. */
  border: 1px solid transparent;
  padding: var(--urlbar-container-padding);
}

#urlbar-container[breakout] {
  position: relative;
  min-height: var(--urlbar-container-height);
}

#urlbar[breakout] {
  display: block;
  position: absolute;
  width: 100%;
  height: var(--urlbar-height);
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2);
  left: 0;
}

#urlbar[breakout] > #urlbar-input-container {
  width: 100%;
  height: 100%;
}

#urlbar:not([open]) > .urlbarView,
#urlbar:not([breakout]) > .urlbarView {
  display: none;
}

#urlbar[breakout][breakout-extend],
#urlbar[breakout][breakout-extend-disabled][open] {
  /* The z-index needs to be big enough to trump other positioned UI pieces
     that we want to overlay. 3 is used in the tab bar. */
  z-index: 3;
  height: auto;
}

#urlbar[breakout][breakout-extend] {
  top: -@urlbarBreakoutExtend@;
  left: calc(-@urlbarMarginInline@ - @urlbarBreakoutExtend@);
  width: calc(100% + 2 * @urlbarMarginInline@ + 2 * @urlbarBreakoutExtend@);
}

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar[breakout][breakout-extend] {
  top: 0;
  left: -@urlbarMarginInline@;
  width: calc(100% + 2 * @urlbarMarginInline@);
}
} /*** END proton ***/

@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar[breakout][breakout-extend] > #urlbar-background {
  box-shadow: 0 3px 8px 0 rgba(0,0,0,.15)
}

#urlbar[breakout][breakout-extend][open] > #urlbar-background {
  box-shadow: 0 5px 18px rgba(0,0,0,.2);
}
} /*** END !proton ***/

#urlbar[breakout][breakout-extend] > #urlbar-input-container {
  height: calc(var(--urlbar-toolbar-height) + 2 * @urlbarBreakoutExtend@);
  padding-block: calc(@urlbarBreakoutExtend@ + (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2);
  padding-inline: calc(@urlbarMarginInline@ + @urlbarBreakoutExtend@);
}

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
  height: var(--urlbar-toolbar-height);
  padding-block: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2 + var(--urlbar-container-padding));
  padding-inline: calc(@urlbarMarginInline@ + var(--urlbar-container-padding));
}
} /*** END proton ***/

#urlbar.searchButton[breakout][breakout-extend] > #urlbar-input-container > #urlbar-search-button {
  fill: currentColor;
  fill-opacity: .6;
}

@keyframes urlbar-grow {
  0% {
    transform: scaleX(.99) scaleY(.95);
  }
  100% {
    transform: scale(1.0);
  }
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  animation-name: urlbar-grow;
  animation-duration: 0s;
  animation-timing-function: var(--animation-easing-function);
}

@media (prefers-reduced-motion: no-preference) {
  #urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
    animation-duration: 150ms;
  }
}

:root[chromehidden~="toolbar"] #urlbar-container {
  /* Remove excess space between the address bar and the menu button in popups. */
  padding-inline-end: 0;
}

:root[customizing] .urlbar-input-box {
  visibility: hidden;
}

#urlbar-container {
  -moz-box-align: center;
}

#urlbar-search-splitter {
  /* The splitter width should equal the location and search bars' combined
     neighboring margin and border width. */
  min-width: 12px;
  margin: 0 -6px;
  position: relative;
  border: none;
  background: transparent;
  appearance: none;
}

/* Urlbar search mode indicator */
#urlbar-search-mode-indicator {
  display: none;
  background-color: var(--urlbar-box-bgcolor);
  margin-inline-end: 8px;
  align-items: center;
  border-radius: var(--toolbarbutton-border-radius);
  padding-inline: 8px 3px;
}

@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar-search-mode-indicator {
  -moz-outline-radius: 2px;
  min-width: 16px; /* So the close button never causes motion */
  background-color: #d6ebff;
  outline: 1px solid #0060df; /* Blue 60 */
  color: #0060df; /* Blue 60 */
  border-radius: 0;
  padding-inline: 0;
}

/* Invert the colors in the search mode indicator in dark mode. */
:root[lwt-toolbar-field-brighttext] #urlbar-search-mode-indicator {
  background-color: #0060df;
  outline-color: #d6ebff;
  color: #d6ebff;
}
} /*** END !proton ***/

#urlbar[searchmode][breakout-extend] > #urlbar-input-container > #urlbar-search-mode-indicator {
  display: inline-flex;
}

/* Use system colors for low/high contrast mode */
@media (prefers-contrast) {
  #urlbar-search-mode-indicator {
    background-color: Highlight;
    outline-color: Highlight;
    color: HighlightText;
  }
}

#urlbar-search-mode-indicator-title {
  padding-inline: 0 4px;
  opacity: var(--identity-box-label-opacity);
}
@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar-search-mode-indicator-title {
  padding-inline: 5px;
  opacity: 1;
}
} /*** END !proton ***/

#urlbar-search-mode-indicator-close {
  background: url(chrome://global/skin/icons/close.svg) no-repeat center;
  background-size: 14px 14px;
  width: 16px;
  height: 100%;
  -moz-context-properties: fill, fill-opacity;
  fill-opacity: 0.6;
  stroke-opacity: var(--identity-box-label-opacity);
  fill: var(--lwt-toolbar-field-focus-color);
}

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar-search-mode-indicator-close {
  height: 16px;
  border-radius: var(--toolbarbutton-border-radius);
}
#urlbar-search-mode-indicator-close:hover {
  background-color: hsla(0,0%,70%,.2);
}
#urlbar-search-mode-indicator-close:hover:active {
  background-color: hsla(0,0%,70%,.3);
}
} /*** END proton ***/

@media (prefers-contrast) {
  #urlbar-search-mode-indicator-close {
    /* fill should match the urlbar text because background-color is set to
       Field below for non-proton themes. */
    fill: FieldText;
    fill-opacity: 1.0;
  }
  @supports -moz-bool-pref("browser.proton.urlbar.enabled") {
  #urlbar-search-mode-indicator-close {
    fill: HighlightText;
  }
  } /*** END proton ***/
}

@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar-search-mode-indicator-close {
  display: none;
  margin-inline-start: -16px;
  /* background-color should match the urlbar background. */
  background-color: Field;
}

#urlbar-search-mode-indicator-close:-moz-lwtheme {
  /* Background-color should match the urlbar background. */
  background-color: var(--lwt-toolbar-field-focus);
}

#urlbar-search-mode-indicator:hover > #urlbar-search-mode-indicator-close {
  display: block;
}
} /*** END !proton ***/

/* Page action panel */
.pageAction-panel-button > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}

#pageAction-panel-bookmark,
#star-button {
  list-style-image: url("chrome://browser/skin/bookmark-hollow.svg");
}
#pageAction-panel-bookmark[starred],
#star-button[starred] {
  list-style-image: url("chrome://browser/skin/bookmark.svg");
}
#star-button[starred] {
  fill-opacity: 1;
  fill: var(--toolbarbutton-icon-fill-attention);
}

#pocket-button,
#pageAction-panel-pocket {
  list-style-image: url("chrome://browser/skin/pocket-outline.svg");
}

#pocket-button[open="true"],
#pocket-button[pocketed="true"] {
  list-style-image: url("chrome://global/skin/icons/pocket.svg");
  fill: #ef4056;
  fill-opacity: 1;
}

#pageAction-panel-pinTab,
#pageAction-urlbar-pinTab {
  list-style-image: url("chrome://browser/skin/pin-tab.svg");
}

#pageAction-panel-pinTab[pinned],
#pageAction-urlbar-pinTab[pinned] {
  list-style-image: url("chrome://browser/skin/unpin-tab.svg");
}

#pageAction-panel-copyURL,
#pageAction-urlbar-copyURL {
  list-style-image: url("chrome://browser/skin/link.svg");
}

#pageAction-panel-emailLink,
#pageAction-urlbar-emailLink {
  list-style-image: url("chrome://browser/skin/mail.svg");
}

#pageAction-panel-sendToDevice,
#pageAction-urlbar-sendToDevice {
  list-style-image: url("chrome://browser/skin/send-to-device.svg");
}

#pageAction-panel-pinTab:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#pageAction-urlbar-pinTab:-moz-locale-dir(rtl),
#pageAction-panel-sendToDevice:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#pageAction-urlbar-sendToDevice:-moz-locale-dir(rtl) {
  transform: scaleX(-1);
}

.pageAction-sendToDevice-device[clientType=phone] {
  list-style-image: url("chrome://browser/skin/device-phone.svg");
}

.pageAction-sendToDevice-device[clientType=tablet] {
  list-style-image: url("chrome://browser/skin/device-tablet.svg");
}

.pageAction-sendToDevice-device[clientType=desktop] {
  list-style-image: url("chrome://browser/skin/device-desktop.svg");
}

.pageAction-sendToDevice-device[clientType=tv] {
  list-style-image: url("chrome://browser/skin/device-tv.svg");
}

.pageAction-sendToDevice-device[clientType=vr] {
  list-style-image: url("chrome://browser/skin/device-vr.svg");
}

.pageAction-sendToDevice-device.signintosync,
#pageAction-panel-sendToDevice-fxa,
#pageAction-urlbar-sendToDevice-fxa {
  list-style-image: url("chrome://browser/skin/sync.svg");
}

#pageAction-panel-addSearchEngine > .toolbarbutton-badge-stack > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}
#pageAction-panel-addSearchEngine > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  display: -moz-box;
  background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
  box-shadow: none;
  /* "!important" is necessary to override the rule in toolbarbutton.css */
  margin: -4px 0 0 !important;
  margin-inline-end: -4px !important;
  width: 11px;
  height: 11px;
  min-width: 11px;
  min-height: 11px;
}

#pageActionActivatedActionPanel[actionID="pocket"] {
  --arrowpanel-background: #fbfbfb;
}

/* URL bar and page action buttons */

@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
#pageActionSeparator {
  /* Just remove this element once Proton is released */
  display: none;
}
} /*** END proton ***/

@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
#pageActionSeparator {
  /* This draws the separator the same way that #urlbar-label-box draws its
     left and right borders, which end up looking like separators.  It might not
     be the best way in this case, but it makes sure that all these vertical
     lines in the urlbar look the same: same height, vertical position, etc. */
  border-inline-start: 1px solid var(--urlbar-separator-color);
  border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
  border-image-slice: 1;
  width: 1px;
  visibility: hidden;
}

#page-action-buttons > :not([hidden], toolbartabstop) ~ #pageActionSeparator {
  /* Show the separator between the page actions and other elements when at
     least one of the latter is shown. */
  visibility: visible;
  margin-inline: 6px;
}
} /*** END !proton ***/

#userContext-icons,
#urlbar-zoom-button {
  margin-inline: 6px;
}

.urlbar-icon {
  width: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
  height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
  padding: var(--urlbar-icon-padding);
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0.6;
  color: inherit;
}

.urlbar-icon,
.urlbar-icon-wrapper {
  border-radius: var(--toolbarbutton-border-radius);
}

:root[uidensity=compact] .urlbar-icon {
  margin-inline: 1px;
}

@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
.urlbar-icon {
  width: calc(var(--urlbar-min-height) - 2px);
  height: calc(var(--urlbar-min-height) - 2px);
  margin-inline: 0;
}

.urlbar-icon,
.urlbar-icon-wrapper {
  border-radius: 0;
}
} /*** END !proton ***/

.urlbar-page-action[disabled] {
  fill-opacity: 0.3;
}

:not(.urlbar-icon-wrapper) > .urlbar-icon:not([disabled]):hover,
.urlbar-icon-wrapper:not([disabled]):hover {
  background-color: hsla(0,0%,70%,.2);
}

:not(.urlbar-icon-wrapper) > .urlbar-icon:not([disabled])[open],
:not(.urlbar-icon-wrapper) > .urlbar-icon:not([disabled]):hover:active,
.urlbar-icon-wrapper:not([disabled])[open],
.urlbar-icon-wrapper:not([disabled]):hover:active {
  background-color: hsla(0,0%,70%,.3);
}

.urlbar-icon:-moz-focusring,
.urlbar-icon-wrapper:-moz-focusring {
  outline: var(--toolbarbutton-focus-outline);
  outline-offset: -2px;
  -moz-outline-radius: var(--toolbarbutton-border-radius);
}

#urlbar-go-button,
.search-go-button {
  list-style-image: url("chrome://browser/skin/forward.svg");
}

#urlbar-go-button:-moz-locale-dir(rtl),
.search-go-button:-moz-locale-dir(rtl) {
  transform: scaleX(-1);
}

#pageActionButton,
.share-more-button {
  list-style-image: url("chrome://global/skin/icons/more.svg");
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes bookmark-animation {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-627px);
    }
  }

  #star-button-box {
    position: relative;
  }

  /* Preload the bookmark animations to prevent a flicker during the first playing
     of the animations. */
  #star-button[preloadanimations] + #star-button-animatable-box > #star-button-animatable-image {
    background-image: url("chrome://browser/skin/bookmark-animation.svg"),
                      url("chrome://browser/skin/library-bookmark-animation.svg");
    background-size: 0, 0;
  }

  #star-button[starred][animate] {
    fill: transparent;
    position: relative;
  }

  #star-button[starred][animate] + #star-button-animatable-box {
    display: block;
    position: absolute;
    overflow: hidden;
    top: calc(50% - 16.5px); /* 16.5px is half the height of the sprite */
    /* .urlbar-icon has width 28px. Each frame is 33px wide. Set margin-inline-start
       to be half the difference, -2.5px. */
    margin-inline-start: -2.5px;
    width: 33px; /* Width of each frame within the SVG sprite */
    height: 33px; /* Height of each frame within the SVG sprite */
  }

  :root[uidensity=compact] #star-button[starred][animate] + #star-button-animatable-box {
    /* .urlbar-icon has width 24px in this case */
    margin-inline-start: -4.5px;
  }

  :root[uidensity=touch] #star-button[starred][animate] + #star-button-animatable-box {
    /* .urlbar-icon has width 30px in this case */
    margin-inline-start: -1.5px;
  }

  #star-button[starred][animate] + #star-button-animatable-box > #star-button-animatable-image {
    background-image: url("chrome://browser/skin/bookmark-animation.svg");
    background-size: auto;
    list-style-image: none;
    height: var(--toolbarbutton-height);
    min-height: 33px; /* Minimum height must be equal to the height of the SVG sprite */
    animation-name: bookmark-animation;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: steps(19);
    animation-duration: 317ms;
    width: 660px;
    -moz-context-properties: fill, stroke;
    stroke: var(--toolbarbutton-icon-fill-attention);
  }

  #star-button[starred][animate]:-moz-locale-dir(rtl) + #star-button-animatable-box > #star-button-animatable-image {
    scale: -1 1;
  }
}


/**
 * Contextual Feature Recommendation
 *
 * Animate the recommendation icon to expand outwards and display a text label.
 * Fake the effect of a smoothly expanding width without animating any widths
 * by (continuously) animating only `mask-position-x` and `transform`.
 *
 * In a few places, transition a property using the timing-function `step-start`
 * while collapsed and `step-end` while expanded in order to (discretely) modify
 * the value while expanded and while transitioning in either direction.
 *
 * This UI is part of an experiment launching in LTR locales only. Fixing the
 * RTL issues is tracked by Bug 1485725.
 */

:root {
  --cfr-animation-duration: 0.35s;
  --cfr-button-addons-icon: url(chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg);
  --cfr-button-features-icon: url(chrome://activity-stream/content/data/content/assets/glyph-cfr-feature-16.svg);
  --cfr-button-highlights-icon: url(chrome://activity-stream/content/data/content/assets/glyph-highlights-16.svg);
  --cfr-active-color: #0060df;
}

#contextual-feature-recommendation {
  width: 28px;
  margin-inline-start: 0;
  transition: margin-inline-start step-end var(--cfr-animation-duration);
}
#urlbar[cfr-recommendation-state="expanded"] #contextual-feature-recommendation {
  margin-inline-start: calc(var(--cfr-label-width) * -1);
  transition: margin-inline-start step-start var(--cfr-animation-duration);
}

#cfr-button {
  margin: -2px 0;
  transition-property: fill, fill-opacity, transform;
  transition-timing-function: ease-in-out;
  transition-duration: var(--cfr-animation-duration);
}
#contextual-feature-recommendation[data-cfr-icon="webextensions-icon"] #cfr-button {
  list-style-image: var(--cfr-button-addons-icon);
}
#contextual-feature-recommendation[data-cfr-icon="recommendations-icon"] #cfr-button {
  list-style-image: var(--cfr-button-features-icon);
}
#contextual-feature-recommendation[data-cfr-icon="highlights-icon"] #cfr-button {
  list-style-image: var(--cfr-button-highlights-icon);
}
#urlbar[cfr-recommendation-state="expanded"] #cfr-button {
  fill: white;
  fill-opacity: 1;
  background-color: transparent; /* Override hover background-color */
  transform: translateX(calc(var(--cfr-label-width) * -1));
}
#urlbar[cfr-recommendation-state="expanded"] #cfr-button:-moz-locale-dir(rtl) {
  transform: translateX(calc(var(--cfr-label-width)));
}
@keyframes cfr-button-fade-through-active-color {
  33% {
    fill-opacity: 1;
    fill: var(--cfr-active-color);
  }
  67% {
    fill-opacity: 1;
    fill: var(--cfr-active-color);
  }
}
#urlbar[cfr-recommendation-state="collapsed"] #cfr-button {
  animation: cfr-button-fade-through-active-color calc(3 * var(--cfr-animation-duration));
}

#cfr-label-container {
  width: 0;
  overflow: hidden;
  border-radius: 5px;
  padding-inline-start: 28px;
  mask-image: linear-gradient(to right, transparent 0, black 0);
  mask-position-x: var(--cfr-label-width);
  mask-repeat: no-repeat;
  transition-property: background-color, mask-position-x, width, margin-inline-end;
  transition-timing-function: ease-in-out, ease-in-out, step-end, step-end;
  transition-duration: var(--cfr-animation-duration);
  -moz-box-align: center;
  margin-block: calc((var(--urlbar-min-height) - var(--urlbar-container-padding) - 2px /* border */ - 24px) / 2);
}
#cfr-label-container:-moz-locale-dir(rtl) {
  mask-position-x: calc(var(--cfr-label-width) * -1);
}

#urlbar[cfr-recommendation-state="expanded"] #cfr-label-container {
  width: calc(var(--cfr-label-width) + 28px);
  background-color: var(--cfr-active-color);
  margin-inline-end: -28px;
  mask-position-x: 0;
  transition-timing-function: ease-in-out, ease-in-out, step-start, step-start;
}

#cfr-label {
  margin: 0;
  padding: 3px 5px;
  padding-inline-start: 0;
  color: white;
  mask-image: linear-gradient(to right, transparent 0, black 0);
  mask-position-x: var(--cfr-label-width);
  mask-repeat: no-repeat;
  transition: mask-position-x ease-in-out var(--cfr-animation-duration);
}
#cfr-label:-moz-locale-dir(rtl) {
  mask-position-x: calc(var(--cfr-label-width) * -1);
}
#urlbar[cfr-recommendation-state="expanded"] #cfr-label {
  mask-position-x: 0;
}

/* Shift the url-bar text fading to stop the recommendation overlapping */
#urlbar[cfr-recommendation-state] #urlbar-input {
  /* A mask-image is usually only defined for the url bar when text overflows.
     We need to re-define the mask image here so that it shows up correctly when
     we transition to or from an `expanded` state (in which the right end of the
     url bar may be obscured without overflow). */
  mask-image: linear-gradient(to left, transparent, black 3ch);
  transition: mask-position-x ease-in-out var(--cfr-animation-duration);
}
#urlbar[cfr-recommendation-state] #urlbar-input:-moz-locale-dir(rtl) {
  mask-image: linear-gradient(to right, transparent, black 3ch);
}
#urlbar[cfr-recommendation-state="expanded"] #urlbar-input {
  mask-position-x: calc(var(--cfr-label-width) * -1);
}
#urlbar[cfr-recommendation-state="expanded"] #urlbar-input:-moz-locale-dir(rtl) {
  mask-position-x: calc(var(--cfr-label-width));
}

/* Reader mode icon */

#reader-mode-button {
  list-style-image: url(chrome://browser/skin/reader-mode.svg);
}

#reader-mode-button[readeractive] {
  fill: var(--toolbarbutton-icon-fill-attention);
  fill-opacity: 1;
}

/* Zoom button */

#urlbar-zoom-button {
  appearance: none;
  color: inherit;
  font-size: .8em;
  padding: 0 8px;
  border-radius: 1em;
  background-color: var(--urlbar-box-bgcolor);
  margin-block: calc((var(--urlbar-min-height) - var(--urlbar-container-padding) - 2px /* border */ - 18px) / 2);
  overflow: hidden;
}

#urlbar-zoom-button:hover {
  background-color: var(--urlbar-box-hover-bgcolor);
}

#urlbar-zoom-button:hover:active {
  background-color: var(--urlbar-box-active-bgcolor);
}

@keyframes urlbar-zoom-reset-pulse {
  0% {
    transform: scale(0);
  }
  75% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.0);
  }
}

#urlbar-zoom-button[animate="true"] {
  animation-name: urlbar-zoom-reset-pulse;
  animation-duration: 250ms;
}

@supports not -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar-zoom-button {
  background-color: hsla(0,0%,0%,.05);
  border: 1px solid hsla(210,4%,50%,.3);
}

#urlbar-zoom-button:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}

#urlbar-zoom-button:hover:active {
  background-color: color-mix(in srgb, currentColor 17%, transparent);
}
} /*** END !proton ***/

#urlbar-zoom-button:-moz-focusring {
  outline: var(--toolbarbutton-focus-outline);
  outline-offset: calc(var(--focus-outline-width) * -1);
  -moz-outline-radius: 1em;
}

#urlbar-zoom-button > .toolbarbutton-text {
  display: -moz-box;
}

#urlbar-zoom-button > .toolbarbutton-icon {
  display: none;
}

/* Search bar */

#search-container {
  min-width: 125px;
}

.searchbar-search-button {
  -moz-box-align: center;
  fill: currentColor;
}

.searchbar-search-icon {
  list-style-image: url(chrome://global/skin/icons/search-glass.svg);
  -moz-context-properties: fill, fill-opacity;
  pointer-events: none;
  margin-inline: 8px 6px;
  width: 16px;
  fill-opacity: .4;
}

.searchbar-search-button:hover > .searchbar-search-icon {
  fill-opacity: .6;
}

.searchbar-search-button:hover:active > .searchbar-search-icon {
  fill-opacity: .8;
}

.searchbar-search-icon-overlay {
  pointer-events: none;
}

.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay {
  list-style-image: url(chrome://browser/skin/search-indicator-badge-add.svg);
  margin-inline: -15px 4px;
  margin-top: -10px;
  width: 11px;
  height: 11px;
}

.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) {
  margin-inline: -25px 14px;
}

.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay {
  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
  -moz-context-properties: fill;
  margin-inline: -8px 2px;
  width: 6px;
  height: 6px;
}

.searchbar-search-button:hover:not([addengines=true]) > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) {
  margin-inline: -26px 20px;
}

.searchbar-engine-one-off-add-engine:not([image]),
moz-input-box > menupopup .context-menu-add-engine:not([image]) {
  list-style-image: url("chrome://browser/skin/search-engine-placeholder.png");
}

@media (min-resolution: 1.1dppx) {
  .searchbar-engine-one-off-add-engine:not([image]),
  moz-input-box > menupopup .context-menu-add-engine:not([image]) {
    list-style-image: url("chrome://browser/skin/search-engine-placeholder@2x.png");
  }
}

.searchbar-engine-one-off-add-engine > .button-box::after,
moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
  content: "";
  position: relative;
  display: -moz-box;
  background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
  height: 11px;
  width: 11px;
  margin-inline: -4px -7px;
  margin-top: -13px;
}

moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
  /* These differ from the urlbar and searchbar because the context menu
     may not have enough space */
  margin-inline: -7px -4px;
  margin-top: -8px;
}

/* Fade a little the icon so that the + badge is more evident and the button
   is less likely to be visually confused with a normal search shortcut */
.searchbar-engine-one-off-add-engine[image]:not(:hover) > .button-box > .button-icon {
  opacity: 0.7;
}
.searchbar-engine-one-off-add-engine[image]:hover > .button-box > .button-icon {
  opacity: 1;
}
