/* dist/editor.css */
.sh-editor {
  position: relative;
  display: flex;
  overflow: hidden;
  color: #1e1e1e;
  background: #fff;
  flex: auto;
  width: 100%;
  height: 100%;
  font-family: ui-monospace, JetBrains Mono, Fira Code, monospace;
  font-size: 14px;
}

@media (prefers-color-scheme: dark) {
  .sh-editor {
    color: #d4d4d4;
    background: #1e1e1e;
  }
}

.sh-gutter {
  text-align: right;
  user-select: none;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  background: #f5f5f5;
  border-right: 1px solid #e0e0e0;
  flex: none;
  min-width: 3.5em;
  padding: 16px 0;
}

@media (prefers-color-scheme: dark) {
  .sh-gutter {
    background: #252526;
    border-right-color: #3c3c3c;
  }
}

.sh-gutter-line {
  display: block;
  font: inherit;
  font-size: 13px;
  line-height: var(--sh-line-height, 22px);
  height: var(--sh-line-height, 22px);
  color: #999;
  cursor: pointer;
  pointer-events: all;
  padding: 0 10px 0 6px;
  transition: color .1s, background .1s;
}

.sh-gutter-line:hover, .sh-gutter-line.active {
  color: #333;
  background: #e8e8e8;
}

@media (prefers-color-scheme: dark) {
  .sh-gutter-line {
    color: #5a5a5a;
  }

  .sh-gutter-line:hover, .sh-gutter-line.active {
    color: #ccc;
    background: #2d2d2d;
  }
}

.sh-code-area {
  position: relative;
  overflow: hidden;
  flex: auto;
}

.sh-mirror, .sh-textarea {
  font: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  tab-size: var(--sh-tab-size, 2);
  border: 0;
  margin: 0;
  padding: 16px;
}

.sh-mirror {
  position: absolute;
  pointer-events: none;
  user-select: none;
  overflow: auto;
  contain: strict;
  z-index: 0;
  color: inherit;
  background: none;
  inset: 0;
}

.sh-mirror::-webkit-scrollbar {
  display: none;
}

.sh-mirror {
  scrollbar-width: none;
}

.sh-textarea {
  position: absolute;
  display: block;
  resize: none;
  outline: none;
  color: #0000;
  caret-color: #1e1e1e;
  z-index: 1;
  overflow: auto;
  background: none;
  width: 100%;
  height: 100%;
  inset: 0;
}

@media (prefers-color-scheme: dark) {
  .sh-textarea {
    caret-color: #d4d4d4;
  }
}

.sh-mirror span {
  color: var(--shiki-light, inherit);
}

@media (prefers-color-scheme: dark) {
  .sh-mirror span {
    color: var(--shiki-dark, var(--shiki-light, inherit));
  }
}