/* Copyright 2024 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_style_lit.css.js
 * #import=chrome://resources/cr_elements/cr_icons_lit.css.js
 * #scheme=relative
 * #include=cr-shared-style-lit cr-icons-lit
 * #css_wrapper_metadata_end */

:host {
  --cr-composebox-input-placeholder-color: var(
    --color-new-tab-page-common-input-placeholder
  );
  --cr-focus-outline-color: var(--color-new-tab-page-focus-ring);
  --cr-searchbox-height: 48px;
  --cr-searchbox-shadow: 0 1px 6px 0 var(--color-searchbox-shadow);
  --cr-searchbox-icon-left-position: 12px;
  --cr-searchbox-icon-size-in-searchbox: 20px;
  --cr-searchbox-icon-top-position: 0;
  --cr-searchbox-min-width: var(--ntp-search-box-width);
  --cr-searchbox-results-search-icon-size: 20px;
  --ntp-theme-text-shadow: none;
  --ntp-one-google-bar-height: 56px;
  --ntp-search-box-width: 337px;
  --ntp-menu-shadow:
    var(--color-new-tab-page-menu-inner-shadow) 0 1px 2px 0,
    var(--color-new-tab-page-menu-outer-shadow) 0 2px 6px 2px;
  --ntp-module-width: 360px;
  --ntp-module-layout-width: 360px;
  --ntp-module-border-radius: 16px;
  --ntp-module-item-border-radius: 12px;
  --ntp-protected-icon-background-color: transparent;
  --ntp-protected-icon-background-color-hovered: rgba(255, 255, 255, 0.1);
  --ntp-scrim-opacity_: 1;
  --threads-rail-width: 76px;
  --threads-rail-focus-outline-color: var(--color-new-tab-page-focus-ring);
}

/**
 * Hide everything that should not display when the composebox is open
 * so they are not tabbable.
 */
:host([show-composebox_]:not([ntp-realbox-next-enabled_])) cr-most-visited,
:host([show-composebox_]:not([ntp-realbox-next-enabled_]))
  ntp-middle-slot-promo,
:host([show-composebox_]:not([ntp-realbox-next-enabled_])) ntp-modules,
:host([show-composebox_]:not([ntp-realbox-next-enabled_]))
  #backgroundImageAttribution,
:host([show-composebox_]:not([ntp-realbox-next-enabled_]))
  ntp-customize-buttons,
:host([show-composebox_]:not([ntp-realbox-next-enabled_]))
  setup-list-module-wrapper {
  display: none;
}

:host([ntp-realbox-next-enabled_]) {
  --cr-searchbox-height: 56px;
  --ntp-scrim-opacity_: 0.5;
}

/**
 * Maintain a larger width if the secondary side can be shown and was at any
 * point available to be shown.
 */
:host([realbox-can-show-secondary-side][realbox-had-secondary-side]),
:host([realbox-can-show-secondary-side]) {
  --ntp-search-box-width: 746px;
}

@media (min-width: 560px) {
  :host {
    --ntp-search-box-width: 449px;
  }
}

@media (min-width: 672px) {
  :host {
    --ntp-search-box-width: 561px;
  }
}

/*A module width of 768px with 18px gaps on each side. */
@media (min-width: 804px) {
  :host {
    --ntp-module-layout-width: 768px;
    --ntp-module-width: 768px;
  }
}

cr-most-visited {
  --add-shortcut-background-color: var(
    --color-new-tab-page-add-shortcut-background
  );
  --add-shortcut-foreground-color: var(
    --color-new-tab-page-add-shortcut-foreground
  );
  --tile-hover-color: var(
    --color-new-tab-page-add-shortcut-background-hovered
  );
  --cr-menu-shadow: var(--ntp-menu-shadow);
  --most-visited-focus-shadow: var(--ntp-focus-shadow);
  --most-visited-text-color: var(--color-new-tab-page-most-visited-foreground);
  --most-visited-text-shadow: var(--ntp-theme-text-shadow);
}

:host([show-background-image_]) {
  --ntp-theme-text-shadow:
    0.5px 0.5px 1px rgba(0, 0, 0, 0.5), 0px 0px 2px rgba(0, 0, 0, 0.2),
    0px 0px 10px rgba(0, 0, 0, 0.1);
  --ntp-protected-icon-background-color: rgba(0, 0, 0, 0.6);
  --ntp-protected-icon-background-color-hovered: rgba(0, 0, 0, 0.7);
}

