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

/* Responsive Mode */

.browserContainer[responsivemode] {
  background-color: #000;
  padding: 0 20px 20px 20px;
}

.browserStack[responsivemode] {
  box-shadow: 0 0 7px black;
}

.devtools-responsiveui-toolbar {
  -moz-appearance: none;
  background: transparent;
  /* text color is textColor from dark theme, since no theme is applied to
   * the responsive toolbar.
   */
  color: hsl(210,30%,85%);
  margin: 10px 0;
  padding: 0;
  box-shadow: none;
  border-bottom-width: 0;
}

.devtools-responsiveui-textinput {
  -moz-appearance: none;
  background: #000;
  color: #fff;
  border: 1px solid #111;
  border-radius: 2px;
  padding: 0 5px;
  width: 200px;
  margin: 0;
}

.devtools-responsiveui-textinput[attention] {
  border-color: #38ace6;
  background: rgba(56,172,230,0.4);
}

.devtools-responsiveui-menulist,
.devtools-responsiveui-toolbarbutton {
  -moz-appearance: none;
  -moz-box-align: center;
  min-width: 32px;
  min-height: 22px;
  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
  border: 1px solid hsla(210,8%,5%,.45);
  border-radius: 0;
  background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
  margin: 0 3px;
  color: inherit;
}

.devtools-responsiveui-menulist .menulist-editable-box {
  -moz-appearance: none;
  background-color: transparent;
}

.devtools-responsiveui-menulist > .menulist-editable-box > .menulist-editable-input {
  -moz-appearance: none;
  color: hsl(210,30%,85%);
  text-align: center;
}

.devtools-responsiveui-menulist > .menulist-editable-box > .menulist-editable-input::-moz-selection {
  background: hsla(212,7%,57%,.35);
}

.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}

.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
  -moz-box-orient: horizontal;
}

.devtools-responsiveui-menulist:-moz-focusring,
.devtools-responsiveui-toolbarbutton:-moz-focusring {
  outline: 1px dotted hsla(210,30%,85%,0.7);
  outline-offset: -4px;
}

.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
  display: none;
}

.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
  border-color: hsla(210,8%,5%,.6);
  background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}

.devtools-responsiveui-menulist[open=true],
.devtools-responsiveui-toolbarbutton[open=true],
.devtools-responsiveui-toolbarbutton[checked=true] {
  border-color: hsla(210,8%,5%,.6) !important;
  background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
  box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}

.devtools-responsiveui-toolbarbutton[checked=true] {
  color: hsl(208,100%,60%);
}

.devtools-responsiveui-toolbarbutton[checked=true]:hover {
  background-color: transparent !important;
}

.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
  background-color: hsla(210,8%,5%,.2) !important;
}

.devtools-responsiveui-menulist > .menulist-label-box {
  text-align: center;
}

.devtools-responsiveui-menulist > .menulist-dropmarker {
  -moz-appearance: none;
  display: -moz-box;
  background-color: transparent;
  list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
  -moz-box-align: center;
  border-width: 0;
  min-width: 16px;
}

.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
  -moz-appearance: none;
  color: inherit;
  border-width: 0;
  border-inline-end: 1px solid hsla(210,8%,5%,.45);
  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
}

.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
}

.devtools-responsiveui-toolbarbutton[type=menu-button] {
  padding: 0 1px;
  -moz-box-align: stretch;
}

.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
  -moz-appearance: none !important;
  list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
  -moz-box-align: center;
  padding: 0 3px;
}

.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
  margin-left: 0;
}

.devtools-responsiveui-close {
  list-style-image: url("chrome://devtools/skin/images/close.svg");
}

.devtools-responsiveui-close > image {
  filter: invert(1);
}

.devtools-responsiveui-rotate {
  list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png");
}

@media (min-resolution: 1.1dppx) {
  .devtools-responsiveui-rotate {
    list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png");
  }
}

.devtools-responsiveui-touch {
  list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch.png");
  -moz-image-region: rect(0px,16px,16px,0px);
}

.devtools-responsiveui-touch[checked] {
  -moz-image-region: rect(0px,32px,16px,16px);
}

@media (min-resolution: 1.1dppx) {
  .devtools-responsiveui-touch {
    list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch@2x.png");
    -moz-image-region: rect(0px,32px,32px,0px);
  }

  .devtools-responsiveui-touch[checked] {
    -moz-image-region: rect(0px,64px,32px,32px);
  }
}

.devtools-responsiveui-screenshot {
  list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot.png");
}

@media (min-resolution: 1.1dppx) {
  .devtools-responsiveui-screenshot {
    list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot@2x.png");
  }
}

