<style include="cr-shared-style settings-shared iron-flex cr-actionable-row-style">
:host {
border-top: var(--cr-separator-line);
padding: 0 var(--cr-section-padding);
}
:host([row-clickable]) #managedIcon {
/* Make the managed icon and the row clickable indicator closer. */
padding-inline-end: 0;
}
iron-icon {
display: flex;
flex-shrink: 0;
padding-inline-end: var(--cr-icon-button-margin-start);
width: var(--cr-link-row-icon-width, var(--cr-icon-size));
}
.button-icon {
padding-inline-end: 0;
}
.icon-blue {
fill: var(--google-blue-600);
}
.icon-red {
fill: var(--google-red-600);
}
/* dark mode */
@media (prefers-color-scheme: dark) {
.icon-blue {
fill: var(--google-blue-300);
}
.icon-red {
fill: var(--google-red-300);
}
}
</style>
<iron-icon id="statusIcon"
icon="[[getStatusIcon_(iconStatus)]]"
src="[[getStatusIconSrc_(iconStatus)]]"
class$="[[getStatusIconClass_(iconStatus)]]"
role="img"
aria-label="[[getStatusIconAriaLabel_(iconStatus)]]">
</iron-icon>
<div class="flex cr-padded-text">
<div id="label" inner-h-t-m-l="[[sanitizeInnerHtml_(label)]]"></div>
<div id="subLabel" class="secondary" no-search
inner-h-t-m-l="[[sanitizeInnerHtml_(subLabel)]]">
</div>
</div>
<template is="dom-if" if="[[showButton_(buttonLabel)]]" restamp>
<cr-button id="button" class$="[[buttonClass]]" on-click="onButtonClick_"
aria-label="[[buttonAriaLabel]]" no-search>
[[buttonLabel]]
<template is="dom-if" if="[[showButtonIcon_(buttonIcon)]]">
<iron-icon class="button-icon icon-blue" icon="[[buttonIcon]]" slot="suffix-icon">
</iron-icon>
</template>
</cr-button>
</template>
<template is="dom-if" if="[[showManagedIcon_(managedIcon)]]">
<iron-icon id="managedIcon" icon="[[managedIcon]]" aria-hidden="true">
</iron-icon>
</template>
<template is="dom-if" if="[[rowClickable]]">
<cr-icon-button id="rowClickableIndicator"
iron-icon="[[rowClickableIcon_]]"
aria-describedby="subLabel"
aria-labelledby="label"
aria-roledescription$="[[getRoleDescription_(rowClickableIcon_)]]">
</cr-icon-button>
</template>