@layer components {
  /* Host and private paint vocabulary */
  chemkit-editor {
    --chemkit-selection: #1976d2;
    --chemkit-hover: #90caf9;
    --chemkit-highlight: #ffeb3b;
    --text-ui: var(--text-dense);
    display: flex;
    flex-direction: column;
    container: chemkit / inline-size;
    min-block-size: 0;
    overflow: hidden;
    border: var(--border) solid var(--line);
    color: var(--ink);
    background: var(--surface);
    font: var(--text-ui) / var(--leading-dense) var(--font-sans);
  }

  :root[data-theme="dark"] chemkit-editor {
    --chemkit-selection: #64b5f6;
    --chemkit-hover: #315d78;
    --chemkit-highlight: #9a7d00;
  }

  /* Toolbars and workspace */
  chemkit-editor > .chemkit-toolbar {
    --gap: 0;
    padding: 0;
    background: var(--surface-inset);
  }

  chemkit-editor > .chemkit-toolbar :where(button, .control-button) {
    padding-block: 0;
  }

  chemkit-editor > .chemkit-workspace {
    display: flex;
    flex: 1 1 0;
    min-block-size: 0;
    overflow: hidden;
  }

  chemkit-editor .chemkit-atoms {
    flex: 0 0 auto;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 0;
    overflow: hidden;
    background: var(--surface-inset);
    text-align: center;
  }

  chemkit-editor .chemkit-atoms input[type="text"] {
    text-align: center;
  }

  chemkit-editor .chemkit-canvas {
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: 0;
    block-size: 100%;
  }

  /* Editor tool glyphs */
  chemkit-editor .control-button:has(input:checked) {
    color: var(--accent-ink);
    background: transparent;
  }

  chemkit-editor.controls-flat :where(button:hover:not(:disabled), .control-button:hover, button[aria-pressed="true"]) {
    background: transparent;
  }

  chemkit-editor .control-button:has(input:focus-visible) {
    outline: var(--focus-outline);
    outline-offset: var(--focus-inset);
  }

  chemkit-editor label span {
    min-inline-size: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  chemkit-editor label svg {
    inline-size: 2.125rem;
    block-size: 1.375rem;
    pointer-events: none;
  }
  chemkit-editor label svg text {
    font-size: var(--text-dense);
  }

  /* Canvas interaction */
  chemkit-editor .chemkit-canvas svg {
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 0;
    touch-action: none;
    user-select: none;
    cursor: default;
  }

  chemkit-editor .chemkit-canvas svg[data-interaction="draw"] {
    cursor: crosshair;
  }
  chemkit-editor .chemkit-canvas svg[data-interaction="target"] {
    cursor: pointer;
  }
  chemkit-editor .chemkit-canvas svg[data-interaction="dragging"] {
    cursor: grabbing;
  }

  /* Search, source, status, and responsive component modes */
  chemkit-editor .chemkit-substructure {
    --gap: 0;
    margin-inline-start: auto;
  }
  chemkit-editor .chemkit-substructure input {
    inline-size: 4.5rem;
    padding-inline: var(--space-3xs);
    text-align: start;
  }

  chemkit-editor .chemkit-summary {
    color: var(--ink-muted);
    white-space: nowrap;
  }
  chemkit-editor .chemkit-smiles {
    block-size: var(--control-height);
    flex-basis: 100%;
    padding-block: calc((var(--control-height) - 1lh - var(--border)) / 2);
    padding-inline: var(--space-3xs);
    border-block-end: 0;
    overflow: auto hidden;
    resize: none;
    white-space: nowrap;
  }
  chemkit-editor .chemkit-status {
    --gap: 0;
    padding: 0;
    border-block-start: var(--border) solid var(--line);
    overflow: clip;
    background: var(--surface-inset);
  }
  chemkit-editor .chemkit-diagnostics {
    block-size: 2lh;
    margin: 0;
    padding-inline-start: var(--space-lg);
    overflow: hidden auto;
    scrollbar-gutter: stable;
    color: var(--danger);
    white-space: nowrap;
  }

  @container chemkit (inline-size < 28em) {
    chemkit-editor .chemkit-substructure {
      margin-inline-start: 0;
    }
  }

  @container chemkit (inline-size < 20em) {
    chemkit-editor .chemkit-atoms {
      flex-wrap: nowrap;
      overflow: hidden auto;
    }
  }

  @media (forced-colors: active) {
    chemkit-editor {
      --chemkit-selection: Highlight;
      --chemkit-hover: LinkText;
      --chemkit-highlight: Mark;
    }
  }
}