<style include="iron-flex iron-positioning">
#container {
background-color: transparent;
border-radius: 12px;
border-width: 1px;
border: var(--cr-separator-line);
box-sizing: border-box;
color: var(--cr-secondary-text-color);
font: var(--cros-body-2-font);
height: 64px;
margin-bottom: 6px;
margin-top: 6px;
padding-inline-start: 12px;
}
:host([selected]) #container {
color: var(--cros-sys-on_primary_container);
background-color: var(--cros-sys-primary_container);
border-style: none;
font: var(--cros-button-2-font);
}
:host(:not([selected]):focus) #container {
border-width: 3px;
padding-inline-start: 10px;
}
#details {
align-items: center;
display: flex;
flex: auto;
min-height: var(--cr-section-two-line-min-height);
}
#profileTitleLabel {
margin-inline-start: 8px;
}
#profileImage {
margin-inline-end: 8px;
}
.icon {
padding-inline-end: var(--cr-section-padding);
}
#checkmark {
--iron-icon-fill-color: var(--cros-icon-color-prominent);
}
</style>
<div id="container" class="flex layout horizontal center" selectable>
<div id="details">
<!-- The item's aria properties are set in profile_discovery_list_page. -->
<div class="flex settings-box-text">
<div id="profileTitleLabel">
[[getProfileName_(profileProperties)]]
</div>
</div>
</div>
<div class="icon"
hidden$="[[!selected]]">
<iron-icon id="checkmark"
icon="cellular-setup:checked"
tabindex="-1">
</iron-icon>
</div>
</div>