/* 
 * Colors for the plotly charts embedded in posts.
 */
body {
    --plot-paper: var(--code-bg);
    --plot-bg: var(--code-bg);
    --plot-font: var(--content);
    --plot-title: var(--primary);
    --plot-muted: var(--secondary);

    --plot-grid: color-mix(in srgb, var(--code-bg), var(--secondary) 14%);
    --plot-axis: color-mix(in srgb, var(--code-bg), var(--secondary) 28%);
    --plot-zeroline: color-mix(in srgb, var(--code-bg), var(--secondary) 28%);
    --plot-hover-bg: var(--entry);
    --plot-hover-border: var(--tertiary);
    --plot-hover-font: var(--content);

    /* Trace colors, in the order traces are drawn. */
    --plot-color-1: #2f5fc0;
    --plot-color-2: #d94a3b;
    --plot-color-3: #2e8b57;
    --plot-color-4: #c98a1e;
    --plot-color-5: #7d55b3;
    --plot-color-6: #1b8a94;
    --plot-color-7: #c4508f;
    --plot-color-8: #6f8f2a;
}

body.dark {
    --plot-color-1: #5fa3e6;
    --plot-color-2: #e8776a;
    --plot-color-3: #5cc08a;
    --plot-color-4: #e0b45c;
    --plot-color-5: #a98ae0;
    --plot-color-6: #4fbec8;
    --plot-color-7: #e585b5;
    --plot-color-8: #a9c45f;
}

/* Allow selecting text on axes and title. */
.js-plotly-plot.plotly-graph-div .plotly [class$="tick"] text,
.js-plotly-plot.plotly-graph-div .plotly [class$="title"] {
    -webkit-user-select: text;
    user-select: text;
    pointer-events: auto;
}

/* Plotly outlines a keyboard-focused modebar button in black, invisible on dark. */
.js-plotly-plot.plotly-graph-div .modebar-btn:focus-visible {
    outline-color: var(--plot-title);
}

.js-plotly-plot.plotly-graph-div .main-svg {
    border-radius: var(--radius);
}

.plotly-graph-div {
    margin-bottom: var(--content-gap);
}