:root {
    --font-family-default:
        FiraGO, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-mono: "Fira Mono", monospace;
    --color-text-primary: rgba(10, 12, 18, 0.92);
    --color-text-secondary: rrgba(0, 2, 10, 0.6);
    --color-primary-main: rgba(0, 110, 230, 1);
    --color-action-active: rgba(0, 4, 17, 0.55);
    --color-action-disabled: rgba(55, 60, 79, 0.35);
    --color-surface-inset: rgba(41, 55, 102, 0.09);

    --font-editor-body: 400 0.9375rem / 1.5rem var(--font-family-default);
    --font-editor-h1: 500 1.625rem / 2rem var(--font-family-default);
    --font-editor-h2: 500 1.375rem / 1.75rem var(--font-family-default);
    --font-editor-h3: 600 1.125rem / 1.5rem var(--font-family-default);
    --font-editor-h4: 600 0.9375rem / 1.5rem var(--font-family-default);
    --font-editor-h5: 600 0.84375rem / 1.25rem var(--font-family-default);
    --font-editor-h6: 600 0.75rem / 1rem var(--font-family-default);
    --font-editor-code: 400 0.84375rem / 1.25rem var(--font-family-mono);

    --table-border: 1px solid rgba(10, 12, 18, 0.92);
    --tracking-default: 0.0075rem;
}

.notice {
    margin: 0.75rem 0;
    padding: 0.75rem 0.875rem;
    overflow-x: auto;
    border-radius: 0.1875rem;
    border-inline-start: 0.1875rem solid rgba(27, 34, 49, 0.45);
    background-color: var(--color-surface-inset, rgba(41, 55, 102, 0.09));
}

/* .note is legacy styling -- don't delete unless you're sure */
.info,
.note {
    margin: 0.75rem 0;
    padding: 0.75rem 0.875rem;
    overflow-x: auto;
    border-radius: 0.1875rem;
    border-inline-start: 0.1875rem solid #0077ff;
    background-color: #e5f0fd;
}

.success {
    margin: 0.75rem 0;
    padding: 0.75rem 0.875rem;
    overflow-x: auto;
    border-radius: 0.1875rem;
    border-inline-start: 0.1875rem solid #2bb35d;
    background-color: #d8f0e1;
}

.warning {
    margin: 0.75rem 0;
    padding: 0.75rem 0.875rem;
    overflow-x: auto;
    border-radius: 0.1875rem;
    border-inline-start: 0.1875rem solid #ff9019;
    background-color: #ffeed4;
}

.error {
    margin: 0.75rem 0;
    padding: 0.75rem 0.875rem;
    overflow-x: auto;
    border-radius: 0.1875rem;
    border-inline-start: 0.1875rem solid #ff5465;
    background-color: #ffe8ea;
}

:is(.user-generated-content, .mce-content-body) {
    font: var(--font-editor-body);
    letter-spacing: var(--tracking-default);
    color: var(--color-text-primary);
    /* use break-word + overflow-x to break long normal words, but keep tables scrollable */
    overflow-wrap: break-word;
    overflow-x: auto;

    & :is(.notice, .info, .note, .success, .warning, .error) > :is(:first-child) {
        margin-block-start: 0;
    }

    & :is(.notice, .info, .note, .success, .warning, .error) > :is(:last-child) {
        margin-block-end: 0;
    }

    & :is(:first-child) {
        margin-block-start: 0;
    }

    & :is(:last-child) {
        margin-block-end: 0;
    }

    & :where(h1) {
        font: var(--font-editor-h1);
        letter-spacing: -0.015rem;
        margin-block-start: 1.25rem;
        margin-block-end: 0.75rem;
    }

    & :where(h2) {
        font: var(--font-editor-h2);
        letter-spacing: 0.01rem;
        margin-block-start: 1rem;
        margin-block-end: 0.5rem;
    }

    & :where(h3) {
        font: var(--font-editor-h3);
        letter-spacing: 0.015rem;
        margin-block-start: 1rem;
        margin-block-end: 0.5rem;
    }

    & :where(h4) {
        font: var(--font-editor-h4);
        letter-spacing: 0.01rem;
        margin-block-start: 1rem;
        margin-block-end: 0.5rem;
    }

    & :where(h5) {
        font: var(--font-editor-h5);
        letter-spacing: 0.01rem;
        margin-block-start: 1rem;
        margin-block-end: 0.5rem;
    }

    & :where(h6) {
        font: var(--font-editor-h6);
        letter-spacing: 0.01rem;
        margin-block-start: 1rem;
        margin-block-end: 0.5rem;
    }

    & :where(p) {
        margin: 0.75rem 0;
    }

    & :where(code) {
        font: var(--font-editor-code);
        letter-spacing: 0;
        background-color: var(--color-surface-inset);
        max-width: fit-content;
        display: inline-block;
        padding: 0 0.25rem;
        border-radius: 0.125rem;
        overflow-wrap: normal;
    }

    & :where(strong, b) {
        font-weight: 600;
    }

    & :where(a) {
        color: var(--color-primary-main);
        cursor: pointer;
        text-decoration: none;

        &:focus-visible {
            outline: 0.125rem solid var(--color-primary-main);
        }
    }

    & :where(pre) {
        margin-block: 0.75rem;
        padding: 0.75rem 1.25rem;
        overflow-x: auto;
        overflow-wrap: normal;
        border-radius: 0.25rem;
        background-color: var(--color-surface-inset);
        display: block;
        font-family: var(--font-family-mono);

        & code {
            background: none;
            border-radius: 0;
            padding: 0;
            tab-size: 4;
            white-space: pre;
        }
    }

    :where(blockquote) {
        padding: 0 0 0 1.25rem;
        font-style: normal;
        margin: .75rem 0;
        position: relative;
        border: none;

        p {
            padding: 0;
            height: min-content;
        }

        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: .1875rem;
            background-color: rgba(55, 60, 79, 0.35);
            border-radius: .1875rem;
        }
    }

    :where(img) {
        max-width: 100%;
        height: auto;
        box-sizing: border-box;
    }

    :where(ul, ol) {
        margin-block-start: 0.75rem;
        margin-block-end: 0.75rem;
        padding: 0;
        /* There are defined list styles, but we want to use that one's set by tinymce */
        list-style: revert;

        & li {
            margin-inline-start: 1.5rem;
        }

        & li + li {
            margin-block-start: 0.5rem;
        }

        & li > p + p {
            margin-block-start: 0.5rem;
            margin-block-end: 0;
        }

        & :is(ul, ol) {
            margin-block-start: 0.5rem;
            margin-block-end: 0;
            margin-inline-start: 0;
        }
    }

    :where(hr) {
        border: none;
        border-bottom: 0.0625rem solid var(--color-action-disabled);
        margin-block: 1rem;
    }
}