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

/**
 * Variant of AccessibleImage used in sources list and tabs.
 * Define the different source type / framework / library icons here.
 */

.source-icon {
  margin-inline-end: 4px;
}

/* Icons for frameworks and libs */

.img.aframe {
  background-image: url(chrome://devtools/content/debugger/images/sources/aframe.svg);
  background-color: transparent !important;
}

.img.angular {
  background-image: url(chrome://devtools/content/debugger/images/sources/angular.svg);
  background-color: transparent !important;
}

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

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

.img.choo {
  background-image: url(chrome://devtools/content/debugger/images/sources/choo.svg);
  background-color: transparent !important;
}

.img.coffeescript {
  background-image: url(chrome://devtools/content/debugger/images/sources/coffeescript.svg);
  background-color: transparent !important;
  fill: var(--theme-icon-color);
  -moz-context-properties: fill;
}

.img.dojo {
  background-image: url(chrome://devtools/content/debugger/images/sources/dojo.svg);
  background-color: transparent !important;
}

.img.ember {
  background-image: url(chrome://devtools/content/debugger/images/sources/ember.svg);
  background-color: transparent !important;
}

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

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

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

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

.img.override::after {
  content: "";
  display: block;
  height: 5px;
  width: 5px;
  background-color: var(--purple-30);
  border-radius: 100%;
  outline: 1px solid 	var(--theme-sidebar-background);
  translate: 12px 10px;
}

.node.focused .img.override::after {
  outline-color: var(--theme-selection-background);
}

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

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

.img.marko {
  background-image: url(chrome://devtools/content/debugger/images/sources/marko.svg);
  background-color: transparent !important;
}

.img.mobx {
  background-image: url(chrome://devtools/content/debugger/images/sources/mobx.svg);
  background-color: transparent !important;
}

.img.nextjs {
  background-image: url(chrome://devtools/content/debugger/images/sources/nextjs.svg);
  background-color: transparent !important;
}

.img.node {
  background-image: url(chrome://devtools/content/debugger/images/sources/node.svg);
  background-color: transparent !important;
}

.img.nuxtjs {
  background-image: url(chrome://devtools/content/debugger/images/sources/nuxtjs.svg);
  background-color: transparent !important;
}

.img.preact {
  background-image: url(chrome://devtools/content/debugger/images/sources/preact.svg);
  background-color: transparent !important;
}

.img.pug {
  background-image: url(chrome://devtools/content/debugger/images/sources/pug.svg);
  background-color: transparent !important;
}

.img.react {
  background-image: url(chrome://devtools/content/debugger/images/sources/react.svg);
  background-color: transparent !important;
  fill: var(--theme-highlight-bluegrey);
  -moz-context-properties: fill;
}

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

.img.rxjs {
  background-image: url(chrome://devtools/content/debugger/images/sources/rxjs.svg);
  background-color: transparent !important;
}

.img.sencha-extjs {
  background-image: url(chrome://devtools/content/debugger/images/sources/sencha-extjs.svg);
  background-color: transparent !important;
}

.img.typescript {
  background-image: url(chrome://devtools/content/debugger/images/sources/typescript.svg);
  background-color: transparent !important;
  fill: var(--theme-icon-color);
  -moz-context-properties: fill;
}

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

/* We use both 'Vue' and 'VueJS' when identifying frameworks */
.img.vue,
.img.vuejs {
  background-image: url(chrome://devtools/content/debugger/images/sources/vuejs.svg);
  background-color: transparent !important;
}

.img.webpack {
  background-image: url(chrome://devtools/content/debugger/images/sources/webpack.svg);
  background-color: transparent !important;
}