@import 'include/base.css';
@import 'include/form.css';
@import 'include/button.css';
@import 'include/ide/navbar.css';
@import 'include/ide/file-tree.css';
@import 'include/settings-dropdown.css';
@import 'include/goldenlayout.css';
@import 'include/spinner.css';
@import 'include/term.css';
@import 'include/editor.css';
@import 'include/modal.css';
@import 'include/tooltip.css';

/* IDE Overrides */

:root {
  --file-tree-width: 250px;
  --file-tree-padding: 10px;
  --file-tree-indent: 20px;
}

.app-container {
  overflow: hidden;
}

.layout-container {
  width: calc(100% - var(--file-tree-width)) !important;
}

.lm_header .lm_tab {
  padding-right: 20px;
}

.lm_header .lm_tab .lm_close_tab {
  top: 50%;
  transform: translateY(-50%);
  background-image: url('../img/icons/close.png');
  background-size: contain;
}

.lm_header .lm_tab.lm_active .lm_close_tab {
  opacity: 0.4;
}

.lm_header .lm_tab.lm_active .lm_close_tab:hover {
  opacity: 1;
}

.lm_goldenlayout,
.lm_goldenlayout > div {
  max-width: 100%;
}

.layout-outer-container {
  overflow: hidden;
}

.dark-mode .lm_tab.lm_active .lm_close_tab {
  background-image: url('../img/icons/close-white.png');
}