[data-file-tree] {
  --file-tree-icon-size: 14px;
  --file-tree-icon-gap: 8px;
  --file-tree-row-padding-inline: 9px;
  --file-tree-indent: calc(var(--file-tree-icon-size) + var(--file-tree-icon-gap));

  margin: 8px 0 24px;

  h2 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: 0;
  }

  > label {
    margin: 0 0 12px;
  }

  &[data-density="compact"] {
    --file-tree-icon-gap: 4px;
    --file-tree-indent: 6px;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    ul {
      margin: 2px 0 2px var(--file-tree-indent);
      border-left: 0.5px solid var(--border);
    }
  }

  li {
    margin: 2px 0;
  }

  summary,
  a {
    display: grid;
    grid-template-columns: var(--file-tree-icon-size) minmax(0, 1fr);
    column-gap: var(--file-tree-icon-gap);
    align-items: center;
    min-height: 30px;
    padding: 5px var(--file-tree-row-padding-inline);
    color: var(--ink-muted);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;

    > span:first-child {
      position: relative;
      width: var(--file-tree-icon-size);
      height: var(--file-tree-icon-size);
      color: var(--ink-faint);
    }

    > span:nth-child(2) {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    &:hover {
      color: var(--ink);
      background: var(--bg-sunken);
      text-decoration: none;
    }
  }

  summary {
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    > span:nth-child(2)::after {
      color: var(--ink-faint);
      content: "›";
      display: inline-block;
      margin-left: 6px;
      transition: transform 120ms ease;
    }
  }

  details[open] > summary > span:nth-child(2)::after {
    transform: rotate(90deg);
  }

  details > summary > span:first-child {
    &::before {
      position: absolute;
      inset: 3px 1px 2px;
      border: 1px solid currentColor;
      border-radius: 2px;
      content: "";
    }

    &::after {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 6px;
      height: 3px;
      border: 1px solid currentColor;
      border-bottom: 0;
      border-radius: 2px 2px 0 0;
      content: "";
    }
  }

  a > span:first-child {
    &::before {
      position: absolute;
      inset: 1px 2px;
      border: 1px solid currentColor;
      border-radius: 2px;
      content: "";
    }

    &::after {
      position: absolute;
      top: 2px;
      right: 3px;
      width: 4px;
      height: 4px;
      background: var(--bg);
      border-left: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
      content: "";
    }
  }

  a[data-status="added"] {
    color: var(--add-ink);
  }

  a[data-status="deleted"] {
    color: var(--del-ink);
  }

  a[data-status="renamed"] {
    color: var(--clay-deep);
  }
}