/* The styles to create a stacking context for the OGB-related elements.
 * The OGB has z-index of 1000 (set by inline styling),
 * and it needs to be segregated to get the OGB scrimmed. */
#oneGoogleBarStackingContext {
  display: flex;
  border: 0;
  top: 0;
  width: 100%;
  /* OGB is above any other element by default to keep the original behavior. */
  z-index: 1000;
}

/* When scrim is applied, OGB must be behind it. */
:host([show-scrim_]) #oneGoogleBarStackingContext {
  z-index: 0;
}

#oneGoogleBarScrim {
  background: linear-gradient(
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.12) 45%,
    rgba(0, 0, 0, 0.05) 65%,
    transparent 100%
  );
  height: 80px;
  position: absolute;
  top: 0;
  width: 100%;
}

#oneGoogleBarScrim[fixed] {
  /* Prevent scrim from bouncing when overscrolling. */
  position: fixed;
}

#oneGoogleBar {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

#content {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--ntp-one-google-bar-height));
  min-width: fit-content; /* Prevents OneGoogleBar cutoff at 500% zoom. */
  padding-top: var(--ntp-one-google-bar-height);
  position: relative;
  z-index: 1;
}

/*
 * Below 900px, the threads rail will shift the main content aside.
 * This happens in conjunction with the realbox width change as well,
 * when the total width reaches 824px + 76px (realbox + rail).
 */
@media (max-width: 900px) {
  #content[ntp-threads-rail-open] {
    margin-inline-start: var(--threads-rail-width);
    width: calc(100% - var(--threads-rail-width));
  }
}

:host([show-composebox_]) #content,
:host([show-voice-search-scrim_]) #content {
  z-index: unset;
}

#logo {
  margin-bottom: var(--ntp-logo-margin-bottom, 38px);
}

:host([show-composebox_]) #logo,
:host([show-voice-search-scrim_]) #logo,
:host([ntp-realbox-next-enabled_][show-scrim_]) #logo {
  z-index: 2;
}

#searchboxContainer {
  --cr-focus-outline-color: var(--color-searchbox-results-icon-focused-outline);
  display: inherit;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

#modules:not([hidden]) {
  /* We use animation instead of transition to allow a fade-in out of
     display: none. */
  animation: 300ms ease-in-out fade-in-animation;
}

@keyframes fade-in-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

ntp-middle-slot-promo {
  max-width: var(--ntp-search-box-width);
}

ntp-searchbox {
  visibility: hidden;
}

ntp-searchbox[shown] {
  visibility: visible;
}

/* ~ because the dom-if results in a template between the middle-slot-promo
   and ntp-modules. */
ntp-middle-slot-promo:not([hidden]) ~ #modules {
  margin-top: 16px;
}

#themeAttribution {
  align-self: flex-start;
  bottom: 16px;
  color: var(--color-new-tab-page-secondary-foreground);
  margin-inline-start: 16px;
  position: fixed;
}

#backgroundImageAttribution {
  border-radius: 8px;
  bottom: 16px;
  color: var(--color-new-tab-page-attribution-foreground);
  line-height: 20px;
  max-width: 50vw;
  padding: 8px;
  position: fixed;
  z-index: -1;
  background-color: var(--ntp-protected-icon-background-color);
  text-shadow: none;
}

#backgroundImageAttribution:hover {
  background-color: var(--ntp-protected-icon-background-color-hovered);
}

:host-context([dir='ltr']) #backgroundImageAttribution {
  left: 16px;
}

:host-context([dir='rtl']) #backgroundImageAttribution {
  right: 16px;
}

#backgroundImageAttribution1Container {
  align-items: center;
  display: flex;
  flex-direction: row;
}

#linkIcon {
  -webkit-mask-image: url(icons/link_old.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  background-color: var(--color-new-tab-page-attribution-foreground);
  height: 16px;
  margin-inline-end: 8px;
  width: 16px;
}

#backgroundImageAttribution1,
#backgroundImageAttribution2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#backgroundImageAttribution1 {
  font-size: 0.875rem;
}

#backgroundImageAttribution2 {
  font-size: 0.75rem;
}

#customizeButtons {
  bottom: 16px;
  position: fixed;
}

:host-context([dir='ltr']) #customizeButtons {
  right: 16px;
}

:host-context([dir='rtl']) #customizeButtons {
  left: 16px;
}

#contentBottomSpacer {
  flex-shrink: 0;
  height: 32px;
  width: 1px;
}

svg {
  position: fixed;
}

:host([energy-effect-enabled_]) #composebox {
  --cr-composebox-expanded-border-radius: 28px;
}

