@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* @mention styling */
.mention {
    color: var(--color-blue-600);
    background-color: var(--color-blue-50);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-weight: 500;
    cursor: default;
    position: relative;
}
.mention:hover {
    background-color: var(--color-blue-100);
}

/* Make inline code visually distinct */
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    background-color: var(--color-gray-100);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before,
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
    content: none;
}

/* Task list checkbox styling */
.prose input[type="checkbox"] {
    margin-right: 0.375rem;
    accent-color: var(--color-blue-600);
}