@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/ide/image-component.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');
}

.lm_header .lm_controls > li {
  float: none;
}

.lm_header .lm_controls > li + li {
  margin-left: 5px;
}

.code-block {
  background-color: #f5f5f5;
  border-radius: 3px;
  padding: 10px;
  border: 1px solid #ddd;
  font-family: monospace;
}

.code-block .cmd {
  /* force breaks only at spaces */
  white-space: normal;
  word-break: keep-all;
}

.code-block .cmd:before {
  content: '$ ';
}

.code-block .line + .line {
  margin-top: 4px;
}