<style>
iron-icon {
display: block;
height: 68px;
margin: 12px auto 24px auto;
width: 68px;
}
iron-icon.disabled {
--nearby-preview-color: var(--cros-color-disabled);
--nearby-preview-background-color: var(
--cros-shortcut-background-color);
}
#title {
height: 60px;
letter-spacing: 0.2px;
overflow: hidden;
overflow-wrap: break-word;
text-align: center;
width: 116px;
}
/* TODO(b/279623883): Remove once Jelly is launched. */
:host-context(body:not(.jelly-enabled)) #title {
color: var(--cr-primary-text-color);
font-size: 13px;
line-height: 20px;
}
:host-context(body.jelly-enabled) #title {
color: var(--cros-sys-on_surface_variant);
font: var(--cros-body-2-font);
}
</style>
<iron-icon class$="[[getIconClass_(disabled)]]"
icon="[[getIronIconName_(payloadPreview)]]">
</iron-icon>
<div id="title">[[getTitle_(payloadPreview)]]</div>