/*
 * Copyright 2015 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

* {
  box-sizing: border-box;
  /* This is required for correct sizing of flex items because we rely
     * on an old version of the flexbox spec. */

  min-width: 0;
  min-height: 0;
}

:root {
  height: 100%;
  overflow: hidden;
  /**
   * NOTE: please don't add to these colours!
   * We are migrating to a new set of theme colors (see below for details) and over time these colors will be deprecated / removed.
   * Chat to jacktfranklin@ or petermueller@ if you have questions.
   * https://crbug.com/1122511
   */
  --legacy-accent-color: #1a73e8;
  --legacy-accent-fg-color: #1a73e8;
  --legacy-accent-color-hover: #3b86e8;
  --legacy-accent-fg-color-hover: #1567d3;
  --legacy-active-control-bg-color: #5a5a5a;
  --legacy-focus-bg-color: hsl(214deg 40% 92%);
  --legacy-focus-ring-inactive-shadow-color: #e0e0e0;
  --legacy-input-validation-error: #db1600;
  --legacy-toolbar-hover-bg-color: #eaeaea;
  --legacy-selection-fg-color: #fff;
  --legacy-selection-bg-color: var(--legacy-accent-color);
  --legacy-selection-inactive-fg-color: #5a5a5a;
  --legacy-selection-inactive-bg-color: #dadada;
  --legacy-tab-selected-fg-color: #333;
  --legacy-divider-border: 1px solid var(--color-details-hairline);
  --legacy-focus-ring-inactive-shadow: 0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);
  --legacy-focus-ring-active-shadow: 0 0 0 1px var(--legacy-accent-color);
  --legacy-item-selection-bg-color: #cfe8fc;
  --legacy-item-selection-inactive-bg-color: #e0e0e0;
  --item-hover-color: rgb(56 121 217 / 10%);
  --monospace-font-size: 10px;
  --monospace-font-family: monospace;
  --source-code-font-size: 11px;
  --source-code-font-family: monospace;
  --override-force-white-icons-background: #fafafa;
}

.-theme-with-dark-background {
  /**
   * Inherit the native form control colors when using a dark theme.
   * Override them using CSS variables if needed.
   */
  color-scheme: dark;
  /**
   * NOTE: please don't add to these colours!
   * We are migrating to a new set of theme colors (see below for details) and over time these colors will be deprecated / removed.
   * Chat to jacktfranklin@ or petermueller@ if you have questions.
   * https://crbug.com/1122511
   */
  --legacy-accent-color: #0e639c;
  --legacy-accent-fg-color: #ccc;
  --legacy-accent-fg-color-hover: #fff;
  --legacy-accent-color-hover: rgb(17 119 187);
  --legacy-active-control-bg-color: #cdcdcd;
  --legacy-focus-bg-color: hsl(214deg 19% 27%);
  --legacy-focus-ring-inactive-shadow-color: #5a5a5a;
  --legacy-toolbar-hover-bg-color: #202020;
  --legacy-selection-fg-color: #cdcdcd;
  --legacy-selection-inactive-fg-color: #cdcdcd;
  --legacy-selection-inactive-bg-color: hsl(0deg 0% 28%);
  --legacy-tab-selected-fg-color: #eaeaea;
  --legacy-focus-ring-inactive-shadow: 0 0 0 1px var(--legacy-focus-ring-inactive-shadow-color);
  --legacy-item-selection-bg-color: hsl(207deg 88% 22%);
  --legacy-item-selection-inactive-bg-color: #454545;
}

body {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 0;
  cursor: default;
  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
  font-size: 12px;
  tab-size: 4;
  user-select: none;
  color: var(--color-text-primary);
  background: var(--color-background);
}

/* Default fonts */
.platform-linux {
  font-family: Roboto, Ubuntu, Arial, sans-serif;
}

.platform-mac {
  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
}

.platform-mac,
.platform-linux {
  --override-text-color: rgb(48 57 66);

  color: var(--override-text-color);
}

.platform-windows {
  font-family: "Segoe UI", Tahoma, sans-serif;
}

:focus {
  outline-width: 0;
}