.devtools-responsiveui-resizebarV {
  width: 7px;
  height: 24px;
  cursor: ew-resize;
  transform: translate(12px, -12px);
  background-size: cover;
  background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer.png");
}

.devtools-responsiveui-resizebarH {
  width: 24px;
  height: 7px;
  cursor: ns-resize;
  transform: translate(-12px, 12px);
  background-size: cover;
  background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer.png");
}

.devtools-responsiveui-resizehandle {
  width: 16px;
  height: 16px;
  cursor: se-resize;
  transform: translate(12px, 12px);
  background-size: cover;
  background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer.png");
}

/* FxOS custom mode with additional buttons and phone look'n feel */

/* Hide devtools manual resizer */
.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
  display: none;
}

/* Gives responsive mode a phone look'n feel */
.browserStack[responsivemode].fxos-mode {
  padding: 60px 15px 0;

  border-radius: 25px / 20px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #FFFFFF;
  border-bottom-width: 0;

  background-color: #000000;

  box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;

  background-image: linear-gradient(to right, #111 11%, #333 56%);
  min-width: 320px;
}

.devtools-responsiveui-hardware-buttons {
  -moz-appearance: none;
  padding: 20px;

  border: 1px solid #FFFFFF;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top-width: 0;

  box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;

  background-image: linear-gradient(to right, #111 11%, #333 56%);
}

.devtools-responsiveui-home-button {
  -moz-user-focus: ignore;
  width: 40px;
  height: 30px;
  list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-home.png");
}

.devtools-responsiveui-sleep-button {
  -moz-user-focus: ignore;
  -moz-appearance: none;
  /* compensate browserStack top padding */
  margin-top: -67px;
  margin-right: 10px;

  min-width: 10px;
  width: 50px;
  height: 5px;

  border: 1px solid #444;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  border-bottom-color: transparent;

  background-image: linear-gradient(to top, #111 11%, #333 56%);
}

.devtools-responsiveui-sleep-button:hover:active {
  background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
}

.devtools-responsiveui-volume-buttons {
  margin-left: -29px;
}

.devtools-responsiveui-volume-up-button,
.devtools-responsiveui-volume-down-button {
  -moz-user-focus: ignore;
  -moz-appearance: none;
  border: 1px solid red;
  min-width: 8px;
  height: 40px;

  border: 1px solid #444;
  border-right-color: transparent;

  background-image: linear-gradient(to right, #111 11%, #333 56%);
}

.devtools-responsiveui-volume-up-button:hover:active,
.devtools-responsiveui-volume-down-button:hover:active {
  background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
}

.devtools-responsiveui-volume-up-button {
  border-top-left-radius: 12px;
}

.devtools-responsiveui-volume-down-button {
  border-bottom-left-radius: 12px;
}

@media (min-resolution: 1.1dppx) {
  .devtools-responsiveui-resizebarV {
    background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer@2x.png");
  }

  .devtools-responsiveui-resizebarH {
    background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer@2x.png");
  }

  .devtools-responsiveui-resizehandle {
    background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer@2x.png");
  }
}

/* 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: #fcfcfc; /* --theme-tab-toolbar-background */
  --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */
  --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
  --gcli-input-color: #393f4c; /* --theme-body-color */
  --gcli-border-color: #dde1e4; /* --theme-splitter-color */
  --selection-background: #4c9ed9; /* --theme-selection-background */
  --selection-color: #f5f7fa; /* --theme-selection-color */
  --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
  --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
}

:root[devtoolstheme="dark"] #developer-toolbar {
  --gcli-background-color: #272b35; /* --theme-toolbar-background */
  --gcli-input-background: #272b35; /* --theme-tab-toolbar-background */
  --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */
  --gcli-input-color: #b6babf; /* --theme-body-color-alt */
  --gcli-border-color: #454d5d; /* --theme-splitter-color */
  --selection-background: #5675b9; /* --theme-selection-background */
  --selection-color: #f5f7fa; /* --theme-selection-color */
  --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */
  --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */
}

#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-color: transparent;
  margin: 0;
  padding: 0 10px;
  width: 32px;
}

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

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

.developer-toolbar-button > .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);
  }
}

/* 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: var(--command-line-image);
}

.gclitoolbar-input-node[focused="true"]::before {
  background-image: var(--command-line-image-focus);
}

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

/* Error counter */

#developer-toolbar-toolbox-button[error-count]:before {
  color: #FDF3DE;
  min-width: 16px;
  text-shadow: none;
  background-image: linear-gradient(#B4211B, #8A1915);
  border-radius: 1px;
  margin-inline-end: 5px;
}