:root {
  --toolbarbutton-icon-fill-attention: #0a84ff;
}

:root:-moz-lwtheme {
  --toolbarbutton-icon-fill-opacity: 1;
}

toolbar[brighttext] {
  --toolbarbutton-icon-fill-attention: #45a1ff;
}

.toolbarbutton-animatable-box,
.toolbarbutton-1 {
  color: inherit;
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
}

#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#PlacesChevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#PanelUI-menu-button:-moz-locale-dir(rtl) > .toolbarbutton-badge-stack > .toolbarbutton-icon {
  transform: scaleX(-1);
}

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

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

.toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  list-style-image: none;
}

/* The animations for the reload-button and stop-button are disabled
   outside of the nav-bar due to bug 1382894. */
:-moz-any(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
  display: none;
}
#nav-bar-customization-target > #stop-reload-button > :-moz-any(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
  display: -moz-box;
}

#stop-reload-button[animate] > #reload-button > .toolbarbutton-icon,
#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-icon {
  fill: transparent;
}

@keyframes reload-to-stop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-450px);
  }
}

@keyframes reload-to-stop-rtl {
  from {
    transform: scaleX(-1) translateX(0);
  }
  to {
    transform: scaleX(-1) translateX(-450px);
  }
}

@keyframes stop-to-reload {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-450px);
  }
}

@keyframes stop-to-reload-rtl {
  from {
    transform: scaleX(-1) translateX(0);
  }
  to {
    transform: scaleX(-1) translateX(-450px);
  }
}

#stop-reload-button[animate] > #reload-button,
#stop-reload-button[animate] > #stop-button {
  position: relative;
}

#reload-button > .toolbarbutton-animatable-box,
#stop-button > .toolbarbutton-animatable-box {
  position: absolute;
  overflow: hidden;
  top: calc(50% - 10px); /* Vertically center the 20px tall animatable image */
  /* Since .toolbarbutton-icon uses a different width than the animatable-box,
     we need to set a padding relative to the difference in widths. */
  margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 18px) / 2);
  width: 18px; /* Width of each frame within the SVG sprite */
  height: 20px; /* Height of each frame within the SVG sprite */
}

#reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
#stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
}

#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  background-image: url("chrome://browser/skin/reload-to-stop.svg");
  width: 468px;
}

#stop-reload-button[animate] > #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-name: reload-to-stop;
}

#stop-reload-button[animate] > #reload-button:not([displaystop]):-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-name: reload-to-stop-rtl;
}

#reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-timing-function: steps(25);
  animation-duration: 417ms;
}

#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  background-image: url("chrome://browser/skin/stop-to-reload.svg");
  width: 468px;
}

#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-name: stop-to-reload;
}

#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-name: stop-to-reload-rtl;
}

#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-timing-function: steps(25);
  animation-duration: 417ms;
}

#reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  transform: translateX(-450px);
}

#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  transform: scaleX(-1) translateX(-450px);
}

#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  transform: translateX(-450px);
}

#reload-button[displaystop] + #stop-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  transform: scaleX(-1) translateX(-450px);
}

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

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

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

#bookmarks-toolbar-button,
#bookmarks-toolbar-placeholder {
  list-style-image: url("chrome://browser/skin/bookmarks-toolbar.svg");
}

#bookmarks-menu-button {
  list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
}

#history-panelmenu {
  list-style-image: url("chrome://browser/skin/history.svg");
}

#downloads-button {
  list-style-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar");
}

#add-ons-button {
  list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.svg");
}

#open-file-button {
  list-style-image: url("chrome://browser/skin/open.svg");
}

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

#sync-button {
  list-style-image: url("chrome://browser/skin/synced-tabs.svg");
}

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

#characterencoding-button {
  list-style-image: url("chrome://browser/skin/characterEncoding.svg");
}

#new-window-button {
  list-style-image: url("chrome://browser/skin/new-window.svg");
}

#new-tab-button {
  list-style-image: url("chrome://browser/skin/new-tab.svg");
}

#privatebrowsing-button {
  list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
}

#find-button {
  list-style-image: url("chrome://browser/skin/search-glass.svg");
}

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

%ifdef XP_MACOSX
#restore-button,
%endif
#fullscreen-button {
  list-style-image: url("chrome://browser/skin/fullscreen.svg");
}

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

#preferences-button {
  list-style-image: url("chrome://browser/skin/settings.svg");
}