/* Monospace font per platform configuration */
.platform-mac,
:host-context(.platform-mac) {
  --monospace-font-size: 11px;
  --monospace-font-family: menlo, monospace;
  --source-code-font-size: 11px;
  --source-code-font-family: menlo, monospace;
}

.platform-windows,
:host-context(.platform-windows) {
  --monospace-font-size: 12px;
  --monospace-font-family: consolas, lucida console, courier new, monospace;
  --source-code-font-size: 12px;
  --source-code-font-family: consolas, lucida console, courier new, monospace;
}

.platform-linux,
:host-context(.platform-linux) {
  --monospace-font-size: 11px;
  --monospace-font-family: dejavu sans mono, monospace;
  --source-code-font-size: 11px;
  --source-code-font-family: dejavu sans mono, monospace;
}

.-theme-with-dark-background .platform-linux,
.-theme-with-dark-background .platform-mac,
:host-context(.-theme-with-dark-background) .platform-linux,
:host-context(.-theme-with-dark-background) .platform-mac {
  --override-text-color: rgb(189 198 207);
}

.monospace {
  font-family: var(--monospace-font-family);
  font-size: var(--monospace-font-size) !important; /* stylelint-disable-line declaration-no-important */
}

.source-code {
  font-family: var(--source-code-font-family);
  font-size: var(--source-code-font-size) !important; /* stylelint-disable-line declaration-no-important */
  white-space: pre-wrap;
}

img {
  -webkit-user-drag: none;
}

iframe,
a img {
  border: none;
}

.fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

iframe.fill {
  width: 100%;
  height: 100%;
}

.widget {
  position: relative;
  flex: auto;
  contain: style;
}

.hbox {
  display: flex;
  flex-direction: row !important; /* stylelint-disable-line declaration-no-important */
  position: relative;
}

.vbox {
  display: flex;
  flex-direction: column !important; /* stylelint-disable-line declaration-no-important */
  position: relative;
}

.view-container > .toolbar {
  border-bottom: 1px solid var(--color-details-hairline);
}

.flex-auto {
  flex: auto;
}

.flex-none {
  flex: none;
}

.flex-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.overflow-auto {
  overflow: auto;
  background-color: var(--color-background);
}

iframe.widget {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.hidden {
  display: none !important; /* stylelint-disable-line declaration-no-important */
}

.highlighted-search-result {
  --override-highlighted-search-result-background-color: rgb(255 255 0 / 80%);

  border-radius: 1px;
  background-color: var(--override-highlighted-search-result-background-color);
  outline: 1px solid var(--override-highlighted-search-result-background-color);
}

.-theme-with-dark-background .highlighted-search-result,
:host-context(.-theme-with-dark-background) .highlighted-search-result {
  --override-highlighted-search-result-background-color: hsl(133deg 100% 30%);

  color: #333;
}

.link {
  cursor: pointer;
  text-decoration: underline;
  color: var(--color-link);
}

button,
input,
select {
  /* Form elements do not automatically inherit font style from ancestors. */
  font-family: inherit;
  font-size: inherit;
}

select option,
select optgroup,
input {
  background-color: var(--color-background);
}

input {
  color: inherit;
}

input::placeholder {
  --override-input-placeholder-color: rgb(0 0 0 / 54%);

  color: var(--override-input-placeholder-color);
}

.-theme-with-dark-background input::placeholder,
:host-context(.-theme-with-dark-background) input::placeholder {
  --override-input-placeholder-color: rgb(230 230 230 / 54%);
}

:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
  accent-color: var(--color-checkbox-accent-color);
}

.harmony-input:not([type]),
.harmony-input[type="number"],
.harmony-input[type="text"] {
  padding: 3px 6px;
  height: 24px;
  border: none;
  box-shadow: var(--legacy-focus-ring-inactive-shadow);
}

.harmony-input:not([type]).error-input,
.harmony-input[type="number"].error-input,
.harmony-input[type="text"].error-input,
.harmony-input:not([type]):invalid,
.harmony-input[type="number"]:invalid,
.harmony-input[type="text"]:invalid {
  box-shadow: 0 0 0 1px var(--color-red);
}

