:root {
  --quill-height: 30vh;
  --quill-width: 100%;
  --quill-font-size: 15px;
  --quill-font-family: hack, monospace;
  --quill-border: 1px solid black;
  --quill-padding: 5px;
  --quill-margin: 0;
  --quill-scrollbar-thumb: rgb(170, 170, 170);
  --quill-background: white;
  --quill-secondary-background: #f7f7f7;
}

.quill-sizing {
  width: 100%;
  height: 100%;
  padding: var(--quill-padding);
  margin: var(--quill-margin);
  font-size: var(--quill-font-size);
  font-family: var(--quill-font-family);
  resize: none;
  white-space: pre;
}
.quill-invis {
  position: absolute;
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0);
  caret-color: black;
}
.quill-text {
  /* padding: 2px 8px; */
  /* transform: translateY( -16px ); */
  position: absolute;
  background-color: var(--quill-background);
}

.quill > textarea:focus {
  outline: none;
}


.quill {
  position: relative;
  width: var(--quill-width);
  height: var(--quill-height);
  background-color: var(--quill-background);
}

.quill-wrap {
  overflow-y: scroll;
  overflow-x: hidden;
  width: var(--quill-width);
  height: var(--quill-height);
  border: var(--quill-border);
  border-radius: 5px;
  display: flex;
}

.quill-wrap::-webkit-scrollbar-thumb {
    background: var(--quill-scrollbar-thumb);
    border-radius: 6px;
}
.quill-wrap::-webkit-scrollbar-track {
    background: var(--quill-background);
    border-radius: 6px;
}
.quill-wrap::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.quill-gutter {
  padding: var(--quill-padding);
  margin: var(--quill-margin);
  font-size: var(--quill-font-size);
  font-family: var(--quill-font-family);
  height: 100%;
  border-right: var(--quill-border);
  display: flex;
  flex-direction: column;
  background: var(--quill-secondary-background);
}
.quill-gutter div {
  height: 1.2em;
  width: 1.8em;
  display: inline-flex;
  justify-content: flex-end;
  padding-right: 4px;
}