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

:host {
  display: inline-flex;
  /* Prevent parent flex containers from squishing the chip. The chip's minimum
   * size should be min(intrinsic width, animated max-width). */
  flex-shrink: 0;
  interpolate-size: allow-keywords;

  /* The distance the divider spans. In C++: kLocationBarChipPadding + 2px. */
  --divider-overlap: calc(var(--location-bar-chip-padding) + 2px);

  /* Matches the C++ expand/collapse duration in ChipController. */
  --chip-expand-duration: 350ms;
  --chip-collapse-duration: 250ms;
}

#chip {
  align-items: center;
  appearance: none;
  background-color: var(--chip-bg-color, var(--color-omnibox-chip-background));
  border: none;
  border-radius: var(--location-bar-child-corner-radius);
  box-shadow: var(--chip-box-shadow, none);
  box-sizing: border-box;
  color: var(
      --chip-fg-color, var(--color-omnibox-chip-foreground-normal-visibility));
  cursor: default;
  display: inline-flex;
  font-family: var(--omnibox-chip-font-family);
  font-size: var(--omnibox-chip-font-size);
  font-weight: var(--omnibox-chip-font-weight);
  height: calc(
      var(--location-bar-height) -
      var(--location-bar-page-info-icon-vertical-padding) * 2);
  margin: 0;
  max-width: max-content;
  overflow: hidden;
  padding-block: var(--location-bar-chip-padding);
  padding-inline-end: calc(var(--location-bar-chip-padding) * 2);
  padding-inline-start: var(--location-bar-chip-padding);
  position: relative;
  transition:
      padding-inline-end var(--chip-expand-duration)
          var(--ease-out-cubic-bezier),
      opacity var(--chip-expand-duration) var(--ease-out-cubic-bezier);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

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

@media (forced-colors: active) {
  #chip:focus-visible {
    outline: var(--cr-focus-outline-hcm, 2px solid transparent);
  }
}

#chip[collapsed] {
  padding-inline-end: var(--location-bar-chip-padding);
  transition: padding-inline-end var(--chip-collapse-duration)
      var(--ease-out-cubic-bezier);
}

/* An invisible overlay that mimics the native views::InkDrop highlight
   (hover state). */
#chip::before,
#chip::after {
  border-radius: inherit;
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

#chip::before {
  background-color: var(--color-omnibox-chip-ink-drop-hover, transparent);
  /* Matches views::kHighlightFadeOutOnHoverChangeDuration (250ms) */
  transition: opacity 250ms ease-in-out;
}

/* An invisible overlay that mimics the native views::InkDrop ripple
   (pressed state). */
#chip::after {
  background-color: var(--color-omnibox-chip-ink-drop-ripple, transparent);
  /* Matches views::FloodFillInkDropRipple::ACTION_TRIGGERED_FADE_OUT (300ms) */
  transition: opacity 300ms ease-in-out;
}

#chip:hover::before,
:host(:active) #chip::before,
:host([anchor-highlighted]) #chip::before {
  /* The alpha value is baked directly into the color variable in C++. */
  opacity: 1;
}

:host(:active) #chip::after,
:host([anchor-highlighted]) #chip::after {
  /* The alpha value is baked directly into the color variable in C++. */
  opacity: 1;
  transition: none; /* Instant press */
}

#icon {
  background-color: currentColor;
  display: inline-block;
  flex-shrink: 0;
  height: var(--location-bar-chip-icon-size);
  margin-inline-end: 0;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  width: var(--location-bar-chip-icon-size);
  transition: margin-inline-end var(--chip-expand-duration)
      var(--ease-out-cubic-bezier);
}

#chip:not([collapsed]):has(#message[visible]) #icon {
  margin-inline-end: var(--location-bar-child-internal-spacing, 4px);
}

#chip[collapsed] #icon {
  margin-inline-end: 0;
  transition: margin-inline-end var(--chip-collapse-duration)
      var(--ease-out-cubic-bezier);
}

#message {
  display: inline-block;
  interpolate-size: allow-keywords;
  overflow: hidden;
  /* TODO(crbug.com/502598627): Native Views uses
   * SetElideBehavior(gfx::ElideBehavior::FADE_TAIL). We currently use
   * ellipsis. Probably implement a CSS linear-gradient mask if we want to
   * strictly match the native fade-tail visual parity. */
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: max-content;
  transition: max-width var(--chip-expand-duration)
      var(--ease-out-cubic-bezier);
}

#message:not([visible]) {
  max-width: 0;
  transition: max-width var(--chip-collapse-duration)
      var(--ease-out-cubic-bezier);
}

:host(:not([visible])) #chip {
  max-width: 0;
  opacity: 0;
  padding-inline: 0;
  pointer-events: none;
  /* Hide instantly when visibility is lost. If we were animating a collapse,
     the collapse transition to icon size already completed while visible.
     This prevents jank when replacing one chip with another. */
  transition: none;
  /* Automatically hides from accessibility tree and removes from keyboard tab
     focus. */
  visibility: hidden;
}

:host([has-divider]) {
  /* In Native Views, the chip_divider_view_ takes 4px of layout space, and the
   * request_chip_ has a left margin of -6px. This places the request chip
   * exactly 2px inside the indicator chip. */
  margin-inline-start: -2px;
}

:host([has-divider]) #chip {
  border-end-start-radius: 0;
  border-start-start-radius: 0;
  /* TODO(crbug.com/527721143): Fix touch mode after native views fixed its bug.
   * To perfectly match Native Views (PermissionDashboardView):
   * The chip itself has a 12px corner radius (24px height), but the cutout
   * arc is based on a larger 16px radius circle that starts exactly at the left
   * edge of the request chip. Because the 32px diameter circle is taller than
   * the 24px chip, it forms a shallow circular segment, not a full semicircle.
   * The center of this 16px circle must be shifted left to intersect the top
   * and bottom corners.
   * By Pythagorean theorem: center_x = -sqrt(16^2 - (height/2)^2).
   * Since CSS sqrt() cannot operate on dimensions, we precalculate the values
   * for non-touch (height=24, center_x=-10.583px) and
   * touch (height=30, center_x=-5.568px). */
  --mask-radius: 16px;
  --mask-center-x: calc(-10.583px + var(--touch-mode, 0) * 5.015px);

  /* To perfectly match Native Views (PermissionChipView):
   * To prevent the icon from getting eaten by that overlapping arc, the chip
   * must push its internal content to the right*/
  padding-inline-start:
      calc(var(--location-bar-chip-padding) + var(--divider-overlap));

  /* The 0.5px transition creates a smooth, anti-aliased edge that mimics the
   * hardware anti-aliasing used by Skia (flags.setAntiAlias(true)) when Native
   * Views draws this shape. */
  mask-image: radial-gradient(
      circle at var(--mask-center-x) 50%,
      transparent var(--mask-radius),
      black calc(var(--mask-radius) + 0.5px));
}

:host-context([dir=rtl]):host([has-divider]) #chip {
  mask-image: radial-gradient(
      circle at calc(100% - var(--mask-center-x)) 50%,
      transparent var(--mask-radius),
      black calc(var(--mask-radius) + 0.5px));
}

:host(.help-anchor-highlight) #chip {
  background-color: transparent;
}

:host(.help-anchor-highlight) #chip::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) {
  #chip,
  #icon,
  #message,
  #chip::before,
  #chip::after {
    animation: none !important;
    transition: none !important;
  }
}