/* 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=./toolbar_button.css.js
 * #scheme=relative
 * #include=toolbar-button
 * #css_wrapper_metadata_end */

#buttonWrapper {
  align-items: center;
  display: flex;
  height: 100%;
}

:host(#back) {
  align-self: stretch;
  height: auto;
  justify-content: flex-start;
  width: auto;
}

:host(#back) #buttonWrapper {
  /* Enforce content-box so adding padding-inline-start cleanly extends the
   * total target width beyond --button-width (defined in toolbar_button.css)
   * without shrinking inner icon space or altering visual icon coordinates. */
  box-sizing: content-box;
  margin-inline-start: var(--toolbar-interior-margin-start, 6px);
  padding-inline-start: 0;
  width: var(--button-width);
}

:host(#back[window-is-maximized-or-fullscreen]) #buttonWrapper {
  margin-inline-start: 0;
  /* In maximized/fullscreen windows, we add the leading margin space as padding
   * instead of margin. This stretches the #buttonWrapper click target to the
   * screen edge (Fitts' law) while keeping the inner button at its exact visual
   * position. We use the name 'leading margin' conceptually to align with the
   * window layout, but it is implemented as padding here. */
  padding-inline-start: var(--toolbar-interior-margin-start, 6px);
}

#buttonWrapper:not([disabled]):hover #button {
  background-color: var(--cr-hover-background-color);
}