@layer components {
  .editor {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    width: 100%;
  }

  .editor__header-info {
    align-items: center;
    color: var(--color-graphite);
    display: flex;
    font-size: var(--text-smaller);
    gap: 0.4em;
    line-height: var(--line-height-smaller);
    padding: 0 0 var(--block-space-half);
  }

  .autosave-indicator {
    display: block;
    flex-shrink: 0;
    height: 8px;
    transition: background-color 0.3s ease;
    width: 8px;
  }

  .autosave-indicator[data-state="saved"] {
    background-color: var(--color-accent);
  }

  .autosave-indicator[data-state="saving"] {
    --pulse-color-from: var(--color-accent);
    --pulse-color-to: var(--color-graphite);
    animation: pulse-colors 1.5s ease-in-out infinite;
  }

  .autosave-indicator[data-state="error"] {
    background-color: var(--color-ink);
  }

  .editor-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
}

lexxy-editor {
  --lexxy-font-base: var(--font-sans);
  --lexxy-font-mono: var(--font-mono);
  --lexxy-radius: 0;
  --lexxy-color-link: var(--color-link);
  --lexxy-color-code-bg: var(--color-canvas);
  --lexxy-focus-ring-color: var(--color-link);
  --lexxy-shadow: none;
  border: 1px solid var(--color-concrete);
  border-radius: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: var(--text-small);
  line-height: var(--line-height-small);
  min-height: 0;
  overflow: hidden;
}

lexxy-toolbar {
  --lexxy-toolbar-button-size: 1.85lh;
  --lexxy-toolbar-icon-size: 0.95em;
  background-color: var(--color-canvas);
  color: var(--color-steel);
  gap: 0;
}

lexxy-editor button,
lexxy-editor summary {
  background-color: var(--color-canvas);
  border-radius: 0;
}

.lexxy-editor__content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--block-space) calc(var(--block-space) * 1.25);
}

.lexxy-editor__content blockquote {
  border-inline-start-color: var(--color-accent);
}