/* Copyright 2025 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=../app/toolbar_styles_shared.css.js
 * #include=toolbar-styles-shared
 * #scheme=relative
 * #css_wrapper_metadata_end */

.menu-row {
  --iron-icon-height: 16px;
  --iron-icon-width: 16px;
  align-items: center;
  background: none;
  border: none;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  line-height: var(--immersive-menu-line-height);
  padding-block: 4px;
  padding-inline: 24px 20px;
  text-align: start;
  width: 100%;
}

.menu-row:hover,
.menu-row:focus-visible,
.active {
  background-color: var(--cr-hover-background-color);
}

/* Prevent double highlighting (hover + focus) during keyboard navigation. */
#settings-menu-dialog.keyboard-nav .menu-row:hover {
  background-color: transparent;
}

#settings-menu-dialog.keyboard-nav .menu-row:focus:hover {
  background-color: var(--cr-hover-background-color);
}

.menu-row .start-container {
  align-items: center;
  display: flex;
  gap: 16px;
  padding-inline-end: 16px;
}

.menu-row .start-icon {
  --cr-icon-color: var(--cr-secondary-text-color);
}

.menu-row .label {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 8px;
  font-weight: 400;
}

new-badge {
  --color-badge-background: var(--color-sys-primary);
  color: var(--color-sys-on-primary);
}

.menu-row .end-icon {
  --cr-icon-color: var(--cr-secondary-text-color);
}

:host-context([dir='rtl']) .end-icon {
  transform: scaleX(-1);
}

#settings-menu-dialog {
  --cr-action-menu-padding: 0;
}

#settings-menu-dialog::part(dialog) {
  border-radius: var(--cornerRadii-medium-small, 12px);
  padding-bottom: 12px;
  padding-top: 12px;
  width: clamp(92px, 100%, 340px);
  /* Ensure submenu z-index (9999) > parent to prevent hit-testing overlaps
        and race conditions where the parent "shadows" the submenu. */
  z-index: 9998;
}

.separator {
  background-color: var(--color-side-panel-divider);
  border: 1px var(--color-side-panel-divider);
  height: 1px;
  width: 100%;
}

@media (forced-colors: active) {
   /* The color menu should not be shown when in high contrast mode because
    * reading mode doesn't override system forced colors.
    */
   #color {
    display: none;
  }

   .menu-row {
    color: LinkText;
  }
}