chrome/browser/resources/signin/profile_picker/profile_creation_flow/shared_css.html

<template>
  <style include="cr-icons profile-picker-shared">
    :host {
      --avatar-size: 100px;
      --banner-height: 244px;
    }

    #headerContainer {
      background-color: var(--theme-frame-color);
      height: var(--banner-height);
      position: relative;
      width: 100%;
    }

    .banner {
      background-size: 100% 100%;
      height: 100%;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 0;
    }

    #backButton {
      --cr-icon-button-fill-color: var(--theme-text-color);
      --cr-icon-button-icon-size: 22px;
      --cr-icon-button-margin-start: 4px;
      --cr-icon-button-size: 36px;
      margin-top: 4px;
      position: relative;
      z-index: 1;
    }

    #avatarContainer {
      bottom: calc(var(--avatar-size) / -2);
      height: calc(var(--avatar-size) + 4px);
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      width: calc(var(--avatar-size) + 4px);
    }

    .avatar {
      border: 2px solid var(--md-background-color);
      border-radius: 50%;
      height: var(--avatar-size);
      width: var(--avatar-size);
      z-index: 1;
    }
  </style>
</template>