/* Copyright 2026 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #import=//resources/cr_elements/cr_shared_style_lit.css.js
 * #import=//resources/cr_elements/cr_shared_vars.css.js
 * #import=../settings_shared_lit.css.js
 * #include=cr-shared-style-lit settings-shared-lit
 * #css_wrapper_metadata_end */

:host {
  --shown-avatar-size: 40px;
  --sync-icon-border-size: 2px;
  --sync-icon-size: 16px;
}

:host([promo-type_='sync']) {
  h3 {
    font-size: inherit;
    font-weight: normal;
    margin: 0;
  }

  #banner {
    background: url(chrome://settings/images/sync_banner.svg) no-repeat;
    background-size: 100% auto;
    display: block;
    padding-top: calc(120 / 680 * 100%); /* Keep background ratio. */
  }

  @media (prefers-color-scheme: dark) {
    #banner {
      background-image:
          url(chrome://settings/images/sync_banner_dark.svg);
    }
  }
}

:host([promo-type_='signin']) {
  h3 {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .25px;
    margin-bottom: 4px;
    margin-top: 4px;
  }

  #banner {
    background: url(chrome://settings/images/signin_banner.svg) no-repeat;
    background-size: 100% auto;
    display: block;
    padding-top: calc(120 / 680 * 100%); /* Keep background ratio. */
  }

  @media (prefers-color-scheme: dark) {
    #banner {
      background-image:
          url(chrome://settings/images/signin_banner_dark.svg);
    }
  }
}

.account-icon {
  border-radius: 50%;
  flex-shrink: 0;
  height: var(--shown-avatar-size);
  width: var(--shown-avatar-size);
}

.account-icon.small {
  height: 20px;
  width: 20px;
}

#menu .dropdown-item {
  padding: 12px;
}

#menu .dropdown-item span {
  margin-inline-start: 8px;
}

.flex {
  display: flex;
  flex: 1;
  flex-direction: column;
}

#avatar-container {
  height: var(--shown-avatar-size);
  position: relative;
}

#sync-icon-container {
  align-items: center;
  background: var(--google-green-700);
  border: var(--sync-icon-border-size) solid white;
  border-radius: 50%;
  display: flex;
  height: var(--sync-icon-size);
  position: absolute;
  right: -6px;
  top: calc(var(--shown-avatar-size) - var(--sync-icon-size) -
      var(--sync-icon-border-size));
  width: var(--sync-icon-size);
}

:host-context([dir='rtl']) #sync-icon-container {
  left: -6px;
  right: initial;
}

@media (prefers-color-scheme: dark) {
  #sync-icon-container {
    background: var(--google-green-300);
    border-color: var(--google-grey-900);
  }
}

#sync-icon-container.sync-problem {
  background: var(--settings-error-color);
}

#sync-icon-container.sync-paused {
  background: var(--google-blue-500);
}

@media (prefers-color-scheme: dark) {
  #sync-icon-container.sync-paused {
    background: var(--google-blue-300);
  }
}

#sync-icon-container.sync-disabled {
  background: var(--google-grey-400);
}

@media (prefers-color-scheme: dark) {
  #sync-icon-container.sync-disabled {
    background: var(--google-grey-500);
  }
}

#sync-icon-container cr-icon {
  fill: white;  /* Same in light and dark modes. */
  height: 12px;
  margin: auto;
  width: 12px;
}

#signIn {
  min-width: 100px;
}