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

/* #css_wrapper_metadata_start
 * #type=vars-lit
 * #scheme=relative
 * #css_wrapper_metadata_end */

/* Common css variables for Material Design WebUI */
html {
  --google-blue-50-rgb: 232, 240, 254;  /* #e8f0fe */
  --google-blue-50: rgb(var(--google-blue-50-rgb));
  --google-blue-100-rgb: 210, 227, 252;  /* #d2e3fc */
  --google-blue-100: rgb(var(--google-blue-100-rgb));
  --google-blue-200-rgb: 174, 203, 250;  /* #aecbfa */
  --google-blue-200: rgb(var(--google-blue-200-rgb));
  --google-blue-300-rgb: 138, 180, 248;  /* #8ab4f8 */
  --google-blue-300: rgb(var(--google-blue-300-rgb));
  --google-blue-400-rgb: 102, 157, 246;  /* #669df6 */
  --google-blue-400: rgb(var(--google-blue-400-rgb));
  --google-blue-500-rgb: 66, 133, 244;  /* #4285f4 */
  --google-blue-500: rgb(var(--google-blue-500-rgb));
  --google-blue-600-rgb: 26, 115, 232;  /* #1a73e8 */
  --google-blue-600: rgb(var(--google-blue-600-rgb));
  --google-blue-700-rgb: 25, 103, 210;  /* #1967d2 */
  --google-blue-700: rgb(var(--google-blue-700-rgb));
  --google-blue-800-rgb: 24, 90, 188;  /* #185abc */
  --google-blue-800: rgb(var(--google-blue-800-rgb));
  --google-blue-900-rgb: 23, 78, 166;  /* #174ea6 */
  --google-blue-900: rgb(var(--google-blue-900-rgb));

  --google-green-50-rgb: 230, 244, 234;  /* #e6f4ea */
  --google-green-50: rgb(var(--google-green-50-rgb));
  --google-green-200-rgb: 168, 218, 181; /* #a8dab5 */
  --google-green-200: rgb(var(--google-green-200-rgb));
  --google-green-300-rgb: 129, 201, 149;  /* #81c995 */
  --google-green-300: rgb(var(--google-green-300-rgb));
  --google-green-400-rgb: 91, 185, 116;  /* #5bb974 */
  --google-green-400: rgb(var(--google-green-400-rgb));
  --google-green-500-rgb: 52, 168, 83;  /* #34a853 */
  --google-green-500: rgb(var(--google-green-500-rgb));
  --google-green-600-rgb: 30, 142, 62;  /* #1e8e3e */
  --google-green-600: rgb(var(--google-green-600-rgb));
  --google-green-700-rgb: 24, 128, 56;  /* #188038 */
  --google-green-700: rgb(var(--google-green-700-rgb));
  --google-green-800-rgb: 19, 115, 51; /* #137333 */
  --google-green-800: rgb(var(--google-green-800-rgb));
  --google-green-900-rgb: 13, 101, 45; /* #0d652d */
  --google-green-900: rgb(var(--google-green-900-rgb));

  --google-grey-50-rgb: 248, 249, 250;  /* #f8f9fa */
  --google-grey-50: rgb(var(--google-grey-50-rgb));
  --google-grey-100-rgb: 241, 243, 244;  /* #f1f3f4 */
  --google-grey-100: rgb(var(--google-grey-100-rgb));
  --google-grey-200-rgb: 232, 234, 237;  /* #e8eaed */
  --google-grey-200: rgb(var(--google-grey-200-rgb));
  --google-grey-300-rgb: 218, 220, 224;  /* #dadce0 */
  --google-grey-300: rgb(var(--google-grey-300-rgb));
  --google-grey-400-rgb: 189, 193, 198;  /* #bdc1c6 */
  --google-grey-400: rgb(var(--google-grey-400-rgb));
  --google-grey-500-rgb: 154, 160, 166;  /* #9aa0a6 */
  --google-grey-500: rgb(var(--google-grey-500-rgb));
  --google-grey-600-rgb: 128, 134, 139;  /* #80868b */
  --google-grey-600: rgb(var(--google-grey-600-rgb));
  --google-grey-700-rgb: 95, 99, 104;  /* #5f6368 */
  --google-grey-700: rgb(var(--google-grey-700-rgb));
  --google-grey-800-rgb: 60, 64, 67;  /* #3c4043 */
  --google-grey-800: rgb(var(--google-grey-800-rgb));
  --google-grey-900-rgb: 32, 33, 36;  /* #202124 */
  --google-grey-900: rgb(var(--google-grey-900-rgb));
  /* --google-grey-900 + 4% white blended together. */
  --google-grey-900-white-4-percent: #292a2d;

  --google-purple-200-rgb: 215, 174, 251;  /* #d7aefb */
  --google-purple-200: rgb(var(--google-purple-200-rgb));
  --google-purple-900-rgb: 104, 29, 168;  /* #681da8 */
  --google-purple-900: rgb(var(--google-purple-900-rgb));

  --google-red-100-rgb: 244, 199, 195;  /* #f4c7c3 */
  --google-red-100: rgb(var(--google-red-100-rgb));
  --google-red-300-rgb: 242, 139, 130;  /* #f28b82 */
  --google-red-300: rgb(var(--google-red-300-rgb));
  --google-red-500-rgb: 234, 67, 53;  /* #ea4335 */
  --google-red-500: rgb(var(--google-red-500-rgb));
  --google-red-600-rgb: 217, 48, 37;  /* #d93025 */
  --google-red-600: rgb(var(--google-red-600-rgb));
  --google-red-700-rgb: 197, 57, 41;  /* #c53929 */
  --google-red-700: rgb(var(--google-red-700-rgb));

  --google-yellow-50-rgb: 254, 247, 224;  /* #fef7e0 */
  --google-yellow-50: rgb(var(--google-yellow-50-rgb));
  --google-yellow-100-rgb: 254, 239, 195; /*feefc3*/
  --google-yellow-100: rgb(var(--google-yellow-100-rgb));
  --google-yellow-200-rgb: 253, 226, 147;  /* #fde293 */
  --google-yellow-200: rgb(var(--google-yellow-200-rgb));
  --google-yellow-300-rgb: 253, 214, 51;  /* #fdd633 */
  --google-yellow-300: rgb(var(--google-yellow-300-rgb));
  --google-yellow-400-rgb: 252, 201, 52;  /* #fcc934 */
  --google-yellow-400: rgb(var(--google-yellow-400-rgb));
  --google-yellow-500-rgb: 251, 188, 4;  /* #fbbc04 */
  --google-yellow-500: rgb(var(--google-yellow-500-rgb));
  --google-yellow-700-rgb: 240, 147, 0;  /* #f09300 */
  --google-yellow-700: rgb(var(--google-yellow-700-rgb));

  --cr-card-background-color: white;

  /* Vars to help define --cr-elevation-* vars. Components should use the
   * --cr-elevation-* variables instead of these colors directly. */
  --cr-shadow-key-color_:
      color-mix(in srgb, var(--cr-shadow-color) 30%, transparent);
  --cr-shadow-ambient-color_:
      color-mix(in srgb, var(--cr-shadow-color) 15%, transparent);

  --cr-elevation-1: var(--cr-shadow-key-color_) 0 1px 2px 0,
                    var(--cr-shadow-ambient-color_) 0 1px 3px 1px;
  --cr-elevation-2: var(--cr-shadow-key-color_) 0 1px 2px 0,
                    var(--cr-shadow-ambient-color_) 0 2px 6px 2px;
  --cr-elevation-3: var(--cr-shadow-key-color_) 0 1px 3px 0,
                    var(--cr-shadow-ambient-color_) 0 4px 8px 3px;
  --cr-elevation-4: var(--cr-shadow-key-color_) 0 2px 3px 0,
                    var(--cr-shadow-ambient-color_) 0 6px 10px 4px;
  --cr-elevation-5: var(--cr-shadow-key-color_) 0 4px 4px 0,
                    var(--cr-shadow-ambient-color_) 0 8px 12px 6px;

  --cr-card-shadow: var(--cr-elevation-2);

  --cr-focused-item-color: var(--google-grey-300);
  --cr-form-field-label-color: var(--google-grey-700);
  --cr-hairline-rgb: 0, 0, 0;
  --cr-iph-anchor-highlight-color: rgba(var(--google-blue-600-rgb), 0.1);
  --cr-menu-background-color: white;
  --cr-menu-background-focus-color: var(--google-grey-400);
  --cr-menu-shadow: var(--cr-elevation-2);
  --cr-separator-color: rgba(0, 0, 0, .06);
  --cr-title-text-color: rgb(90, 90, 90);
  --cr-scrollable-border-color: var(--google-grey-300);
}