#PanelUI-menu-button {
  list-style-image: url("chrome://browser/skin/menu.svg");
}

#PanelUI-menu-button[badge-status="update-available"],
#PanelUI-menu-button[badge-status="update-manual"],
#PanelUI-menu-button[badge-status="update-restart"] {
  list-style-image: url("chrome://browser/skin/menu-badged.svg");
}

#cut-button {
  list-style-image: url("chrome://browser/skin/edit-cut.svg");
}

#copy-button {
  list-style-image: url("chrome://browser/skin/edit-copy.svg");
}

#paste-button {
  list-style-image: url("chrome://browser/skin/edit-paste.svg");
}

#zoom-out-button {
  list-style-image: url("chrome://browser/skin/zoom-out.svg");
}

#zoom-in-button {
  list-style-image: url("chrome://browser/skin/zoom-in.svg");
}

#PlacesChevron,
#nav-bar-overflow-button {
  list-style-image: url("chrome://browser/skin/chevron.svg");
}

#nav-bar-overflow-button[animate] > .toolbarbutton-icon {
  fill: transparent;
}

@keyframes overflow-animation {
  from {
    transform: translateX(0);
  }
  50% {
    fill: var(--toolbarbutton-icon-fill-attention);
    fill-opacity: 1;
  }
  to {
    transform: translateX(-1260px);
    fill: var(--toolbarbutton-icon-fill-attention);
    fill-opacity: 1;
  }
}

@keyframes overflow-animation-rtl {
  from {
    transform: scaleX(-1) translateX(0);
  }
  50% {
    fill: var(--toolbarbutton-icon-fill-attention);
    fill-opacity: 1;
  }
  to {
    transform: scaleX(-1) translateX(-1260px);
    fill: var(--toolbarbutton-icon-fill-attention);
    fill-opacity: 1;
  }
}

/* The animation is supposed to show the blue fill color for 520ms, then the
   fade to the toolbarbutton-fill color for the remaining 210ms. Thus with an
   animation-duration of 730ms, 71% is the point where we start the fade out. */
@keyframes overflow-fade {
  from {
    fill: var(--toolbarbutton-icon-fill-attention);
    fill-opacity: 1;
  }
  71% {
    fill: var(--toolbarbutton-icon-fill-attention);
    fill-opacity: 1;
  }
  to {
    fill: inherit;
  }
}

#nav-bar-overflow-button > .toolbarbutton-animatable-box {
  position: absolute;
  overflow: hidden;
  top: calc(50% - 18px); /* Vertically center the 36px tall animatable image */
  /* Since .toolbarbutton-icon uses a different width than the animatable box,
     we need to set a padding relative to the difference in widths. */
  margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 18px) / 2);
  width: 18px; /* Width of each frame within the SVG sprite */
  height: 36px; /* Height of each frame within the SVG sprite */
}

#nav-bar-overflow-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  /* Height must be equal to height of toolbarbutton padding-box. --toolbarbutton-height
     is calculated and set during runtime by BrowserUtils.setToolbarButtonHeightProperty()
     before the animation begins. */
  height: var(--toolbarbutton-height);
  min-height: 36px; /* Minimum height must be equal to the height of the SVG sprite */
}

#nav-bar-overflow-button[animate] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-name: overflow-animation;
  animation-timing-function: steps(70);
  animation-duration: 1167ms;
  background-image: url("chrome://browser/skin/chevron-animation.svg");
  width: 1278px;
}

#nav-bar-overflow-button[animate]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-name: overflow-animation-rtl;
}

#nav-bar-overflow-button[animate][fade] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-name: overflow-fade;
  animation-timing-function: ease-out;
  animation-duration: 730ms;
}

#nav-bar-overflow-button[animate][fade]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  transform: scaleX(-1);
}

#email-link-button {
  list-style-image: url("chrome://browser/skin/mail.svg");
}

#sidebar-button {
  list-style-image: url("chrome://browser/skin/sidebars-right.svg");
}

#sidebar-button:-moz-locale-dir(ltr):not([positionend]),
#sidebar-button:-moz-locale-dir(rtl)[positionend] {
  list-style-image: url("chrome://browser/skin/sidebars.svg");
}

#panic-button {
  list-style-image: url("chrome://browser/skin/forget.svg");
}

#panic-button[open] {
  fill: rgb(213, 32, 20);
}

#webide-button {
  list-style-image: url("chrome://browser/skin/webIDE.svg");
}

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

