<style>
:host {
display: block;
/**<office-fallback> element takes the full height of the body*/
height: 100%;
}
#dialog {
padding: 32px 32px 28px 32px;
/**dialog takes the full height*/
height: -webkit-fill-available;
display: flex;
flex-direction: column;
}
#dialog:focus-visible {
outline: none;
}
#text {
flex: 1;
}
#title {
color: var(--cros-sys-on_surface);
font: var(--cros-display-7-font);
}
.normal-text {
color: var(--cros-sys-on_surface_variant);
font: var(--cros-body-1-font);
margin-block-start: 16px;
}
#button-container {
display: flex;
margin-block-start: 32px;
}
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.secondary-button {
background-color: var(--cros-sys-primary_container);
}
cr-button.secondary-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>
<div id="dialog" role="dialog" autofocus tabindex="-1" aria-labelledby="title" aria-describedby="body">
<div id="text">
<div id="title"></div>
<div id="reason-message" class="normal-text"></div>
<div id="instructions-message" class="normal-text"></div>
</div>
<div id="button-container">
<cr-button id="quick-office-button" class="secondary-button">
$i18n{officeFallbackOpenInBasicEditor}
</cr-button>
<cr-button id="cancel-button" class="secondary-button" style="margin-left: auto;">
$i18n{officeFallbackCancel}
</cr-button>
<!-- 8px gap between cancel and try again button -->
<cr-button id="try-again-button" class="action-button" style="margin-left: 8px;">
$i18n{officeFallbackTryAgain}
</cr-button>
<cr-button id="ok-button" class="action-button" style="margin-left: auto;">
$i18n{officeFallbackOk}
</cr-button>
</div>
</div>