<style>
.icon-button::before {
-webkit-mask-position: center;
background-color: currentColor;
content: ' ';
display: inline-block;
height: 20px;
margin-inline-end: 8px;
width: 20px;
}
.install::before {
-webkit-mask-image: url(icons/download.svg);
}
.installing::before {
-webkit-mask-image: url(chrome://resources/images/throbber_medium.svg);
-webkit-mask-size: 100%;
}
.installed::before {
-webkit-mask-image: url(icons/check.svg);
}
cr-button {
--active-bg: transparent;
--active-shadow: none;
--active-shadow-action: none;
--bg-action: var(--cros-sys-primary);
--cr-button-height: 36px;
--disabled-bg-action:
var(--cros-sys-disabled_container);
--disabled-bg: var(--cros-sys-disabled_container);;
--disabled-text-color: var(--cros-sys-disabled);
/* Use the default bg color as hover color because we
rely on hoverBackground layer below. */
--hover-bg-action: var(--cros-sys-primary);
--hover-bg-color: var(--cros-sys-primary_container);
--ink-color: var(--cros-sys-ripple_primary);
--ripple-opacity-action: 1;
--ripple-opacity: 1;
--text-color-action: var(--cros-sys-on_primary);
--text-color: var(--cros-sys-on_primary_container);
border: none;
border-radius: 18px;
box-shadow: none;
}
cr-button.cancel-button {
background-color: var(--cros-sys-primary_container);
}
cr-button.cancel-button:hover::part(hoverBackground) {
background-color: var(--cros-sys-hover_on_subtle);
display: block;
}
cr-button.action-button:hover::part(hoverBackground) {
background-color: var(--cros-sys-hover_on_prominent);
display: block;
}
:host-context(.focus-outline-visible) cr-button:focus {
outline: 2px solid var(--cros-sys-focus_ring);
outline-offset: 2px;
}
</style>
<svg slot="header-image" viewBox="0 0 448 200">
<use href="images/install_office_pwa.svg#EXPORT_image"></use>
</svg>
<div slot="title">$i18n{installPWATitle}</div>
<div slot="body">
<p>$i18n{installPWABodyText}</p>
</div>
<div slot="button-container">
<cr-button class="cancel-button">$i18n{cancel}</cr-button>
<cr-button class="action-button icon-button install">$i18n{install}</cr-button>
</div>