:host {
  border: 1px solid #808080;
  border-radius: 3px;
}

:host(:where(:hover)) {
  border-color: #3b3b3b;
}

:host(.color-scheme-dark:where(:hover)) {
  border-color: #acacac;
}

:host(:where(:focus-within)) {
  border-color: #195ae6;
  box-shadow: 0 0 0 3px #4fd7ff6b;
}

:host(.color-scheme-dark:where(:focus-within)) {
  border-color: #66b2d9;
}

:host(:where([disabled])) {
  border-color: #b0b0b0;
  opacity: 0.65;
  cursor: default;
}

:host(:not(.color-scheme-dark):where([disabled])) {
  background: #efefef;
}

[part="content"] {
  min-width: 4ch;
  min-height: 4ch;
}

[part="editor"] {
  min-width: 4ch;
  min-height: 4ch;
  resize: both;
}