#composebox {
  --color-composebox-submit-button-background: var(
    --color-new-tab-page-composebox-submit-button-background);

  --cr-composebox-background-color: var(--color-composebox-background);
  --cr-composebox-submit-border-radius: 100px;
  --cr-composebox-submit-height: 36px;
  --cr-composebox-submit-icon-size: 24px;
  --cr-composebox-submit-icon-offset: 0;
  --cr-composebox-submit-width: 48px;
  --cr-composebox-width: var(--ntp-search-box-width);

  --text-input-inline-end-spacing: 90px;
}

#composebox::part(cancel-icon) {
  inset-inline-end: 16px;
}

/* Adjust voice-icon to maintain 12px gap from cancel-icon (which is 24px wide
   with inset-inline-end of 16px). 16px + 24px + 12px = 52px). */
#composebox::part(voice-icon) {
  inset-inline-end: 52px;
}

#composebox,
ntp-lens-upload-dialog {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 101;
}

#scrim {
  background: var(--color-composebox-scrim-background);
  inset: 0;
  opacity: var(--ntp-scrim-opacity_);
  position: fixed;
  transition: all 250ms ease;
  z-index: 1;
}

#webstoreToast {
  padding: 16px;
}

/*
  Microsoft Auth's iframe is used for script sandboxing only and requires no
  user interaction. It does not need to be visible.
*/
#microsoftAuth {
  display: none;
}

#dialogAnchor {
  anchor-name: --dialog-anchor;
  inset-inline-start: 0;
  position: absolute;
  top: 0;
}

#composeboxDialog {
  background: transparent;
  border: none;
  inset-inline-start: anchor(start);
  margin: 0;
  overflow: visible;
  position: absolute;
  position-anchor: --dialog-anchor;
  top: anchor(top);
  z-index: 100;
}

#undoToast {
  flex-grow: 1;
}

@container style(--cr-animations-disabled: 1) {
  #modules:not([hidden]) {
    animation: none;
  }
  #scrim {
    transition: none;
  }
}

#voiceSearchDialog {
  --color-composebox-submit-button-background: var(
      --color-new-tab-page-composebox-submit-button-background);
  --color-composebox-submit-button-icon: white;
  --cr-composebox-submit-border-radius: 100px;
  --cr-composebox-submit-height: 36px;
  --cr-composebox-submit-icon-offset: 0;
  --cr-composebox-submit-icon-size: 24px;
  --cr-composebox-submit-width: 48px;
  background: var(--color-composebox-background);
  border: none;
  border-radius: 28px;
  bottom: auto;
  box-shadow: var(--cr-searchbox-shadow);
  font-family: inherit;
  height: 128px;
  inset-inline-start: anchor(start);
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  position-anchor: --dialog-anchor;
  top: anchor(top);
  width: var(--ntp-search-box-width);
}

#voiceSearchDialog:has(#voiceSearch[live-transcript-enabled]) {
  height: auto;
  max-height: 254px;
  min-height: 128px;
}

/* Disable default scrim and use custom scrim instead. */
#voiceSearchDialog::backdrop {
  display: none;
}

#voiceSearchCardContainer {
  height: 100%;
  position: relative;
  width: 100%;
}

#voiceSearchDialog:has(#voiceSearch[live-transcript-enabled])
    #voiceSearchCardContainer {
  height: auto;
}

#voiceSearch {
  height: 100%;
  width: 100%;
  --composebox-voice-search-top-padding: 9px;
  --composebox-cancel-button-top: 10px;
  --voice-bottom-actions-bottom: 12px;
  --voice-bottom-actions-inset-inline-end: 12px;
  /* Minimum height used for error modes, etc., where 'composebox_voice_search'
   * determines the composebox height. In normal voice search mode, 'search-animated-glow'
   * determines the composebox height and min-height is ignored.
   */
  --voice-search-minimum-height: 128px;
}

#voiceSearch[live-transcript-enabled] {
  height: auto;
  inset: auto;
  position: static;
}

#voiceSearch::part(voice-stop-button) {
  position: relative;
}

#voiceSearch::part(submit) {
  position: relative;
}

#voiceSearchGlow {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

#voiceSearch:not([live-transcript-enabled])
    ~ #voiceSearchGlow::part(full-container-overlay) {
  min-block-size: 0;
  position: absolute;
}

:host-context([webui-rounded-icons]) {
  #linkIcon {
    -webkit-mask-image: url(icons/link.svg);
  }
}