@media (prefers-color-scheme: dark) {
  html {
    --cr-card-background-color: var(--google-grey-900-white-4-percent);
    --cr-focused-item-color: var(--google-grey-800);
    --cr-form-field-label-color: var(--dark-secondary-color);
    --cr-hairline-rgb: 255, 255, 255;
    --cr-iph-anchor-highlight-color: rgba(var(--google-grey-100-rgb), 0.1);
    --cr-menu-background-color: var(--google-grey-900);
    --cr-menu-background-focus-color: var(--google-grey-700);
    --cr-menu-background-sheen: rgba(255, 255, 255, .06);  /* Only dark mode. */
    --cr-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,
                      rgba(0, 0, 0, .15) 0 3px 6px 2px;
    --cr-separator-color: rgba(255, 255, 255, .1);
    --cr-title-text-color: var(--cr-primary-text-color);
    --cr-scrollable-border-color: var(--google-grey-700);
  }
}

@media (forced-colors: active) {
  html {
    /* In Windows HCM, |box-shadow| is not showing. The suggested workaround
       is to use |outline| or |border| instead. The color does not matter,
       since it is forced by the OS so using 'transparent'. */
    --cr-focus-outline-hcm: 2px solid transparent;
    --cr-border-hcm: 2px solid transparent;
  }
}

