%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

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

#urlbar:hover,
.searchbar-textbox:hover {
  border-color: hsla(240,5%,5%,.35);
  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:-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;
}

#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/device-mobile.svg");
}

.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;
  /* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
  padding: 6px;
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0.6;
  color: inherit;
}

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

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

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

.urlbar-icon:hover:active,
.urlbar-icon-wrapper:hover:active {
  background-color: hsla(0,0%,80%,.45);
}

.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/back.svg");
  width: 26px;
}

.urlbar-go-button:-moz-locale-dir(ltr),
.search-go-button:-moz-locale-dir(ltr) {
  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;
}

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

#navigator-toolbox:not(:hover) > #nav-bar:not([customizing="true"]) > #nav-bar-customization-target > #urlbar-container > #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;
  /* Set the height to equal the height of each frame of the SVG. Must use
     min- and max- width and height due to bug 1379332. */
  min-width: 33px;
  max-width: 33px;
  min-height: 33px;
  max-height: 33px;
}

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

/* Blocked popup icon */

#page-report-button {
  list-style-image: url(chrome://browser/skin/notification-icons/popup.svg);
}

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