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

.dbg-img {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  /* use background-color for the icon color, and mask-image for its shape */
  background-color: var(--theme-icon-color);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  /* multicolor icons use background-image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  /* do not let images shrink when used as flex children */
  flex-shrink: 0;
}

/* Expand arrow icon */
.dbg-img.dbg-img-arrow {
  width: 10px;
  height: 10px;
  mask-image: url(chrome://devtools/content/debugger/images/arrow.svg);
  /* we may override the width/height in specific contexts to make the
     clickable area bigger, but we should always keep the mask size 10x10 */
  mask-size: 10px 10px;
  background-color: var(--theme-icon-dimmed-color);
  transform: rotate(-90deg);
  transition: transform 180ms var(--animation-curve);
}

.dbg-img.dbg-img-arrow:dir(rtl) {
  transform: rotate(90deg);
}

.dbg-img.dbg-img-arrow.expanded {
  /* icon should always point to the bottom (default) when expanded,
  regardless of the text direction */
  transform: none !important;
}

.dbg-img.dbg-img-arrow-down {
  mask-image: url(chrome://devtools/content/debugger/images/arrow-down.svg);
}

.dbg-img.dbg-img-arrow-up {
  mask-image: url(chrome://devtools/content/debugger/images/arrow-up.svg);
}

.dbg-img.dbg-img-blackBox {
  mask-image: url(chrome://devtools/content/debugger/images/blackBox.svg);
}

.dbg-img.dbg-img-close {
  mask-image: url(chrome://devtools/skin/images/close.svg);
}

.dbg-img.dbg-img-disable-pausing {
  mask-image: url(chrome://devtools/content/debugger/images/disable-pausing.svg);
}

.dbg-img.dbg-img-enable-pausing {
  mask-image: url(chrome://devtools/content/debugger/images/enable-pausing.svg);
  background-color: var(--theme-icon-checked-color);
}

.dbg-img.dbg-img-globe {
  mask-image: url(chrome://devtools/content/debugger/images/globe.svg);
}

.dbg-img.dbg-img-globe-small {
  mask-image: url(chrome://devtools/content/debugger/images/globe-small.svg);
  mask-size: 12px 12px;
}

.dbg-img.dbg-img-window {
  mask-image: url(chrome://devtools/content/debugger/images/window.svg);
}

.dbg-img.dbg-img-file {
  background-image: url(chrome://devtools/content/debugger/images/file-small.svg);
  background-size: 12px 12px;
  background-color: transparent !important;
  -moz-context-properties: fill;
  fill: var(--theme-icon-color);
}

.dbg-img.dbg-img-folder {
  mask-image: url(chrome://devtools/content/debugger/images/folder.svg);
}

.dbg-img.dbg-img-back {
  background-image: url(chrome://devtools/skin/images/webconsole/return.svg);
  -moz-context-properties: fill;
  fill: var(--theme-icon-color);
  background-color: unset;
}

.dbg-img.dbg-img-info {
  mask-image: url(chrome://devtools/skin/images/info.svg);
}

.dbg-img.dbg-img-loader {
  background-image: url(chrome://devtools/content/debugger/images/loader.svg);
  -moz-context-properties: fill;
  fill: var(--theme-icon-color);
  background-color: unset;
}

.dbg-img-loader.spin {
  animation: spin 0.5s linear infinite;
}

.dbg-img.dbg-img-more-tabs {
  mask-image: url(chrome://devtools/content/debugger/images/command-chevron.svg);
}

html[dir="rtl"] .dbg-img.dbg-img-more-tabs {
  transform: scaleX(-1);
}

.dbg-img.dbg-img-sourcemap {
  background-image: url(chrome://devtools/content/debugger/images/sourcemap.svg);
  -moz-context-properties: fill;
  fill: var(--theme-icon-warning-color);
  background-color: unset;
}

.dbg-img.dbg-img-next {
  mask-image: url(chrome://devtools/content/debugger/images/next.svg);
}

.dbg-img.dbg-img-next-circle {
  mask-image: url(chrome://devtools/content/debugger/images/next-circle.svg);
}

.dbg-img.dbg-img-pane-collapse {
  mask-image: url(chrome://devtools/content/debugger/images/pane-collapse.svg);
}

.dbg-img.dbg-img-pane-expand {
  mask-image: url(chrome://devtools/content/debugger/images/pane-expand.svg);
}

.dbg-img.dbg-img-pause {
  mask-image: url(chrome://devtools/content/debugger/images/pause.svg);
}

.dbg-img.dbg-img-plus {
  mask-image: url(chrome://devtools/skin/images/add.svg);
}

.dbg-img.dbg-img-prettyPrint {
  background-image: url(chrome://devtools/content/debugger/images/prettyPrint.svg);
  background-size: 14px 14px;
  background-color: transparent !important;
  fill: var(--theme-icon-color);
  -moz-context-properties: fill, stroke;
}

.dbg-img.dbg-img-removeAll {
  mask-image: url(chrome://devtools/skin/images/clear.svg);
}

.dbg-img.dbg-img-refresh {
  mask-image: url(chrome://devtools/skin/images/reload.svg);
}

.dbg-img.dbg-img-resume {
  mask-image: url(resource://devtools-shared-images/resume.svg);
}

.dbg-img.dbg-img-search {
  mask-image: url(chrome://devtools/content/debugger/images/search.svg);
}

.dbg-img.dbg-img-shortcuts {
  mask-image: url(chrome://devtools/content/debugger/images/help.svg);
}

.dbg-img.dbg-img-stepIn {
  mask-image: url(chrome://devtools/content/debugger/images/stepIn.svg);
}

.dbg-img.dbg-img-stepOut {
  mask-image: url(chrome://devtools/content/debugger/images/stepOut.svg);
}

.dbg-img.dbg-img-stepOver {
  mask-image: url(resource://devtools-shared-images/stepOver.svg);
}

.dbg-img.dbg-img-tab {
  mask-image: url(chrome://devtools/content/debugger/images/tab.svg);
}

.dbg-img.dbg-img-worker {
  mask-image: url(chrome://devtools/content/debugger/images/worker.svg);
}

.dbg-img.dbg-img-extension {
  mask-image: url(chrome://devtools/content/debugger/images/sources/extension.svg);
}