.tree-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-block: var(--space-2xs);
  padding-inline: var(--space-xs);
  color: var(--color-text);
  font-size: var(--font-size-ui);
  line-height: var(--line-height-ui);
}

.tree-row__line {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: var(--control-block-size);
}

.tree-row__label {
  min-inline-size: 0;
  font-weight: var(--font-weight-bold);
}

.tree-row__content {
  min-inline-size: 0;
  padding-block: var(--space-2xs);
}

.tree-row__meta {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.tree-row__note {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.tree-row__actions {
  display: flex;
  gap: var(--space-3xs);
  margin-inline-start: auto;
}

@media (width <= 48rem) {
  .tree-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-xs);
    row-gap: var(--space-3xs);
    min-block-size: var(--control-block-size);
  }

  .tree-row__line {
    display: contents;
  }

  .tree-row__line > .icon {
    grid-area: 1 / 1;
  }

  .tree-row__label {
    grid-area: 1 / 2;
  }

  .tree-row__actions {
    grid-area: 1 / 3;
  }

  .tree-row__meta {
    grid-area: 2 / 2 / auto / -1;
  }

  .tree-row__note {
    grid-column: 2 / -1;
  }

  .tree-row__content {
    grid-column: 1 / -1;
  }
}

.tree-row--entering {
  animation: tree-row-enter var(--duration-enter) var(--easing-enter);
}

@keyframes tree-row-enter {
  from {
    opacity: 0;
    translate: 0 calc(-1 * var(--space-2xs));
  }
}