/* Basic editor styles — wrapped in :global{} so Svelte does not scope-hash
   any of these selectors. TipTap renders its content via JS so the elements
   are never part of the component's own DOM and would be invisible to scoped
   CSS. */
:global {
    .tiptap {
        :first-child {
            margin-top: 0;
        }

        /* Link styles */
        a {
            color: var(--purple);
            cursor: pointer;
            text-decoration: underline;

            &:hover {
                color: var(--purple-contrast);
            }
        }

        /* List styles */
        ul {
            list-style-type: disc;
            margin-left: 1.5rem;
            // border: solid thin red;
        }
        ol {
            list-style-type: decimal;
            margin-left: 1.5rem;
            // border: solid thin red;
        }

        ul,
        ol {
            padding: 0 1rem;
            margin: 1.25rem 1rem 1.25rem 0.4rem;

            li p {
                margin-top: 0.25em;
                margin-bottom: 0.25em;
            }
        }

        /* Heading styles */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            line-height: 1.1;
            margin-top: 2.5rem;
            text-wrap: pretty;
        }

        h1,
        h2 {
            margin-top: 3.5rem;
            margin-bottom: 1.5rem;
        }

        h1 {
            font-size: 1.4rem;
        }

        h2 {
            font-size: 1.2rem;
        }

        h3 {
            font-size: 1.1rem;
        }

        h4,
        h5,
        h6 {
            font-size: 1rem;
        }

        /* Code and preformatted text styles */
        code {
            background-color: var(--purple-light);
            border-radius: 0.4rem;
            color: var(--black);
            font-size: 0.85rem;
            padding: 0.25em 0.3em;
        }

        pre {
            background: var(--black);
            border-radius: 0.5rem;
            color: var(--white);
            font-family: 'JetBrainsMono', monospace;
            margin: 1.5rem 0;
            padding: 0.75rem 1rem;

            code {
                background: none;
                color: inherit;
                font-size: 0.8rem;
                padding: 0;
            }
        }

        blockquote {
            border-left: 3px solid var(--gray-3);
            margin: 1.5rem 0;
            padding-left: 1rem;
        }

        hr {
            border: none;
            border-top: 1px solid var(--gray-2);
            margin: 2rem 0;
        }
    }
} /* end :global */
