%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 fieldBorderColor hsla(240,5%,5%,.25)
%define fieldHoverBorderColor hsla(240,5%,5%,.35)

:root {
  /* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
  --urlbar-icon-padding: 6px;
}

:root[uidensity=compact] {
  /* 24x24 box - 16x16 image = 8x8 padding, 4 on each side */
  --urlbar-icon-padding: 4px;
}

:root[uidensity=touch] {
  /* 30x30 box - 16x16 image = 14x14 padding, 7 on each side */
  --urlbar-icon-padding: 7px;
}

#urlbar,
.searchbar-textbox {
  -moz-appearance: none;
  background-clip: content-box;
  border: 1px solid @fieldBorderColor@;
  border-radius: var(--toolbarbutton-border-radius);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  padding: 0;
  margin: 3px 5px;
  min-height: 30px;
  cursor: default;
  overflow: -moz-hidden-unscrollable;
}

#urlbar:hover,
.searchbar-textbox:hover {
  border-color: @fieldHoverBorderColor@;
  box-shadow: 0 1px 6px rgba(0,0,0,.1);
}

#urlbar:-moz-lwtheme,
#navigator-toolbox .searchbar-textbox:-moz-lwtheme {
  background-color: var(--url-and-searchbar-background-color, hsla(0,0%,100%,.8));
  color: var(--url-and-searchbar-color, black);
}

#urlbar:not([focused="true"]):-moz-lwtheme,
#navigator-toolbox .searchbar-textbox:not([focused="true"]):-moz-lwtheme {
  border-color: var(--lwt-toolbar-field-border-color, @fieldBorderColor@);
}

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

#urlbar:-moz-lwtheme:hover,
#urlbar:-moz-lwtheme[focused="true"],
#navigator-toolbox .searchbar-textbox:-moz-lwtheme:hover,
#navigator-toolbox .searchbar-textbox:-moz-lwtheme[focused="true"] {
  background-color: var(--url-and-searchbar-background-color, white);
}

:root[uidensity=compact] #urlbar,
:root[uidensity=compact] .searchbar-textbox {
  min-height: 26px;
  margin-top: 3px;
  margin-bottom: 3px;
}

:root[uidensity=touch] #urlbar,
:root[uidensity=touch] .searchbar-textbox {
  min-height: 32px;
}

:root[chromehidden~="toolbar"] #urlbar {
  /* Remove excess space between the address bar and the menu button in popups. */
  margin-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;
  -moz-appearance: none;
}

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

#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-sendToDevice:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#pageAction-urlbar-sendToDevice:-moz-locale-dir(rtl) {
  transform: scaleX(-1);
}

.pageAction-sendToDevice-device[clientType=mobile] {
  list-style-image: url("chrome://browser/skin/device-mobile.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.signintosync,
#pageAction-panel-sendToDevice-fxa,
#pageAction-urlbar-sendToDevice-fxa {
  list-style-image: url("chrome://browser/skin/sync.svg");
}

/* URL bar and page action buttons */

#page-action-buttons {
  -moz-box-align: center;
}

#pageActionSeparator {
  /* This draws the separator the same way that #urlbar-display-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;
  height: 28px;
  visibility: hidden;
}

:root[uidensity=compact] #pageActionSeparator {
  height: 24px;
}

:root[uidensity=touch] #pageActionSeparator {
  height: 30px;
}

:not(#pageActionSeparator):not([hidden]) ~ #pageActionSeparator {
  /* Show the separator between the page actions and other elements when at
     least of the latter is shown. */
  visibility: visible;
  margin-left: 6px;
  margin-right: 6px;
}

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

.urlbar-icon {
  width: 28px;
  height: 28px;
  padding: var(--urlbar-icon-padding);
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0.6;
  color: inherit;
}

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

:root[uidensity=compact] .urlbar-icon {
  width: 24px;
  height: 24px;
}

:root[uidensity=touch] .urlbar-icon {
  width: 30px;
  height: 30px;
}

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

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

.urlbar-icon-wrapper[open] > .urlbar-icon,
.urlbar-icon-wrapper > .urlbar-icon:hover,
.urlbar-icon-wrapper > .urlbar-icon:hover:active {
  background-color: transparent;
}

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

.urlbar-history-dropmarker {
  -moz-appearance: none;
  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
  transition: opacity 0.15s ease;
}

/* Avoid re-opening the popup when the dropmarker is clicked while the popup is still open. */
.urlbar-history-dropmarker[open] {
  pointer-events: none;
}

#urlbar[switchingtabs] > .urlbar-textbox-container > .urlbar-history-dropmarker {
  transition: none;
}

#nav-bar:not([customizing="true"]) > #nav-bar-customization-target > #urlbar-container:not(:hover) > #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
  opacity: 0;
}

#pageActionButton {
  list-style-image: url("chrome://browser/skin/page-action.svg");
}

@keyframes bookmark-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-627px);
  }
}

@keyframes bookmark-animation-rtl {
  from {
    transform: scaleX(-1) translateX(0);
  }
  to {
    transform: scaleX(-1) translateX(-627px);
  }
}

#star-button-box[animationsenabled] {
  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-box[animationsenabled] > #star-button[starred][animate] {
  fill: transparent;
  position: relative;
}

#star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
  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-box[animationsenabled] > #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-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
  /* .urlbar-icon has width 30px in this case */
  margin-inline-start: -1.5px;
}

#star-button-box[animationsenabled] > #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-box[animationsenabled] > #star-button[starred][animate]:-moz-locale-dir(rtl) + #star-button-animatable-box > #star-button-animatable-image {
  animation-name: bookmark-animation-rtl;
}

/* Reader mode icon */

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

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

/* Zoom button */

#urlbar-zoom-button {
  font-size: .8em;
  padding: 0 8px;
  border-radius: 1em;
  background-color: hsla(0,0%,0%,.05);
  border: 1px solid ThreeDLightShadow;
}

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

#urlbar-zoom-button:hover {
  background-color: hsla(0,0%,0%,.1);
}

#urlbar-zoom-button:hover:active {
  background-color: hsla(0,0%,0%,.15);
}

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

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

/* Search bar */

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

.searchbar-search-icon {
  list-style-image: url(chrome://browser/skin/search-glass.svg);
  -moz-context-properties: fill, fill-opacity;
  pointer-events: none;
  margin-inline-start: 8px;
  margin-inline-end: 6px;
  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-start: -15px;
  margin-inline-end: 4px;
  margin-top: -10px;
  width: 11px;
  height: 11px;
}

.searchbar-search-button[addengines=true] > .searchbar-search-icon-overlay:-moz-locale-dir(rtl) {
  margin-inline-start: -25px;
  margin-inline-end: 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-start: -8px;
  margin-inline-end: 2px;
  width: 6px;
  height: 6px;
}

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