/*
 * Neobrutalism skin for Lexxy: the editor (<lexxy-editor>) and rendered rich text (.lexxy-content).
 * Lexxy's own stylesheet ("lexxy") is loaded only where it's needed and comes earlier in <head>,
 * so these overrides win.
 */
:root {
  --lexxy-font-base: var(--base-font-family);
  --lexxy-color-ink: var(--foreground);
  --lexxy-color-ink-lighter: var(--border);
  --lexxy-color-canvas: var(--secondary-background);
  --lexxy-color-text: var(--foreground);
  --lexxy-color-link: var(--foreground);
  --lexxy-color-selected: var(--main);
  --lexxy-color-selected-hover: var(--main);
  --lexxy-color-selected-dark: var(--border);
  --lexxy-focus-ring-color: var(--ring);
  --lexxy-radius: var(--border-radius);
  --lexxy-shadow: var(--shadow);
}

lexxy-editor {
  --lexxy-editor-padding: 1rem;
  --lexxy-editor-rows: 16lh;
  --lexxy-toolbar-border-size: 2px;
  --lexxy-toolbar-padding: 4px;

  border: 2px solid var(--border);
  border-radius: var(--border-radius);
  font-family: var(--base-font-family);
  font-size: 0.875rem;

  &:focus-within {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  /* Buttons keep the neutral cursor, like the rest of the design system. */
  button,
  summary {
    cursor: default;
  }

  lexxy-toolbar .lexxy-editor__toolbar-button[aria-pressed="true"] {
    color: var(--main-foreground);
  }
}

.lexxy-content a {
  font-weight: var(--heading-font-weight);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* An extra toolbar outside the editor (the "Editing tools" card on the article form): wraps onto
   several rows instead of folding buttons into an overflow menu. */
.lexxy-panel-toolbar lexxy-toolbar {
  /* Lexxy sets these on <lexxy-editor>; the group separators need them (lexxy-editor.css). */
  --lexxy-toolbar-gap: 4px;
  --lexxy-toolbar-spacing: 0.5ch;

  border: 2px solid var(--border);
  border-radius: var(--border-radius);
  flex-wrap: wrap;
  padding: 4px;

  /* Lexxy styles toolbar buttons only inside <lexxy-editor>; the same rules (lexxy-editor.css) for this one. */
  summary {
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }

  button,
  summary {
    -webkit-appearance: none;
    appearance: none;
    background: var(--lexxy-color-canvas);
    border: none;
    border-radius: var(--lexxy-radius);
    cursor: default;
    line-height: normal;
    font-size: inherit;
    inline-size: auto;
    padding: 0;

    @media (any-hover: hover) {
      &:hover:not([aria-disabled="true"]) {
        background: var(--lexxy-color-ink-lightest);
      }
    }

    &:focus-visible {
      outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
      outline-offset: var(--lexxy-focus-ring-offset);
    }
  }

  .lexxy-editor__toolbar-button[aria-pressed="true"] {
    color: var(--main-foreground);
  }
}