<style include="cr-shared-style">
   :host {
      --computer-icon-padding-top: 11px;
      --computer-icon-padding-bottom: 10px;
      --computer-icon-padding-sides: 8px;
      /* Same opacity as the native bubble, where the Skia range is 0-255.*/
      --hairline-opacity: calc(96/255);
      --hairline-width: 1px;
      --hairline-color :
          rgba(var(--google-grey-700-rgb), var(--hairline-opacity));
      --outer-icon-size: 48px;
   }

   @media (prefers-color-scheme: dark) {
    :host {
      --hairline-color:
          rgba(var(--google-grey-500-rgb), var(--hairline-opacity))
    }
  }

  cr-dialog::part(body-container) {
    height: 124px;
  }

  .icon-container {
    height: var(--outer-icon-size);
    position: relative;
    width: var(--outer-icon-size);
  }

  settings-avatar-icon {
    border: var(--hairline-width) solid var(--hairline-color);
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: calc(var(--outer-icon-size) - 2 * var(--hairline-width));
    width: calc(var(--outer-icon-size) - 2 * var(--hairline-width));
  }

  #computerIcon {
    --iron-icon-height: calc(var(--outer-icon-size) - 2 * var(--hairline-width)
        - var(--computer-icon-padding-top)
        - var(--computer-icon-padding-bottom));
    --iron-icon-width: calc(var(--outer-icon-size) - 2 * var(--hairline-width)
        - 2 * var(--computer-icon-padding-sides));
    border: var(--hairline-width) solid var(--hairline-color);
    border-radius: 50%;
    flex-shrink: 0;
    padding-bottom: var(--computer-icon-padding-bottom);
    padding-inline-end: var(--computer-icon-padding-sides);
    padding-inline-start: var(--computer-icon-padding-sides);
    padding-top: var(--computer-icon-padding-top);
  }

  site-favicon {
    background-color: white;
    border: var(--hairline-width) solid var(--hairline-color);
    border-radius: 50%;
    bottom: 0;
    padding: 2px;
    position: absolute;
    right: 0;
  }

  @media (prefers-color-scheme: dark) {
    site-favicon {
      background-color: var(--google-grey-900-white-4-percent);
    }
  }

  .cr-row {
    display: flex;
    justify-content: center;
  }

  #chevronIcon {
    height: 16px;
    margin: 0 16px;
    width: 16px;
  }

  :host-context([dir=rtl]) #chevronIcon {
    transform: scaleX(-1);
  }

  #dialogMessage {
    margin-bottom: 24px;
  }
</style>
<cr-dialog id="dialog" close-text="$i18n{close}">
  <div slot="title">$i18n{passwordMoveToAccountDialogTitle}</div>
  <div slot="body">
    <div id="dialogMessage">
      $i18n{passwordMoveToAccountDialogBody}
    </div>
    <div class="cr-row first">
      <div class="icon-container">
        <iron-icon id="computerIcon" icon="cr:computer">
        </iron-icon>
        <site-favicon url="[[passwordToMove.urls.link]]">
        </site-favicon>
      </div>
      <iron-icon id="chevronIcon" icon="cr:chevron-right"></iron-icon>
      <div class="icon-container">
        <settings-avatar-icon></settings-avatar-icon>
        <site-favicon url="[[passwordToMove.urls.link]]">
        </site-favicon>
      </div>
    </div>
  </div>
  <div slot="button-container">
    <cr-button class="cancel-button" id="cancelButton"
        on-click="onCancelButtonClick_">
      $i18n{passwordMoveToAccountDialogCancelButtonText}
    </cr-button>
    <cr-button class="action-button" id="moveButton"
        on-click="onMoveButtonClick_">
      $i18n{passwordMoveToAccountDialogMoveButtonText}
    </cr-button>
  </div>
</cr-dialog>