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

/**
 * These are the new set of colors for the new Light/Dark themes. See
 * https://crbug.com/1122511 and
 * https://docs.google.com/document/d/1QrSSRsJRzaQBY3zz73ZL84bTcFUV60yMtE5cuu6ED14
 * for details.
*/
:root {
  --color-primary: rgb(26 115 232);
  --color-primary-variant: rgb(66 133 244);
  --color-background: rgb(255 255 255);
  --color-background-inverted: rgb(0 0 0);
  --color-background-opacity-50: rgb(255 255 255 / 50%);
  --color-background-opacity-80: rgb(255 255 255 / 80%);
  --color-background-elevation-0: rgb(248 249 249);
  --color-background-elevation-1: rgb(241 243 244);
  --color-background-elevation-2: rgb(222 225 230);
  /** Used when the elevation is visible only on dark theme */
  --color-background-elevation-dark-only: var(--color-background);
  --color-background-highlight: rgb(202 205 209);
  /** To draw grid lines behind elements */
  --divider-line: rgb(0 0 0 / 10%);
  /**
   * When hovering over an element and the background should be a little
   * bit darker. For example, when hovering over a node in the flame chart
   * tree in the performance panel. This color is intentionally opague,
   * since the color of the underlying element should still be dominant.
   */
  --color-background-hover-overlay: rgb(56 121 217 / 10%);
  /**
   * Used when selecting a range of a section, for example when
   * selecting a range in the performance panel timeline.
   */
  --color-selection-highlight: rgb(56 121 217 / 30%);
  --color-selection-highlight-border: rgb(16 81 177);
  /**
   * When showing matching elements of a particular search filter (for example
   * when showing all matching css selectors/rules in the elements style
   * pane). The highlight is intended to be used on top of the original background
   * color and text color.
   */
  --color-match-highlight: rgb(56 121 217 / 20%);
  --color-text-primary: rgb(32 33 36);
  --color-text-secondary: rgb(95 99 104);
  --color-text-secondary-selected: rgb(188 185 182);
  --color-text-disabled: rgb(128 134 139);
  --color-details-hairline: rgb(202 205 209);
  --color-details-hairline-light: rgb(223 225 227);
  --color-accent-red: rgb(217 48 37);
  --color-red: rgb(238 68 47);
  --color-accent-green: rgb(24 128 56);
  --color-green: rgb(99 172 190);
  --color-link: var(--color-primary);
  --color-syntax-1: rgb(200 0 0);
  --color-syntax-2: rgb(136 18 128);
  --color-syntax-3: rgb(26 26 166);
  --color-syntax-4: rgb(153 69 0);
  --color-syntax-5: rgb(132 240 255);
  --color-syntax-6: rgb(35 110 37);
  --color-syntax-7: rgb(48 57 66);
  --color-syntax-8: rgb(168 148 166);
  --drop-shadow:
    0 0 0 1px rgb(0 0 0 / 5%),
    0 2px 4px rgb(0 0 0 / 20%),
    0 2px 6px rgb(0 0 0 / 10%);
  --drop-shadow-depth-1:
    0 1px 2px rgb(60 64 67 / 30%),
    0 1px 3px 1px rgb(60 64 67 / 15%);
  --drop-shadow-depth-2:
    0 1px 2px rgb(60 64 67 / 30%),
    0 2px 6px 2px rgb(60 64 67 / 15%);
  --drop-shadow-depth-3:
    0 4px 8px 3px rgb(60 64 67 / 15%),
    0 1px 3px rgb(60 64 67 / 30%);
  --drop-shadow-depth-4:
    0 6px 10px 4px rgb(60 64 67 / 15%),
    0 2px 3px rgb(60 64 67 / 30%);
  --drop-shadow-depth-5:
    0 8px 12px 6px rgb(60 64 67 / 15%),
    0 4px 4px rgb(60 64 67 / 30%);
  --box-shadow-outline-color: rgb(0 0 0 / 50%);
  /** These are the colors of the native Mac scrollbars */
  --color-scrollbar-mac: rgb(143 143 143 / 60%);
  --color-scrollbar-mac-hover: rgb(64 64 64 / 60%);
  /** These colors are used on all non-Mac platforms for scrollbars */
  --color-scrollbar-other: rgb(0 0 0 / 50%);
  --color-scrollbar-other-hover: rgb(0 0 0 / 50%);
  /** These colors have the same value in dark mode */
  --lighthouse-red: rgb(255 78 67);
  --lighthouse-orange: rgb(255 164 0);
  --lighthouse-green: rgb(12 206 106);
  /** The colors are for issue icons and related highlights */
  --issue-color-red: rgb(235 57 65);
  --issue-color-yellow: rgb(242 153 0);
  --issue-color-blue: rgb(26 115 232);
  /** Used to indicate an input box */
  --input-outline: rgb(202 205 209);

  /** These colors are used to show errors */
  --color-error-text: #f00;
  --color-error-border: hsl(0deg 100% 92%);
  --color-error-background: hsl(0deg 100% 97%);
  --color-image-preview-background: rgb(255 255 255);

  /* Colors for styling inputs */
  --color-input-outline: rgb(128 134 139);
  --color-input-outline-active: rgb(26 115 232);
  --color-input-outline-error: rgb(217 48 37);
  --color-input-outline-disabled: rgba(128 134 139 / 20%);
  --color-input-text-disabled: rgba(128 134 139 / 50%);
}

