/* Copyright 2023 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
 * #import=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #import=./signin_vars.css.js
 * #css_wrapper_metadata_end */

:host {
  --tangible-sync-style-avatar-size: 64px;
  --tangible-sync-style-banner-width: 17vw;
}

.tangible-sync-style {
  --action-container-padding: 24px;
  --cr-button-height: 36px;
}

.tangible-sync-style.action-container {
  column-gap: 12px;
}

.tangible-sync-style cr-button {
  font-size: 0.75rem;
  min-width: 133px;
}

.tangible-sync-style-left-banner {
  left: 0;
}

.tangible-sync-style-right-banner {
  right: 0;
}

.tangible-sync-style-left-banner,
.tangible-sync-style-right-banner {
  max-width: 320px;
  position: absolute;
  top: 0;
  width: var(--tangible-sync-style-banner-width);
}

.tangible-sync-style-dialog-illustration {
  height: 68px;
  left: 50%;
  position: absolute;
  top: 40px;
  transform: translateX(-50%);
  width: 328px;
}

.tangible-sync-style .work-badge {
  --badge-width: 22px;
  --badge-offset: -4px;
  background-color: var(--signin-work-badge-background-color);
  border: 1px solid var(--google-grey-300);
  border-radius: 50%;
  height: var(--badge-width);
  inset-inline-end: var(--badge-offset);
  width: var(--badge-width);
}

.tangible-sync-style .work-badge > iron-icon {
  --work-icon-size: 14px;
  background-color: var(--signin-work-badge-background-color);
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(60, 64, 67, 0.12),
    0 0 6px rgba(60, 64, 67, 0.15);
  color: var(--signin-work-badge-foreground-color);
  height: var(--work-icon-size);
  margin: auto;
  padding: calc((var(--badge-width) - var(--work-icon-size)) / 2);
  width: var(--work-icon-size);
}

.tangible-sync-style .title {
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 44px;
  margin: 24px 0 16px;
}

.tangible-sync-style.dialog .title {
  font-size: 1.25rem;
  line-height: 24px;
  margin: 16px 0 12px;
}

.tangible-sync-style .subtitle {
  color: var(--cr-secondary-text-color);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 24px;
}

.tangible-sync-style.dialog .subtitle {
  font-size: 0.94rem;
  line-height: 24px;
}

.tangible-sync-style.dialog cr-button {
  --cr-button-height: 32px;
  min-width: 111px;
}

@media screen and ((max-width: 780px) or (max-height: 600px)) {
  .tangible-sync-style .title {
    font-size: 1.5rem;
    line-height: 32px;
  }

  .tangible-sync-style .subtitle {
    font-size: 0.94rem;
    line-height: 22px;
  }
}