.harmony-input:not([type]):not(.error-input):not(:invalid):hover,
.harmony-input[type="number"]:not(.error-input):not(:invalid):hover,
.harmony-input[type="text"]:not(.error-input):not(:invalid):hover {
  box-shadow: var(--legacy-focus-ring-inactive-shadow);
}

.harmony-input:not([type]):not(.error-input):not(:invalid):focus,
.harmony-input[type="number"]:not(.error-input):not(:invalid):focus,
.harmony-input[type="text"]:not(.error-input):not(:invalid):focus {
  box-shadow: var(--legacy-focus-ring-active-shadow);
}

.highlighted-search-result.current-search-result {
  /* Note: this value is used in light & dark mode */
  --override-current-search-result-background-color: rgb(255 127 0 / 80%);

  border-radius: 1px;
  padding: 1px;
  margin: -1px;
  background-color: var(--override-current-search-result-background-color);
}

.dimmed {
  opacity: 60%;
}

.editing {
  box-shadow: var(--drop-shadow);
  background-color: var(--color-background);
  text-overflow: clip !important; /* stylelint-disable-line declaration-no-important */
  padding-left: 2px;
  margin-left: -2px;
  padding-right: 2px;
  margin-right: -2px;
  margin-bottom: -1px;
  padding-bottom: 1px;
  opacity: 100% !important; /* stylelint-disable-line declaration-no-important */
}

.editing,
.editing * {
  color: var(--color-text-primary) !important; /* stylelint-disable-line declaration-no-important */
  text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
}

.chrome-select {
  --override-chrome-select-border-color: rgb(0 0 0 / 20%);

  appearance: none;
  user-select: none;
  border: 1px solid var(--override-chrome-select-border-color);
  border-radius: 2px;
  color: var(--color-text-primary);
  font: inherit;
  margin: 0;
  outline: none;
  padding-right: 20px;
  padding-left: 6px;
  background-image: var(--image-file-chromeSelect);
  background-color: var(--color-background-elevation-0);
  background-position: right center;
  background-repeat: no-repeat;
  min-height: 24px;
  min-width: 80px;
  background-size: 15px;
}

.chrome-select:disabled {
  opacity: 38%;
}

.-theme-with-dark-background .chrome-select,
:host-context(.-theme-with-dark-background) .chrome-select {
  --override-chrome-select-border-color: rgb(230 230 230 / 20%);

  background-image: var(--image-file-chromeSelectDark);
}

.chrome-select:enabled:active,
.chrome-select:enabled:focus,
.chrome-select:enabled:hover {
  --override-select-box-shadow: 0 0 0 2px var(--color-button-outline-focus);

  background-color: var(--color-background-elevation-1);
  box-shadow: var(--override-select-box-shadow);
}

.chrome-select:enabled:active {
  background-color: var(--color-background-elevation-2);
}

.chrome-select:enabled:focus {
  border-color: transparent;
}

.-theme-with-dark-background .chrome-select:enabled:active,
.-theme-with-dark-background .chrome-select:enabled:focus,
.-theme-with-dark-background .chrome-select:enabled:hover,
:host-context(.-theme-with-dark-background) .chrome-select:enabled:active,
:host-context(.-theme-with-dark-background) .chrome-select:enabled:focus,
:host-context(.-theme-with-dark-background) .chrome-select:enabled:hover {
  --override-select-box-shadow: 0 0 0 2px var(--color-button-outline-focus);
}

.chrome-select-label {
  margin: 0 22px;
  flex: none;
}

.chrome-select-label p p {
  margin-top: 0;
  color: var(--color-text-secondary);
}

/* This class is used outside of the settings screen in the "Renderer" and
   "Sensors" panel. As such we need to override their style globally */
.settings-select {
  margin: 0;
}

.chrome-select optgroup,
.chrome-select option {
  background-color: var(--color-background-elevation-1);
  color: var(--color-text-primary);
}

