body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
}

.file-tree {
  width: 300px;
  margin: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-tree ul {
  list-style: none;
  padding-left: 20px;
  margin: 0;
}

.folder,
.file {
  margin: 10px 0;
  cursor: pointer;
  border-left: 1px solid;
}

/* Style for folder names */
.folder-name {
  font-weight: bold;
  display: block;
}

.folder-name::before {
  content: "📁 ";
  margin-right: 5px;
}

/* Style for active folder (open state) */
li.folder-active > .folder-name::before {
  content: "📂 "; /* Change folder icon when folder is active */
  color: #0066cc;
}

/* Style for active folder (highlight background) */
li.folder-active > .folder-name {
  color: #0066cc;
  font-weight: bold;
}

/* Initially hide nested folder contents */
ul > li > ul {
  display: none;
}

/* Display nested folder contents when folder is active */
li.folder-active > ul {
  display: block;
}

/* Style for folder that has an active file inside (propagated 'file-active') */
li.file-active > .folder-name {
  background-color: #d4e6f1;
  color: #0066cc;
}

/* Style for active file: background color when selected */
li.file.file-active {
  background-color: #cce0ff;
  color: #0066cc;
}

li.file.file-active:hover {
  background-color: #a3c4f7;
}

/* Hover effect for files */
li.file:hover {
  background-color: #f0f0f0;
}

.file-name::before {
  content: "📄 ";
  margin-right: 5px;
}


.folder > ul {
  display: none;
}
.folder.folder-active > ul {
  display: block;
  max-height: auto;
}