/* 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
 * #scheme=relative
 * #css_wrapper_metadata_end */

:host {
  /* To help make things line up nicely between the rich-text readonly view and
   * the interactive <input>, we give everything here the same height,
   * the height of the location bar. */
  --omnibox-height: calc(var(--location-bar-height));
  align-self: center;
  border: none;
  color: var(--color-omnibox-text);
  display: flex;
  /* Absorbs available free space. This mathematically isolates layout changes
   * on the left/right sides. */
  flex: 1;
  font-family: var(--omnibox-primary-font-family);
  font-size: var(--omnibox-primary-font-size);
  font-weight: var(--omnibox-primary-font-weight);
  line-height: var(--omnibox-primary-line-height);
  height: var(--omnibox-height);
}

/* #textContainerWrap exists to fill up space in a way that's sensitive to
 * user locale's text direction, even when #textContainer is forced into LTR.
 */
#textContainerWrap {
  display: flex;
  flex: 1;
  height: var(--omnibox-height);
  /* We want to position textInput off of us */
  position: relative;
  /* Giving this a width makes flex shrink it to fit available space when this
   * is too long. The exact value will get replaced by whatever flex computes,
   * but it also won't go below this.
   */
  width: 0;
}

/* When the popup is expanded, we take control of spacing between us and icons,
 * so that clicks delivered before the expansion still end up with us.
 */
:host-context(.popup-open) #textContainer,
:host-context(.popup-open) #textInput {
  padding-inline-start: var(--omnibox-start-padding);
  margin-inline-start: calc(-1*var(--omnibox-start-padding));
}

#textContainer {
  /* Both #textContainer and #textInput are included in the layout, with opacity
   * used to determine which one is actually visible. Since the <input> element
   * is always actually present, any interaction goes to it directly, making
   * the switchover painless. #textContainer always being present lets
   * #inlineAutocomplete use it to position itself in the right spot.
   */
  flex: 0 1 min-content;
  height: var(--omnibox-height);
  opacity: 1;
  outline: none;
  overflow: hidden;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: pre;
}

#textContainer span {
  line-height: var(--omnibox-height);
  vertical-align: middle;
}

#textContainer.force-ltr {
  direction: ltr;
}

#textInput::part(searchbox-input)::selection {
  background-color: var(--color-omnibox-selection-background);
  color: var(--color-omnibox-selection-foreground);
}

/* We don't want URLs spellchecked */
#textInput::part(searchbox-input)::spelling-error {
  text-decoration: none;
}

#textInput::part(searchbox-input)::grammar-error {
  text-decoration: none;
}

#textInput::placeholder {
  color: var(--color-omnibox-text);
}

#textContainer .color-dim {
  color: var(--color-omnibox-text-dimmed);
}

#textContainer .color-foreground-disabled,
#textInput.color-foreground-disabled::placeholder  {
  color: var(--color-omnibox-foreground-disabled);
}

#textContainer .color-danger {
  color: var(--color-omnibox-security-chip-dangerous);
}

#textContainer .strikethrough {
  text-decoration: line-through;
}

#textInput {
  opacity: 0;
}

#textInput,
#textInput::part(searchbox-input) {
  --cr-searchbox-input-height: var(--omnibox-height);
  appearance: none;
  background-color: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  height: var(--omnibox-height);
  outline: none;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#textInput::part(icon) {
  display: none;
}

:host(.dragging-over) #textContainer span {
  background-color: var(--color-omnibox-selection-background);
  color: var(--color-omnibox-selection-foreground);
}

#inlineAutocomplete {
  color: var(--color-omnibox-text);
  background-color: var(--color-location-bar-background);
  height: var(--omnibox-height);
  line-height: var(--omnibox-height);
  /* If [composing] isn't set, this is used only for positioning the additional
   * text. */
  visibility: hidden;
  white-space: pre;
}

#inlineAutocomplete[composing] {
  visibility: visible;
}

#additionalText {
  color: var(--color-omnibox-results-url);
  /* fonts are the same as for the omnibox proper */
  height: var(--omnibox-height);
  line-height: var(--omnibox-height);
  pointer-events: none;
  position: relative;
  white-space: pre;

  /* Since the <input> is full-width, we want to be on top */
  z-index: 102;
}

#dragTemplate {
  align-items: center;
  color: var(--color-textfield-foreground);
  display: flex;
  font-family: var(--drag-template-font-family);
  font-size: var(--drag-template-font-size);
  font-weight: var(--drag-template-font-weight);
  /* Matches native drag image preferred height calculation from
   * button_drag_utils.cc (button->GetPreferredSize({}): 16px gfx::kFaviconSize
   * icon + 8px LabelButton padding).
   */
  height: 24px;
  /* Position off-screen so the template is not visible in the transparent
   * WebUI, while keeping its full layout intact for
   * dataTransfer.setDragImage().
   */
  left: -10000px;
  max-width: 150px;
  pointer-events: none;
  position: absolute;
  top: -10000px;
  white-space: nowrap;
}

#dragFavicon {
  flex-shrink: 0;
  /* Standard favicon display size (gfx::kFaviconSize). */
  height: 16px;
  margin-inline-end: 12px;
  width: 16px;
}

#dragTitle {
  overflow: hidden;
  padding-inline: 2px;
  text-overflow: ellipsis;
  text-shadow:
      0 0 1px var(--color-textfield-background),
      0 0 1px var(--color-textfield-background),
      0 0 2px var(--color-textfield-background),
      0 0 2px var(--color-textfield-background);
  white-space: nowrap;
}

/* Used for accessibility mark up only */
#announcementDistraction {
  position: absolute;
  left: -10000px;
}