<style include="cr-shared-style settings-shared">
:host {
flex-direction: column;
display: flex;
flex: 1;
padding: 14px 16px;
}
#header {
/* Should be 12px when html font-size is 16px */
font-weight: 500;
font-size: 0.75rem;
user-select: none;
}
#subheader {
/* Should be 11px when html font-size is 16px */
font-size: 0.6875rem;
line-height: 18px;
user-select: none;
}
iron-icon {
height: var(--cr-icon-size);
margin-bottom: 10px;
width: var(--cr-icon-size);
}
iron-icon.green {
--iron-icon-fill-color: var(--google-green-700);
}
iron-icon.yellow {
--iron-icon-fill-color: var(--google-yellow-700);
}
iron-icon.red {
--iron-icon-fill-color: var(--google-red-600);
}
@media (prefers-color-scheme: dark) {
iron-icon.green {
--iron-icon-fill-color: var(--google-green-300);
}
iron-icon.yellow {
--iron-icon-fill-color: var(--google-yellow-300);
}
iron-icon.red {
--iron-icon-fill-color: var(--google-red-300);
}
}
</style>
<iron-icon id="icon" icon$="[[getStatusIcon(data.state)]]"
class$="[[getColorClass(data.state)]]">
</iron-icon>
<div id="header">[[data.header]]</div>
<div id="subheader" class="cr-secondary-text">[[data.subheader]]</div>