.wrapper {
  width: 100%;
  position: relative;
  overflow-x: scroll;
}

.fileTree,
.fileTree ul {
  list-style: none;
  width: 100%;
}

.fileTree a {
  text-decoration: none;
  color: var(--fg);
}

.fileTree a:hover {
  color: var(--fg);
}

.file,
.folder {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-half);
  height: 2.5rem;
  padding: var(--gap-half);
  font-family: monospace;
}

.folder {
  cursor: pointer;
  /* To avoid highlighting on double clicking */
  user-select: none;
}

.folder-children {
  margin-left: 1rem;
}

.file-type {
  margin-right: 0.5rem;
}

.file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1rem;
}

.file:hover,
.folder:hover {
  background-color: var(--lighter-gray);
}

.note {
  color: var(--gray);
  margin-left: var(--gap-half);
}

.focused {
  background-color: var(--lighter-gray);
}
