%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

/* Developer toolbar */

/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
   We are copy/pasting variables from light-theme and dark-theme,
   since they aren't loaded in this context (within browser.css). */
:root[devtoolstheme="light"] #developer-toolbar {
  --gcli-background-color: #ebeced; /* --theme-tab-toolbar-background */
  --gcli-input-background: #f0f1f2; /* --theme-toolbar-background */
  --gcli-input-focused-background: #f7f7f7; /* --theme-sidebar-background */
  --gcli-input-color: #18191a; /* --theme-body-color */
  --gcli-border-color: #aaaaaa; /* --theme-splitter-color */
  --selection-background: #4c9ed9; /* --theme-selection-background */
  --selection-color: #f5f7fa; /* --theme-selection-color */
}

:root[devtoolstheme="dark"] #developer-toolbar {
  --gcli-background-color: #343c45; /* --theme-toolbar-background */
  --gcli-input-background: rgba(37, 44, 51, .6); /* --theme-tab-toolbar-background */
  --gcli-input-focused-background: #252c33; /* --theme-tab-toolbar-background */
  --gcli-input-color: #b6babf; /* --theme-body-color-alt */
  --gcli-border-color: black; /* --theme-splitter-color */
  --selection-background: #1d4f73; /* --theme-selection-background */
  --selection-color: #f5f7fa; /* --theme-selection-color */
}

#developer-toolbar {
  -moz-appearance: none;
  padding: 0;
  min-height: 32px;
  background-color: var(--gcli-background-color);
  border-top: 1px solid var(--gcli-border-color);
}

#developer-toolbar > toolbarbutton {
  -moz-appearance: none;
  border: none;
  background: transparent;
  margin: 0;
  padding: 0 10px;
  width: 32px;
}

.developer-toolbar-button > image {
  margin: auto 10px;
}

:root[devtoolstheme="light"] #developer-toolbar > toolbarbutton:not([checked=true]) > image,
:root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before  {
  filter: invert(1);
}

.developer-toolbar-button > .toolbarbutton-icon,
#developer-toolbar-closebutton > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}

#developer-toolbar-toolbox-button {
  list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}

#developer-toolbar-toolbox-button > label {
  display: none;
}

#developer-toolbar-toolbox-button:hover {
  -moz-image-region: rect(0px, 32px, 16px, 16px);
}

#developer-toolbar-toolbox-button:hover:active {
  -moz-image-region: rect(0px, 48px, 16px, 32px);
}

#developer-toolbar-toolbox-button[checked=true] {
  -moz-image-region: rect(0px, 64px, 16px, 48px);
}

@media (min-resolution: 1.1dppx) {
  #developer-toolbar-toolbox-button {
    list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
    -moz-image-region: rect(0px, 32px, 32px, 0px);
  }

  #developer-toolbar-toolbox-button:hover {
    -moz-image-region: rect(0px, 64px, 32px, 32px);
  }

  #developer-toolbar-toolbox-button:hover:active {
    -moz-image-region: rect(0px, 96px, 32px, 64px);
  }

  #developer-toolbar-toolbox-button[checked=true] {
    -moz-image-region: rect(0px, 128px, 32px, 96px);
  }
}

#developer-toolbar-closebutton {
  list-style-image: url("chrome://devtools/skin/images/close.png");
  -moz-appearance: none;
  border: none;
  margin: 0 4px;
  min-width: 16px;
  width: 16px;
  opacity: 0.6;
}

@media (min-resolution: 1.1dppx) {
  #developer-toolbar-closebutton {
    list-style-image: url("chrome://devtools/skin/images/close@2x.png");
  }
}

#developer-toolbar-closebutton > .toolbarbutton-icon {
  /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
     use evil CSS to give the impression of smaller content */
  margin: -4px;
}

#developer-toolbar-closebutton > .toolbarbutton-text {
  display: none;
}

#developer-toolbar-closebutton:hover {
  opacity: 0.8;
}

#developer-toolbar-closebutton:hover:active {
  opacity: 1;
}

/* GCLI */

html|*#gcli-tooltip-frame,
html|*#gcli-output-frame {
  padding: 0;
  border-width: 0;
  background-color: transparent;
}

#gcli-output,
#gcli-tooltip {
  border-width: 0;
  background-color: transparent;
  -moz-appearance: none;
}

.gclitoolbar-input-node,
.gclitoolbar-complete-node {
  margin: 0;
  -moz-box-align: center;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 8px;
  text-shadow: none;
  box-shadow: none;
  border-width: 0;
  background-color: transparent;
  border-radius: 0;
}

.gclitoolbar-input-node {
  -moz-appearance: none;
  color: var(--gcli-input-color);
  background-color: var(--gcli-input-background);
  background-repeat: no-repeat;
  background-position: 4px center;
  box-shadow: 1px 0 0 var(--gcli-border-color) inset,
              -1px 0 0 var(--gcli-border-color) inset;

  line-height: 32px;
  outline-style: none;
  padding: 0;
}

.gclitoolbar-input-node[focused="true"] {
  background-color: var(--gcli-input-focused-background);
}

.gclitoolbar-input-node::before {
  content: "";
  display: inline-block;
  -moz-box-ordinal-group: 0;
  width: 16px;
  height: 16px;
  margin: 0 2px;
  background-image: url("chrome://devtools/skin/images/commandline-icon.png");
  background-position: 0 center;
  background-size: 32px 16px;
}

.gclitoolbar-input-node[focused="true"]::before {
  background-position: -16px center;
}

@media (min-resolution: 1.1dppx) {
  .gclitoolbar-input-node::before {
    background-image: url("chrome://devtools/skin/images/commandline-icon@2x.png");
  }
}

.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
  background-color: var(--selection-background);
  color: var(--selection-color);
  text-shadow: none;
}

.gclitoolbar-complete-node {
  padding-left: 21px;
  background-color: transparent;
  color: transparent;
  z-index: 100;
  pointer-events: none;
}

.gcli-in-incomplete,
.gcli-in-error,
.gcli-in-ontab,
.gcli-in-todo,
.gcli-in-closebrace,
.gcli-in-param,
.gcli-in-valid {
  margin: 0;
  padding: 0;
}

.gcli-in-incomplete {
  border-bottom: 2px dotted #999;
}

.gcli-in-error {
  border-bottom: 2px dotted #F00;
}

.gcli-in-ontab {
  color: hsl(210,0%,35%);
}

.gcli-in-todo {
  color: hsl(210,50%,35%);
}

.gcli-in-closebrace {
  color: hsl(0,0%,80%);
}