.gray-info-message {
  text-align: center;
  font-style: italic;
  padding: 6px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

span[is="dt-icon-label"] {
  flex: none;
}

.full-widget-dimmed-banner a {
  color: inherit;
}

.full-widget-dimmed-banner {
  color: var(--color-text-secondary);
  background-color: var(--color-background);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 13px;
  overflow: auto;
  z-index: 500;
}

[is="ui-icon"] {
  display: inline-block;
  flex-shrink: 0;
}

.-theme-with-dark-background [is="ui-icon"].icon-invert,
:host-context(.-theme-with-dark-background) [is="ui-icon"].icon-invert {
  filter: invert(80%) hue-rotate(180deg);
}

[is="ui-icon"].icon-mask {
  --override-icon-mask-background-color: rgb(110 110 110);

  background-color: var(--override-icon-mask-background-color);
  -webkit-mask-position: var(--spritesheet-position);
}

.-theme-with-dark-background [is="ui-icon"].icon-mask,
:host-context(.-theme-with-dark-background) [is="ui-icon"].icon-mask {
  --override-icon-mask-background-color: rgb(145 145 145);
}

[is="ui-icon"]:not(.icon-mask) {
  background-position: var(--spritesheet-position);
}

.spritesheet-smallicons:not(.icon-mask) {
  background-image: var(--image-file-smallIcons);
}

.spritesheet-smallicons.icon-mask {
  -webkit-mask-image: var(--image-file-smallIcons);
}

.spritesheet-largeicons:not(.icon-mask) {
  background-image: var(--image-file-largeIcons);
}

.spritesheet-largeicons.icon-mask {
  -webkit-mask-image: var(--image-file-largeIcons);
}

.spritesheet-mediumicons:not(.icon-mask) {
  background-image: var(--image-file-mediumIcons);
}

.spritesheet-mediumicons.icon-mask {
  -webkit-mask-image: var(--image-file-mediumIcons);
}

.spritesheet-arrowicons {
  background-image: var(--image-file-popoverArrows);
}

.force-white-icons [is="ui-icon"].spritesheet-smallicons,
:host-context(.force-white-icons) [is="ui-icon"].spritesheet-smallicons,
[is="ui-icon"].force-white-icons.spritesheet-smallicons,
.-theme-preserve {
  -webkit-mask-image: var(--image-file-smallIcons);
  -webkit-mask-position: var(--spritesheet-position);
  background: var(--override-force-white-icons-background) !important; /* stylelint-disable-line declaration-no-important */
}

.force-white-icons [is="ui-icon"].spritesheet-largeicons,
:host-context(.force-white-icons) [is="ui-icon"].spritesheet-largeicons,
[is="ui-icon"].force-white-icons.spritesheet-largeicons,
.-theme-preserve {
  -webkit-mask-image: var(--image-file-largeIcons);
  -webkit-mask-position: var(--spritesheet-position);
  background: var(--override-force-white-icons-background) !important; /* stylelint-disable-line declaration-no-important */
}

.force-white-icons [is="ui-icon"].spritesheet-mediumicons,
:host-context(.force-white-icons) [is="ui-icon"].spritesheet-mediumicons,
[is="ui-icon"].force-white-icons.spritesheet-mediumicons,
.-theme-preserve {
  -webkit-mask-image: var(--image-file-mediumIcons);
  -webkit-mask-position: var(--spritesheet-position);
  background: var(--override-force-white-icons-background) !important; /* stylelint-disable-line declaration-no-important */
}

.expandable-inline-button {
  background-color: var(--color-background-elevation-2);
  color: var(--color-text-primary);
  cursor: pointer;
  border-radius: 3px;
}

.undisplayable-text,
.expandable-inline-button {
  padding: 1px 3px;
  margin: 0 2px;
  font-size: 11px;
  font-family: sans-serif;
  white-space: nowrap;
  display: inline-block;
}

.undisplayable-text::after,
.expandable-inline-button::after {
  content: attr(data-text);
}

.undisplayable-text {
  color: var(--color-text-disabled);
  font-style: italic;
}

.expandable-inline-button:hover,
.expandable-inline-button:focus-visible {
  background-color: var(--color-background-elevation-1);
}

.expandable-inline-button:focus-visible {
  background-color: var(--color-background-elevation-1);
}

::selection {
  --override-selection-background-color: rgb(141 199 248 / 60%);

  background-color: var(--override-selection-background-color);
}

.-theme-with-dark-background *::selection,
:host-context(.-theme-with-dark-background) *::selection {
  background-color: rgb(93 93 93 / 60%);
}

.reload-warning {
  align-self: center;
  margin-left: 10px;
}

button.link {
  border: none;
  background: none;
  padding: 3px;
}

button.link:focus-visible {
  --override-link-focus-background-color: rgb(0 0 0 / 8%);

  background-color: var(--override-link-focus-background-color);
  border-radius: 2px;
}

.-theme-with-dark-background button.link:focus-visible,
:host-context(.-theme-with-dark-background) button.link:focus-visible {
  --override-link-focus-background-color: rgb(230 230 230 / 8%);
}

/* See ARIAUtils.js */
[data-aria-utils-animation-hack] {
  animation: ANIMATION-HACK 0s;
}

@keyframes ANIMATION-HACK {
  /* empty keyframe to trigger the animation hack above */
}

@media (forced-colors: active) {
  .dimmed,
  .chrome-select:disabled {
    opacity: 100%;
  }

  [is="ui-icon"].icon-mask,
  .force-white-icons [is="ui-icon"].spritesheet-smallicons,
  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-smallicons,
  [is="ui-icon"].force-white-icons.spritesheet-smallicons,
  .force-white-icons [is="ui-icon"].spritesheet-largeicons,
  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-largeicons,
  [is="ui-icon"].force-white-icons.spritesheet-largeicons,
  .force-white-icons [is="ui-icon"].spritesheet-mediumicons,
  :host-context(.force-white-icons) [is="ui-icon"].spritesheet-mediumicons,
  [is="ui-icon"].force-white-icons.spritesheet-mediumicons,
  .-theme-preserve {
    forced-color-adjust: none;
    background-color: ButtonText;
  }

  .harmony-input:not([type]),
  .harmony-input[type="number"],
  .harmony-input[type="text"] {
    border: 1px solid ButtonText;
  }

  .harmony-input:not([type]):focus,
  .harmony-input[type="number"]:focus,
  .harmony-input[type="text"]:focus {
    border: 1px solid Highlight;
  }
}
/* search input with customized styling */
input.custom-search-input::-webkit-search-cancel-button {
  appearance: none;
  cursor: pointer;
  width: 16px;
  height: 15px;
  margin-right: 0;
  background-position: -32px 32px;
  background-image: var(--image-file-mediumIcons);
}
/* loading spinner */
.spinner::before {
  display: block;
  width: var(--dimension, 24px);
  height: var(--dimension, 24px);
  border: var(--override-spinner-size, 3px) solid var(--override-spinner-color, var(--color-text-secondary));
  border-radius: 12px;
  clip: rect(0, var(--clip-size, 15px), var(--clip-size, 15px), 0);
  content: "";
  position: absolute;
  animation: spinner-animation 1s linear infinite;
  box-sizing: border-box;
}

@keyframes spinner-animation {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
/** Adorner */
.adorner-container {
  display: inline-block;
}

.adorner-container.hidden {
  display: none;
}

.adorner-container devtools-adorner {
  margin-left: 3px;
}

:host-context(.-theme-with-dark-background) devtools-adorner {
  --override-adorner-background-color: rgb(var(--color-syntax-2-rgb) / 15%);
  --override-adorner-border-color: rgb(var(--color-syntax-2-rgb) / 50%);
  --override-adorner-focus-border-color: var(--color-syntax-2);
  --override-adorner-active-background-color: var(--color-syntax-8);
}

/* General panel styles */
.panel {
  display: flex;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-color: var(--color-background);
}

.panel-sidebar {
  overflow-x: hidden;
  background-color: var(--color-background-elevation-1);
}

iframe.extension {
  flex: auto;
  width: 100%;
  height: 100%;
}

iframe.panel.extension {
  display: block;
  height: 100%;
}

@media (forced-colors: active) {
  :root {
    --legacy-accent-color: Highlight;
    --legacy-focus-ring-inactive-shadow-color: ButtonText;
  }
}