/* 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/. */

:root {
  --toolbarbutton-icon-fill-attention: AccentColor;
  --toolbarbutton-icon-fill-attention-text: AccentColorText;
  --warning-icon-bgcolor: light-dark(#FFA436, #FFBD4F);
  &[lwtheme] {
    --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, light-dark(rgb(0, 97, 224), rgb(0, 221, 255)));
    /* FIXME(emilio): This could have poor contrast on some themes, maybe use
     * contrast-color() once that's available, or compute a new variable in
     * LightWeightThemeConsumer */
    --toolbarbutton-icon-fill-attention-text: var(--toolbar-field-background-color);
  }
}

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

.toolbarbutton-animatable-box {
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

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

#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
#stop-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
#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 {
  scale: -1 1;
}

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

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

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

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

@keyframes stop-to-reload {
  /* pause on the first frame (step 0) for 6 frames of time */
  from {
    /* 0 */
    transform: translateX(0);
  }
  /* resume at 7/35 and animate across the next 14 frames */
  17.14% {
    animation-timing-function: steps(14);
    transform: translateX(calc(0  * -20px));
  }
  /* pause on the last frame for the remainder of the duration */
  54.29% {
    transform: translateX(calc(14 * -20px));
  }
  to {
    /* end state for animation: */
    transform: translateX(calc(var(--anim-frames) * -20px));
  }
}

@keyframes reload-to-stop {
  /* pause on the first frame (step 0) for 6 frames of time */
  from {
    /* 0 */
    transform: translateX(0);
    animation-timing-function: steps(12);
  }
  /* pause at 13/15 for 3 frames */
  86.67% {
    transform: translateX(calc(var(--anim-frames) * -20px));
  }
  to {
    /* end state for animation: */
    transform: translateX(calc(var(--anim-frames) * -20px));
  }
}

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

#reload-button > .toolbarbutton-animatable-box,
#stop-button > .toolbarbutton-animatable-box {
  top: calc(50% - 10px); /* Vertically center the 20px tall animatable image */
  width: 20px; /* Width of each frame within the SVG sprite */
  height: 20px; /* Height of each frame within the SVG sprite */
}

#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  background-image: url("chrome://browser/skin/stop-to-reload.svg");
  /*
    transition from stop icon to reload icon
    pause at frame 0 for 6 ticks,
    pause at frame 15 for 16 ticks
    total 35 steps*/
  --anim-frames: 14;
  --anim-steps: calc(var(--anim-frames) + 21); /* Add steps for doing the pause at the start and end */
  width: calc(20px * (var(--anim-frames) + 1));
  height: 20px;

  /* initial state for animation */
  transform: translateX(0);
}

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

#reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-duration: calc(var(--anim-steps) * 16.667ms);
}

#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  background-image: url("chrome://browser/skin/reload-to-stop.svg");
  /*
    transition from reload icon to stop icon
    pause at end for 3 frames of time
    pause at ...
    total 15 steps*/
  --anim-frames: 12;
  --anim-steps: calc(var(--anim-frames) + 3); /* Add steps for doing the pause at the start and end */
  width: calc(20px * (var(--anim-frames) + 1));
  height: 20px;

  /* initial state for animation */
  transform: translateX(0);
}

#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-name: reload-to-stop;
  animation-duration: calc(var(--anim-steps) * 16.667ms);
}

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

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

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

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

#stop-button {
  list-style-image: url("chrome://global/skin/icons/close.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/downloads.svg");
}

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

#screenshot-button {
  list-style-image: url("chrome://browser/skin/screenshot.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");
}

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

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

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

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

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

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

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

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

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

#profiler-button-button > .toolbarbutton-icon {
  list-style-image: url("chrome://devtools/skin/images/tool-profiler.svg");
}

#profiler-button-button:not(.profiler-active) > image {
  transform: scaleX(-1);
}

#profiler-button-button.profiler-active > image {
  fill: #0060df;
  fill-opacity: 1;
  background-color: #0060df33;
}

#profiler-button-button.profiler-active:hover > image {
  background-color: #0060df22;
}

#profiler-button-button.profiler-paused > image {
  opacity: 0.4;
}

#preferences-button {
  list-style-image: url("chrome://global/skin/icons/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-downloading"],
#PanelUI-menu-button[badge-status="update-manual"],
#PanelUI-menu-button[badge-status="update-other-instance"],
#PanelUI-menu-button[badge-status="update-restart"],
#PanelUI-menu-button[badge-status="update-unsupported"],
#PanelUI-menu-button[badge-status="addon-alert"],
#PanelUI-menu-button[badge-status="fxa-needs-authentication"] {
  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://global/skin/icons/edit-copy.svg");
}

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

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

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

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

#unified-extensions-button {
  list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
}

#reset-pbm-toolbar-button {
  list-style-image: url("chrome://browser/skin/flame.svg");

  :root:not([privatebrowsingmode]) & {
    display: none;
  }
}

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

#logins-button {
  list-style-image: url("chrome://browser/skin/login.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: light-dark(rgb(213, 32, 20), #ff848b);
}

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

#save-to-pocket-button {
  list-style-image: url("chrome://global/skin/icons/pocket-outline.svg");
  fill: var(--toolbarbutton-icon-fill);
}

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

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

.bookmark-item {
  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
  -moz-context-properties: fill;
  fill: currentColor;
}

toolbarbutton.bookmark-item {
  -moz-context-properties: fill, fill-opacity;
  fill: var(--toolbarbutton-icon-fill);
}

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

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

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

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

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

  toolbar[customizing] & {
    display: none;
  }
}

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

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

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

#content-analysis-indicator {
  -moz-context-properties: fill, stroke;
  stroke: var(--toolbarbutton-icon-fill);
  list-style-image: url("chrome://global/skin/icons/content-analysis.svg");
}