/* Don't use color values past this point. Instead, create a variable that's
 * set for both light and dark modes and use a single variable below. */

html {
  --cr-button-edge-spacing: 12px;

  /* Spacing between policy (controlledBy) indicator and control. */
  --cr-controlled-by-spacing: 24px;

  /* Default max-width for input fields */
  --cr-default-input-max-width: 264px;

  /* The inner icon is 20px in size. The button has 8px * 2 padding. */
  --cr-icon-ripple-size: 36px;
  --cr-icon-ripple-padding: 8px;

  --cr-icon-size: 20px;

  --cr-icon-button-margin-start: 16px;

  /* Shift button so ripple overlaps the end of the row. */
  --cr-icon-ripple-margin: calc(var(--cr-icon-ripple-padding) * -1);

  /* TODO (johntlee): re-implement with paddings instead; */
  /* These are used for row items such as radio buttons, check boxes, list
   * items etc. */
  --cr-section-min-height: 48px;
  --cr-section-two-line-min-height: 64px;

  --cr-section-padding: 20px;
  --cr-section-vertical-padding: 12px;
  --cr-section-indent-width: 40px;
  --cr-section-indent-padding: calc(
      var(--cr-section-padding) + var(--cr-section-indent-width));

  --cr-section-vertical-margin: 21px;

  --cr-centered-card-max-width: 680px;
  --cr-centered-card-width-percentage: 0.96;

  --cr-hairline: 1px solid rgba(var(--cr-hairline-rgb), .14);

  --cr-separator-height: 1px;
  --cr-separator-line: var(--cr-separator-height) solid
      var(--cr-separator-color);

  --cr-toolbar-overlay-animation-duration: 150ms;
  --cr-toolbar-height: 56px;

  --cr-container-shadow-height: 6px;
  --cr-container-shadow-margin: calc(-1 * var(--cr-container-shadow-height));

  --cr-container-shadow-max-opacity: 1;

  /** MD Refresh Styles */
  --cr-card-border-radius: 8px;
  --cr-disabled-opacity: .38;
  --cr-form-field-bottom-spacing: 16px;
  --cr-form-field-label-font-size: .625rem;
  --cr-form-field-label-height: 1em;
  --cr-form-field-label-line-height: 1;
}

