.menu-tree {
  display: grid;
  gap: var(--space-2);
}

.menu-tree__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-tree__list .menu-tree__list {
  gap: var(--space-row-tight);
  margin-block-start: var(--space-row-tight);
  margin-inline-start: var(--space-3);
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--color-border-light);
}

.menu-tree__list--root > .menu-tree__item + .menu-tree__item {
  border-block-start: 1px solid var(--color-border-light);
}

.menu-tree__list--root > .menu-tree__item {
  padding-block: var(--space-2);
}

.menu-tree__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 22rem);
  grid-template-areas: "name count address";
  align-items: center;
  gap: var(--space-hair) var(--space-3);
  min-inline-size: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
}

.menu-tree__row > .badge {
  grid-area: count;
}

.menu-tree__name {
  grid-area: name;
  min-inline-size: 0;
  overflow: hidden;
  font-size: var(--text-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-tree__row--root .menu-tree__name {
  font-weight: var(--weight-semibold);
}

.menu-tree__row--deep .menu-tree__name {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.menu-tree__address {
  grid-area: address;
  min-inline-size: 0;
  overflow: hidden;
  text-align: end;
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-tree__row--pick {
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 18rem);
  grid-template-areas: "check name count address";
  cursor: pointer;
}

.menu-tree__row--pick > input {
  grid-area: check;
}

.menu-tree__more {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

@media (hover: hover) {
  .menu-tree__row:hover {
    background: var(--color-surface-hover);
  }
}

@media (max-width: 768px) {
  .menu-tree__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name count" "address address";
  }

  .menu-tree__row--pick {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "check name count" ". address address";
  }

  .menu-tree__list .menu-tree__list {
    margin-inline-start: var(--space-2);
    padding-inline-start: var(--space-2);
  }

  .menu-tree__name,
  .menu-tree__address {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .menu-tree__address {
    text-align: start;
  }
}