<style include="cros-color-overrides">
:host {
align-items: center;
border: 1px solid var(--cr-separator-color);
border-radius: 8px;
column-gap: 12px;
display: flex;
flex-shrink: 0;
margin: 4px;
outline-width: 0;
padding: 12px;
}
#keyboardShortcutIcon {
height: 48px;
width: 48px;
}
#text {
flex: 1;
}
h2 {
color: var(--cr-primary-text-color);
font: var(--cros-headline-1-font);
margin: 0;
}
.reminder-message {
color: var(--cr-secondary-text-color);
margin-top: 4px;
}
kbd,
.reminder-accelerators {
font-family: Roboto, sans-serif;
font-weight: 500;
}
/* Shortcut pods */
kbd > kbd {
background-color: var(--cros-sys-surface_variant);
background-image: linear-gradient(
var(--cros-shortcut-background-gradient-color),
var(--cros-shortcut-background-gradient-color));
border-radius: 12px;
color: var(--cros-text-color-secondary);
font: var(--cros-button-2-font);
display: inline-block;
height: 20px;
margin: 0 4px;
padding: 0 6px;
}
/* Blue + icon between shortcut pods */
:not(kbd) > kbd {
color: var(--cros-text-color-prominent);
}
.parts-container {
flex-wrap: nowrap;
gap: 2px;
white-space: nowrap;
}
.reminder-label {
margin-inline-end: 6px;
}
shortcut-input-key {
--key-container-height: 20px;
--key-container-padding-bottom: 0;
--key-container-padding-top: 0;
}
</style>
<iron-icon id="keyboardShortcutIcon" icon="os-settings:keyboard-shortcut">
</iron-icon>
<div id="text">
<h2>[[header]]</h2>
<template is="dom-if" if="[[!showCustomizedShortcut_]]">
<template is="dom-repeat" items="[[body]]" as="message">
<div id="[[getIdForIndex_(index)]]" aria-hidden="true"
class="reminder-message"
inner-h-t-m-l="[[message]]">
</div>
</template>
</template>
<div id="partsContainer" hidden="[[!showCustomizedShortcut_]]"></div>
</div>
<cr-button on-click="onDismissClick_" id="dismiss" aria-describedby="dismiss"
aria-labelledby$="[[getBodyIds_(body)]]">
$i18n{dismiss}
</cr-button>