.-theme-with-dark-background {
  --color-primary: rgb(138 180 248);
  --color-primary-variant: rgb(102 157 246);
  --color-background: rgb(32 33 36);
  --color-background-inverted: rgb(255 255 255);
  --color-background-opacity-50: rgb(32 33 36 / 50%);
  --color-background-opacity-80: rgb(32 33 36 / 80%);
  --color-background-elevation-0: rgb(32 32 35);
  --color-background-elevation-1: rgb(41 42 45);
  --color-background-elevation-2: rgb(53 54 58);
  --color-background-elevation-dark-only: var(--color-background-elevation-1);
  --color-background-highlight: rgb(75 76 79);
  --divider-line: rgb(255 255 255 / 10%);
  --color-background-hover-overlay: rgb(56 121 217 / 10%);
  --color-selection-highlight: rgb(251 202 70 / 20%);
  --color-selection-highlight-border: rgb(251 202 70);
  --color-match-highlight: rgb(56 121 217 / 35%);
  --color-text-primary: rgb(232 234 237);
  --color-text-secondary: rgb(154 160 166);
  --color-text-secondary-selected: rgb(188 185 182);
  --color-text-disabled: rgb(128 134 139);
  --color-details-hairline: rgb(73 76 80);
  --color-details-hairline-light: rgb(54 57 59);
  --color-accent-red: rgb(242 139 130);
  --color-accent-green: rgb(129 201 149);
  --color-link: var(--color-primary);
  --color-syntax-1: rgb(53 212 199);
  --color-syntax-2: rgb(93 176 215);
  --color-syntax-2-rgb: 93 176 215;
  --color-syntax-3: rgb(242 151 102);
  --color-syntax-4: rgb(155 187 220);
  --color-syntax-5: rgb(132 240 255);
  --color-syntax-6: rgb(137 137 137);
  --color-syntax-7: rgb(207 208 208);
  --color-syntax-8: rgb(93 176 215);
  --drop-shadow:
    0 0 0 1px rgb(255 255 255 / 20%),
    0 2px 4px 2px rgb(0 0 0 / 20%),
    0 2px 6px 2px rgb(0 0 0 / 10%);
  --drop-shadow-depth-1:
    0 1px 2px rgb(0 0 0 / 30%),
    0 1px 3px 1px rgb(0 0 0 / 15%);
  --drop-shadow-depth-2:
    0 1px 2px rgb(0 0 0 / 30%),
    0 2px 6px 2px rgb(0 0 0 / 15%);
  --drop-shadow-depth-3:
    0 4px 8px 3px rgb(0 0 0 / 15%),
    0 1px 3px rgb(0 0 0 / 30%);
  --drop-shadow-depth-4:
    0 6px 10px 4px rgb(0 0 0 / 15%),
    0 2px 3px rgb(0 0 0 / 30%);
  --drop-shadow-depth-5:
    0 8px 12px 6px rgb(0 0 0 / 15%),
    0 4px 4px rgb(0 0 0 / 30%);
  --box-shadow-outline-color: rgb(0 0 0 / 50%);
  --color-scrollbar-mac: rgb(51 51 51);
  --color-scrollbar-mac-hover: rgb(75 76 79);
  --color-scrollbar-other: rgb(51 51 51);
  --color-scrollbar-other-hover: rgb(75 76 79);
  --color-error-text: hsl(0deg 100% 75%);
  --color-error-border: rgb(92 0 0);
  --color-error-background: hsl(0deg 100% 8%);
  /* Colors for styling inputs */
  --color-input-outline: rgb(189 193 198);
  --color-input-outline-active: rgb(138 180 248);
  --color-input-outline-error: rgb(242 139 130);
  --color-input-outline-disabled: rgba(189 193 198 / 20%);
  --color-input-text-disabled: rgba(128 134 139 / 70%);
}