<style>
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/one_drive_success.svg#EXPORT_image"></use>
</svg>
<div slot="title">$i18n{oneDriveSetupCompleteTitle}</div>
<div slot="body">
<p>$i18n{oneDriveSetupCompleteBodyText}</p>
</div>
<div slot="button-container">
<cr-button class="action-button">$i18n{done}</cr-button>
</div>