chromium/chrome/browser/resources/chromeos/cloud_upload/move_confirmation_page.html

<style>
  #dialog {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 512px;
  }

  .body-wrapper {
    padding: 32px;
  }

  #dialog:focus-visible {
    outline: none;
  }

  #title {
    color: var(--cros-sys-on_surface);
    font: var(--cros-display-6-font);
  }

  .normal-text {
    color: var(--cros-sys-on_surface_variant);
    font: var(--cros-body-1-font);
    margin-block-start: 16px;
  }

  cr-checkbox {
    --cr-checkbox-checked-box-color: var(--cros-sys-primary);
    --cr-checkbox-label-color: var(--cros-sys-on_surface);
    --cr-checkbox-label-padding-start: 14px;
    --cr-checkbox-mark-color: var(--cros-sys-on_primary);
    --cr-checkbox-ripple-checked-color: var(--cros-sys-ripple_primary);
    --cr-checkbox-ripple-opacity: 1;
    --cr-checkbox-ripple-unchecked-color: var(--cros-sys-ripple_primary);
    --cr-checkbox-unchecked-box-color: var(--cros-sys-on_surface);
    height: 20px;
    margin-inline-start: 2px;
    margin-top: 16px;
    padding-bottom: 8px;
    padding-top: 8px;
  }

  :host-context(.focus-outline-visible) cr-checkbox:focus-within {
    --cr-checkbox-ripple-ring: 2px solid var(--cros-sys-focus_ring);
  }

  .checkbox-text {
    color: var(--cros-sys-on_surface_variant);
    font: var(--cros-body-1-font);
  }

  #button-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
  }

  cr-lottie {
    height: 100%;
    position: absolute;
    width: 100%;
  }

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

  .animation-wrapper {
    height: 236px;
    position: relative;
    width: 512px;
  }

  #animation {
    height: 100%;
    position: absolute;
    width: 100%;
  }

  #playPauseIcon {
    /* No dynamic color required here. */
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 24px;
    bottom: 0;
    height: 48px;
    left: 0;
    margin: auto;
    min-width: 48px;;
    opacity: 0; /* We use opacity to hide/show the element so it stays in
                    the tab index */
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
  }

  #playPauseIcon:hover::part(hoverBackground) {
    background-color: var(--cros-sys-hover_on_subtle);
    display: block;
  }

  .animation-wrapper:hover #playPauseIcon, #playPauseIcon:focus {
    opacity: 1;
  }

  #playPauseIcon > .icon {
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    /* No dynamic color required here. */
    background-color: white;
    height: 48px;
    width: 48px;
  }

  #playPauseIcon.play > .icon {
    -webkit-mask-image: url(icons/play.svg);
  }

  #playPauseIcon.pause > .icon {
    -webkit-mask-image: url(icons/pause.svg);
  }
</style>

<!-- TODO(b/258071752): Use localized strings -->
<div class="animation-wrapper">
  <!-- <cros-lottie-renderer> created dynamically -->
  <cr-button id="playPauseIcon" class="pause" aria-label="$i18n{animationPlayText}">
    <div class="icon"></div>
  </cr-button>
</div>
<div id="dialog" role="dialog" autofocus tabindex="-1" aria-labelledby="title">
  <div class="body-wrapper">
    <div id="title"></div>
    <div class="normal-text" id="body-text"> </div>
    <cr-checkbox id="always-copy-or-move-checkbox"> </cr-checkbox>
    <div id="button-container">
      <cr-button class="cancel-button">$i18n{cancel}</cr-button>
      <cr-button class="action-button"></cr-button>
    </div>
  </div>
</div>