/* 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_nav_menu_item_style_lit.css.js
 * #scheme=relative
 * #include=cr-nav-menu-item-style-lit
 * #css_wrapper_metadata_end */

:host-context(html:not([webui-refresh-2026])) {
  .cr-nav-menu-item {
    display: flex;
    padding-bottom: 14px;
    padding-inline-end: 16px;
    padding-inline-start: 24px;
    padding-top: 14px;
  }

  /* Remove default focus ring in non-tabbing navigation */
  .cr-nav-menu-item:focus:not(:focus-visible) {
    outline: none;
  }

  /* Light Mode - Soft pastel background, colored text */
  .cr-nav-menu-item[selected] {
    background-color: var(--color-sys-primary-container);
    color: var(--color-sys-primary);
    --iron-icon-fill-color: var(--color-sys-primary);
  }

  /* Dark Mode - Light pastel background, dark text */
  @media (prefers-color-scheme: dark) {
    .cr-nav-menu-item[selected] {
      background-color: var(--color-sys-primary);
      color: var(--color-sys-on-primary);
      --iron-icon-fill-color: var(--color-sys-on-primary);
    }
  }

  .cr-nav-menu-item:not([selected]):hover {
    background-color: var(--color-sys-state-hover-on-subtle);
  }
}

.separator {
  border-top: 1px solid var(--cr-separator-color);
  margin-bottom: 16px;
  margin-top: 16px;
}

.footer {
  color: var(--cr-secondary-text-color);
  font-size: 12px;
  line-height: 18px;
  padding-inline-end: 16px;
  padding-inline-start: 24px;
}

.branding {
  /* Hardcoded color for branding */
  color: #0957D0;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.2px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .branding {
    color: #A8C7FA;
  }
}

:host-context([webui-refresh-2026]) {
  .branding {
    color: var(--color-sys-primary);
  }
}

/* HCM */
@media (forced-colors: active) {
  .cr-nav-menu-item[selected] {
    outline: 1px solid Highlight;
    --iron-icon-fill-color: unset;
  }

  .cr-nav-menu-item {
    --iron-icon-fill-color: unset;
  }
}