<!--
  This in an HTML Import-able file that contains sharable CSS for Skia elements.

  To use this file import it:

    <link href="/res/imp/styles-sk.html" rel="import" />

  Then use it:

    <style include="styles-sk">
      ...
    </style>
-->
<dom-module id="styles-sk">
  <template>
    <style>
    /**
     * Color palette.
     *
     * Taken from http://blog.mollietaylor.com/2012/10/color-blindness-and-palette-choice.html
     */

    /* CSS variables */
    :root {
      --color-bluegreen: #1B9E77;
      --color-redorange: #D95F02;
      --color-purple: #7570B3;
      --color-pink: #E7298A;
      --color-lightgreen: #66A61E;
      --color-lightgreen-translucent: rgba(102, 166, 30, 0.3);
      --color-lightorange: #E6AB02;
      --color-burntorange: #A6761D;
      --color-gray: #666666;
    }

    /* Background colors */
    .bg-bluegreen {
      background-color: var(--color-bluegreen);
    }
    .bg-redorange {
      background-color: var(--color-redorange);
    }
    .bg-purple {
      background-color: var(--color-purple);
    }
    .bg-pink {
      background-color: var(--color-pink);
    }
    .bg-lightgreen {
      background-color: var(--color-lightgreen);
    }
    .bg-lightorange {
      background-color: var(--color-lightorange);
    }
    .bg-burntorange {
      background-color: var(--color-burntorange);
    }
    .bg-gray {
      background-color: var(--color-gray);
    }

    /* Success/Failure/Exception background colors. */
    .bg-success {
      background-color: var(--color-lightgreen-translucent);
    }
    .bg-failure {
      background-color: var(--color-redorange);
    }
    .bg-exception {
      background-color: var(--color-purple);
    }
    .bg-inprogress {
      background-color: rgba(255, 255, 255, 0.0);
    }
    .bg-unknown {
      background-color: #BBB;
    }

    /* Foreground colors */
    .fg-bluegreen {
      color: var(--color-bluegreen);
    }
    .fg-redorange {
      color: var(--color-redorange);
    }
    .fg-purple {
      color: var(--color-purple);
    }
    .fg-pink {
      color: var(--color-pink);
    }
    .fg-lightgreen {
      color: var(--color-lightgreen);
    }
    .fg-lightorange {
      color: var(--color-lightorange);
    }
    .fg-burntorange {
      color: var(--color-burntorange);
    }
    .fg-gray {
      color: var(--color-gray);
    }

    /* Success/Failure/Exception foreground colors. */
    .fg-success {
      color: var(--color-lightgreen);
    }
    .fg-failure {
      color: var(--color-redorange);
    }
    .fg-exception {
      color: var(--color-purple);
    }
    .fg-inprogress {
      color: var(--color-lightorange);
    }
    .fg-unknown {
      color: var(--color-gray);
    }

    /**
     * Styling for div table layout.
     */
    .table {
      border-collapse: collapse;
      display: table;
    }
    .tr {
      border-bottom: 1px solid #EEEEEE;
      display: table-row;
    }
    .tr:hover {
      background-color: #F5F5F5;
    }
    .tr:hover .tr:hover {
      background-color: #FFFFFF;
    }
    .tr-container {
      display: table-row-group;
    }
    .td,.th {
      display: table-cell;
      padding: 10px;
    }
    .td {
      font-size: 0.813em;
      vertical-align: middle;
    }
    .th {
      color: #767676;
      font-size: 0.75em;
    }
    .number {
      text-align: right;
    }

    /**
     * Styling for simple container divs.
     */
    .container {
      font-family: sans-serif;
      margin: 5px;
      padding: 10px;
      border: 1px solid #eeeeee;
    }
    .container h2 {
      font-size: 18px;
      margin-bottom: 5px;
    }
    </style>
  </template>
</dom-module>