@import url('./base.css');

.petrel-code-editor {
    background: #f5f5f5;
    color: #181818;
    caret-color: rgb(0, 0, 0);
    font-size: 16px;
    line-height: 23px;
    resize: both;
    min-height: 140px;

    border-radius: 10px;
}

.petrel-code-editor::-webkit-resizer {
  background: #f5f5f5;
  border-bottom-right-radius: 10px;
}

.petrel-code-editor textarea, .petrel-code-editor pre {
    left: 20px;
    top:  15px;
}

.petrel-code-editor .petrel-code-editor-line-numbering {
    background: #f5f5f5;
    padding-right: 9px;
    border-right: 2px solid #00000011;
    min-height: 100%;
    
    padding-top: 15px;
    padding-left: 15px;
}


.petrel-code-editor .petrel-code-editor-autocompletion {
    background: #d3d3d3aa;
    border-radius: 10px;
    backdrop-filter: blur(7px);
    border: 2px solid #00000022;

    max-height: 250px;
    overflow: auto;
}

.petrel-code-editor::-webkit-scrollbar {
    width:  20px;
    height: 20px;
    background: #00000022;
    border-radius: 20px;
    border: 7px solid transparent;
    background-clip: padding-box;  
}

.petrel-code-editor::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.3);
    border-radius: 20px;
    border: 7px solid transparent;
    background-clip: padding-box;  
}

.petrel-code-editor .petrel-code-editor-autocompletion a {
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 16px;
}
.petrel-code-editor .petrel-code-editor-autocompletion a:hover {
    background: #00000011;
}