<style>
a {
color: var(--cros-text-color-prominent);
}
ol {
padding-inline-start: 20px;
}
[slot='title'] {
/* override the default margin for H1. */
margin: 0;
}
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/welcome.svg#EXPORT_image"></use>
</svg>
<h1 slot="title">
$i18n{welcomeTitle}
</h1>
<div slot="body">
<div id="description"></div>
<p>
$i18nRaw{welcomeBodyText}
</p>
</div>
<div slot="button-container">
<cr-button class="cancel-button">$i18n{cancel}</cr-button>
<cr-button class="action-button">$i18n{welcomeGetStarted}</cr-button>
</div>