@import './codemirror.scss';

.dg-codemirror {
  --bg: #fff;
  --bg-soft: #f8f8f8;
  --border: #ddd;
  --text-light: #888;
  --font-code: Menlo, Monaco, Consolas, 'Courier New', monospace;
  --color-branding: #42b883;
  --color-branding-dark: #416f9c;
  --header-height: 38px;

  height: 300px;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  z-index: 10;
  background-color: #fff;

  &--fullscreen {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    // z-index: 199;
    height: auto;
  }

  &__tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
  }

  &__tool-btn.el-button {
    border: 0;
    padding: 8px;

    .icon-text {
      display: inline-block;
      min-width: 1em;
    }
  }

  &__core {
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 4px;

    .CodeMirror {
      font-family: var(--font-code);
      height: 100%;
    }
  }
}