html {
  /* Colors: These variables should never be overridden and should only be used
     as fallback values for shared cr_elements or in UIs that do not have
     the color pipeline. */
  --cr-fallback-color-outline: rgb(116, 119, 117);

  --cr-fallback-color-primary: rgb(11, 87, 208);
  --cr-fallback-color-on-primary: rgb(255, 255, 255);

  --cr-fallback-color-primary-container: rgb(211, 227, 253);
  --cr-fallback-color-on-primary-container: rgb(4, 30, 73);

  --cr-fallback-color-secondary-container: rgb(194, 231, 255);
  --cr-fallback-color-on-secondary-container: rgb(0, 29, 53);

  --cr-fallback-color-neutral-container: rgb(242, 242, 242);
  --cr-fallback-color-neutral-outline: rgb(199, 199, 199);

  --cr-fallback-color-surface: rgb(255, 255, 255);
  --cr-fallback-color-surface1: rgb(248, 250, 253);
  --cr-fallback-color-surface2: rgb(243, 246, 252);
  --cr-fallback-color-surface3: rgb(239, 243, 250);
  --cr-fallback-color-on-surface-rgb: 31, 31, 31;
  --cr-fallback-color-on-surface: rgb(var(--cr-fallback-color-on-surface-rgb));

  --cr-fallback-color-surface-variant: rgb(225, 227, 225);
  --cr-fallback-color-on-surface-variant: rgb(68, 71, 70);

  --cr-fallback-color-on-surface-subtle: rgb(71, 71, 71);

  --cr-fallback-color-inverse-primary: rgb(168, 199, 250);
  --cr-fallback-color-inverse-surface: rgb(48, 48, 48);
  --cr-fallback-color-inverse-on-surface: rgb(242, 242, 242);

  --cr-fallback-color-tonal-container: rgb(211, 227, 253);
  --cr-fallback-color-on-tonal-container: rgb(4, 30, 73);

  --cr-fallback-color-tonal-outline: rgb(168, 199, 250);

  --cr-fallback-color-error: rgb(179, 38, 30);

  --cr-fallback-color-divider: rgb(211, 227, 253);

  --cr-fallback-color-state-hover-on-prominent_: rgba(253, 252, 251, .1);

  --cr-fallback-color-state-on-subtle-rgb_: 31, 31, 31;
  --cr-fallback-color-state-hover-on-subtle_: rgba(
      var(--cr-fallback-color-state-on-subtle-rgb_), .06);
  --cr-fallback-color-state-ripple-neutral-on-subtle_: rgba(
      var(--cr-fallback-color-state-on-subtle-rgb_), .08);
  --cr-fallback-color-state-ripple-primary-rgb_: 124, 172, 248;
  --cr-fallback-color-state-ripple-primary_: rgba(
      var(--cr-fallback-color-state-ripple-primary-rgb_), 0.32);

  --cr-fallback-color-base-container: rgb(236, 239, 247);

  --cr-fallback-color-disabled-background: rgba(
      var(--cr-fallback-color-on-surface-rgb), .12);
  --cr-fallback-color-disabled-foreground: rgba(
      var(--cr-fallback-color-on-surface-rgb), var(--cr-disabled-opacity));

  /* States */
  --cr-hover-background-color: var(--color-sys-state-hover,
      rgba(var(--cr-fallback-color-on-surface-rgb), .08));
  --cr-hover-on-prominent-background-color: var(
      --color-sys-state-hover-on-prominent,
      var(--cr-fallback-color-state-hover-on-prominent_));
  --cr-hover-on-subtle-background-color: var(
      --color-sys-state-hover-on-subtle,
      var(--cr-fallback-color-state-hover-on-subtle_));

  --cr-active-background-color: var(--color-sys-state-pressed,
      rgba(var(--cr-fallback-color-on-surface-rgb), .12));
  --cr-active-on-primary-background-color: var(
      --color-sys-state-ripple-primary,
      var(--cr-fallback-color-state-ripple-primary_));
  --cr-active-neutral-on-subtle-background-color: var(
      --color-sys-state-ripple-neutral-on-subtle,
      var(--cr-fallback-color-state-ripple-neutral-on-subtle_));

  --cr-focus-outline-color: var(--color-sys-state-focus-ring,
      var(--cr-fallback-color-primary));
  --cr-focus-outline-inverse-color: var(--color-sys-state-focus-ring-inverse,
      var(--cr-fallback-color-inverse-primary));

  /* Typography */
  --cr-primary-text-color: var(--color-primary-foreground,
      var(--cr-fallback-color-on-surface));
  --cr-secondary-text-color: var(--color-secondary-foreground,
      var(--cr-fallback-color-on-surface-variant));
  --cr-link-color: var(--color-link-foreground-default,
      var(--cr-fallback-color-primary));

  /* Layout */
  --cr-button-height: 36px;

  /* Elevation */
  --cr-shadow-color: var(--color-sys-shadow, rgb(0, 0, 0));

  /* Common UI colors. */
  --cr-checked-color: var(
      --color-checkbox-foreground-checked,
      var(--cr-fallback-color-primary));
}

