@portal-padding: 12px;
.CodeMirror-hints {
  z-index: 2001;
}

.display-on-hover() {
  &:hover {
    display: block !important;
  }
}

.code-hinter-wrapper {
  width: 100%;
  height: auto;
  font-size: 0.875rem;
  position: relative;

  .dynamic-variable-preview {
    min-height: 20px;
    max-height: 500px;
    overflow: auto;
    line-height: 20px;
    font-size: 12px;
    margin-top: -2px;
    word-wrap: break-word;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-sizing: border-box;
    font-family: 'Source Code Pro', monospace;

    .heading {
      font-weight: 600;
      text-transform: capitalize;
    }
  }

  .code-preview {
    position: absolute;
    width: inherit;
    z-index: 9999;
    .display-on-hover();
  }
}

.portal-editor {
  z-index: 2001;
  .yee-modal-body {
    padding: @portal-padding;
  }
  .portal-name {
    color: @yee-primary-color;
  }

  .code-preview-portal {
    position: absolute;
    margin-left: -@portal-padding;
    width: 100%;
    .display-on-hover();
  }
  &-content::-webkit-scrollbar {
    display: none;
  }
  .CodeMirror pre.CodeMirror-placeholder {
    color: #999;
  }
}

.code-hinter {
  font-family: inherit !important;
  padding: 0.06rem 0rem;
  display: flex;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 400;
  background-clip: padding-box;
  border: 1px solid #dadcde;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 4px;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  height: auto;
  min-height: 32px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 12px;
}

.CodeMirror-scroll {
  overflow: hidden !important;
  position: static;
  width: 100%;
  background-color: #fff;
}

.CodeMirror {
  height: 100%;
}

.CodeMirror-sizer {
  background-color: #fff;
  border: 0;
}

.CodeMirror-placeholder {
  color: rgba(0, 0, 0, 0.25) !important;
  font-size: 12px !important;
  padding: 0 12px !important;
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 12px;
  color: @yee-input-color;
}