/* 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 {
  /* Use flex layout to avoid default inline-block baseline alignment issues. */
  display: flex;
  flex-shrink: 0;
  margin-inline-end: var(--toolbar-interior-margin-end, 6px);
}

/* In maximized/fullscreen windows, we want to stretch the #buttonWrapper
 * click target to the screen edge (Fitts' law) while keeping the inner button
 * at its exact visual position. The 6px fallback in
 * var(--toolbar-interior-margin-end, 6px) corresponds to the default
 * non-touch GetLayoutInsets(LayoutInset::TOOLBAR_INTERIOR_MARGIN).right() in
 * layout_constants.cc. */
:host([window-is-maximized-or-fullscreen]) {
  margin-inline-end: 0;
  --toolbar-chip-trailing-margin: var(--toolbar-interior-margin-end, 6px);
}

toolbar-chip-button {
  --toolbar-chip-icon-size: var(--toolbar-button-icon-size);
  --toolbar-chip-icon-label-gap: var(--app-menu-button-image-label-padding);
  --toolbar-chip-padding-start: var(--app-menu-chip-padding-left);
  --toolbar-chip-padding-end: var(--app-menu-chip-padding-right);
  --toolbar-chip-font-family: var(--toolbar-button-font-family);
  --toolbar-chip-font-size: var(--toolbar-button-font-size);
  --toolbar-chip-font-weight: var(--toolbar-button-font-weight);
}

/* Highlight coloring for the wrapped toolbar-chip-button when severity is
 * present. Note: Despite the variable name containing "expanded", native
 * Views (BrowserAppMenuButton) applies this high-contrast foreground color
 * specifically when a severity label is visible. When no label is present and
 * the menu is open (.anchor-highlight), standard toolbar button text coloring
 * is preserved in parity with native behavior. */
toolbar-chip-button.has-severity {
  --toolbar-chip-bg-color: var(--color-app-menu-highlight-default);
  --toolbar-chip-fg-color: var(--color-app-menu-expanded-foreground-default);
}

:host(.anchor-highlight) toolbar-chip-button {
  --toolbar-chip-highlight-opacity: 1;
}

toolbar-chip-button[has-label] {
  --toolbar-chip-ink-drop-hover-color: var(--color-app-menu-chip-ink-drop-hover);
  --toolbar-chip-ink-drop-ripple-color: var(--color-app-menu-chip-ink-drop-ripple);
}