@media (prefers-color-scheme: dark) {
  html {
    /* Colors */
    --cr-fallback-color-outline: rgb(142, 145, 143);
    --cr-fallback-color-primary: rgb(168, 199, 250);
    --cr-fallback-color-on-primary: rgb(6, 46, 111);
    --cr-fallback-color-primary-container: rgb(8, 66, 160);
    --cr-fallback-color-on-primary-container: rgb(211, 227, 253);
    --cr-fallback-color-secondary-container: rgb(0, 74, 119);
    --cr-fallback-color-on-secondary-container: rgb(194, 231, 255);
    --cr-fallback-color-neutral-container: rgb(40, 40, 40);
    --cr-fallback-color-neutral-outline: rgb(117, 117, 117);
    --cr-fallback-color-surface: rgb(31, 31, 31);
    --cr-fallback-color-surface1: rgb(39, 40, 42);
    --cr-fallback-color-surface2: rgb(45, 47, 49);
    --cr-fallback-color-surface3: rgb(51, 52, 56);
    --cr-fallback-color-on-surface-rgb: 227, 227, 227;
    --cr-fallback-color-surface-variant: rgb(68, 71, 70);
    --cr-fallback-color-on-surface-variant: rgb(196, 199, 197);
    --cr-fallback-color-on-surface-subtle: rgb(199, 199, 199);
    --cr-fallback-color-inverse-primary: rgb(11, 87, 208);
    --cr-fallback-color-inverse-surface: rgb(227, 227, 227);
    --cr-fallback-color-inverse-on-surface: rgb(31, 31, 31);
    --cr-fallback-color-tonal-container: rgb(0, 74, 119);
    --cr-fallback-color-on-tonal-container: rgb(194, 231, 255);
    --cr-fallback-color-tonal-outline: rgb(4, 125, 183);
    --cr-fallback-color-error: rgb(242, 184, 181);
    --cr-fallback-color-divider: rgb(94, 94, 94);
    --cr-fallback-color-state-hover-on-prominent_: rgba(31, 31, 31, .06);
    --cr-fallback-color-state-on-subtle-rgb_: 253, 252, 251;
    --cr-fallback-color-state-hover-on-subtle_: rgba(
        var(--cr-fallback-color-state-on-subtle-rgb_), .10);
    --cr-fallback-color-state-ripple-neutral-on-subtle_: rgba(
        var(--cr-fallback-color-state-on-subtle-rgb_), .16);
    --cr-fallback-color-state-ripple-primary-rgb_: 76, 141, 246;
    --cr-fallback-color-base-container: rgba(40, 40, 40, 1);
  }
}

/* Overrides to ensure disabled elements show up disabled. */
@media (forced-colors: active) {
  html {
    --cr-fallback-color-disabled-background: Canvas;
    --cr-fallback-color-disabled-foreground: GrayText;
  }
}