/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/codeeditor/styles.css ***!
  \********************************************************************************************************************/
/* Container for the entire code editor */
.hl-code-editor-container {
  display: flex;
  height: 100%;
  background-color: #1e1e1e;
  color: #dcdcdc;
}

/* Container for the buttons at the top */
.hl-code-editor-buttons-container {
  width: 100%;
  padding: 0.5rem;
  background-color: var(--bs-card-cap-bg);
  border-bottom: 1px solid #3a3d41;
  display: flex;
  gap: 0.5rem;
}

/* Disabled button styling */
.hl-code-editor-button-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Container for the files navigator */
.hl-code-editor-files-navigator-container {
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bs-card-cap-bg);
}

/* Scrollable area for the file tree */
.hl-code-editor-files-navigator-container > .hl-code-editor-file-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  margin: 0;
}

/* Download button at the bottom of the navigator */
.hl-code-editor-download-container {
  padding: 0.5rem;
  border-top: 1px solid #3a3d41;
  margin-top: auto;
  text-align: right;
}

/* Container for the code editor */
.hl-code-editor-editor-container {
  flex-grow: 1;
  height: 100%;
}

/* Styling for the file list */
.hl-code-editor-file-list {
  list-style: none;
  padding-left: 1rem;
}

/* Styling for each file item */
.hl-code-editor-file-item {
  cursor: pointer;
  padding: 0.5rem 0;
  transition: background-color 0.2s ease;
}

.hl-code-editor-file-item:hover {
  background-color: #3a3d41;
}

/* Highlighting the currently opened file */
.hl-code-editor-active-file {
  background-color: #505355;
  font-weight: bold;
}

/* Styling for the folder/file icon */
.hl-code-editor-icon {
  margin-right: 0.5rem;
}

/* Styling for the toggle icon for folders */
.hl-code-editor-toggle {
  margin-right: 0.5rem;
  cursor: pointer;
}