/* File Tree Component */

/* Directory listing with coverage metrics */

@layer components {
  /* ============================================
     BASE FILE TREE
     ============================================ */
  .file-tree {
    font-size: var(--text-sm);
  }

  /* ============================================
     TREE ITEM
     ============================================ */
  .file-tree__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    min-height: 32px;
    transition: background var(--transition-fast);
  }

  .file-tree__item:hover {
    background: var(--color-bg-secondary);
  }

  /* ============================================
     ICON
     ============================================ */
  .file-tree__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-gray-4);
  }

  .file-tree__icon svg {
    width: 16px;
    height: 16px;
  }

  .file-tree__icon--folder {
    color: var(--color-warning);
  }

  /* ============================================
     NAME AND LINK
     ============================================ */
  .file-tree__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
  }

  a.file-tree__name {
    text-decoration: none;
  }

  a.file-tree__name:hover {
    text-decoration: underline;
    color: var(--color-brand);
  }

  /* ============================================
     METRICS (right side)
     ============================================ */
  .file-tree__metrics {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
  }

  .file-tree__bar {
    width: 80px;
  }

  .file-tree__pct {
    width: 48px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }
}