:host {
  display: block;
}

:host([disabled]) {
  pointer-events: none;
  opacity: 0.5;
}

.item {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-block-size: 36px;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  outline: none;
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--l-color-text-primary);
  white-space: nowrap;
  text-align: start;
}

.item:focus-visible {
  /* A ring distinct from the hover tint (which is the same low-contrast fill).
     Negative offset keeps the 2px ring inside the row so it never collides with
     the panel edge or a neighboring item. */
  background: var(--l-color-bg-state-hover);
  outline: 2px solid var(--l-focus-ring);
  outline-offset: -2px;
}

@media (hover: hover) {
  .item:hover {
    background: var(--l-color-bg-state-hover);
  }
}

/* Parent item stays highlighted while its submenu is open. */
:host([submenu-open]) .item {
  background: var(--l-color-bg-state-hover);
}

.check {
  display: flex;
  width: 16px;
  flex-shrink: 0;
}

/* Inline-end chevron marking an item that opens a submenu. */
.submenu-indicator {
  inline-size: 16px;
  block-size: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

:host(:dir(rtl)) .submenu-indicator {
  scale: -1 1;
}

/* Submenu panel — mirrors the l-dropdown panel. The public custom properties
   (--padding, --background, --border-radius, --shadow) inherit from the
   ancestor l-dropdown through the light DOM, so a themed dropdown themes its
   submenus too; their fallbacks repeat the dropdown defaults for standalone use. */
.submenu {
  inset: unset;
  overflow: visible;
  box-sizing: border-box;
  width: max-content;
  padding: var(--padding, 0.25rem);
  margin: 0;
  border: 1px solid var(--l-color-border-overlay);
  border-radius: var(--border-radius, 6px);
  background: var(--background, var(--l-color-surface-overlay));
  color: var(--l-color-text-primary);
  box-shadow: var(--shadow, 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 6%));
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Lightweight separator alternative to <l-divider> — same dimensions, no extra import. */
slot[name='submenu']::slotted(hr) {
  display: block;
  height: 1px;
  margin-block: var(--padding, 0.25rem);
  margin-inline: calc(var(--padding, 0.25rem) * -1);
  border: 0;
  background: var(--l-color-divider);
}

:host(:not([checked])) .check svg {
  visibility: hidden;
}

::slotted([slot='prefix']),
::slotted([slot='suffix']) {
  display: flex;
  flex-shrink: 0;
}

.label {
  flex: 1;
}