.monaco-editor-container,
.editor-loading.is-loading {
  width: 100%;
  min-height: 200px;
  height: 90vh;
}

.edit.githook .monaco-editor-container {
  border: 1px solid var(--color-secondary);
  height: 70vh;
}

/* overwrite conflicting styles from fomantic */
.monaco-editor-container .inputarea {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  resize: none !important;
  border: none !important;
  color: transparent !important;
  background-color: transparent !important;
}

.monaco-editor,
.monaco-editor .overflow-guard {
  border-radius: var(--border-radius);
}

/* these seem unthemeable */
.monaco-scrollable-element > .scrollbar > .slider {
  background: var(--color-primary) !important;
}
.monaco-scrollable-element > .scrollbar > .slider:hover {
  background: var(--color-primary-dark-1) !important;
}
.monaco-scrollable-element > .scrollbar > .slider:active {
  background: var(--color-primary-dark-2) !important;
}

/* fomantic styles destroy this element only visible on IOS, restore it */
.monaco-editor .iPadShowKeyboard {
  border: none !important;
  width: 58px !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  resize: none !important;
  overflow: hidden !important;
  border-radius: var(--border-radius-medium) !important;
}