/* Copyright 2024 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=../cr_shared_vars.css.js
 * #import=../cr_hidden_style_lit.css.js
 * #import=../cr_icons_lit.css.js
 * #scheme=relative
 * #include=cr-hidden-style-lit cr-icons-lit
 * #css_wrapper_metadata_end */

:host {
  align-items: center;
  box-sizing: border-box;
  color: var(--google-grey-900);
  display: flex;
  height: var(--cr-toolbar-height);
}

@media (prefers-color-scheme: dark) {
  :host {
    color: var(--cr-secondary-text-color);
  }
}

h1 {
  flex: 1;
  font-size: 170%;
  font-weight: var(--cr-toolbar-header-font-weight, 500);
  letter-spacing: .25px;
  line-height: normal;
  margin-inline-start: 6px;
  padding-inline-end: 12px;
  white-space: var(--cr-toolbar-header-white-space, normal);
}

@media (prefers-color-scheme: dark) {
  h1 {
    color: var(--cr-primary-text-color);
  }
}

#leftContent {
  position: relative;
  transition: opacity 100ms;
}

#leftSpacer {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  /* 12px to match #rightSpacer + 6px to align with icons in menus. */
  padding-inline-start: calc(12px + 6px);
  width: var(--cr-toolbar-left-spacer-width, auto);
}

cr-icon-button {
  --cr-icon-button-size: 32px;
  min-width: 32px;
}

@media (prefers-color-scheme: light) {
  cr-icon-button {
    --cr-icon-button-fill-color: currentColor;
    --cr-icon-button-focus-outline-color: var(--cr-focus-outline-color);
  }
}

#centeredContent {
  display: flex;
  flex: 1 1 0;
  justify-content: center;
}

#rightSpacer {
  padding-inline-end: 12px;
}

:host([narrow]) #centeredContent {
  justify-content: flex-end;
}

:host([has-overlay]) {
  transition: visibility var(--cr-toolbar-overlay-animation-duration);
  visibility: hidden;
}

:host([narrow][showing-search_]) #leftContent {
  opacity: 0;
  position: absolute;
}

:host(:not([narrow])) #leftContent {
  flex: 1 1 var(--cr-toolbar-field-margin, 0);
}

:host(:not([narrow])) #centeredContent {
  flex-basis: var(--cr-toolbar-center-basis, 0);
}

:host(:not([narrow])[disable-right-content-grow]) #centeredContent {
  justify-content: start;
  padding-inline-start: 12px;
}

:host(:not([narrow])) #rightContent {
  flex: 1 1 0;
  text-align: end;
}

:host(:not([narrow])[disable-right-content-grow]) #rightContent {
  flex: 0 1 0;
}

picture {
  display: none;
}

#menuButton {
  margin-inline-end: 9px;
}

#menuButton ~ h1 {
  margin-inline-start: 0;
}

:host([always-show-logo]) picture,
:host(:not([narrow])) picture {
  display: initial;
  margin-inline-end: 16px;
}

:host([always-show-logo]) #leftSpacer,
:host(:not([narrow])) #leftSpacer {
  /* 12px to match #rightSpacer + 9px to align with icons in menus. */
  padding-inline-start: calc(12px + 9px);
}

:host([always-show-logo]) :is(picture, #product-logo),
:host(:not([narrow])) :is(picture, #product-logo) {
  height: 24px;
  width: 24px;
}