: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; }