<link rel='import' href='../../../bower_components/polymer/polymer.html'>

<link rel='import' href='./ha-state-icon.html'>

<dom-module id='state-badge'>
  <style>
  :host {
    position: relative;
    display: inline-block;
    width: 40px;
    color: #44739E;
    border-radius: 50%;
    height: 40px;
    text-align: center;
    background-size: cover;
    line-height: 40px;
  }

  ha-state-icon {
    transition: color .3s ease-in-out;
  }

  /* Color the icon if light or sun is on */
  ha-state-icon[data-domain=light][data-state=on],
  ha-state-icon[data-domain=switch][data-state=on],
  ha-state-icon[data-domain=binary_sensor][data-state=on],
  ha-state-icon[data-domain=sun][data-state=above_horizon] {
    color: #DCC91F;
  }
  </style>

  <template>
    <ha-state-icon id='icon' state-obj='[[stateObj]]'
      data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]'>
    </ha-state-icon>
  </template>
</dom-module>

<link rel='import' href='../../../bower_components/polymer/polymer.html'>

<link rel='import' href='./ha-state-icon.html'>

<dom-module id='state-badge'>
  <style>
  :host {
    position: relative;
    display: inline-block;
    width: 40px;
    color: #44739E;
    border-radius: 50%;
    height: 40px;
    text-align: center;
    background-size: cover;
    line-height: 40px;
  }

  ha-state-icon {
    transition: color .3s ease-in-out;
  }

  /* Color the icon if light or sun is on */
  ha-state-icon[data-domain=light][data-state=on],
  ha-state-icon[data-domain=switch][data-state=on],
  ha-state-icon[data-domain=binary_sensor][data-state=on],
  ha-state-icon[data-domain=sun][data-state=above_horizon] {
    color: #DCC91F;
  }

  /* Color the icon if entity is offline */
  ha-state-icon[data-domain=light][data-online=offline],
  ha-state-icon[data-domain=switch][data-online=offline],
  ha-state-icon[data-domain=binary_sensor][data-online=offline] {
    color: #D3D3D3;
  }
  </style>

  <template>
    <ha-state-icon id='icon' state-obj='[[stateObj]]'
      data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]' data-online$='[[stateObj.online]]'>
    </ha-state-icon>
  </template>
</dom-module>

Change color based on online status
Change color based on online status