@keyframes library-bookmark-animation {
  from {
    transform: translateX(0);
    fill: inherit;
  }
  25% {
    fill: inherit;
  }
  50% {
    fill: var(--toolbarbutton-icon-fill-attention);
    fill-opacity: 1;
  }
  to {
    transform: translateX(-1056px);
    fill: var(--toolbarbutton-icon-fill-attention);
    fill-opacity: 1;
  }
}

@keyframes library-bookmark-animation-rtl {
  from {
    transform: translateX(1056px);
    fill: inherit;
  }
  25% {
    fill: inherit;
  }
  50% {
    fill: var(--toolbarbutton-icon-fill-attention);
    fill-opacity: 1;
  }
  to {
    transform: translateX(0);
    fill: var(--toolbarbutton-icon-fill-attention);
    fill-opacity: 1;
  }
}

@keyframes library-bookmark-fade {
  from {
    fill: var(--toolbarbutton-icon-fill-attention);
    fill-opacity: 1;
  }
  to {
    fill: inherit;
  }
}

#library-button[animate] > .toolbarbutton-icon {
  fill: transparent;
}

.toolbarbutton-animatable-box[animate] {
  position: absolute;
  overflow: hidden;
  /* Position the sprite at the y-position of the library-button, then adjust
     based on the size difference between half of the button height and half
     of the sprite height. The titlebar may have padding from -moz-appearance
     that needs to be accounted for. */
  top: calc(var(--library-button-y) + var(--library-button-height) / 2 - 27px - var(--toolbox-y));
  /* Set a margin relative to the difference in widths of the .toolbarbutton-icon
     and the .toolbar-animatable-box. This is correct even in RTL because the item
     is positioned using `left`. */
  left: calc(var(--library-icon-x) + (16px + 2 * var(--toolbarbutton-inner-padding) - 22px) / 2);
  width: 22px; /* Width of each frame within the SVG sprite */
  height: 54px; /* Height of each frame within the SVG sprite */
  z-index: 2;
}

.toolbarbutton-animatable-box[animate] > .toolbarbutton-animatable-image {
  height: var(--toolbarbutton-height);
  min-height: 54px; /* Minimum height must be equal to the height of the SVG sprite */
}

.toolbarbutton-animatable-box[animate="bookmark"] > .toolbarbutton-animatable-image {
  background-image: url("chrome://browser/skin/library-bookmark-animation.svg");
  width: 1078px;
  animation-name: library-bookmark-animation;
  animation-duration: 800ms;
  animation-timing-function: steps(48);
  -moz-context-properties: fill, fill-opacity, stroke;
  stroke: var(--toolbarbutton-icon-fill-attention);
}

.toolbarbutton-animatable-box[animate="bookmark"]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-image {
  animation-name: library-bookmark-animation-rtl;
}

.toolbarbutton-animatable-box[animate="bookmark"][fade] > .toolbarbutton-animatable-image {
  animation-name: library-bookmark-fade;
  animation-duration: 2s;
  animation-timing-function: ease-out;
}

/* ----- BOOKMARK BUTTONS ----- */

.bookmark-item {
  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
}

.bookmark-item[container] {
  list-style-image: url("chrome://browser/skin/places/folder.svg");
}

.bookmark-item[container][livemark] {
  list-style-image: url("chrome://browser/skin/places/folder-live.svg");
}

.bookmark-item[container][livemark] .bookmark-item {
  list-style-image: url("chrome://browser/skin/places/livemark-item.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}

.bookmark-item[container][livemark] .bookmark-item[visited] {
  -moz-image-region: rect(0px, 32px, 16px, 16px);
}

.bookmark-item[container][query] {
  list-style-image: url("chrome://browser/skin/places/folder-smart.svg");
}

.bookmark-item[query][tagContainer] {
  list-style-image: url("chrome://browser/skin/places/tag.png");
  -moz-image-region: auto;
}

.bookmark-item[query][dayContainer] {
  list-style-image: url("chrome://browser/skin/places/history.svg");
  -moz-image-region: auto;
}

.bookmark-item[query][hostContainer] {
  list-style-image: url("chrome://browser/skin/places/folder.svg");
}

%ifdef XP_MACOSX
@media (min-resolution: 2dppx) {
  .bookmark-item[query][tagContainer] {
    list-style-image: url("chrome://browser/skin/places/tag@2x.png");
  }
}
%endif