<style include="shortcut-customization-shared">
.spacing {
color: var(--cros-text-color-secondary);
font: var(--cros-button-2-font);
margin-inline-end: 8px;
}
:host([narrow]) .spacing {
margin-inline-end: 4px;
}
#text-wrapper {
align-items: center;
display: flex;
justify-content: space-between;
}
:host([narrow]) .parts-container {
flex-wrap: nowrap;
white-space: nowrap;
}
iron-icon[icon='shortcut-customization:lock'] {
--iron-icon-width: 16px;
--iron-icon-height: 16px;
}
</style>
<div class="container">
<!-- This element's innerHTML is dynamically set based on its text
accelerator parts. -->
<div id="text-wrapper">
<div class="parts-container"></div>
<div class="lock-icon-container" hidden="[[!shouldShowLockIcon()]]"
aria-label="[[i18n('lock')]]" role="img">
<iron-icon icon="shortcut-customization:lock"></iron-icon>
</div>
</div>
</div>