chromium/ash/webui/common/resources/office_fallback/office_fallback_dialog.html

<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>