/* 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_vars.css.js
 * #scheme=relative
 * #css_wrapper_metadata_end */

:host {
  display: inline-flex;
  interpolate-size: allow-keywords;
  /* Prevents the default flex 'auto' min-width from resisting compression. If
   * the omnibox space shrinks (e.g., small browser window), this enables the
   * chip to safely shrink and crop instead of overflowing the flex layout.
   *
   * Note: Native C++ LocationIconView strictly enforces a compression floor
   * of 10 characters. We map this to 0 instead, because applying a CSS
   * min-width: min(10ch, max-content) floor would instantly snap the element
   * to full width upon rendering, irreparably breaking the smooth 150ms
   * expanding width animation sequence. */
  min-width: 0;
}

/* The base layer of the chip, defining its shape, size, and base background
   color. */
#button {
  appearance: none;
  background: none;
  border: none;
  display: inline-flex;
  font: inherit;
  margin: 0;
  padding: 0;
  align-items: center;
  border-radius: calc((var(--location-bar-leading-icon-size) +
                       var(--location-bar-page-info-icon-padding-top) +
                       var(--location-bar-page-info-icon-padding-bottom)) / 2);
  padding-block-start: var(--location-bar-page-info-icon-padding-top);
  padding-block-end: var(--location-bar-page-info-icon-padding-bottom);
  padding-inline-start: var(--location-bar-page-info-icon-padding-left);
  padding-inline-end: var(--location-bar-page-info-icon-padding-right);
  background-color: var(--color-omnibox-icon-background);
  color: var(--color-omnibox-text, currentColor);
  cursor: default;

  /* Ensure the ::after overlay does not spill outside the rounded corners. */
  position: relative;
  outline: none;
  user-select: none; /* Disables text selection on double-click/drag */

  /* Disables the default browser tap highlight so that our custom InkDrop
     overlay provides the sole visual feedback for taps. */
  -webkit-tap-highlight-color: transparent;
}

#button:focus-visible:focus {
  outline: 2px solid var(--cr-focus-outline-color);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  #button:focus-visible:focus {
    /* Use outline instead of box-shadow (which does not work) in Windows
       HCM. */
    outline: var(--cr-focus-outline-hcm, 2px solid transparent);
  }
}

/* An invisible overlay that mimics the native views::InkDrop highlight
   (hover state). */
#button::before {
  background-color: var(--color-omnibox-icon-hover, transparent);
  border-radius: inherit;
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  /* Matches views::kHighlightFadeOutOnHoverChangeDuration (250ms) */
  transition: opacity 250ms ease-in-out;
}

/* An invisible overlay that mimics the native views::InkDrop ripple
   (pressed state). */
#button::after {
  background-color: var(--color-omnibox-icon-pressed, transparent);
  border-radius: inherit;
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  /* Matches views::FloodFillInkDropRipple::ACTION_TRIGGERED_FADE_OUT (300ms) */
  transition: opacity 300ms ease-in-out;
}

/* --- HOVER LAYER (HOVER HIGHLIGHT) ---
   Native Views applies the highlight on hover AND when the ripple is active
   (SHOW_ON_RIPPLE mode). */
:host([clickable]:hover) #button::before,
:host([clickable]:active) #button::before,
:host([clickable][anchor-highlighted]) #button::before {
  /* The alpha value is baked directly into the color variable in C++. */
  opacity: 1;
}

:host([is-text-dangerous]) #button::before {
  background-color:
      var(--color-omnibox-security-chip-ink-drop-hover, transparent);
}

/* --- PRESSED LAYER (RIPPLE) ---
   Native Views composites the ripple on top of the hover highlight. */
:host([clickable]:not([glow-up-active]):active) #button::after,
:host([clickable][anchor-highlighted]) #button::after {
  /* The alpha value is baked directly into the color variable in C++. */
  opacity: 1;
  transition: none; /* Instant press */
}

:host([is-text-dangerous]) #button::after {
  background-color:
      var(--color-omnibox-security-chip-ink-drop-ripple, transparent);
}

icon-from-table {
  --icon-size: var(--location-bar-leading-icon-size);
}

#icon {
  width: var(--location-bar-leading-icon-size);
  height: var(--location-bar-leading-icon-size);
}

:host([is-dangerous]) #button {
  color: var(--color-omnibox-security-chip-dangerous, currentColor);
}

:host([has-text][is-dangerous]) #button {
  padding-inline-start:
      var(--location-bar-page-info-icon-dangerous-leading-padding);
  padding-inline-end:
      var(--location-bar-page-info-icon-dangerous-trailing-padding);
}

:host([is-text-dangerous]) #button {
  background-color: var(
      --color-omnibox-security-chip-dangerous-background,
      var(--color-omnibox-icon-background));
  color: var(--color-omnibox-security-chip-text, currentColor);
}

#text {
  font-family: var(--omnibox-chip-font-family);
  font-size: var(--omnibox-chip-font-size);
  font-weight: var(--omnibox-chip-font-weight);

  /* Prevents the text from wrapping to a second line */
  white-space: nowrap;

  overflow: hidden;
  min-width: 0;
  flex-shrink: 1;

  /* Closed State: completely crushed and invisible */
  width: 0;
  opacity: 0;

  /* Shrink margin to 0 when closed. */
  margin-inline-start: 0;
  padding-inline-end: 0;

  /* Instant collapse */
  transition: width 0ms, opacity 0ms, margin-inline-start 0ms,
              padding-inline-end 0ms;
}

:host([has-text]) #text {
  /* Interpolates smoothly up to max-content */
  width: max-content;
  opacity: 1;

  /* Text sits 8px away from the icon */
  margin-inline-start: var(--location-bar-child-internal-spacing);

  /* Some expanded states require overriding trailing margin */
  padding-inline-end:
      var(--location-bar-page-info-icon-label-extra-trailing-padding);

  transition: width 150ms var(--ease-out-cubic-bezier),
              opacity 150ms var(--ease-out-cubic-bezier),
              margin-inline-start 150ms var(--ease-out-cubic-bezier),
              padding-inline-end 150ms var(--ease-out-cubic-bezier);
}

:host([has-text][is-dangerous]) #text {
  /* Prevent mathematically double-applying the extra trailing pad */
  padding-inline-end: 0;
}

#button.help-anchor-highlight {
  background-color: transparent;
}

#button.help-anchor-highlight::before {
  animation: pulse 1600ms infinite;
  background-color: var(--color-button-feature-attention-highlight);
  opacity: 1;
}

@keyframes pulse {
  0% {
    inset: 0;
    animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1);
  }
  50% {
    inset: 3px;
    animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1);
  }
  100% {
    inset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #button,
  #text,
  #button::before,
  #button::after {
    animation: none !important;
    transition: none !important;
  }
}