/* Editor */

@import '../gen/codemirror/lib-codemirror.css';
@import '../gen/codemirror/addon-dialog-dialog.css';
@import '../gen/codemirror/addon-fold-foldgutter.css';
@import '../gen/codemirror/addon-hint-show-hint.css';

:root {
  --source-editor-fieldset-height: 44px;
}

.source-editor-wrapper {
  bottom: 0;
  left: var(--aside-width);
  position: fixed;
  right: 0;
  top: calc(var(--header-height) + var(--source-editor-fieldset-height));
}

.dropdown {
  display: flex;
  height: 100%;
  margin: 0;
}

.dropdown .selected::before {
  content: '›';
}

.dropdown > li {
  cursor: default;
  height: var(--source-editor-fieldset-height);
  line-height: var(--source-editor-fieldset-height);
  margin-right: 10px;
  position: relative;
}

.dropdown button {
  color: inherit;
}

.dropdown > li > ul {
  background-color: var(--color-background);
  border: 1px solid var(--color-background-darker);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  box-shadow: 0 3px 6px var(--color-transparent-black);
  display: none;
  line-height: 1.5;
  margin-left: -10px;
  max-height: 400px;
  overflow-y: auto;
  position: absolute;
  top: var(--source-editor-fieldset-height);
  width: 500px;
  z-index: var(--z-index-floating-ui);
}

.dropdown > li > ul > li {
  padding: 2px 10px;
}

.dropdown > li > ul > li span {
  float: right;
}

.dropdown li:hover > ul {
  display: block;
}

.source-form {
  background: var(--color-sidebar-background);
  bottom: 0;
  left: var(--aside-width);
  position: fixed;
  right: 0;
  top: var(--header-height);
}

.source-form .fieldset {
  border-bottom: 1px solid var(--color-sidebar-border);
  height: var(--source-editor-fieldset-height);
  padding-left: .5em;
}

.source-form .fieldset > button {
  margin: 0;
}

.source-form .CodeMirror,
.source-form textarea {
  border: 0;
  height: 100%;
  margin: 0;
  width: 100%;
}

.source-form .CodeMirror-lines {
  border-top: 1px solid var(--color-sidebar-border);
}

.source-slice-editor-form .CodeMirror {
  height: auto;
}

.CodeMirror-gutters {
  background: var(--color-sidebar-background);
  border-right: 1px solid var(--color-sidebar-border);
}

.CodeMirror {
  border: 1px solid var(--color-sidebar-border);
  font: 13px var(--font-family-editor);
  margin-bottom: 1em;
}

.cm-trailingspace {
  background-color: var(--color-editor-trailing-whitespace);
}

.cm-section {
  border: solid 1px var(--color-editor-comment);
  border-radius: 2px;
  color: var(--color-editor-comment);
  font-weight: 500;
  padding-right: 10px;
}

.cm-comment {
  color: var(--color-editor-comment);
}

.cm-date {
  color: var(--color-editor-date);
}

.cm-directive {
  color: var(--color-editor-directive);
  font-weight: 500;
}

.cm-option {
  color: var(--color-editor-class);
}

.cm-account {
  color: var(--color-editor-account);
}

.cm-invalid {
  color: var(--color-editor-invalid);
}

.CodeMirror-hint {
  max-width: 600px;
}

.CodeMirror-hint .highlight {
  font-weight: 500;
}
