/* 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=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #scheme=relative
 * #css_wrapper_metadata_end */

:host {
  --bg-bottom-url: url(images/default_browser_bg_bottom_light.svg);
  --bg-right-url: url(images/default_browser_bg_right_light.svg);
  --child-max-height: 31.25rem;
  --child-max-width: 31.25rem;
  --content-gap: 1.5rem;
  --content-width: calc(2 * var(--child-max-width) + var(--content-gap));
  --header-height: 3.25rem;
  --showcase-text-gap: 1.5rem;
  --showcase-text-padding-top: 1.5rem;
  --subtitle-font-size: 1rem;
  --text-max-width: 21.875rem;
  --title-font-size: 1.5rem;
  color: var(--cr-primary-text-color);
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media screen and ((max-width: 870px) or (max-height: 680px)) {
  .background-shape {
    display: none;
  }
}

#header {
  height: var(--header-height);
  padding: 0 1.5rem 1.5rem 1rem;
}

#product-logo {
  height: 2.5rem;
  width: 2.5rem;
}

#content-div {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: row;
  gap: var(--content-gap);
  justify-content: center;
  margin: 0 1rem 0;
}

@media screen and ((max-width: 780px) or (max-height: 600px)) {
  :host {
    --showcase-text-gap: 0.75rem;
    --showcase-text-padding-top: 0.75rem;
    --subtitle-font-size: 0.875rem;
    --text-max-width: 18.125rem;
    --title-font-size: 1.25rem;
  }
}

.content-child {
  align-items: center;
  display: flex;
  flex: 1;
  height: 60%;
  max-height: var(--child-max-height);
  max-width: var(--child-max-width);
  width: 60%;
}

#showcase-illustration {
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
}

#illustration {
  border-radius: 1.5rem;
  content: url(images/refresh_showcase_illustration.png);
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: right center;
}

#showcase-description {
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-start;
}

#showcase-text {
  display: flex;
  flex-direction: column;
  gap: var(--showcase-text-gap);
  padding-top: var(--showcase-text-padding-top);
}

.title {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 2rem;
  font-size: var(--title-font-size);
  max-width: var(--text-max-width);
  margin: 0;
}

.subtitle {
  font-size: var(--subtitle-font-size);
  font-weight: 400;
  line-height: 1.5rem;
  margin: 0;
  max-width: var(--text-max-width);
}

#button-container {
  display: flex;
<if expr="not is_win">
  flex-direction: row-reverse;
  justify-content: flex-end;
</if>
<if expr="is_win">
  flex-direction: row;
  justify-content: flex-start;
</if>
  gap: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  :host {
    --bg-bottom-url: url(images/default_browser_bg_bottom_dark.svg);
    --bg-right-url: url(images/default_browser_bg_right_dark.svg);
  }
}

#background-right {
  content: var(--bg-right-url);
  height: 33%;
  position: fixed;
  right: 0;
  top: 50%;
  /* The image starts shrinking when space between the image and content is
  equal to 50% of image's width. It pushes away the image 1px for every 2px of
  smaller screen size. Part "max(0px, calc(...))" prevents the image from being
  driven away to the left from the right edge */
  transform: translate(
    max(0px, calc(50% - (50vw - var(--content-width) / 2) / 2)),
    -50%);
  z-index: -1;
}

#background-bottom {
  bottom: 0;
  content: var(--bg-bottom-url);
  left: 75%;
  position: fixed;
  /* Same as above, but start point is 40% as we have more space vertically */
  transform: translate(
    -50%,
    max(0px, calc(40% - (50vh - (var(--child-max-height) / 2
      + var(--header-height))) / 2)));
  width: 17%;
  z-index: -1;
}

/* For RTL languages, flip the direction */
:host-context([dir='rtl']) #background-right {
  left: 0;
  right: auto;
  transform: scaleX(-1) translate(
    max(0px, calc(50% - (50vw - var(--content-width) / 2) / 2)),
    -50%);
}

:host-context([dir='rtl']) #background-bottom {
  left: auto;
  right: 75%;
  transform: scaleX(-1) translate(
    -50%,
    max(0px, calc(40% - (50vh - (var(--child-max-height) / 2
      + var(--header-height))) / 2)));
}

:host-context([dir='rtl']) #illustration {
  object-position: left center;
}