:host {
  display: block;
  color: var(--l-color-text-primary);
  font-size: 0.875rem;
  line-height: 1.5;
  /* The host is the roving-tabindex focus target, but the visible ring is drawn
     on the inner `.item` row. Suppress the host's UA outline so it doesn't paint
     a second ring around the whole subtree (row + children). */
  outline: none;
}

:host([disabled]) {
  opacity: 0.4;
}

:host([disabled]) .item {
  cursor: not-allowed;
}

.item {
  display: flex;
  align-items: center;
  gap: var(--item-gap);
  min-block-size: var(--row-height);
  padding-inline: var(--row-padding-inline);
  padding-inline-start: calc(var(--indent-size) * var(--_depth, 0) + var(--row-padding-inline));
  border-radius: 0.375rem;
  cursor: pointer;
  user-select: none;
  transition:
    background-color 120ms ease,
    color 120ms ease;
  position: relative;
}

.item:focus-visible,
:host(:focus-visible) .item {
  outline: 2px solid var(--l-focus-ring);
  outline-offset: 1px;
}

@media (hover: hover) {
  :host(:not([disabled])) .item:hover {
    background-color: var(--l-color-bg-state-hover);
  }
}

:host([selected]:not([disabled])) .item {
  background-color: var(--l-color-bg-state-selected);
}

.expand {
  inline-size: var(--chevron-size);
  block-size: var(--chevron-size);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--l-color-text-secondary);
  border-radius: 3px;
  cursor: pointer;
}

/* Hide the DEFAULT fallback chevron SVG on a leaf — slotted content
   (user-provided icon, avatar, etc.) remains visible because it lives outside
   the slot in the DOM tree. The `.expand` span keeps its fixed --chevron-size
   so leaf rows stay aligned with branches. */
:host(:not(:state(has-children)):not([lazy])) .expand > slot > svg {
  display: none;
}

.expand svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* The checkbox appearance comes from the shared `.l-checkbox` skin imported
   above; this rule only governs visibility. */
:host(:not(:state(checkbox))) .checkbox {
  display: none;
}

.label {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  /* `clip` (not `hidden`) so the label still truncates long text to an ellipsis
     while `overflow-clip-margin` lets a slotted interactive control's hover/focus
     decoration (a row-action button, an `<l-dropdown>` trigger) bleed past the
     row-height label box instead of being cut on its top/bottom/left edges. The
     margin is kept small so the bleed stays imperceptible for text. */
  overflow: clip;
  overflow-clip-margin: 0.375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label ::slotted(*) {
  min-inline-size: 0;
}

/* Wrapper around the content slot + children — anchor for the indent guide. */
.branch {
  position: relative;
}

/* Content slot — block area between the row and the children.
   Aligned under the label text: same left offset as the row's label
   (depth indent + row padding + chevron + gap). Visible for leaves (no
   children) and for expanded branches; hidden when a branch is collapsed
   (mirrors the children visibility). */
.content {
  display: block;
  padding-inline-start: calc(
    var(--indent-size) * var(--_depth, 0) + var(--row-padding-inline) + var(--chevron-size) +
      var(--item-gap)
  );
  padding-inline-end: var(--row-padding-inline);
}

:host(:state(has-children):not([expanded])) .content {
  display: none;
}

.children {
  display: none;
}

:host([expanded]) .children {
  display: block;
}

/* Vertical indent guide — spans the content + children block, starting
   right below the row so it never overlaps the chevron/avatar.
   The guide's visual centre sits exactly on the parent chevron's centre. */
.branch::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(
    var(--indent-size) * var(--_depth, 0) + var(--row-padding-inline) + (var(--chevron-size) / 2) -
      (var(--indent-guide-width) / 2)
  );
  inline-size: 0;
  border-inline-start: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);
  pointer-events: none;
}

/* Only render the guide for open branches that have children. */
:host(:not([expanded])) .branch::before,
:host(:not(:state(has-children))) .branch::before {
  display: none;
}

.spinner {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border-radius: 50%;
  border: 2px solid var(--l-color-border);
  border-block-start-color: transparent;
  animation: spin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}