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

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

<!-- Common paper-button styling for Material Design WebUI. -->
<dom-module id="paper-button-style">
  <template>
    <style>
      paper-button {
        --active-shadow-rgb: var(--google-grey-800-rgb);
        --active-shadow-action-rgb: var(--google-blue-500-rgb);

        --border-color: var(--google-grey-refresh-300);

        --disabled-color: var(--google-grey-refresh-100);
        --disabled-text-color: var(--google-grey-600);

        --flat-bg-action: var(--google-blue-600);
        --flat-disabled-bg: white;
        --flat-disabled-border-color: var(--google-grey-refresh-100);
        --flat-focus-shadow-color: rgba(var(--google-blue-600-rgb), .4);
        --flat-ink-color-action: white;
        --flat-ripple-opacity-action: .32;
        --flat-text-color-action: white;

        --hover-bg-action: rgba(var(--google-blue-600-rgb), .9);
        --hover-bg-color: rgba(var(--google-blue-500-rgb), .04);
        --hover-border-color: var(--google-blue-refresh-100);
        --hover-shadow-action-rgb: var(--google-blue-500-rgb);

        /* Blue-ish color used either as a background or as a text color,
         * depending on the type of button. */
        --paper-button-ink-color: var(--google-blue-600);

        --ripple-opacity: .1;

        --text-color: var(--google-blue-600);
      }

      [dark] paper-button,
      :host-context([dark]) paper-button {
        /* Only in dark. */
        --active-bg: black linear-gradient(rgba(255, 255, 255, .06),
                                           rgba(255, 255, 255, .06));
        --active-shadow-rgb: var(--google-blue-refresh-500-rgb);
        /* --active-shadow-action-rgb is same as light mode (GB 500). */

        --border-color: var(--google-grey-refresh-700);

        --disabled-color: var(--google-grey-800);
        /* --disabled-text-color is same as light mode (GG 600). */

        --flat-bg-action: var(--google-blue-refresh-300);
        /* TODO(dbeam): get --flat-disabled-bg from Namrata. */
        --flat-disabled-bg: transparent;
        --flat-disabled-border-color: var(--google-grey-800);
        --flat-focus-shadow-color: rgba(var(--google-blue-refresh-300-rgb), .5);
        --flat-ink-color-action: black;
        --flat-ripple-opacity-action: .16;
        --flat-text-color-action: var(--google-grey-900);

        --hover-bg-action: var(--flat-bg-action)
            linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08));
        --hover-bg-color: rgba(var(--google-blue-refresh-300-rgb), .08);
        /* No change in secondary box-shadow or border color on hover
         * (--hover-border-color, --hover-shadow-action-rgb) in dark mode. */

        --paper-button-ink-color: var(--google-blue-refresh-300);

        --ripple-opacity: .16;

        --text-color: var(--google-blue-refresh-300);
      }

      paper-button {
        --paper-ripple-opacity: var(--ripple-opacity);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        color: var(--text-color);
        flex-shrink: 0;
        font-weight: 500;
        height: 32px;
        margin: 0;
        padding: 8px 16px;
        text-decoration: none;
        text-transform: none;
      }

      /* Override paper-button's default transition. |animated| is automatically
       * added to all paper-button instances, unfortunately. */
      paper-button[animated] {
        transition: none;
      }

      paper-button:not([raised]).keyboard-focus,
      paper-button:not([raised]).action-button.keyboard-focus {
        box-shadow: 0 0 0 2px var(--flat-focus-shadow-color);
        /* Override default paper-button's internal font-weight style. */
        font-weight: 500;
      }

      paper-button:not(.action-button):hover {
        background-color: var(--hover-bg-color);
      }

      :host-context(html:not([dark])) paper-button:not(.action-button):hover {
        border-color: var(--hover-border-color);
      }

      paper-button:not(.action-button):active {
        background: var(--active-bg);
        box-shadow:
            0 1px 2px 0 rgba(var(--active-shadow-rgb), .3),
            0 2px 6px 2px rgba(var(--active-shadow-rgb), .15);
      }

      paper-button:not([raised]).action-button:hover {
        background: var(--hover-bg-action);
      }

      :host-context(html:not([dark])) paper-button.action-button:hover {
        box-shadow:
            0 1px 2px 0 rgba(var(--hover-shadow-action-rgb), .3),
            0 1px 3px 1px rgba(var(--hover-shadow-action-rgb), .15);
      }

      paper-button.action-button:active {
        box-shadow:
            0 1px 2px 0 rgba(var(--active-shadow-action-rgb), .3),
            0 2px 6px 2px rgba(var(--active-shadow-action-rgb), .15);
      }

      paper-button:not([raised]).action-button {
        --paper-button-ink-color: var(--flat-ink-color-action);
        --paper-ripple-opacity: var(--flat-ripple-opacity-action);
        background-color: var(--flat-bg-action);
        border: none;
        color: var(--flat-text-color-action);
      }

      paper-button:not([raised])[disabled] {
        background-color: var(--flat-disabled-bg);
        border-color: var(--flat-disabled-border-color);
        color: var(--disabled-text-color);
      }

      paper-button:not([raised]).action-button[disabled] {
        background-color: var(--disabled-color);
        border-color: transparent;
        color: var(--disabled-text-color);
      }

      /* cancel-button is meant to be used within a cr-dialog */
      paper-button.cancel-button {
        margin-inline-end: 8px;
      }

      paper-button.action-button,
      paper-button.cancel-button {
        line-height: 154%;
      }
    </style>
  </template>
</dom-module>