<link rel="import" href="../html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<!-- Common css variables for Material Design WebUI. -->
<custom-style>
<style is="custom-style">
  html {
    --google-blue-50: #E8F0FE;
    --google-blue-600-rgb: 26, 115, 232;
    --google-blue-600: rgb(var(--google-blue-600-rgb));
    --google-blue-900-rgb: 13, 71, 161;
    --google-grey-200: #E8EAED;
    --google-grey-400: #BDC1C6;
    --google-grey-600-rgb: 128, 134, 139;
    --google-grey-600: rgb(var(--google-grey-600-rgb));
    --google-grey-800-rgb: 60, 64, 67;
    --google-grey-800: rgb(var(--google-grey-800-rgb));
    --google-grey-900: #202124;
    --google-red-600: #D93025;

    /* -refresh differentiate from polymer's color.html. */
    --google-green-refresh-700: #188038;
    --google-grey-refresh-100: #F1F3F4;
    --google-grey-refresh-300: #DADCE0;
    --google-grey-refresh-700: #5F6368;
    --google-red-refresh-300: #f28b82;

    --cr-primary-text-color: var(--google-grey-900);
    --cr-secondary-text-color: var(--google-grey-refresh-700);

    --cr-card-background-color: white;
    --cr-card-elevation: {
      box-shadow: rgba(var(--google-grey-800-rgb), .3) 0 1px 2px 0,
                  rgba(var(--google-grey-800-rgb), .15) 0 1px 3px 1px;
    }

    --cr-focused-item-color: var(--google-grey-300);
    --cr-form-field-label-color: var(--google-grey-refresh-700);
    --cr-link-color: var(--google-blue-700);
    --cr-menu-background-color: white;
    --cr-menu-background-focus-color: var(--google-grey-200);
    --cr-menu-shadow: 0 2px 6px var(--paper-grey-500);
    --cr-section-text-color: var(--google-grey-refresh-700);
    --cr-separator-color: rgba(0, 0, 0, .06);
    --cr-title-text-color: rgb(90, 90, 90);
    --cr-toggle-color: var(--google-blue-500);
  }

  html[dark] {
    --dark-primary-color: rgba(255, 255, 255, .87);
    --dark-secondary-color: rgba(255, 255, 255, .6);

    --cr-primary-text-color: var(--dark-primary-color);
    --cr-secondary-text-color: var(--dark-secondary-color);

    --cr-card-background-color: var(--google-grey-900);
    --cr-card-elevation: {
      background-color: rgba(255, 255, 255, .04);
      box-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,
                  rgba(0, 0, 0, .15) 0 4px 8px 3px;
    }

    /* TODO(dbeam): form-field-label, {section,title}-text, & toggle colors. */

    --cr-form-field-label-color: var(--dark-secondary-color);
    --cr-link-color: var(--google-blue-300);
    --cr-menu-background-color: var(--google-grey-900);
    --cr-menu-background-focus-color: rgba(var(--google-grey-800-rgb), .6);
    --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 2px 6px 2px;
    --cr-separator-color: var(--google-grey-refresh-700);
  }

  /* 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-actionable: {
      cursor: pointer;
    }

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

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

    /* 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-height-width: {
      height: var(--cr-icon-size);
      width: var(--cr-icon-size);
    }

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

    --cr-icon-ripple-margin: calc(var(--cr-icon-ripple-padding) * -1);

    /* Common properties for WebUI pages. */
    --cr-page-host: {
      color: var(--cr-primary-text-color);
      line-height: 154%; /* Apply 20px default line-height to all text. */
      overflow: hidden;  /* Prevent double scroll bar bugs. */
      user-select: text;
    }

    --cr-paper-icon-button-margin: {
      /* Shift button so ripple overlaps the end of the row. */
      margin-inline-end: var(--cr-icon-ripple-margin);
      margin-inline-start: var(--cr-icon-button-margin-start);
    }

    --cr-primary-text: {
        color: var(--cr-primary-text-color);
        line-height: 154%;  /* 20px. */
     }

    --cr-secondary-text: {
      color: var(--cr-secondary-text-color);
      font-weight: 400;
    }

    /* TODO (scottchen): 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-three-line-min-height: 84px;

    --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: {
      align-items: center;
      border-top: var(--cr-separator-line);
      display: flex;
      min-height: var(--cr-section-min-height);
      padding: 0 var(--cr-section-padding);
    }

    --cr-text-elide: {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    --cr-title-text: {
        color: var(--cr-title-text-color);
        font-size: 107.6923%;  /* Go to 14px from 13px. */
        font-weight: 500;
    }

    --cr-section-text: {
        color: var(--cr-section-text-color);
        font-size: 100%;  /* Likely to be 13px. */
        font-weight: 500;
    }

    --cr-tooltip: {
      font-size: 92.31%;  /* Effectively 12px if the host default is 13px. */
      font-weight: 500;
      max-width: 330px;
      min-width: 200px;
      padding: 10px 8px;
    }

    --cr-selectable-focus: {
      background-color: var(--cr-focused-item-color);
      outline: none;
    }
    --cr-separator-height: 1px;
    --cr-separator-line: var(--cr-separator-height) solid
        var(--cr-separator-color);

    --cr-toolbar-overlay-animation-duration: 150ms;

    --cr-container-shadow: {
      box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, .4);
      height: 6px;
      left: 0;
      margin-bottom: -6px;
      opacity: 0;
      pointer-events: none;
      position: relative;
      right: 0;
      top: 0px;
      transition: opacity 500ms;
      z-index: 1;
    }

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

    /** MD Refresh Styles */
    --cr-card-border-radius: 4px;
    --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: 1em;
    --cr-form-field-label: {
      color: var(--cr-form-field-label-color);
      display: block;
      font-size: var(--cr-form-field-label-font-size);
      font-weight: 500;
      letter-spacing: .4px;
      line-height: var(--cr-form-field-label-line-height);
      margin-bottom: 8px;
    }
  }
</style>
</custom-style>